Why Making Your Website Mobile-Friendly Should Be Your Number One Priority
In April 2015, Google Search announced a big change to their search algorithms. Mobile-friendly websites now have more clout in Google search rankings over non-mobile-friendly, or non-responsive sites. That means responsive, mobile-friendly sites are given preference in search results (not just searches on mobile devices but all searches). If your site isn’t optimized for mobile devices, you may see your site drop in Google rankings, and that could hit your organic search traffic hard.
What is a mobile-friendly website? TechCrunch sums up Google’s definition by saying that “in order for a site to be considered mobile-friendly, its text has to be readable without tapping and zooming, its tap targets need to be spaced out appropriately, and the page avoids unplayable content or horizontal scrolling. In other words, the site simply needs to be easily usable from a mobile device.”
So here’s the million-dollar question: How many people actually use their mobile phones to search the Web?
According to Pew Research, “Today nearly two-thirds of Americans own a smartphone, and 19% of Americans rely to some degree on a smartphone for accessing online services and information and for staying connected to the world around them – either because they lack broadband at home, or because they have few options for online access other than their cell phone.”
Here are some other stats that might surprise you (taken from the same study):
- 64% of American adults now own a smartphone of some kind, up from 35% in the spring of 2011
- 10% of Americans own a smartphone but do not have any other form of high-speed internet access at home
- 62% of smartphone owners have used their phone in the past year to look up information about a health condition
- 57% have used their phone to do online banking
- 43% looked up information about a job on their phone
- 30% have used their phone to take a class or get educational content
In other words, more people are browsing the Internet using mobile devices. If your website isn’t readable or easy to use on a mobile device, consumers aren’t as likely to use your site or your services. They’ll go to your competitors who have mobile-friendly websites to get the information they need.
So, what are the specific design details you need to think about to make your website truly mobile friendly? What does that look like in reality?
Mobile-Friendly Quick Tips
The short answer is that if your site is mobile friendly, it’s easy for viewers to use and read while viewing it from their mobile devices. Here are 12 aspects of mobile-friendly design to consider for your own website.
- Keep the page design simple. Remember, it’s a small screen. The cleaner the design, the better.
- Use large font sizes (at least 14px).
- Place critical information “above the fold” (where users can find it without having to scroll down) to make it easy for the user to find.
- Make sure your touchable buttons are big enough to reduce the chance of the user hitting the wrong button. Apple’s design guidelines recommend button sizes to be at least 44px by 44px.
- Ensure your site speed and load time are under one second – at least for the content above the fold.
- Do not use Flash-based content (Flash does not work on mobile).
- Use standard fonts that are scaled properly (fancy fonts take longer to load).
- Optimize your image sizes to ensure that they don’t take too long to load but still are high-resolution for mobile screens.
- Do not fix image widths – or you’ll end up with images in strange sizes when scaling from desktop to mobile.
- Build smart navigation that makes it easy and intuitive for any mobile user.
- Create compelling headlines that grab the reader’s attention right away and reduce the amount of copy needed overall.
- If you’re using a lot of videos, embed YouTube videos. Their code is already responsive.
Now that you know what you’re working towards, here are some tips and tools for getting there.
Check out Google’s Mobile-Friendly Test Tool
Not sure if your site is mobile friendly or not? Analyze your site with Google’s Mobile-Friendly Test tool. This tool also shows how Google Search sees your pages.
You can also request a list of mobile usability issues across your sites by logging in to your Google Search Console account and using the Mobile Usability Report.
Update Your Website Theme
If your website was built using the following CMS systems, making your website mobile-friendly may just be a matter of updating the theme you use.
WordPress
Joomla!
Drupal
Blogger
vBulletin
Tumblr
DataLife Engine
Magento
Prestashop
Bitrix
Google Sites
Typepad (external site)
Squarespace (external site)
Wix (external site)
If you built your website with any of the above CMS platforms, check out Google’s Webmaster Guide for instructions on updating your website.
Create a Mobile Version of Your Website
If you’re tight for time or resources, one solution is to create a mobile-friendly site with a conversion platform like Mobify or Duda. These tools work by identifying whether someone is using a mobile browser or a web browser to view your site. If a mobile browser is detected, the user is then redirected to the new mobile version of your website.
Keep in mind that if you are creating two separate websites – a mobile version and a web browser version – then this means you’ll have to make changes to both sites every time you have updates to make. Check with an SEO expert to make sure your Google rankings won’t be affected by this duplicate content. You will also end up with two separate sets of Google Analytics to monitor: one for the mobile site and one for the original site.
Redesign Your Site Using Responsive Design
Updating your website to a responsive design is the best choice if you discover that your current site is not mobile-friendly. A true responsive website requires three things: a fluid grid system, CSS media queries, and flexible content.
The foundation of your website should be built using a fluid or flexible grid system with media queries. The grid system establishes a framework for the content, and the CSS media queries define the fluid break points at which these grid elements resize to shift and stack at smaller screen sizes. A front-end developer can adjust the CSS (Cascading Style Sheets) to check the display size of your device and run it against the dimension rules the developer has placed around your content. If the viewing device is below a certain dimension, then the site will auto-adjust to fit the appropriate size of the screen. This is how your 4-column content layout can shift to 2-columns on tablet view, and 1-column on a mobile device.
Certain parameters around your website content are also crucial for a successful responsive design. Content with a fixed pixel width, like HTML tables or images, are discouraged because they will hold their dimensions even as the rest of the site scales down to fit a mobile screen. Make sure your images are flexible by sizing them by percentage instead of pixel width, or by adding different tablet- and mobile-specific dimensions in the CSS. Also, embedded widgets from third-party sites might not be responsive and should be custom-treated by a developer to scale or hide when in mobile view. Following these precautions will ensure your site is optimized for all devices, including laptops, tablets, and smartphones of all sizes.
Responsive design is not a new concept. Most markets selling themes for popular CMS systems are full of responsive options that will work beautifully out-of-the-box. If you’ve hired someone to create a customized website for you, make sure you discuss responsive design with them and learn how to properly prepare your content. RTS Labs builds every new client website according to best practices for responsive design.
Making your site mobile friendly is crucial now that Google’s algorithm has changed, which is in direct response to the fact that users increasingly use their smartphones to find information. Think mobile first. It will help you land a higher spot in Google search rankings, and your users will thank you.