Since Google’s famed mobile-friendly algorithm update this past April, everyone has been jumping on the responsive bandwagon. To make mobile users happiest, Google suggests having a responsive website. Of course, making your website responsive is not like flipping a switch. A lot can go wrong. And it often does.
Contents
Exactly what goes wrong, you ask?
Check out these most common issues with responsive design.
Does your logo resize and rescale correctly?
Your logo is the pinnacle of your brand. It should look great on all devices to best represent your business and start the conversation with your clients. If your logo looks blurry, too big, too small, cut off, or broken in any way – speak to your web team about getting it fixed right away.
Are your icons retina-ready?
Icons are hugely helpful for helping users navigate on the smaller mobile devices. They are often used to replace lengthy words to save space – and since we respond quicker to visual stimuli than we do words it makes for a quicker viewer and user experience. Are your icons blurry rather than crisp? With the multiple resolutions that laptops, tablets, and mobile devices come in nowadays it’s a wonder anyone can get image formatting right. But if your web team is a team of experienced professionals they should be able to manage multiple resolutions. If your icons are clear on a laptop but appear blurry when viewed on a mobile phone, it’s a sign that your mobile site is unable to handle responsive images. With a little work, your icons can be retina-ready!
Can you tap to call?
Seems like a simple question, but it can make or break a user’s mobile experience. With the rise of smartphones, users are moving their viewing habits from desktop to mobile. Did you know 82% of Canadians use their smartphone for accessing the Internet? From checking out your store hours to booking an appointment, users are relying on the mobile experience for their digital needs. With a little bit of extra code, web developers can ensure that when a user taps your contact number it will call you directly. Similarly, they can also launch a map app to pinpoint your exact location. You can also set up click to call tracking that carries into Google Analytics. Make your client’s life easier by implementing these simple improvements on your responsive website.
Do images scale correctly with the content?
When you move from desktop to mobile, do your images look huge? Do parts of your images seem to be cut off? The mobile experience is a fluid environment and images designed for desktop consumption will wreak havoc on your mobile site. These images have been assigned a fixed position and will cause mobile mayhem on your beautifully crafted page.
Does the site change when you go into a horizontal orientation?
Depending on your developer, your site will be designed to reflow at certain dimensions. Here at Treefrog our main “break points” are desktop (1024 pixels and up), phone (768 pixels and 320 pixels). We use 480 pixels when a user turns and operates the device horizontally. We also include an in-between dimension that allows a responsive site to reflow naturally and adjust itself to the size of the device. If your site looks the same across all devices other than it looking bigger or smaller, then there is something wrong and the user-experience will likely not be ideal.
Do you have to insert content multiple times?
A content management system (CMS) like Treefrog’s LEAP will help minimize the time it takes to insert content. With a CMS, you will only have to input your content once, and it will seamlessly reflow on all your mobile devices. If you have to insert content for a mobile version in addition to your desktop site your likely do not have a fully responsive page.
Depending on the device the user may have different priorities and interests. A tablet has the natural ability to make reading easy and compelling. The size of the screen allows you to prioritize content and include a call-to-action button without sacrificing any space. The mobile device, however, is a different story. Users are often on-the-go and need to find information without the hassle of infinite scrolling. Guide users to the information they need by avoiding visual clutter and creating a dominant call-to-action button—remember space is at a premium here!
“Today’s web developers need to be mindful of user’s data plans, so load times need to be fast. Mobile sites must be tailored to be less data-heavy.”
Be respectful of data
Remember when you would click a link, go get a coffee, read a report, and still have time to rearrange your office supplies alphabetically before the page loaded? Thankfully those days are over, so unless you have dial-up (in which case, our sincere condolences), users expect lightning-fast service on all of their devices. Today’s web developers need to be mindful of user’s data plans, so load times need to be fast. Mobile sites must be tailored to be less data-heavy. Unnecessary clutter that could impede a streamlined experience must be removed.
Was the site tested on the latest devices?
If your site is on its way to becoming responsive be sure to ask which devices your web developers are using to test performance. Ensure that all users can access your site by testing all current mobile devices on all common browsers (Chrome, Safari, Firefox, and unfortunately Internet Explorer). The mobile experience should be seamless no matter which device is being used to access your site.
Is your site finger-friendly?
Today’s information is literally at our fingertips. Users interact with their devices using touchscreens on their phones and tablets—letting their fingers do the browsing. When designing a responsive site, keep in mind that fingers are a lot less accurate than a mouse pointer. A touch-friendly design includes buttons that are large and easily identifiable. Hover-style functions will have to be removed, as mobile devices are unable to detect these functions.
Given the countless ways that users can access the Internet, it is imperative that you provide them with a user experience that is seamless across all devices. Making your website desktop and mobile-friendly will keep your customers (and Google) happy, and keep you in business!