- What We Do
- Software Development
- Data & Analytics
- Salesforce Consulting
- Who We Are
- Who We Serve
Software November 19, 2015
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):
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?
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.
Now that you know what you’re working towards, here are some tips and tools for getting there.
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.
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.
If you built your website with any of the above CMS platforms, check out Google’s Webmaster Guide for instructions on updating 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.
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.
Contact us to talk about how we can help.