Grow your CSS skills. Land your dream job.

Responsive Web Design Workflow

  • # January 31, 2012 at 12:30 pm

    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.

    # January 31, 2012 at 1:40 pm

    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.

    # January 31, 2012 at 2:25 pm

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

    # February 1, 2012 at 4:17 am

    ” 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.

    # February 1, 2012 at 5:49 am

    @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.

    # February 1, 2012 at 10:48 am

    All I do is create a photoshop (or receive one) that has the main site look and then the mobile/responsive look – that then allows me to work inwards, so I build the desktop site first and then using mediaqueries work out what needs to disappear or float etc.

    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.

    # February 1, 2012 at 11:29 am

    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.

    # February 1, 2012 at 1:01 pm

    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. :)

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".