Google is introducing an update to their algorithm on April 21, 2015 which will prioritize mobile friendly sites toward the top of search results. Responsive design is more important than ever.
Google’s always upping the ante.
Google’s always changing the face of the Web and how we interface with it.
And they always keep us on our toes.
On Feb. 26, Google announced a new search algorithm which ranks non mobile-friendly sites lower in the results queue.
Here’s What You Need To Know:
1) As of April 21, there will be more mobile-friendly websites in your search results. Google Webmasters write, “…we will be expanding our use of mobile-friendliness as a ranking signal. This change will affect mobile searches in all languages worldwide and will have a significant impact in our search results. Consequently, users will find it easier to get relevant, high-quality search results that are optimized for their devices.”
2) More than ever before, responsive design can boost your search ranking and user satisfaction. According a recent Comscore report: Most digital media consumption growth, over the past four years, occurred on smartphones and tablets; up 394% and 1,721%, respectively. And, 31% of all traffic to the top 10 digital properties were mobile-only visits.
With the recent announcement from Google in mind, here are some tips for UX Designers and Developers alike to improve the responsive experience on your websites.
Two Tips for Better Responsive Design
When designing and developing for mobile users, there are two important facets that should drive your decision-making.
1. Usability trumps aesthetic. When developing for mobile sites, because screen real estate is limited, it’s important to focus on the ease of use over a pretty interface. It may not make sense to have every single navigation item visible on smaller screens. You’ll need to prioritize the elements that are most vital and make them the most prominent and easy to find.
2. Make performance your numero uno goal. Despite how fast our mobile devices are these days, it’s still important to build for slower connections. Let’s not forget that “fast mobile devices” are limited by the networks to which they connect. 4G is restricted to modern countries in dense urban areas. Most of China is covered in 3G, and the same goes for India and many other developing nations all over the globe. Regardless of the connection, when users are on the go, laggy websites will be abandoned. Load time should be short and snappy.
Examine The Whole User Experience
Incorporating these fundamentals for a mobile-friendly experience will help your position in Google’s search results.
Simplify your navigation
E-commerce sites tend to have large and complex navigation schemes to allow shoppers to sift through their inventory in a multitude of ways. But even a robust menu can be presented using clear, predictable labels that provide much needed context and next-step choices. Bonobos is one retailers who has nailed their navigation.
Having a great drop-down menu is key. Keep main navigation items at a minimum, which can be determined by using the questions above to understand what your clients and customers need most. Try a hamburger menu. Remember, your users should be able to navigate your site just as simply on a smartphone or tablet, as they can on their desktop.
Optimize images and reduce load-time
These two notions are unique and separate, but they can intrinsically affect one another. If you can keep image sizes at 200KB or less, load time will improve dramatically.Not only does the size of your images matter, but also the quantity. To reduce the number of times you ping the server to retrieve an image, there are two things you can do:
- Sprite Sheets: This is basically one, big image that includes all of your relevant icons, buttons and small images. Using CSS, you crop-in around the image that you’d like to use, which saves the browser the extra work of sending requests to the server for each image. Another fun aspect of sprite sheets is that you can save them as SVG files, which allows your images to look high quality on any screen resolution.
- Reduce HTTP requests by concatenating your scripts and stylesheets.
Specific Recommendations For Better Responsive Design
When it comes to being mobile-friendly… performance is the new black.
Design for fingers. Those little phalanges are the things that are going to steer users around your site. Picture my Uncle Thomas who’s a big construction guy. His fingers look like kielbasa sausages. Imagine him trying to navigate on an iPhone. Give your clickable elements sufficient breathing room. Apple’s iPhone Human Interface Guidelines recommends a target size of 44 pixels wide by 44 pixels tall.
If you’re adding in icons and/or logos, try employing SVG (vector) images. They’re crisp and clear and they’re great for hi-res/retina screens because they can scale infinitely and presented at any size without quality loss. You wouldn’t want to use these for photographs though.
Doubling image sizes for high-res screens will ensure that your photographs and more elaborate images look sharp on high resolution screens (“Retina”). Be mindful of load time by making sure your hero image is the one that looks the most fantastic.
All these responsive design choices can help improve load time and performance, and like we said, that’s the key to making a site not only mobile-friendly, but user-friendly, too.
April 21 will be here before you know it, so we ask you: Is your site responsive? Are you going to choose to build an m.dot site instead of a responsive one? Are you ready for Google’s new algorithm?
Tell us what you think of this change. We’d love to get a discussion going on the implications for users, developers and designers.