Mobile-First Design: Revolutionizing Website Development

Podcast: Download (Duration: 9:53 — 9.2MB)

Despite the occurrence and popularity of compact Internet-connecting gadgets (new research out from the GlobalWebIndex indicates that among 170,000 adult online users across 32 markets, 9 percent own a smartwatch and 80 percent own a smartphone), most websites are still prepared and designed the traditional way – Web designers still start off with the desktop-compatible version. Once that is properly set up, then the effort to make the website mobile-friendly or responsive follows.

However, there’s a new breed of website designers and they are drifting away from this comfortable and familiar process. Their strategy has been branded the deviant method, because instead of starting with a “full-size” website, the developers’ work launches from the mobile-compatible version, called the Mobile-First Design. This is exactly how the SuperFastBusiness web development team design websites.

What triggered the paradigm shift?

· StatCounter Global Stats reveal that mobile traffic accounts for about 30 percent of website page views nowadays. Meanwhile, desktop access is down to 60 percent.
· Mobile devices have become the primary tools through which most people consume content; Nielsen reports that in the US alone, adults spent on average 34 hours per month using mobile Internet on smartphones. By comparison, they spend just spend 27 hours on PC Internet.
· Social media is still checked by 64 percent of netizens using their PCs or laptops, beating smartphone use by 17 percent. But as more and more people are projected to acquire smartphones, these numbers will definitely change significantly within the course of this year, in favor of smartphones.

It’s imperative to note as well that people have established particular tasks for desktops and mobile devices. Traditional computers or laptops are dedicated for work – technical stuff. Meanwhile, mobile devices are for leisure – playing social media, games, viewing pictures, watching videos… basically, the more common activities people go online for.

These reports only go to show how mobile devices are indeed quickly rising to dominance as far as Internet usage is concerned, which means that it truly is time to revamp the Web development culture. Complete usability through mobile devices should be a priority, and the Mobile-First design is not only a more logical approach, but also a great strategy in securing a competitive advantage.

What is the concept of Mobile-First Design?

Mobile-First was created by Luke Wroblewski. It is a Web design/development philosophy that focuses on the importance of creating user experiences within the mobile context.

Recognizing that Web usage will reach a point wherein most will accomplish this through compact devices that connect to the Internet (with smartphones leading the pack), it’s imperative to make websites compatible and viewable through these non-traditional gadgets, and make that the top priority.

What are the important values in executing this approach?

– Commitment to core content and functionality — With the limitations imposed by smaller screens (which are at most 80 percent smaller than a regular computer’s screen size), website developers need to ascertain that users do not only easily access the site, but also that they are able to go about all the activities they wish to accomplish with tremendous ease by focusing on the most relevant components.
– Creativity/innovation and smart utilization of new technology (such as geolocation and touch events, to cite some) are also crucial to the Mobile-First approach. Although efforts are concentrated on fundamental elements, ensuring the best/most meaningful user experience on mobile is a must.

What is Progressive Enhancement, exactly? Why is it a good idea?

Effective execution of the Mobile-First design and its values relies greatly on the progressive enhancement method. Progressive enhancement is a strategy that has a bottom-up approach. You start with minimal size and features, and then as you move up through larger platforms (smartphones, to phablets, to tablet PCs, to laptops, to desktop computers), you add enhancements to the site as you are liberated from the constraints of smaller platforms.

Essentially, progressive enhancement is a good idea because not only does it make things easier (especially when it comes to accessibility and usability), but it is also focused — it initially implements only what’s compatible with the “base device,” and you just add more depending on the increased functional range offered by bigger platforms.

Additionally, this school of thought is awesome for online marketing or SEO; accessibility of websites across all types of devices and browsers or responsiveness can help push websites up page search rankings.

Where does Responsive Design fit in all this?

Responsiveness is one of the important benefits of the Mobile-First design – the ability to optimize exposure to Internet users through various mobile devices and browsers. On top of that, opting for the Mobile-First approach creates the logical linear layout model which is most ideal for website navigation. Having content hierarchy can make exploration of the site better organized for visitors, no matter what device they are using.

Advantages and disadvantages of the Mobile-First Design

The advantages of this approach, apart from mobile accessibility, include:

Improved site navigation — This is particularly helpful for business websites that want to increase conversions. Studies reveal that a fairly typical, inaccessible and hard-to-navigate website regularly loses about 5 percent of potential sales.
Site problems can be solved much faster — Mobile-First is impressively effective in breaking down issues with site navigation, order of content and data, as well as crucial functionalities. The execution of this strategy allows developers/designers to discover these problems, and resolve them completely prior to “application.”
Focused on content — Content, which is truly the most valuable element of the website, is the top priority, and the approach makes sure that it’s presented in the clearest, most concise and comprehensive way possible. With Mobile-First, content does not get compromised even as the website gets displayed in bigger virtual real estate.
Creates consistent experience across multiple platforms — Familiarity is something everybody looks for, and this alternative approach provides that.

As for the downsides of this approach, many complain that:

The launch pad of the development process is a huge collection of different types of size limitations; problem solving is not a pleasant starting point for a project.
It’s often hard for a lot of website developers to try a new method of accomplishing a project. It’s a big shift from what they’re used to, so they actually take a much longer time completing the job. But this shouldn’t be a big concern now, considering that there are Web developers who are highly experienced with this approach; if you need help with your website, they can easily take on the challenge.

Bottom line: With all that Mobile First design promises (and has already proven) to deliver, Mobile-First design is certainly worth giving a go. No strategy is perfect, and the Mobile-First design is not claiming to be such. However, it presents a sound alternative method to website development that you just may find is more beneficial or suitable to you.

We acknowledge the following sources used to compile this article:
https://code.tutsplus.com/articles/building-a-website-with-progressive-enhancement–cms-22236
https://www.webinsation.com/why-should-i-design-for-mobile-first/
https://www.sitepoint.com/making-case-mobile-first-designs/
https://hindsiteinc.com/blog/the_benefits_of_a_mobile-first_design_strategy
https://whattheythink.com/news/74122-ricoh-europe-shares-benefits-mobile-first-strategy/
https://zurb.com/article/1187/don-t-rebuild-your-app-build-a-new-mobile
https://designshack.net/articles/css/mobilefirst/
https://www.business2community.com/mobile-apps/responsive-design-mobile-first-approach-01127818
https://bradfrost.com/blog/web/mobile-first-responsive-web-design/
https://www.pewinternet.org/2015/04/01/us-smartphone-use-in-2015/
https://jakearchibald.com/2013/progressive-enhancement-still-important/
https://medialoot.com/blog/progressive-enhancement-web-design/
https://responsivedesign.is/strategy/page-layout/mobile-first
https://www.addedbytes.com/articles/online-marketing/ten-ways-to-improve-your-website-conversion-rate/
https://marketingland.com/nielsen-time-accessing-internet-smartphones-pcs-73683

Tweetables:

The bottom-up approach to web design [Click To Tweet]
Should mobile functionality come first? [Click To Tweet]
Changing the way websites are made [Click To Tweet]

Enjoyed the podcast? Get more episodes by subscribing in iTunes

Download the PDF transcription