If you ran a bakery and a customer asked for a muffin, would you grab the nearest one and pass it over or ask them what kind of muffin they were after?
Outsourced website designs used to always go the same way. Designers would create a concept then present this to their client who, when happy with it, would sign it off for build. Being able to design with the knowledge that most visitors would be viewing the website on browser windows of a similar size enabled this, but now the web and how we view it has changed.
Designers and developers have learned several methods to ensure builds look almost identical to the mocked up designs seen at the concept stage. A common approach is to imagine webpages as magazines that offer a rigid width of around 960 pixels. This provides some certainty as to where elements will go and makes transforming a design into an actual site easier, at least for your average monitors. This approach was foolproof, but not mobile-proof.
As the percentage share of mobile visitors continues to grow, cross-platform functionality is now essential. You wouldn’t cram your audience into your store, so why would you shoehorn your website onto their phones or tablets? A website that looks the same on a mobile as it does on a desktop is not often the best choice - that initial concept won’t look so clever when it’s squeezed in to fit a much smaller space. The progress of mobile usage has made this method ineffective, unsuitable.
So you only make big chocolate muffins? But what if your customers are in a hurry or have dietary requirements?
It’d be foolish to expect a standard website to work intuitively on a screen that is only a third of the designs intended width. It’s somewhat similar to driving a double decker bus under a low bridge; it might fit, but you’ll be leaving significant parts behind. Audience behaviour and commonly used devices have both changed, so the people creating websites need to follow. Web designers and developers have a new challenge and a new approach to go with it.
This new tact is the mobile-first methodology. In simple terms, designing for mobile devices then working up, rather than squashing large designs into a restrictive space and making sacrifices along the way. Mobile design is no longer a niche and having a secondary mobile site is rarely a valid option. There are well over one billion mobile web users and a large percentage of these browse exclusively on mobile devices.
The mobile-first approach is opposite to the traditional responsive method where designers start big and then use media queries to condense designs to fit various screen sizes. Designing up from a smaller size enables designers to build on initial designs rather than make sacrifices in the opposite direction. The challenge is to not let the initially small space be restrictive.
Research conducted by Google in 2012 found that 52% of mobile browsers would be less likely to engage with a company in the future following a bad mobile experience. If a website isn’t comfortable on smaller screens, visitors will notice and react accordingly by avoiding you in the future. If you don’t cater to their needs, they won’t cater to yours.
Think of all the muffins you could have sold if you hadn’t clung on to choc chip!
In 2014, initial concepts need to do more than act as a binding contract - they need to form a style guide. A website’s complete parts may not be visible on different devices, but it should feel and look familiar regardless. The ingredients may differ, but it should be instantly recognisable across all platforms. Mobile visitors may be the web’s fussy eaters, but it’s a designer’s job to make them feel catered for.
Today’s range of devices means that just as each website has its unique requirements, each visitor does too. Because of this, each design concept needs to consider its audience and, like baked goods, react to meet every taste. People don’t just want traditional muffins any more. They want mini muffins, English muffins, muffins with fruit in them and gluten-free options. Why stick to one flavour when you can serve them all?
Flickr Creative Commons Image: Tim RT