Mobile First Websites: A New Quality Label
The lay of the (Google)land
There are 7 rules to creating a killer “mobile first” website:
- Design it for Mobile First
- Favor speed, speed, speed
- Offer a simpler GUI
- Display only what’s necessary
- Avoid bothersome interrupts
- Design it for outdoor use
- Make it accessible to the sight-impaired
In this new series of technical articles, we will explore each one of these rules and their accompanying challenges.
Let’s start with an observation that is quickly becoming a truism…
Responsiveness is an outdated concept
Most website templates on the market have been designed and coded “for desktop first”. Their mobile versions follow the rules of responsiveness: (a) verticalize content, (b) resize containers and images, and (c) display legible fonts on a variety of mobile devices.
That was excellent web design in 2012. Good in 2014. Passable in 2016. Kind of sucky in 2018. Unacceptable in 2021.
Mobile design has evolved with usage and usability.
Usage? In most B2C industries, smart phone browsing has become the #1 access method to a business site.
Usability? People use their phones in tricky situations that require good design ergonomics. Outdoors, where sunlight flattens contrast. In their car, where speed of display and convenient access to buttons are essential. At work, for private purposes, where quick in-and-out interaction is the rule.
Simply verticalizing a desktop site — the barebone answer of responsive websites to the constraints of smart phone display — violates most of the new norms of usage and usability.
Responsive design has become woefully inadequate, and creates significant hindrances to consumer interaction.
Design for mobile first
Because smart phone browsing is now the #1 way to access information anywhere, anytime, web designers starting from a blank slate must now “think mobile first”.
The notion of “designing for mobile before desktop” sounds counter-intuitive, but it is only counter-habitual. In fact, mobile-first design forces both designers and clients to think of what is most important to visitors, pare down less important information, and articulate a website structure along these lines.
Perfection is achieved not when there is nothing more to add, but when there is nothing else to remove.
French pilot and writer Antoine de St Exupéry, author of The Little Prince
Designing for mobile first is an exercise in simplification.
It starts with a simple question: “What is most relevant to my visitors?“. This calls for information prioritization, and sometimes hard choices. What goes on the home screen of mobile first websites is almost never what the run-of-the-mill responsive version of a desktop site would show smart phone users.
Unique ergonomic challenges
Once these choices are made, the designer will works with ergonomics in mind. Mobile devices present some unique challenges compared with computer monitors:
-
- A much smaller screen surface makes miniaturization a must
- Bare-hand input (vs. digital pointers) makes precision interaction more difficult
- The form factor can hinder interaction
- Limited light output is easily overpowered by ambient light
- A glossy screen surface further decreases legibility
Ergonomics impacts usability, and usability impacts both top and bottom lines.
Designers have to have a good understanding of usability rules to lay out a mobile graphic user interface that makes sense to the eyes, hands and fingers of most visitors. We will cover these in detail in a later instalment.
The need for speed
Speed means even more for mobile users than for desktop visitors. Smart phone users consult their phones in situations that require quick glances and fast downloads.
The fact mobile infrastructure is going 5G alleviates speed bottlenecks as 5G capability is rated to be up to 20x faster than 4G LTE. This said, low-speed cable is almost as fast as theoretical 5G speed, and with download speeds of 50-100 MB/s high-speed cable smokes 5G in households paying for the extra bandwidth.
The need for speed is nothing new. Back in 2018, the rollout of “Mobility First” — Google’s paradigm-changing indexing method — showed Big G was dead-serious in following up the early warnings it had given web designers as early as 2016.
“Mobility First” revolutionized the way Google indexes websites by giving priority to speedy mobile sites in its result pages. From June 2018 on, mobile user experience became a primary factor in the way Google evaluates the performance of websites. (More about this and the next major algorithm update rolled out by Google in May 2021 in another instalment of this series.)
The need for speed is not just user-led: it’s also Google-pushed. The “lay of the Googleland” affects in a big way the design decisions webmasters must make when creating mobile first websites, and the building process they follow.
“Designed For Mobile”: a new quality label
The paradigm shift in browsing habits started in 2011, when sales of mobile devices started to overtake sales of laptops and home PCs, has ratcheted up to a point today that makes desktop websites less crucial than in the past for local businesses.
Some statistics reflect this trend:
-
-
- According to Statista.com, mobile browsing accounted for 53% of all pageviews in the U.S. in 2017.
- Even in the B2B sector, a recent study published by Smart Insights show that 50% of inquiries were made through smartphones in 2021. In 2020, during the Covid lockdowns, this number even reached 70%.
- At the local level, Google had published a report a couple years ago showing that more than half of all search queries where done from a mobile device. A recent study by Hitwise puts this figure at nearly 58%.
-
Mobile design is the new black: “Designed for Mobile”, the new quality label.
Designers and clients must adapt to this trend. The process through which a new website is created and coded must change to meet the expectations of consumers, professional buyers, and… Google.
In the next instalments we’ll detail the approach and creative decisions our design team implements to achieve the new standard of the “Mobile First Websites”.
Phil Chavanne
Snr SEO Consultant
Free independent evaluation
Eden Ads is a full-service digital marketing agency in Tampa, FL. Our team offers qualified local businesses a unique opportunity to have their website and digital marketing/advertising campaigns fully evaluated under multiple aspects:
-
-
- ROI of Google Ads campaigns
- Finding where you waste money in your Google Ads campaigns
- ROI of Facebook campaigns
- Search engine position checks on your 2 or 3 main keywords
- General SEO-readiness
- Adequacy of mobile design
- Google speed scoring of your mobile website
-
This free independent evaluation can reveal weaknesses that hurt your site and prevent it to get to the top of search results. It can also highlights design issues blocking it from converting more visitors into leads. Call our web consultants today at (813) 940-5699 to request a free independent evaluation, and discuss your most pressing needs.
If you’re want results, speak with one of our Marketing Consultants to find out how we can help you! Call us at (813) 940-5699 or make contact with our team via our secure online form.
