Mobile first
Chances are you have heard about the concept “Mobile first” in relations to the mobile and responsive design paradigm shift. Firstly, mobile first can be one of two things:
- A way to prioritize resources like CSS and images to optimize the bandwidth needed for mobile devices. This is an essential part of creating a responsive web sites.
- New design philosophy of designing first for mobile devices before anything else, which, in theory, forces you to focus on the essentials. This is a later development and possibly a misunderstanding, although it sounds plausible.
Being a developer and designer, I have been thinking about responsive design, and it has taken me awhile to make up my mind about it. In practical terms, mobile first as a design philosophy may or may not be the optimal solution. For instance, see how Upstatement explain their decision for starting with the most common break point and continuing from there. (In responsive design, a break point is a screen or device size that is used to make specific CSS code change with media queries to make a site adapt suitably to the users screen.)
As for how you approach the development of a responsive design, structuring it for the desktop first makes the most sense to me. This is because I use a custom fluid CSS framework where I define columns using classes in the HTML. If your CSS code is mobile first like explained above, you already have a single column mobile layout, as mobile browsers should not have loaded any of the desktop CSS. I would then start at the top and work my way downwards making small changes and locating the optimal break points as I go along.
Responsive design is still new, and developers and designers are still making it up as we go along. For example, we still do not have an optional solution for the responsive images problem. But these are problems for which solutions can be found as we continue to think about the mobile design process.
