Image from: Brad Frost
Responsive design was a key enabler of the strategy that enabled Metro to grow to 34m monthly uniques. It put the end user first and ensured our content looked the best it could at the time of render. We worked from the mobile screen up to the desktop and this enabled us to make quick design decisions. Key principles like this are a cornerstone of rapid project delivery.
Changing the mindset of the business to make mobile a first class citizen was a big challenge. However once they had agreed on a mobile first paradigm we were able to tackle the hard questions up front and once this allowed the development team to focus on how best to approach the responsive elements.
Image resizing was a key part of keeping our file sizes low and having a fast perceptive render. We also dropped our custom font on mobile due to render speeds. An adopted an adaptive approach that only delivered the HTML necessary for the page to render and prioritised mobile for speed reasons.
Mobile first ensured we spent our time focussing on the main content that the user had come to read. We went for the simplest option of not including the sidebar of content on mobile as it would only add page weight. The volume of clicks in this area also justified it not being included. Users have a sidebar blindness and unless it is the main navigational feature will rarely get used as the brain turns it off to focus on reading the main content area.
We are currently going through a new redesign process which will give a new lick of paint to what we achieved two years ago but the principles remain the same.
The below is a presentation delivered at the Google HTML5 Roundtable about Metro’s journey into responsive design