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.”

Poll

What is your company's mobile web strategy?

Loading ... Loading ...

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:

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.

Design as a Competitive Advantage View Reading List

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.

Comments
  • http://www.tpqprint.com David Arenas

    Thank You, what a great article. I love it, and I rarely say that. It feels good to be richly informed in a 5 minute read. Thanks Again.

  • http://www.pixelflyte.com/ pixelFLYTE

    Great article. I think we’re now getting to the point where designing a website to be responsive is a foregone conclusion. Great tips!

  • kittymartyr

    I’m glad to know that the work I did learning basic responsive design is being rewarded by Google.

  • http://www.OahuRE.com/ Bryn Kaufman

    So did Google search for responsive websites months ago and on the 21st they will release these new results, or if my site is responsive before the 21st would I be OK?

    • anniesexton

      I don’t see why not. Keep in mind, this is only ONE more factor in a much larger equation, so if your site isn’t perfectly responsive by the 21st, the world will not end. :)

      • http://www.OahuRE.com/ Bryn Kaufman

        Thanks, I did make most of my website mobile friendly to pass Google’s test, and I was pleased to find the user experience is better now on a phone. Where around 15% of my visitors were already using my website with their phone because it works, they should now like it even more.

        Some of my changes also work better on the Desktop.

  • Pete Bruhn

    “More than ever before, responsive design can boost your search ranking”. This is flat out lie. Google’s Gary Illyes has stated on numerous occasions that responsive design does not get a ranking boost. Google recommends responsive for the average website, but that doesn’t mean you are going to be in trouble if you are using dynamic serving or mobile specific. There’s a reason why ecommerce sites like lowes, home depot, amazon DO NOT use responsive design, it’s because you can create a better user experience without it.

    • anniesexton

      That’s a fair point about mobile specific sites (m.dot sites), but I believe the general idea that Google is getting across is that it’s becoming more important to cater towards mobile users as well as desktop users, which can be accomplished with the either responsive design or m.dot sites.

      • Pete Bruhn

        Totally agree that all Google wants is to provide accurate results that provide a good user experience. I just want to reiterate that you do not need to be responsive in order to be mobile friendly. This serves as a great guideline and explains the different types of mobile technology – https://developers.google.com/webmasters/mobile-sites/mobile-seo/

        • anniesexton

          This is a good clarification to make, Pete. Responsive design is not the only solution to making sites mobile friendly.

      • http://www.OahuRE.com/ Bryn Kaufman

        The m.dot sites I have used are all pretty bad, including Google’s for their Adwords, and Amazon too.

        They are all severely limited and a frustrating user experience that normally stops me from using it further.

        Google should take their own advice and make their Adwords interface responsive and do away with the m.dot site.

        You would think Google and Amazon have enough money to develop a decent responsive site that feels as good as their Desktop site.

        • anniesexton

          I’m inclined to agree with you, I’m not the biggest fan of m.dot sites personally, although they can help with optimization the size of your website and help with page load time.

  • http://www.creditflare.com Credit Flare

    I’m doubting you’ll get a “boost”, but you may see SERP increases simply because other sites in your search may not have implemented a mobile friendly design, and they’re being penalized. Google is rarely about rewarding good things. Generally they punish bad things, and other sites benefit from this.

  • John Kennedy

    Does responsive design have an advantage over an m.dot site in regard to this topic?

    • anniesexton

      As far as resourcing goes, building a site that is responsive can most likely save time and money, because you’re only having to build one site. That being said, an m.dot site, being built specifically for mobile devices, can be especially optimized, like by loading in smaller assets, etc. I think the trend is favoring responsive sites in general though, as device sizes and resolutions vary so much these days.

  • nonagon1

    I wonder how Google programmatically determines if a page/site is truly mobile friendly. Responsive styles and javascript might be present, but the site could still have a poor implementation. If Google’s algorithm merely detects these methods, it might not be accurate. If it goes deeper than mere detection, as a UI/UX guy I’d like to know what exactly it looks at. A responsive checklist then could be built to ensure search compliance.

  • robax

    So the author’s own article… yes, just this one little article above, loads with 95 requests in 3.6Mb. Check out real content heavy responsive sites such as the Huffington Post and you’re looking at around 250 requests. This is the dirty secret of mobile responsive frameworks and the current design fashion. It’s just a joke really.

    • Mike Donahue

      Don’t blame responsive or the framework, blame the coder that did a poor job implementing it.

  • James Bywood

    Great stuff. Well written for the none techies amongst us. Thanks. Shared.

  • JulianPope

    peanuts

  • Mike Donahue

    anniesexton You open with “Google is introducing an update to their algorithm on April 21, 2015 which will prioritize mobile friendly sites toward the top of search results.” which is incorrect. What Google actually says, and you say it a couple paragraphs later, is “This change will affect mobile searches in all languages worldwide and will have a significant impact in our search results.” Huge difference.

    Mobile-friendly sites will be boosted when mobile devices are searching, this change will have no bearing on your results when searching from a tablet or desktop. People needs to stop trying to scare the crap out of others with this kind of misinformation. The change is important, not fatal.

    Responsive is no more important now than it was in 2010. We’ve always needed sites that were accessible from any device. What we need now is for people to spend more time optimizing their responsive sites.

  • Phillip Maddick

    Great article. Thanks guys! Now where do I get me one of those pixel pads?!

  • http://regressivewatch.org/ James Threadgill

    M. sites and responsive only are both inadequate. The strongest sites will be those that customize the presentation to the device w/o redirects and doubled content. The issue with responsive only are the sacrifices necessary with any one size fits all approach. Separation of content from presentation, then, is the best approach. HTML templating has been around a very long time yet too few take advantage. using HTML templating you can tailor the presentation to the device using the same content.

  • http://www.thefas-solutions.com/ Ryleigh Ian

    Hey! Great article about new google updated. I hope every one is protected up till now particularly the SEO teams.

    • anniesexton

      Glad you enjoyed it!

  • http://www.webforcefive.com.au/ Eliza Lodewyckx

    “Make performance your numero uno goal” I agree with this. Nowadays, many users uses their mobile devices to search for your website. Their expectations are that if they find your website it will be easy to find what they are looking for in a fast and convenient manner. Mobile friendly websites are even important with the new google algorithm.

  • http://beeeees.com Bethany

    Great post!

    • Annie Sexton

      Thanks Bethany!

  • Pingback: 2015 Week 30 Digital Marketing Roundup - Equip Interactive()

  • Pingback: How to Measure Content Performance in 5 Minutes a Day()

  • Pingback: HTML5 Weekly No.185 | ENUE Blog()