Mobile devices are just different. On one hand, users have lower bandwidth limits, smaller screens, and intermittent connectivity. On the other hand, mobile devices are more personal – we always have them with us, usually connected to the Internet – so we have quicker accessibility to the answers that we need. When we build a web interface, we need to take all this into account in addition to the more traditional desktop browsing experience. As a website developer, I make sure that my new websites are mobile compatible with the right sized fonts, links, and flexible layouts.
To help improve mobile usability on the Internet, Google has created a set of standards that encourage web developers to consider and improve how their websites will render and be used on mobile devices.
The Take Down of Mobilegeddon
“Mobilegeddon” is the nickname for an algorithm launched by Google in April 2015. In this search ranking algorithm update, websites that are not mobile-friendly will be penalized in search results on mobile devices. The algorithm focuses on factors such as text size, responsive layout, and page download size. Websites that are not optimized for mobile devices will likely suffer a significant drop in search traffic (and thus, conversions).
The release of Mobilegeddon initially spooked some of our customers. A few of our customers needed to make major updates to their websites to make them mobile-friendly. However, Mobilegeddon might not be such a bad thing. Currently, 80% of internet users own a smartphone and 47% own a tablet. Though we’ve been developing mobile-friendly sites for years, Mobilegeddon has helped our customers understand the importance of developing websites that work everywhere.
A few factors that led to lowered search rankings for websites post- Mobilegeddon
- Issues with touch-centric UI – for example, small links too close together to easily tap
- Text too small to read on a small screen
- Layouts that don’t render well on common mobile devices
Creating a mobile-friendly website requires a comprehensive strategy starting from the beginning of the web project. Here are some factors to consider before and during the website build to make sure your site will work on any current and future devices:
How to make a powerful mobile website
Prioritize your content
When your clients visit your website, what is the first thing that you want them to see? Your mobile website will be laid out differently than a desktop site. Copy, graphics, and menus may be in different locations to compensate for a smaller screen size. It is up to you and your website developer to create a roadmap for users to find the information that creates conversions, regardless of which device they are using. Your most actionable items should be prioritized first, such as a sign-up form or call-to-action. You can find your most actionable items by using modern website analytic software, such as Google Analytics, that tells you which pages your audience uses which leads to conversions.
Remember the “myth of the mobile context” – Don’t assume that your users will be targeting a certain action while they’re on their mobile device, and a different action on desktop browsers. Our job is to make a site that works in both situations, without forcing a different type of site usage on the users. Remember, it’s still the same website.
Pay attention to:
- Calls to action
- Forms and surveys
- Navigation Menus
Lean and Mean
You might have the most informative content or best graphics, but if your website is sluggish you will probably have a high bounce rate – not to mention search penalties courtesy of Google.
To provide a powerful website, we need to pay special attention to the size of the graphics, images and scripts used in your site. Decreasing the size of your website’s assets can help your site load quickly on both desktops and mobile devices.
Most people are on the move when they are using their mobile device. They don’t have the patience to wait to a website to load. If you optimize your server for site speed then you can decrease your bounce rate.
Increase speed by:
- Enable compression and concatenate scripts and stylesheets
- Enable browser caching
- Optimize images
Mobile User Interface
Smaller touch-centric screens require different types of interaction from your users. For example, your audience is using their finger to navigate, rather than the pointer of a mouse. A mouse allows more precision that finger point cannot provide. Because of this, a mobile optimized interface uses larger click targets and wider spacing to prevent users from hitting the wrong link by mistake. Aim for only two layers of navigation to improve the speed that users can access your pages.
If this sounds like good practice everywhere, that’s because it is! These same principles make a desktop website more accessible as well. Remember, our goal is to create one site that works everywhere.
Content to adjust to optimize your mobile interface:
- Cut features that can slow down site and prevent conversions
- Cut content to reduce word count and reduce unnecessary secondary pages
- Enlarge some interface elements to accommodate larger fingers
Test, Test, Test!
Since there are so many different mobile devices, we try to use standard-based code and test as widely as possible. We want to make sure that your website is easy to use regardless of which device you’re on.
For example, let’s say you have a simple contact form on your website. When a user submits the form, it shows a message that the email has gone through successfully. We need to make sure that when a user submits the form on a small mobile device, they can still see that message on the screen and it’s not buried somewhere else lower or higher, out of view.
You don’t have to guess whether your mobile website is optimized.
There are online tools that will analyze the interface of your website:
- Test on real mobile devices, including Android and Apple smartphones and tablets
- Use the iOS Simulator and Android Emulator
- Test on Responsinator
- Resize your browser for a quick glance at your site’s layout in a smaller viewport.
We cannot dictate how a user navigates our website, so it’s important to pay attention to your testing and analytics to see what your users find important. Test and prioritize content on your website so that users get the best possible experience, regardless of which device they use.