ABSTRACT
“Responsive” sites are so yesterday… The standard today is “mobile-optimized”. If you design a website with just “responsive” in mind, you have already left a ton of money on the table.
What are the main differences? Both types of sites verticalize their content and keep it legible on any mobile device. But a mobile-optimized site will:
- Hierarchize your information
- Favor speed, speed, speed
- Keep it simple stupid
- Make it easy to CALL you
- … and then some…
RESPONSIVENESS: RIGHT FOR MOBILE SITES THEN…
The golden standard for mobile sites today is “mobile-optimized”. It used to be “responsive”. Not anymore. But what is so different and why aren’t the two terms interchangeable?
‘Responsiveness’ was the technical solution found by web designers to a sweeping change in people’s habits. With the rise of smart phones with LED displays (the iPhone was introduced in June 2007), people started to browse the web on mobile devices.
Back then, the web was still essentially seen on desktop monitors. Websites were built and calibrated for desktop and not for small displays. When loaded on mobile devices, websites were plagued with legibility issues: fonts were too small, colors were not differentiated enough, it was difficult or even impossible to resize a site using the finger motions created by user interface designers…
The first practical answer to these issues was to create alternate versions of websites, specifically made to display on mobile phones. That was the “m for mobile” period, when a website would default to the m.domainname.com version whenever the visitor operated a mobile device. These mobile versions were costly because of their novelty and the design and coding work involved.
In 2010-11, we started to see the second wave of mobile websites hit the market: the first responsive sites were born, mostly in Wordpress. To the difference of m-for-mobile versions, responsive sites were (and still are) derivated from the desktop versions: they re-use the content of the desktop versions, and verticalize it to keep within the boundaries of mobile screens and to display fonts in sizes visually similar to those of the desktop version.
Responsive sites are also adapted to the thumb-scrolling gestures of mobile users. Lastly, responsiveness dispenses with the need to create a specific subdomain for the mobile version.
That evolution effectively killed the “m” domain. It also marked a new watershed in the technical capacities of the Wordpress platform. The tools now afford to web designers to code directly for desktop and mobile have drastically reduced development costs. But responsiveness comes with real issues that take away from its usefulness.
…BUT BEHIND THE CURVE TODAY
The common denominator to mobile users’ expectations is speed. Several factors have contributed to making speed the first criteria of whether or not, someone will actually visit your site: the advent of broadband internet, the familiarization of web users with large speedy ecommerce websites such as Amazon.com, the ubiquitous Cloud and content distribution networks, and the natural need of consumers to access quickly the information they need.
There is where the rub is for most responsive websites: they are code-heavy, often use large images, and the code is not always streamlined for mobile devices. This slows them down when loading on 4G networks and on public WiFi networks. In a study on mobile site speed published in 2019, Google found that the average speed to load fully a mobile page was 22 seconds. The same study conducted in 2020 brought back the average time to about 15 seconds.
Since we looked at mobile page speeds last year, the average time it takes to fully load a mobile landing page has dropped by seven seconds. The bad news is that it still takes about 15 seconds, according to our new analysis. That’s far too slow when you consider faster mobile site speed makes people view more pages on the site, convert more, and buy more on most brand sites.
Source: Google, https://thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/
How is this important? According to Google:
Our data shows that while more than half of overall web traffic comes from mobile, mobile conversion rates are lower than desktop. In short, speed equals revenue.
Source: ibid
No business can be at odds with the “need for speed” of consumers. For this reason alone, responsiveness is not the full answer to mobile users’ expectations when browsing a site.
EASE OF USE
The problems with responsive sites do not stop at speed. When analyzing the reason for the slowness of the average mobile page, Google mentions a major factor: “…the majority of mobile sites are still slow and bloated with too many elements.” The key data here is “bloated with too many elements”.
Mobile users often use their phones in situation where speed is essential: in a conversation, in a store, at a traffic light, even sometimes in traffic. They need just the right information and they need it fast and clear.
Downloading on a phone the ornamental images of the desktop version of a website is counter-productive. In most cases, these images do not carry any information necessary to the web user in the circumstances. In many cases too, noisy images make the mobile site less legible, making the acquisition of information by users more difficult.
Visual clutter is indeed a major issue for responsive websites. Even if the verticalization of a site keep its text legible, the use of noisy images and complex styling render a site less legible under the typical conditions of mobile phones usage (small screen, unfavorable lighting, contrast problems). Because mobile phones are used in much more random conditions than desktop computers, the best mobile design is clean, and void of any design elements without a contributing purpose. This rule makes mobile websites easier to use.
RELEVANCE OF INFORMATION
A clean, uncluttered interface is pointless if visitors have to wade through a large volume of information that doesn’t bring a quick answer to the reasons why they came to the site.
The nature of the information presented on a mobile site varies from industry to industry. It’s up to the business and the web designer to find out the most important information by diving into the statistics of the site. The process of hierarchizing information is crucial to converting visitors into action takers.
In the HVAC industry, hierarchized information will first present emergency services. It is highly likely that the reason people search for an HVAC contractor on their mobile phone is because their air conditioner stopped working, and they are in an emergency situation (hot or freezing cold). At this point, showing them the history of the business or why the business is the best in town won’t cut it: visitors will exit the site and look elsewhere.
In a plumber’s mobile site, the most critical information has to do with water leaks, broken pipes, blockages, and gas leaks when the plumber has the required certifications. These emergency situations will be presented first, with the proper calls to action. Content about repiping, piping inspections, etc, will be evacuated to less prominent areas. So will content such as “About us”.
Specials, deals and discounts will have a prominent place in most websites designed for the trades, as site analytics often show these areas to be heavily visited. Marketing and sales must work together, in conjunction with the analytical work carried out by the web designer, to determine what content should be prioritized.
Specials, deals and discounts also offer an opportunity to collect personal information for further marketing. Are your specials attractive enough that your visitor is willing to give up some part of her anonymity and privacy to benefit from your offer? If yes, what information can you collect?
AS LITTLE INVASIVE AS POSSIBLE
It is rare today that a business can collect first and last name, email address and phone number from a visitor. The more information you request, the least likely your visitors are to give it up. In fact, the internet marketing industry has pioneered new ways to keep in touch with people using the capabilities Facebook offers — such as the possiblity to connect to the Facebook profiles of your visitors directly on your website without requesting any further data and without forcing visitors to fill out any field. A one-touch click is now sufficient to be deeply connected to your clients and prospects, and deploy targeted marketing campaigns based on people’s interests.
On mobile sites, the problem collecting personal information is compounded by the relative difficulty of typing data into fields. Even if your visitor is willing to enter their information using their cell phone keyboards, these entries are prone to typing errors that may eventually prevent you from building reliable lists.
Moreover, there is a growing consensus that e-mail open rates (number of people clicking on an email to read it) and clickthrough rates (number of people clicking on a button inside an email to open a page or access an offer outside the email itself) are constantly decreasing. A few years ago, open rates were often comprised between 25% and 35%, depending on factors such as the list and the subject line. Today, you are good if your open rate exceeds 15% on a first email.
The problem has been accentuated by the growing number of people using GMail as their email service provider: as a way to fight against spam and email marketing, GMail almost systematically directs mass emailings to the “Promotions” folder (which you rarely access to find out what’s in there) or to the “Spam” folder (which you definitely never go to).
Bottom line: The less data entry you ask from your visitor, the less invasive you are, the better your chances to collect some personal information. The efficacy of email marketing is on the decrease, so even if you can’t neglect this tool in your arsenal, the more you use widgets such as Facebook autoconnect and push notifications (another tool we’ll cover in a separate blog post), the faster you will build a marketable list. Mobile-friendly websites use those tools that make it easiest for visitors to interact with the business. These crucial choices must be made at the very early stages of the design path as they will affect the layout of your mobile pages. Mobile optimization is not an after-thought.
DESIGN AND LEGIBILITY
When you consider the lighting conditions under which mobile phones are used, and the limited surface area available to display information, it is easy to see that the odds are stacked against the legibility of your website.
Two of the enemies of cell phone screen legibility are glare and bright sun. By design, touch screens are not anti-reflective: their smooth glass surface reflects ambient light and creates an obstruction to the eye. A bright sun will offset the luminosity of your phone LEDs, washing away contrast and contours.
The human eye deciphers letters based on their contour: when the contrast between the color of the letter and the color of the background is strong (e.g. black vs. white, black vs. yellow), the contour of a letter is clearly defined and the eye can substract the letter from the background and interpret it for what it is. When the contour of the letter isn’t clearcut, the brain has to struggle to guess that contour and the legibility of the text decreases. By the same token, the effort to decipher the text increases and it can become a turn-off, preventing any interaction with the website.
The mobile site designer must make contrast and color choices at the early stage of the design. These may not reflect exactly the color theme of the desktop site: a pastel color palette will be very difficult to read on a mobile screen, for instance. Likewise, a very strong palette associating intense colors (e.g. fuchsia, orange and green) will also wash away on a mobile screen and make reading the site difficult. This will be directly measured in negative numbers in terms of “time on page” and “time on site“.
For the same reason, “noisy” backgrounds such as photos are poor design choices for text. Anything that makes it difficult for the eye to identify clearly and rapidly the contours of letters will be detrimental to the marketing capabilities of the site.
On the other end of the spectrum, white color on mobile LED screens is typically rendered as a “blue white”. This is a technical characteristic of LEDs: LEDs don’t render the full spectrum of sunlight, and block certain wavelengths. These limitations have a benefit: blue white creates an extreme contrast. But this contrast actually tires out the eye by oversoliciting the optic nerve. In effect, the designer will avoid to use a pure white (#fffff) in favor of a light grey, or a light sandish color. This choice will give a smoother experience to visitors, and help them stay longer on the site.
SUMMARY
Hopefully we made the case that responsive websites are to become a thing of the past, and mobile-optimized websites the trend of the future. There are many other aspects to designing a mobile-optimized website that we haven’t covered here, notably in terms of: layout, speed, image compression and size, use of AMP, evolution in progressive web apps, location of the Call button, etc. In addition to these requirements, the mobile-optimized website will also contend with the specifications and quirks of the iPad and its browser. Rightly or wrongly, Apple’s Safari mobile browser has a very low tolerance for some of the cool design features of websites today, and what works on a desktop won’t always work in an iPad.
All this will be fodder for other Tectalks.
The scope of the mobile design project must be mapped out early, and special consideration will be given to the following aspects:
- Favoring speed over visual effects
- Hierarchizing information
- Keeping it stupid simple
- Maintaining legibility and contrast
- Removing encumbrances
- Asking for limited personal information