Mobile websites have come a long way over the years! Remember back when we had to create a separate, less robust version of our main website with separate code just for mobile browsers!?
Since the first crop of iPhones hit the shelves in mid-2007 with Safari installed, consumers have experienced web pages in a new way. Prior to the release of mobile iOS, there was certainly a mobile web presence on phones like the BlackBerry. But as iPhones and Androids brought new mobile adopters into the market, search engines have reinvented themselves to deliver appropriate results for a still-growing slice of the search population.
This means searchers are getting results tailored to their devices--and it also means that web page designers need to adopt a mobile-first philosophy-- if they haven't already.
Google's Mobile-First Indexing
Google's main web crawler, Googlebot, indexes the mobile versions of pages when considering how to rank them in a SERP (search engine results page). After two decades of struggle with SEO rank-hackers, Google has kept their cards pretty close to the vest when it comes to explaining how their algorithms work.
However, in an effort to help businesses optimize their pages for the growing majority of consumers, Google announced that their rankings would implement mobile-first indexing for "new" websites (those not previously crawled by Google) as of July 1, 2019. Along with announcing that mobile-first indexing will be automatically enabled for websites that Google recognizes are ready. All websites will be switched to Google's mobile-first indexing in September 2020.
The User Experience
Google's mobile-first indexing means that building a comfortable experience for mobile users is important for SERP ranking, but it's also critical as an end to itself. At 30 Degrees North, we build the mobile version of a website first, ensuring that it performs exactly as expected before moving onto the desktop version.
Related Read: How to Make Your Website's Content into a Great User Experience.
Google recently published a set of guidelines for websites making the jump to add a comparable mobile version, and the bottom line is clear:
- mobile websites need to be quick-loading
- accessible across a wide variety of devices
- available for resource crawling--all with the same information that would be available on the desktop site.
A complete mobile site shouldn't function any differently than its desktop equivalent. A memorable xkcd comic from 2011 pointed out the issue with many mobile sites, especially in the infancy of today's smartphone era.
Mobile-first design hasn't always been as efficient as it is today, and early smartphone browsers would often retrieve a stripped-down version of the page missing features. But given Google's July 2019 move toward mobile-first indexing, incomplete mobile versions of websites will soon be a thing of the past--at least in page 1 of search results.
Responsive Website Design
One of the keys to a positive user experience in 2020 and beyond is responsive website design. Responsive website design basically means ensuring that your site works for a mobile viewer, no matter what type of device they're on.
Older, smaller iPhones may only have a screen size of a few inches (the first few versions were a minuscule 3.5 inches diagonally, versus the 11 Pro Max at nearly twice the size (6.5 inches). Even beyond large iPhones, the mobile version of a website will still be displayed for iPad and Surface users, whose devices can be larger than some laptop screens.
Responsive website design can be boiled down to two principles:
- Make use of the full amount of screen space allotted.
- Provide all the same, relevant information in all potential browser sizes.
For example, let's consider the daily weather forecast on The Weather Channel website. If you're viewing the page on a smaller phone, you'll want to see the information listed in a tight column, with highs and lows for today, along with potential precipitation. Take a look at mine screenshot below:
I do not have to scroll to find the most important information on my mobile device-- which is "What is the weather today?" Now let's switch over to my desktop to look at the same information.
Obviously, besides it being much larger, displaying the website on a larger device, the forecast could add in things like wind speed and direction, visibility, and humidity.
The bottom line is that all the information a consumer might want to see should be on the page they'd expect. On a desktop, it isn't too much of a hassle to click one link deeper, but mobile pages are heavily penalized by Google's crawling algorithm if the information a searcher looks for isn't available on the page.
3 Ways to Get Started (if you haven't already...)
You don't have to be an SEO expert or a Google whiz to design a mobile website that does its job. In addition to designing for a great user experience and implementing responsive website design, here are three more things to remember about mobile websites:
1. Ensure menu usability.
Probably the most significant thing to consider is the menu. If that doesn't work right in a touch screen format, you're not going to have people stick around very long!
When a consumer is using a computer, they can hover over menus with their mouse and get them to pop up or expand without clicking. On a mobile browser, their only options are tap or tap-and-hold, both of which often trigger the 'click' programming.
It's important to take some time to make sure mobile menus are intuitive and functioning properly on mobile.
Tip: Make sure the font and spacing is large enough to avoid user touching a few things at once. Also, to make the mobile menu view as simple as possible combine multiple levels of navigation to avoid users having to click through multiple menus on mobile.
2. Make your Call to Action (CTA) obvious and accessible.
Try to keep your phone number and any other calls to action (request a quote, request an appointment, etc) very obvious and easily to get to. As people scroll, if they decide to take an action, you don't want to make them scroll back up to find your CTA or phone number.
This can be done using an always-present menu at the top or bottom of the page, or by listing it in a memorable location. Having a thorough mobile website is great, but the idea is to move customers from the website to contact with your business as quickly as possible.
Tip: If your call to action is for a free download, such as an ebook, be sure you have it set up where they can receive that content via email and not only on their phones. If their only option is to save the PDF to their phone, it becomes inconvenient.
If you allow them to view the content right away, after completing a lead collection form, then be sure you have it set up to also email them so that they can print it out or read it on a larger screen later.
For more tips on how to create effective CTAs, you can visit the linked blog!
3. Make sure your phone number is clickable!
On that note, make sure your phone number is clickable! It's such a simple thing to do, but it still gets overlooked.
One of the easiest ways to lose potential customers is forcing them to copy the number down by hand and manually switching to their 'Phone' app. This seems crazy that I even need to tell you this, right?! But, you would be surprised how many websites that we come across that still don't have clickable phone numbers.
Many browsers can automatically detect 10-digit numbers and let you tap them to make a call, but it's worth spending some extra time making sure your business's phone number behaves as expected.
You're Prepared. Get Started!
If your site doesn't automatically resize itself as the examples show in this article do, you'll want to get that addressed right away. If you're preparing for a website redesign, it's critical to start with the mobile version. Not only will it likely receive more clicks and attention than the desktop site, Google and other search engines are actively evaluating the mobile versions when building their SERPs.
For more information about building responsive mobile websites and taking your marketing plan to the next level, check out some of our free resources. And if you're growth-focused but reinventing your website isn't high on your priority list, please reach out and schedule a free consultation with 30 Degrees North today. We'll be happy to discuss our available services and see how we can help your new mobile website succeed.
Originally published August 2016. Updated June 2020.
