6 Ways To Improve Web Design Workflow

Back before I was a developer, and back before I was a social media marketer… I worked in a hotel in Beijing. I worked in the Front Office Department and was tasked with greeting the arriving guests (most of whom were local) and answering their questions as they walked into the lobby.

Did I mention that I was just an intern? Oh, did I also mention that I didn’t speak any Mandarin? To say it was a challenge is, well, accurate, but it would also be accurate to say that it was paralyzing. The Chinese guests would walk in and I’d whisper to myself, under my breath, “Please don’t ask me anything, please don’t ask me anything.”

In my first week on the job, I smiled and nodded and led guests to the front desk, where my Mandarin-speaking colleagues helped bail me out time and time again.

After my first week in Beijing, wordlessly leading guests to the front desk, I added one sentence of Mandarin to my workflow:  

他们可以帮你。

Translation:  “They can help you over there.”

This worked for a little while, and every time a guest approached me I’d proudly “speak Chinese,” while gesturing towards the front desk. So while I wasn’t mute anymore, I was still pretty useless.

Eventually, I reviewed my limited workflow and realized that being able to actually speak Chinese... in China... while working at a Chinese hotel was probably going to be my best move. And so I decided that the best way to improve my situation was to actually learn the language. So, what does all of this have to do with workflows?

Taking time to review your workflows and being open to changing your process is one of the best ways to improve whatever situation you find yourself in - online and off.

This was definitely on my mind when I went up to San Francisco last week for the Smashing Conference. It was two full days (in the greatest city ever!) packed with talks about web performance, APIs, design systems, CSS preprocessors, and a bunch of geeky goodness.

What follows is a condensed version of my takeaways and notes from the event, as well as my thoughts and a few examples of how our team here at Salted Stone incorporates some of the ideas discussed at the conference.

1. Creating Element Collages

The Smashing Conference started off strong with Dan Mall, Founder & Design Director at SuperFriendly, as the first speaker. Dan talked about element collages, which are blocks, or pieces of the site, which focus on client goals. He described them as a “documented connection between strategy and design,” which I loved.

This is very similar to the way our Inbound Team develops website strategies for our clients; focusing not only on how a site looks or functions, but also how every element of the site is designed and developed to perform in a way that will help our clients reach their specific conversion goals.

2. Standardizing Modules in Code

There was a lot of talk about design systems and keeping things modular, with multiple references to Brad Frost’s book Atomic Design. Modular design is breaking a site down into smaller parts, or modules, that can be independently created and then re-used throughout the site. The big takeaway for me regarding the talks about design systems is that modules should be standardized in development for better organization.

A concrete example of this can be found in a design element/content block that shows up repeatedly on the Salted Stone website:

Let’s call this example the “featured resource” block. When you have a repeating block such as this one, you can use the following classes to help organize the necessary elements within it.

• .resource-label → Featured Resource
• .resource-title → In Search of the Holy Grail: Marketing to the C-Suite
• .resource-cta → Download ebook link
• .resource-image → Marketing to the C-Suite ebook cover image

Designing and building the site element in this way enables a dev team to create this type of featured resource block on multiple pages across a site, but with the flexibility to change the content displayed within each element.

3. Optimizing Page Load Time

On the second day of the conference, Patty Toland, a partner at Filament Group, talked about how to improve web performance. As it turns out, one of the biggest issues that negatively impacts page load time, and subsequently user experience, is image size. While optimizing images is a well-known part of most developers’ workflow, there were a couple of additional ways to optimize page load time that may not be as obvious:

• Use different images per breakpoint — This involves using one image across all screen-size variations, but adjusting the image’s size according to what version it’s being used in. So you would resize the desktop version image to be a smaller file for tablet, and then downsize it again when being applied to mobile applications. This method is in contrast to a workflow where you’ll simply use one large image that just scales responsively.
• Limit fonts based on character needs — As you can see in the screenshot below, each Proxima Nova font-weight adds an additional 24-26kB to your site. While that may not seem like a lot, the various fonts and font-weights add up. So take the time to run through and remove those which aren’t required. It’s kind of like eating ice cream—you want to limit the number of scoops you order because the weight adds up.

It’s no secret that stylesheets can get incredibly repetitive. We don’t intend for them to be, but I know that I for one have been guilty of violating the DRY (don’t repeat yourself) principle on more than one occasion.

CSS preprocessors like Sass or LESS allow for better organization of our CSS, particularly bloated stylesheets. They essentially allow for sites to be a lot more scalable with things like mixins (reusable chunks of styles) and variables (so you can change a style in one place and have it update in multiple places), amongst other uses.

The easy solution to improve CSS workflow on HubSpot is to just surround yourself with an awesome team of developers who are capable of essentially creating “variables” out of classes. But not everyone is as lucky as I am :).

5. Craft a Creative Culture One of my favorite presentations was by Jeffrey Veen, a design partner at True Ventures. He discussed Google’s Project Aristotle, which examined 200+ teams to try and figure out why certain teams were more successful than others. The Project Aristotle group didn’t uncover a pattern until they started examining the psychological aspects of the teams, at which point they discovered that teams that were the most successful felt safe.

And among those teams that felt safe, there was a sense of confidence that the team would not embarrass, reject, or punish someone for speaking up. I thought that was so intriguing, but it makes total sense.

I think that the Salted Stone dev team is pretty cool in that our culture is very collaborative and open. We have a dev channel in Slack in which we send each other tidbits of code, useful articles, and any questions that we have regarding a project we’re working on.

 However, the only way to improve is to be open to change, and something that Jeffrey said in his talk has been in the back of my mind ever since I came back: “Culture is something you work on actively every day.” (Do hashtags work in blog posts? Because #TRUTH.)

6. Follow All of the Steps Above (or Don’t)

It was really easy to get swept up in the Silicon Valley-ness of the conference. Especially when I was in the greatest city in the world. (Also, SF Giants rule.)

So I came back bursting with ideas on how to improve process and workflow on our dev team, because everything I learned seemed to be a great idea. But the thing about great ideas is that they’re not always universally a great idea. Not every great idea will work for every scenario or situation.

It’s important to stay ahead of your industry and to be knowledgeable about new ideas and ways of doing things, but in the end it really comes down to what will work for your team.

Developing and refining workflows is always an ongoing process (even for a HubSpot Diamond partner agency). That’s not a bad thing by any means. The ability to adapt and be flexible doesn’t necessarily indicate that something was being done wrong before. It just means that maybe you’ve found a way to do it better!

Hey! That's me on the BART headed to the Smashing Conference!