Mobile First, to an Extent

The most recent redesign of my website(s), which I started by rolling out a new home page late last year, is focused on some responsive ideals. There are some other changes as well, like removing unnecessary Javascript and sprucing up my framework, but the main goal is to implement responsive practices.

Now, I'm fairly new at some of these techniques (less than six months) and did a fair amount of research before wading in too deep. One of the phrases that I kept bumping into was the idea of 'mobile first'. I learned the hard way just how limiting this view can be if you take it too far.

As with any large change to my websites I thought a lot about the exact issues that a responsive overhaul would address. One weakness that all of my sites currently suffer from is mobile usability. It's not just the design that inhibits mobile users… the site architecture and layout is not friendly to limited devices. Limiting the number and size of transfers needed to load a page and reviewing navigation layout needed to be done. However, even if I optimized the front end and cleaned up the loading process it would only speed up an unusable website. A responsive design would keep my sites usable across different screen sizes.

Thinking that mobile first was the way to go I went ahead and made a mobile site. Everything was basically in one column, the links were easy to click, and the text was readable and spaced out. I took out almost all of the Javascript and simplified the CSS, decreasing the size of the site to around 50 KB over 6 requests. I then spent some time writing the media queries as the screen size increased, creating breakpoints when the content broke, until I had a great desktop layout and several tablet options. Everything looked and acted great until I opened up the site in IE8. No matter what the screen size was only the mobile version displayed. With over a tenth of my traffic using IE7 and IE8, this is not an acceptable result.

The way I had written the CSS followed the mobile first ideal. That is, my site was designed for a small screen. Media queries then acted like if statements that overrode the initial styles if the screen size was big enough. Since IE7 and IE8 can't read media queries they only interpreted the mobile styles and never got to the desktop styles.

There are a few fixes that I found for this issue. Some of them suggested using Javascript to target older browsers. Others recommended separating out the stylesheets and loading extra styles for IE7 and IE8. One particularly interesting fix involved utilizing browser sniffing to attach extra classes to the body tags to target the browser-specific fixes. None of the fixes were elegant and a few would increase the size of my site.

The blatantly obvious fix was to tweak the mobile first idea. I flipped my stylesheet over, defining the desktop styles first with the media queries holding the mobile adjustments. IE7 and IE8 loved this and rendered the desktop version just fine. The vast majority of the mobile devices that hit my site can interpret media queries, allowing them to render the site correctly as well. There are a few mobile devices out there that will render the desktop site, not understanding the mobile end, but the historical analytics made this look like a non-issue.

While mobile first is a good idea and forced me to think of bandwidth and usability I had taken the concept too far in this use case. The hacks and fixes out there that allow older browsers to understand media queries still hurt mobile usability more than the help it by adding extra downloading, developing and rendering time. Mobile first is a great idea, but when it comes to CSS structure, I'm going to be be a bit more cognicent of the audience from now on.