Why a mobile-first, responsive design is the only way to go

With 90% of Internet searches happening on mobile within the next year, you have to think mobile first when it comes to designing and developing your website. Plus, it has to be responsive to accommodate ever-changing device screen sizes.

In the fast evolving world of web design, and to keep delivering what users want, where they want it, it's now more important than ever for brands to adopt the workflow and principles of responsive design if they want to be found on search - on mobile.

Early in May Google said that "more Google searches take place on mobile devices than on computers (and tablets) in 10 countries including the US and Japan'. These searches include mobile-browser-based searches and those coming from Google's mobile search apps.

The search giant says its investments in mobile are driven by consumers' expectations for immediacy and relevance in the moment. Which is probably why they also announced that websites that are not optimised for mobile won't be favoured in SERPs (search engine results pages).

Sales of mobile devices have since surpassed that of PCs, including in developing countries, and online statistics service Statista.com predicts that in 2017 more than 90% of Internet users will access online content from their smart phones. 

Designing for mobile

Traditionally, and still today, designers start with the desktop version of how they see a site's infrastructure and components fitting together, then scale down to how it will look on a mobile device.

The problem with desktop first is it works the other way round from just about any other creation process (start small).

A solid mobile-first design process starts with a simple layout representing the core of a business, then expands as more screen space becomes available, ensuring the user experience remains consistent throughout.

By designing for desktop first, then reducing the layout to accommodate smaller visual fields, mistakes are often made when stripping down the content.

The user is faced with something that may be highly visual, but leaves him confused as to where he should go to get what he's after.

New and diverse content types (interactive) and an erratic device landscape (ever-changing screen sizes) - coupled with the need to be able to adapt to that - means we now have to think of design and development as a single, inter-dependent workflow process.

"In today's world of design thinking mobile first makes the most sense", says Indivirtual's Ajith Steve, who specialises in wireframing, UI/UX Design, mobile design, responsive design, typography and experience design.

"Websites are more than just pages now. They're huge systems that change how businesses operate."

Mobile-first design is hard - or?

The reduced visual field forces designers to consider content first, what the content will look like on a mobile phone, and how the user will interact with it.

Then comes the mathematical calculations 'if this, then that' of linking essential and non-essential components together to create an awesome user experience. 

If the goal of a company is to rack up sales or respond to the needs of a community, for instance, then the website, whether viewed on mobile or desktop, should do the same.

Ultimately the user does not want to accommodate the brand depending on the device they're using; the brand has to accommodate them. 

How it should be done: Our responsive design for Mercedes-Benz Middle East

responsive design for Mercedes-Benz Middle East

Designing for an interactive future

Luke Wroblewski, who (arguably) first coined the phrase 'Mobile First' back in 2009 says in his book by the same name: "Designing for mobile first not only prepares you for the explosive growth and opportunities in this space, it forces you to focus and enables you to innovate."

These innovations he hinted at have now come to life and have opened up a whole world of immediate and physical interaction with brands not possible on static, limited-dimension design for PCs.

Think of vibrate, push notifications, instant payments, QR codes, activity or location tracking, touch commands, and the myriad of opportunities becoming available via The Physical Web - an extension of the web into the physical world so you can walk up and interact with any device without installing an application first.

Businesses thinking desktop first (or only) will not be able to engage with users via these possibilities and proud as they are of their desktop designs, will be left out in the cold when users search for services and information on their mobiles.

As Stephen Hay, Author of Responsive Design Workflow, said on Twitter: “There is no Mobile Web. There is only The Web, which we view in different ways. There is also no Desktop Web. Or Tablet Web. Thank you.”