Mobile First Design – A Misnomer

I recently completed my first foray into responsive web design, to begin with I was quite apprehensive as I was unsure of what I should be doing, but as I did a bit of research I quickly realised that the quickest way for me to be able to muck about and experiment with responsive design is to use a responsive grid system. A number of which are available to download and experiment with.

After some searching, reading and comparing, I settled on the Skeleton grid system. I chose this grid system for a number of reasons. One of which was that I had already provided the client with some wireframes that were based on the 960 grid system and they had said that they wanted to keep that width, the other is that the skeleton grid is actually an adaptive grid system. It changes size at certain breakpoints and is based on a pixel width grid system instead of a percentage based system as fluid responsive sites are. I felt that when confronting a new method of working, I would be more comfortable starting out with fixed pixel widths, and possibly trying a fluid responsive design at another time if it goes well.

I had heard mentions flittering across the interwebs about designing responsive layouts with a ‘mobile first’ approach, but at the time, I had already designed the desktop experience, so decided I would ignore this idea and design the desktop first. This proved to work fine, I marked up the layout using the Skeleton grid and without making any changes to the tablet or mobile stylesheets, I was able to grab the corner of the screen, move it around and watch as the elements changed widths and moved about the page as the media query jump points were reached.

From this point I was able to go into the css file, target each of the specified width cases and change the stylings dependent on what screen width they would be shown on. This proved quite straight forward, although some areas did require some thought, a little sketching on paper and a little more time to implement, this becoming more apparent as the screen sizes reduced.

So what of the ‘mobile out’ design approach? Would the design have been easier for me if I had designed the mobile experience first and worked my way out? I think not. I believe that the term ‘mobile first design’ is badly named, instead it should be called something like ‘mobile considerate design’. Instead of designing a desktop experience and then modifying it to fit mobile, or conversely, designing a mobile experience and expanding it to fit a desktop will always have limitations, whereas if the mobile and desktop versions are both taken into consideration from the start of the design process, then both experiences can be designed together, creating a better overall experience across devices.

|