Responsive design: Mobile first/only

Question

I work in a design studio, and when we have a responsive project we usually start the full design for the desktop, and when we're done with the desktop, for the rest of the platforms we choose a limited number of screens that sample most of the site's content (not all screens, but enough to show how each component behaves in mobile/tablet) and let the programmer work from there.

This approach works great for low budget projects, where the client can get a fully responsive website and pay for relatively less design time.

This approach works very well when we start designing with the desktop but not to well if we want to "combine" it with the well known "mobile first" approach, since a few sample screens are not enough for the programmer to understand the general design concept when moving from mobile to desktop (when enlarging the screen)

Basically - I would like to change from "mobile first" to "mostly mobile"

Is there any technique or approach recommended?

Maybe an article on the subject?

Has anyone done something like this in a project?

My first idea was to work with the mobile design and add a grid guideline (for example if something uses 100% of the screen on mobile the guide is to convert it into 50% on the desktop) and it wasn't good enough.

The mobile-first approach is a tenet of progressive enhancement. It is the ideology that mobile design, as the hardest, should be done first. Once the mobile design questions are answered, designing for other devices will be easier.

Answer 1

I think you're misunderstanding how designing for mobile compares to designing for desktop. Luke Wroblewski described the difference best in his post "Organizing Mobile":

"[Simply] porting over what worked for you on the desktop to mobile often doesn’t make sense. Instead, you need to think about what mobile is uniquely good at and align it with the needs of your customers."

When you consider mobile first, you actually focus on the content (reference: Content over navigation) not just the design of the site. It should narrow the content down to what you really want and need to get across to the user. Once the initial mobile design is completed you can move onto creating media breakpoints and adding any further detail or functionality you would like.

As already stated in another answer, a framework similar to Bootstrap or Foundation can come in handy, but there is a cost that some web developers mention (we've even debated this in chat). That cost is that you end up with bloated code. Even while avoiding backend intricacies, the argument still can be made that your web design shouldn't only look good visually it should look good code

This simple Bootstrap example shows how bloated it can be:

<h3>Mixed: mobile and desktop</h3>
<p>The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p>
<p>Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.</p>
<div class="row">
    <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
    <div class="col-xs-6">.col-xs-6</div>
    <div class="col-xs-6">.col-xs-6</div>
</div>

On the other hand, sacrificing clean code will often lead to quicker development time which can equate to more revenue.

As for other content on the subject, Luke Wroblewski also wrote a book called Mobile First which includes the above reference.

A good avenue that will help in your process is defining a complete sitemap/content mapping method. When I look at a project, I take the same amount of time whether the client is only worried about the desktop version or a full responsive site. That way if the client comes back and says they really want to target a device like an iPhone or iPad I've done an effective mapping that will assist in developing those additional target areas. You can also reference "What are the steps in designing a website?" where I discuss the steps of designing a site.

Overall I always build my production pipeline the same and have even developed templates to stream line what I do. The increase in time is usually seen in the debugging stages. There's not much you can do to force a client to accept responsive designs because some clients are just plain hard headed and they can tell, you like I've heard, "I'm not worried about that silly mobile stuff right now". But that doesn't mean you can't plan and execute for when they learn better and want you to develop it.

Answer 2

I think what you might be missing is that responsive design is very grid-oriented. Typically, it is a 12 column grid.

In a large browser window on a desktop system, the 12 column grid is spaced out fully like so:

[] [] [] [] [] [] [] [] [] [] [] []

… but once you get down to the smallest screen, they grid collapses so that the columns flow down the page:

[]
[]
[]
[]
[]
[]
[]
[]
[]
[]
[]
[]

… but keep in mind that some columns may be empty, or an element may take up multiple columns.

Part of the reason that mobile is done first is that the desktop design is a modified version of the mobile design, not the other way around. The desktop design will be constrained by the order of elements in the mobile design, which is very important for readability. The mobile document will be scrolled and has to make sense to the reader. Then the desktop version is the same document, but with additional design decisions made.

For example, if your mobile version goes:

[  banner   ]
[ product 1 ]
[ product 2 ]
[ product 3 ]
[    cta    ]

… you might decide that the desktop version would go:

[               banner                 ]
[ product 1 ][ product 2 ] [ product 3 ]
[                cta                   ]

… so you have a wider design now that uses the page width, but the same flow is still there. If you do a desktop design first, it might not collapse into a readable flow. Or at the very least, you have created a programming riddle.

You might want to look at the Bootstrap grid, which is probably the most popular responsive design framework. There is also one called Skeleton that is much more minimal and is great for smaller sites or for design prototypes. Both use a 12 column grid. If you want to mockup your designs in a design tool, then you would create a grid in there that is like these responsive grids. If your programmer prefers a particular responsive framework, then clone the grid from that framework.