What Is Mobile Friendliness?
Mobile friendliness is the measure of how well a website is designed and optimized to load on a mobile device such as a smartphone or tablet.
In layman’s terms, it’s when your site is able to shrink down to fit on any screen while still allowing users to consume content, navigate the site and achieve their goals as easily as with the desktop version. It also means not throwing up intrusive or aggressive interstitial ads that block your content on mobile devices.
Mobile friendliness can be achieved in two ways (more on both of them later):
- Using mobile first or responsive web design.
- Creating a separate website (usually hosted on a mobile subdomain) optimized for mobile devices and redirect mobile users to that site.
Does Mobile Friendliness Matter for SEO?
Mobile friendliness does matter for SEO. In fact, it’s a ranking signal in both Google and Bing’s algorithms when it detects a user is searching on a mobile device. Websites that are mobile friendly, in general, will outrank non-mobile friendly sites in mobile search results.
So, if your website relies on or targets traffic from mobile users at all, mobile friendliness is vital for SEO.
Even if your business doesn’t rely on or care about traffic from mobile users for some reason, thanks to Google starting its mobile-first index, mobile friendliness will soon matter for you as well.
What is a Mobile Friendly Website?
A mobile friendly site is designed for mobile users
When you build your website, there are 3 ways you can design it to be mobile friendly:
- Dynamic design: This option entails detecting user-agent and serving different HTML code based on whether the user is on mobile or desktop. Dynamic design requires you to use the Vary HTTP header to prevent caching servers from accidentally serving the wrong version. This will also tell search engines’ mobile user-agents to access the mobile page version.
- Mobile subdomain: Also known as mDots, this option involves a significant amount of developer time and resources. It involves building an entirely separate mobile site and hosting it at a subdomain - usually something like m.domain.com or mobile.domain.com. Google is generally pretty good at figuring out the relationship between content hosted on a mobile subdomain and on the desktop site. However, you can never be 100% sure when it comes to subdomains, so you should include the rel=”canonical” tag pointing to the desktop version. This method generally isn’t recommended, especially for large and/or complicated websites. It’s falling out of favor.
- Responsive design: This option doesn’t require much in terms of developer time and resources, as it doesn’t require any changes to your current code other than the addition of one meta tag. Creating a responsive site is as simple as adding the meta viewport tag in the page’s <head>. The viewport tells browsers to render a page based on screen size. A responsive viewport looks like this:
- <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
- This is Google’s recommended method for creating a mobile friendly website. Test the responsiveness of your website by changing the size of your browser like this:
A mobile friendly site prioritizes mobile user experience
User’s don’t interact with pages on mobile devices the same way they do on desktop. They are typically looking to achieve a goal right away, whether that’s executing a transaction, finding a piece of information or looking up a store’s physical location. Of course this sounds like basic conversion rate optimization, and it can certainly be applied to your desktop landing pages. However, thanks to mobile users’ shortened patience, you have even less wiggle room with mobile. Follow these guidelines when optimizing your pages’ mobile content and design:
- Avoid plugins like Flash, Java or Silverlight. Most mobile browsers don’t support these technologies, so it won’t load for mobile users. If you want special effects or content, use HTML5.
- Make your font size readable without zooming in. If you’ve set your mobile viewport, make your base font 16 pixels, the default size for most fonts. Then define text sizes for headers relative to the base font. Stick with a mobile friendly typeface like Arial, Helvetica, Times/Times New Roman or Verdana. Keeping your pages light on text will allow you to use larger base font sizes.
- Design with touchscreens in mind. This means making tap targets big enough, and with enough padding, to avoid accidental clicks. Few things are more frustrating to users than links and buttons that are too small or too close together to click. Make tap targets at least 48 pixels in height and width with an extra 32 pixels on all sides.
- Make navigation simple and obvious: 40% of visitors will leave for a competitor if they can’t easily navigate on a mobile device. Design your site’s layout vertically, make the home button large and obvious and never use drop-down navigation menus. They rarely work properly on mobile screens.
- Approach your mobile pages as if they were conversion pages on desktop. Put the most important text at the top of the page along with calls to action. Don’t add unnecessary details to the top of the page, users who need additional information will scroll down or click through to a secondary page.
Check your website is mobile friendly
You can check your website is mobile friendly by running a Free WooRank Review.
A mobile friendly website is fast... really fast
Users searching with a mobile device have famously short attention spans and simply won’t wait for a website to load. In fact, most users will abandon a website that doesn’t load in 3 seconds or less. Google’s standards are even more strict: content above the fold (ATF) have to render in one second or less.
Unfortunately, every loading any webpage comes with certain overheads:
- DNS lookup: 200 milliseconds
- TCP connection: 200 milliseconds
- HTTP request and response: 200 milliseconds
- Server response time
- Client-side rendering
Those first three steps are required simply to establish a connection to the web server, which means there are only about 400 milliseconds of the process you can control by optimizing page speed. Optimize page load time to minimize the amount of time your users have to wait for the page to load.
Use Chrome’s Developer Console, Firefox’s Web Console or Internet Explorer’s Tools Console to find bottlenecks and other assets slowing down your pages.
Consider Google AMP for Mobile Friendliness
If your website is based on content consumption, as in your business relies on people coming to your website to read articles or watch videos, there is a shortcut to mobile friendliness: Google’s Accelerated Mobile Pages Project. AMP is an open-source standard that was designed to create extremely fast-loading websites optimized for the mobile user experience. It works like this:
- AMP uses a limited set of custom HTML properties for assets such as images, videos and frames that predetermine aspect ratios so browsers know what the page will look like before it starts rendering it.
Get started with AMP for your WordPress site!
- AMP JavaScript controls the page’s entire load chain and prioritizes ATF content above other requests. Third-party elements and content below the fold start loading after the main content, so visitors are able to start reading/watch almost immediately after arriving.
- Predetermined layout and asynchronous loading eliminates choppy and jumping page rendering, which means your users won’t experience one of mobile browsers’ greatest complaints: slow, chopping rendering that causes objects on the page to jump around with every new browser calculation.
Creating AMP pages is a relatively quick and easy way to ensure that the mobile versions of your pages check the three mobile friendliness boxes:
- Responsive web design
- Enhanced user experience
- High mobile page speed
