A Revised Responsive Design Workflow

I wrote a post a while back about creating a responsive design workflow and not that I feel it is 100% wrong now, but I've learned a lot since then and I'm doing things a little differently now than I was then. So here are some tips if you are new to responsive design or just might want to approach your projects differently.

To start with…

Breakpoints Aren’t Fixed

Forget about mobile devise, desktop or tablet screen sizes to start with. They don’t matter. Just worry about your content. That is the main thing Mobile First got right. Find out what is the most important items to be displayed on the homepage, what would be good-to-have but not mandatory, and what things can be left off entirely.

If you can stop thinking in terms of layouts and just focus on the content, you’ll already be miles ahead.

Getting back to breakpoints ... they aren’t to be built around devices, they are to be built around your content. The size of your columns of text, images, logos, navigation, these are the things that determine where a media query needs to go. Literally, where the content “breaks”. When a column gets too narrow, where an image creates a horizontal scroll bar, where elements begin to overlap, or any other element that is “broken” will require some love from media queries.

If you have the budget and time to make specific layouts just for the Iphone5 that’s great but to start, get the basic layout down first. Make sure it works at 360 pixels all the way up to 1400+, and you’re free to go in after and focus on presenting content for important screen dimensions or devices.

Content Comes First

For the longest time we’ve been designing areas for our content to live. For news sites or those that require frequent updated, or sites updated by non-tech people, it sometimes is necessary. You may need just a big open spot for content to be dumped in. But at least on the homepage, you’ll be far better off getting all the text written, and any images gathered up before you touch your computer. That way you can design your content, not design around it.

When you can stop thinking in terms of columns and instead design more of a magazine spread layout, you’ll start to produce work that is a whole lot better. Media queries aren’t a burden, they allow for all kinds of design freedom. We can build any crazy layout we want on the desktop, and present something entirely different for smart phones. It is all up you, your creativity, and the budget/time allowed to work.

The Steps

If it helps any to break it down:

One Go over all of your content. Find out what is must-have, prime time content, what is optional, and what is best left off or left for internal pages. When you do start to design, you already know what will be going above the fold and what content may be left off.

Two Audience. Look at your analytics and find out what devices users of the site are on the most. Unless it’s a personal project you probably have a set number of hours to work, so start by getting the site so it works from desktop all the way down to mobile. By “works” I mean, nothing in the layout broken at any point. Then spend your remaining time polishing for users of the site. Make their experience the best. It isn’t about mobile first, or design for mobile and desktop. Spend the most time on whatever the users are viewing the site on.

Three Budget. Go over all of your content. Find out what is must-have, prime time content, what is optional and what is best left off or left for internal pages. The lower the budget the less time you’ll be spending on media queries. Low budget sites call for a simpler set of navigation, nothing that has to be rebuilt specifically for mobile.

Tips

A few tips to help you out or at least think about.

Where to Begin Mobile or Desktop

It is not Mobile first it’s content first. If you are more comfortable designing for the desktop there is no reason not to start there. Just be thinking about how your layout will break down as the width gets smaller. Once you’ve built a responsive site or two, you start to anticipate where the changes in the layout will be.

Personally, I think the larger designs of the site should be done first because more screen real estate means more can be done. More content can be displayed, internet speeds tend to be faster for these users so images can be larger. I like to start big and then pare down from there. For example, removing the big background images for mobile, just displaying a flat background color instead. Or hiding some of the less important content as the width decreases. Larger width browsers see the most content so for me that’s where I start.

Also for me, the most imagination and idea creation starts at the beginning of the design phase. So I don’t want to start with a mobile version, that is the most restricted and holds the least content. I want to start big and whittle my way down instead. To be free to try different things. Many times you’ll come up with a good element that might not make the cut at all widths but might be perfect for mobile if you do decide to start with a larger layout first.

Visual Queues

One trick that helps me when I’ve finished by first (desktop) layout and am starting adding media queries is to set the background in each and every media query to a different bright color. So I can easily identify exactly when the transition from one break point to another happens. Then when finished just delete the background color.

Don’t Force It

Some menus or elements just won’t work at all sizes. So don’t beat yourself up if something isn’t working. Expect at the minimum, your navigation to take some time altering for mobile devices.

It isn’t ideal but there is nothing stopping you from using display:none on a particularly troublesome element. Hide it and reveal something entirely new if you have to.

Your Tips

If you have anything useful to share that helps you build mobile sites, please leave a comment below.