Mobile Up, Widescreen Down, or Somewhere In-Between?

Posted: 25 Nov 2013 05:30 AM PST

When designing and developing a responsive site should you begin with the small screen first and work your way up or would you do better to start big and work your way back down? Maybe one of the in-between breakpoints would make for a better place to start.

Before responsive design things were easier. You chose the most common widescreen resolution and designed a fixed-width layout. As the years passed that fixed-width starting point grew. 960px became 1184px, but the general approach remained the same. You designed a single layout for a single resolution. That’s no longer true as the canvas we design for is unknowable.

a smart phone, a tablet laptop hybrid, and a desktop monitor

Responsive is Designing for a Series of End Points

Visit a responsive website with your browser open to the dimensions of a smart phone and you’ll see a layout. Make your browser a little wider and the layout gets a little wider with it. Keep making your browser wider and the layout gets wider still, until at some point it changes more significantly.

Likely another column appears or the navigation completely changes and moves. Keep making your browser wider and the same thing happens. At first the layout grows with the browser until at some point it again changes. Maybe a 3rd column is now present or that thing over there moved over here.

This is typically how responsive layouts work. They grow and contract until growing or contracting any more will break them, at which point they change more significantly.

Your site flexibly adapts between static points. At the very least there’s a smallest point and a largest point. There’s likely one or two more points in-between. Each of these points deserves some attention during design. You should know how the site will work at these “end points” before developing.

Responsive design isn’t designing for a single static set of dimensions. It’s designing for several key sets of dimensions in a way that you can flexible get from one to the next.

That still leaves the question of where to start. Do you still start with the widescreen display? Do you design the mobile view first? Is an in-between point the best place to start your design?

Any approach can work, however I think mobile up is ultimately the best choice. Let me mention a few reasons why someone might choose the widescreen down approach and then offer why I prefer mobile up instead. Choosing to start somewhere in-between is really a combination of the two.

Widescreen Down

When I first began designing responsive sites, I was much more comfortable designing for widescreen than mobile and so hung on to the familiar while learning and exploring the new.

It might also seem like there’s less decisions to make for mobile, given that the layout will be a single column where one thing falls below another. I suspect that for many people design is still what you do for a widescreen browser where there are multiple columns and multiple possibilities for where content can be located. It’s not really the case, but I think more than a few people hold it to be true.

I’ve also found that while the design and development community is now familiar with the concept of responsive design, most of my clients aren’t. The majority are still focused on the widescreen and need to see the widescreen version of the design (specifically the one that works on their computer) before agreeing the design is what they want.

Because some clients are focused on the widescreen version of the site, it’s tempting to design that first and only after receiving approval, do you work your way back down to mobile.

Mobile Up

Despite the above, I’d suggest that mobile up is the better approach. There are several reasons why it makes more to start at the minimum and then work your way up to the maximum.

Mobile adds more constraints than widescreen — Hopefully we can agree that all devices should get the same content. There are certainly exceptions to this rule, but in general the same content should be available always even if it’s presented in different ways. The lack of space on mobile devices forces you to make hard choices about content and decide what should and shouldn’t be included.

It’s much easier to make the decisions about content to include from the start than to build a layout to hold content that you later decide will no longer be part of the site. Once it’s in the design it’s harder to decide to remove it and once you’ve developed the site to hold it, it’s more work to remove it.

Mobile still requires a specific html source order — When presenting a single column layout, elements on the screen will display in the same order they appear in the html source. In time flexbox and css grids will help solve the source order issue, but at the moment we’re locked into source order.

Since, you’ll be using that same html source at widescreen, the css you use to present your wider design will be constrained by that source.

If you build widescreen first, you’ll likely start with html that works best for widescreen. Later you may find that html doesn’t work well for the single column mobile layout, which will leave you reworking the structure.

It’s easier to build up from a baseline — Widescreen first means putting everything in and then trying to find the bits and pieces to be removed. It’s more difficult to see what needs to change when there’s so much present. It’s much easier to make changes when there’s less code to sort through and change.

The widescreen first approach will likely lead to more code duplication. It’s easier to keep your code DRYer if you start from the minimum and build up than to have everything there and remove some after. Working widescreen to mobile likely leads to more complex css in the end than working mobile to widescreen.

Progressive enhancement — If you build mobile up you start by creating the minimum experience that works everywhere. In truth you could stop at that point and have a completed working website.

More screen real estate is certainly not synonymous with more capabilities, but when the conversation is about layout only and the main limiting factor is space, then yes more screen real estate is more capable.

Building from mobile up means first building the experience for all and then adding more for those screens more capable in terms of allowable space.

Summary

Designing responsively means designing a site for several key points based on device and conditions and then developing flexibly between those points.

While a responsive site can be developed from either a mobile up or widescreen down approach, the former will usually lead to better results as mobile currently imposes more constraints.

If you’ve never built a responsive site you might find it easier to start the first one from a widescreen down approach, in order to start from a familiar place, however as soon as possible move to the mobile up approach.

If you liked this post, consider buying my book Design Fundamentals

The post Mobile Up, Widescreen Down, or Somewhere In-Between? appeared first on Vanseo Design.