These days nearly 60% of website traffic comes from mobile devices, but only 53% of the top websites around the world are considered mobile-friendly.*
That’s crazy. Especially since 9 out of 10 customers are lost due to a bad mobile experience.
Most people just want a website to work without having to understand the nuts and bolts, but if you happen to be in charge of a website, you may benefit from understanding some of the basics of mobile websites.
Responsive design
With all the devices we have these days, it’s hard to predict the size of the screen people will use, so most websites are developed to be “responsive.” In other words, the page layout adapts to the screen it’s being viewed on.
An example of responsive design is that you’ll see a row of icons displayed horizontally on a computer, but when viewed on your phone, you see one at a time stacked vertically.
The upside of responsive design is that you don’t have to code a website for every possible screen size.
The downside is that it can be hard to make the alignment and spacing exactly the same on every device.
To give you some idea of how drastic the size differences can be, this graph from Google Analytics shows the screen sizes that people have used to view the Social Light website in the last month.
The drastic size difference makes it super important to test your site with all kinds of sizes and devices. You want to avoid having a display that’s super wonky, but be aware it may be a struggle to have everything be perfect on each and every screen.
Mobile-first design
Traditionally, you design a website for desktop viewing and then adapt it to a mobile device.
On mobile-first design, you swap that by designing a website around the mobile experience.
Most B2B businesses are still using a traditional design because their websites are being viewed on a computer during the workday. However, if you are selling directly to consumers, and especially if you have a physical store or office, mobile-first may be the way to go.
Why? Because people tend to have different intentions based on their devices.
When people are in front of a computer, they are often doing research and trying to learn about a topic or company (Social Light’s website only gets 11% of its traffic from mobile devices).
When they are on mobile devices, they are ready to take action and are likely looking for a phone number, address or business hours so that they can visit the location (a movie theater we work with gets 70% of its traffic from mobile phones).
Mobile coding
Regardless of the way you approach the design, it may be beneficial to customize certain parts of your site for mobile viewing. This may be as simple as changing the way a banner image displays, or you may create a fully customized version of your web page.
Depending on the way your site is built, this can be as simple as using a drag-and-drop editor in a mobile view, or it may require some significant work in the code.
Mobile websites are different from mobile apps
It’s worth noting that the websites you view on your browser are different from the apps that you download.
Some look remarkably similar, as seen in screenshots from Facebook.
Facebook mobile web on the left and app view on the right
You’ll often find the same functionality on a mobile website that you would find on the desktop version of the site, but not on every site. In fact, the mobile site for My Postcard is there only to point you to the mobile app.
For many users, this is annoying. In fact, a study by Forrester Research found that 60% of mobile users will abandon a website if they are asked to download an app.*
Google has two search engines
Google has been operating two separate search engines since 2021: one that indexes mobile sites and one that shows desktop results.
Why the separation? Mobile-responsiveness, speed and intent.
You may have a great desktop site that Google’s willing to send people to, but if your site doesn’t load quickly or looks wonky on mobile, Google doesn’t want to rank it.
As I mentioned earlier, people do research on a topic on their computer and want to take action on their phone. So a desktop search may tell you what something is, while a mobile search will tell you where to do it.
It may surprise you to know that the mobile-driven version is the primary one as 70%* of all Google searches are done on mobile phones.
If your business has a website (and it really should!) it’s worth taking a good look at how your site displays on different devices. Bonus points if you can test it on both an Android and iPhone.
If you find something that’s not quite working, please reach out. We’re happy to help!
*Worth noting is Google Bard told me these stats, but won’t give me the websites to reference.
