Mobile-First Web Design Explained
Smartphone Users Now Dominate
Google’s latest update reflects a changing digital world, a world that has quickly become dominated by smartphone use. Take a look at this graphic as an example of how quickly the landscape is shifting from desktop/laptop use to smartphone & tablets:
What this means for your business, is that if your website doesn’t provide an excellent user experience on a smartphone sized screen, you are losing business to a competitor who’s website does.
Fortunately, the solution has been in development for a while now and it’s called “Mobile-First Design”.
Mobile-first design is the complete opposite approach from the way web design was practiced when I started back in 1998. Back then the goal was a rich user experience, with maximum bells and whistles, with lots of Flash animation and wow-factor. The trend in those days was larger and larger screens, with visually impressive graphics intended to make good use of all those pixels.
Those days are long gone.
How Does Mobile-First Web Design Work?
Mobile-first design starts with a concept that will allow for an easy and engaging user experience (UX) on a small mobile screen. Graphics are minimal, images shrunk down. Menus are abbreviated and text should appear at a size that is easy to read and uncluttered.
From here, through something in the code called ‘media queries’, multiple versions of your website are all present in your code, one for mobile, one for tablets, one for laptops and lastly one for huge screens. Though it’s true that you can add back in those bells and whistles in the versions designed for larger screen sizes, you can see from the above traffic trends that your ROI for that effort is diminishing, since most of your visits now will come from smaller screen sizes.
Here’s a graphic showing how a website layout is re-arranged by the code to display differently based on screen size:
As you can see the elements change size and position, in order to best populate various screen sizes. These adjustments tailor the UX for each screen size, automatically, once the website code detects what platform a user is viewing the site from.