You may recall in May I posted an article on the increase in mobile traffic hitting our web services over the last few months, and as a result we set ourselves a new goal of incorporating responsive designs into future releases of some of those services - i.e. to improve the mobile web experience.
Well in late November, we pushed a new responsive design out to the Shropshire Council Newsroom.
Scaling the existing design down
When I worked on the first version of a responsive design for the newsroom, I took the original fixed-width 'desktop' design and scaled it down. At the time it was the quickest and easiest method as there were no design changes planned, but it didn't give the cleanest results. As soon as a device browser hit a media query threshold, there was a large 'jump' in the available space which resulted in a lot of side margin space at certain screen sizes. So this approach, although worked, didn't really make best use of all mobile devices' screen width.
Scaling a new design up
Following our initial responsive design, we started preparing for 'version 2' of the newsroom which included a redesign of current sections of the homepage as well as adding some additional features. We therefore decided to take the opportunity to completely re-code the newsroom from scratch. This allowed us to take the approach of scaling-up a mobile design to a desktop design.
I found this approach to make a lot more sense. Instead of battling the confinements of the desktop design from 'version 1', which usually required a lot of new CSS overriding old CSS, I was able to write a single CSS rule that would be valid for all screen resolutions. So in effect the CSS was a lot less bloated, as the scale-up method is a progressive method instead of a overriding method.
A new way of thinking
Doing a scale-up responsive design is quite a different approach to the way a website is coded and can take a bit of time to get your head around.
Scaling down fixed-width elements is fairly restrictive especially if multiple elements contained within the main columns of the design are also set to a fixed width. We have to in turn change all the fixed values for each size of device we want to support, and as already mentioned will probably result in a lot of side margin space at certain mobile device screen sizes, a jumpy response at media query thresholds and plenty of CSS overrides.
Instead, we are now using percentage based column widths which allows us to take full use of a devices' screen width at a smooth response. Content within these columns are now set as a percentage of their parent (usually 100% to maximise the available space).
So to paint a picture of how the CSS appears between the two, instead of changing multiple fixed widths in multiple instances for each media query, we now just change our main columns percentage widths. The content in these columns is set in our main CSS just to fill the column space so we don't need to worry about this.
The numbers never lie
In 'version 1', our main CSS file had 1218 lines of code and 567 lines in the responsive CSS file. Compare that with 'version 2' where we have just 707 lines in the main CSS file and 140 lines in the responsive CSS file. Now isn't that a much more efficient and manageable sounding design?