If you grew up alongside the rise of the Internet, you’d probably envision the desktop experience. A big screen, mouse and keyboard interface, and a scroll wheel characterize the way desktop users access and interact with the Internet, and so desktop-first design was adopted in response. Desktop-first design has static design elements that do not scale or rearrange themselves based on the size of the window or the device, and may feature sidebars that showcase all relevant information at a glance, drop-down menus, and similar space-heavy, information-heavy pieces of the design puzzle.
This sounds wonderful and attractive to desktop users, but unfortunately it leaves mobile users with the short end of the stick! The static nature of desktop-first design means that mobile users will be stuck with the same expansive desktop interface, but on their tiny mobile displays, meaning they’ll have to zoom and pan around just to get things done.
The current trend, and one that many businesses and web developers should be following, is mobile-first design, and today we’ll explain just why this is a critical choice for you.
Why mobile-first design?
How big exactly is the mobile market, that mobile-first design is now the main trend to be pursued? Well, as it turns out, pretty big: in Southeast Asia, more than 90% of Internet users are on mobile! Alongside this figure, Southeast Asians spend more time on mobile internet than any other demographic – an impressive 3.6 hours a day. Singapore in particular has the highest smartphone adoption rate in the world, at a remarkable 85% of the population owning at least one.
These figures extend to major web activities, not just general browsing. eCommerce in Southeast Asia is a tremendously mobile-first industry, with 72% of all eCommerce traffic coming from mobile browsers. Meanwhile, 89% of Southeast Asian Facebook users are mobile as well, which often means that the sales funnels and websites that a social media user sees will also be viewed on a mobile device.
So imagine going desktop-first and leaving this huge 90-plus % user base to fend with unwieldy web design that looks terrible on the devices they spend hours and hours every day on. You’re going to lose prospective customers and clients left and right—after all, 28% of Singaporeans would look for a site that has a more mobile-friendly interface if faced with this scenario.
On top of all this, Google also penalizes websites that don’t have mobile-friendly design, which will hurt your rankings on search engines and ruin all the good work that your SEO has been trying to do.
It’s clear then that mobile-first design is a key element of modern web design, and it has to be leveraged in order to ensure that you don’t lose any traffic to the biggest Internet-using market around.
What does mobile-first look like?
Mobile-first design is characterised by certain principles that make it optimised for viewing on a small-screen device.
Responsive design refers to websites whose elements scale and move automatically to fit aspect ratio, screen DPI, and size of the viewing device. Every device gets the same HTML pages delivered when they load the page, with the appearance responding to the device’s needs. You can see responsive design in action on desktop by going to a website and zooming in to, say, 300-400% using your web browser’s zoom feature. You may notice sidebars and menus disappearing and being hidden behind a hamburger menu, and text is scaled up to fit the entire screen.
Not all websites will make use of responsive design. Some sites will serve separate HTML pages upon detecting the type of device accessing them, which is known as adaptive design. Still others, like Facebook and Wikipedia, instead have a separate URL for mobile devices, for example m.wikipedia.org and m.facebook.com—this is called separate or m(Dot) design.
Many mobile sites also make use of progressive enhancement, in which all users are served the most basic and core webpage content, such as articles or videos, above anything else. This ensures that everyone gets a good experience no matter what device they’re using, and particularly is advantageous for mobile users with less powerful, less fully-featured browsers. As the website detects greater browser functionality, such as JavaScript, CSS, and even WebGL, more and more features can be provided to the user.
The essence of mobile-first design is scalability and adaptability. Where desktop-first design simply assumes that users can see everything and pushes a single design on them, mobile-first ensures that users are provided with the best access to the information they need.
Catch Part 2 of our piece on the importance of mobile-first design and what its impact is on your marketing strategy, here.
More insights