Responsive Web Design Workflow

[tobeeornot]

Just finished reading Ethan Marcotte’s book “responsive web design”, which was great. What I didn’t understand was his breakdown of a suggested design workflow for responsive projects by moving away from a “waterfall” PM methodology of a phased or staged approach, to an “Agile” one, combining the design and development phases and then refining the design iteratively.

That is fine but he is initially working from the premise that the design would be worked from a desktop or larger screens to a mobile setting as part of this workflow – as he has done throughout the book. He then changes direction completely, and states that the best starting point is to design for mobile first and effectively ‘progressively enhance” your designs for larger screens. This seems a bit muddled to me. Is he saying that to design responsively you will need to pin down out your requirements before you design, in that sometimes you will be designing with the desktop in mind as a priority and sometimes the mobile will be the priority? Or is he just taking the long way around to say that designing for mobile first is good practice?

Maybe I making a mountain out of a molehill but this seems to be critical point for me as a learner and I would interested to hear what more seasoned designers think.

[TheDoc]

A lot of people have suggested that you should design ‘mobile first’. I’m not completely on that boat yet, personally. I’m not sure if it’s completely personal preference or if I’m just being a stubborn fool.

[tobeeornot]

That is kinda my dilemma too, Doc. Happy New Year to you (bit late I know!).

[Paulie_D]

” Is he saying that to design responsively you will need to pin down out your requirements before you design, in that sometimes you will be designing with the desktop in mind as a priority and sometimes the mobile will be the priority?”

What, it seems to me, he is saying, is that you have to have a reasonable idea of your intended (or likely) audience.

If it’s more likely that they will be viewing your site on a mobile device then you should design with that as your primary focus (i.e. getting the best looking site you can on the environment).

The reverse is also true…if the majority of your users will be using desktops, design for that.

Personally, although my experience is limited, it makes sense to me to design for mobile first (at least as far as CSS is concerned) as you are likely to ADD to a non-mobile css sheet…thus is more efficient to design for the desktop and take things away.

[tobeeornot]

@Paulie_D – That is what it seems like to me. I kinda wish he said that in more explicit terms, though.

I was also thinking last night that Ethan may have thought it was necessary to start the book by designing from a desktop and scaling down to mobile as a way of illustrating the fundamentals of responsive design in a setting that was most familiar to designers. He could then backtrack and state designing from mobile first may be the most practical but that will depend on your client’s needs – as you say.

[Paulie_D]

I don’t agree with building mobile first because ultimately, mobile/tablet is roughly 10-15% usage in my experience whereas monitors are the biggest user so getting their experience right is tantamount.”

I think you mean ‘paramount’ not tantamount but you’ve reinforced my point. One should design for your intended audience and if, as you say, that’s primarily desktop (as is your experience) then design for that first.

My point was that, if you are designing for mobile, it make more sense (to me) to start with that (for CSS purposes) as you will be adding and/or enhancing for desktop users which means that you will only be adding rather than trying to remember to remove stuff.

Of course, it’s down to a matter of personal preference…if it works for you, that’s fine…it’s not really worth arguing about.

[tobeeornot]

Just to reinforce both your statements (and thank you for them), Ethan kindly responded to an email I sent him with the question:

Me: I was just wondering if you think it is always best to start from designing “mobile” first and “progressively enhance” from there or that you can also start from the desktop and work down, depending on the needs of the project?

Ethan: Well, I think the design process should start wherever you’re most comfortable. And if that’s a 960 grid in Photoshop, great!

That said, two things I’d offer:

* Try to treat your comps as outlining assumptions, not final-final ideas. The earlier you can move into HTML/CSS, the earlier you can test your design on actual devices/browsers. Doing so will help identify where the design nigh need refinement, as well as where you’re on the right track.
* Once you start building your design, yes: it’s critical to start from a mobile, small screen-friendly baseline, and enhance up to wider views. But that can be quite an adjustment. I usually produce the “desktop” layout first—flexibly, of course!—and then start quarantining various CSS rules in min-width media queries. Over time, the small screen version starts to build itself. :)

[Author]

Posts