Looking Stylish In The Mobile World: Mobile First Design

The original approach to mobile design was a shambles. Initially devices were so incapable of handling content that totally different text only or hugely scaled back websites designed for mobile consumption were the only option. Devices became so capable that they could display and navigate (with lots of nasty scrolling) a full sized website. Many designers then dismissed the need to design for mobile – offering specialist mobile browsers that reconfigured full sites and devices that could show full sites anyways up as the ultimate solution to all their problems. Sadly these are not the solutions. We’re going to explain why and then look at what the real solutions are and why mobile first design is becoming so important.

Specialist Browsers Are A Symptom Of Our Failure As A Design Community

Quite simply specialist mobile content browsers demonstrate that as a whole the design community does not deliver sufficient web content in a manner that mobile users find acceptable. As a consequence they turn to a browser that reconfigures sites in a more readable manner. That is to say these browsers exist because the sites would look so poor otherwise in many cases not because automatically reconfigured sites look so amazing.

Let’s take a look at the strategy used by these browsers to reconfigure a site. Generally they adopt the same approaches from a strategic point of view that a human designer creating a responsive web design would take. Using Opera Mini (the leading specialist browser of this type) as an example. It swaps large pictures for small ones. It moves all the content into one column so scrolling the x-axis is no longer required. It also removes a huge amount of the formatting and styles that the web designer had originally used on the site. What’s the point of the perfect e-mail, viral seeding or social media campaign to drive traffic to your site if all your formatting, styles and optimized sales pages are lost?

The result is a very readable and practical output that bears little resemblance to the vision of the original site owner or designer. Sometimes columns are sorted around the content in a nonsensical manner – with sidebars appearing ahead of the main article and advertisements not showing in their correct place reducing effectiveness. Whilst this (and I suggest all designers check out how Opera Mini renders sites) does work better than tons of scrolling and is very readable in most cases it is a poor alternative to designers controlling how mobile users will experience their vision.

Fully Capable Devices Still Need Thought

To claim that as devices become fully capable of displaying web pages, designers can start to move away from customizing to mobile is disingenuous. There’s no getting away from the fact that the screen is a different size and a page one thousand pixels across isn’t going to be as easy to read on a seven inch device as on a twenty two inch monitor! A different thought process needs to be adopted by designers to ensure users across the range of screen sizes are catered for optimally. Actually we’re solving a problem that’s always existed – it’s just more important now which we’ll show next.

In the past optimizing for users simply meant guessing the biggest size that would eliminate the fewest users. Most screens could show a 960px wide website with a little buffer either side so this became startlingly popular. For years users with big screens have browsed little tunnels in the middle of their vast landscape and users of small screens have had inconveniently located ads, backgrounds and sidebars overlapping some main elements or simply off screen entirely.

All of these devices are fully capable devices, but none of them are ideally suited to the old fashioned ‘one size fits all’ mentality. Fully capable devices still require responsive web design that delivers pages suitable to the size of screen in use – so to say that now mobile devices are fully capable they can be thrown in with the rest would just be to perpetuate a problem that we can lose once and for all through responsive design.

Why Mobile First?

Early attempts at responsive design took the approach of thinking ‘what can we lose’ from this site as we shrink it down for small tablet and mobile phone users. Dropping entire sidebars, making menus less in depth going from drop-down menus to single buttons etc. This is all a little frustrating to end users who have, after all, fully capable devices. They just want to see things in a layout and style that is optimized to their needs not content that is decimated to get it on their screen in as small a format as possible.

Designing for smaller screen sizes first forces designers and content creators to think about the absolute most important elements of their design that users must see first. It forces designers to come up with crisp, modern and lightweight designs that will load fast on the train with a weak 3g signal as well as at home through a high speed data line. It allows content creators to ensure that their smallest screen visitors will have a sufficiently satisfying experience on the site that the desired sales action/experience is delivered.

As width is added that core of efficiency and lightweight style can be added to with some use of larger images and fonts. Perhaps sidebars move back from being links below the text to full sidebars. Perhaps the widest screens need two sidebars and can have two feature article columns instead of one. Whatever approach you take, starting with a view of the sharpest, most important content and building up ensures that every user visiting your site in the years to come will be able to enjoy it no matter how big or small their display screen.