A couple weeks back, Google annouced new standards for mobile website design. Among the practices identified on their help pages, responsive design has been singled out as the best option from a search perspective. Let’s look at how responsive design works, and how we can build sites to achieve maximum SEO performance on both the desktop and mobile environments.

A Quick Recap Of Responsive Design

If you’re new to the mobile space, you’ll find that there are three approached to mobile site design: 1) build a brand-new mobile site, 2) use your existing desktop website (which smartphone users can read using pinch+zoom), or 3) build a new website that looks good on both desktop and mobile screens.

Responsive design is a way of accomplishing the third option. Webpages can be equipped with style sheets that look one way on the big screen, and can reshape themselves to fit the small screen. The most sophisticated designs can adjust a lot of properties on the page, including fonts, icons, and menus.

The important thing to remember about responsive design is that it looks different to users on different devices, but uses the same page URLs and coding to deliver content to all users.

Travel Light Or Pack Everything?

The challenge with responsive design is that we now have to look at our desktop website in a new light. Obviously the visual differences will be significant, but these are handled by style sheets.

For a great example of this, look at Starbucks.com on your desktop Web browser, and then shrink the size of your viewing window. The site will literally transform before your eyes, collapsing elements and making them fit on a smaller screen. So visuals can be dealt with.

Coding is another issue. The code for this page never changes, regardless of screen size or device. Over the years, desktop webpages have become fully-equipped apps, with tons of extra code included to handle menu animations, tracking pixels, form submissions – you name it, it’s got it. We’re talking source code that often approaches or surpasses 100kb in size, with images easily tripling that.

From a desktop perspective, this isn’t anything to worry about. Broadband dominates the US market, and it’t getting faster every year. But if we try to experience this webpage on a mobile phone, we’ll have issues. That 300kb download is now being pushed through a 3G or 4G connection. At their best, these networks can handle 300kb, but in busy neighborhoods or during peak hours, they can slow to a crawl.

It’s a throwback to the early days of dial-up Internet, when you had to account for every second of download time. Impatient users, forced to wait for a long download, can lead to high bounce rates and lost business.

Tools like the Blaze.io mobile speed test can help you visualize download times, and identify elements that could be downsized or consolidated.

Slimming Your Website Down

To reverse the trend of ever-expanding code is impossible, because the functionality that comes with it is too useful to forego, even for mobile users. But there are steps that can be taken to minimize the impact on mobile users.

As a happy side effect, these suggestions can also speed-up the desktop experience, reducing hosting costs and improving response times:

  • Resize images the right way. Style sheets can give you the ability to shrink a photograph to fit the mobile screen. But the photo’s image file will still be as heavy a download as it was for desktop users. Make sure that your style sheets select a different image file for mobile users, one that is pre-shrunk size-wise, and pre-compressed in terms of kilobytes. 50kb is an ideal to shoot for with photos; 5k for icons and buttons.
  • Consolidate external files. All that functionality is usually powered by an array of external scripts that must be called into the webpage. The size of the files is one consideration, but the sheer quantity of files can also be an issue. If possible, consolidate all CSS into one file. Same with JavaScript. Fewer downloads mean fewer server calls and less waiting for mobile users.
  • Consolidate styles. Webpages have become very sophisticated graphic design documents, with rules dictating every font, margin, and border. Often, these styles have been developed over time, and often include redundant information info that could be consolidated. For example, if every element on your page is rendered in Verdana, that can be applied at a macro level, and not repeated with every element. Clean styles result in a smaller style sheet.
  • Go light on the libraries. Standard JavaScript libraries like JQuery can be a huge help in developing functionality. But in many cases, you’re using only one or two functions and downloading an entire library of tools that aren’t used. If isolated functions are needed, copy them into your consolidated JS file and avoid the lengthy download.

With these changes in place, you can have a responsive design site that continues to satisfy the desktop users, while providing a fast-loading experience that will keep mobile users happy.

Opinions expressed in the article are those of the guest author and not necessarily Search Engine Land.

Related Topics: Channel: SEO | How To: Mobile Marketing | Mobile Search | Search Engines: Mobile Search Engines | SEO: Mobile Search

Sponsored


About The Author: runs Skypromote, an SEO agency in Boston and NYC, and has been doing search since 1998. You can follow him on Twitter @SherwoodSEO.

Connect with the author via: Email



SearchCap:

Get all the top search stories emailed daily!  

Share

Other ways to share:

Read before commenting! We welcome constructive comments and allow any that meet our common sense criteria. This means being respectful and polite to others. It means providing helpful information that contributes to a story or discussion. It means leaving links only that substantially add further to a discussion. Comments using foul language, being disrespectful to others or otherwise violating what we believe are common sense standards of discussion will be deleted. Comments may also be removed if they are posted from anonymous accounts. You can read more about our comments policy here.
  • http://twitter.com/iology I-ology

    Great article! Responsive is our top recommendation when redesigning. Clients often times come to us with their mobile goals and responsive is a great way to build to achieve those goals in an innovative and cost-effective way. If you’re interested in seeing another responsive site, we just built our new Website in responsive as well: http://www.i-ology.com

  • http://trafficdigital.com/ Mark Hughes

    Interesting article with some great tips. Perhaps I’m wrong (not a developer) but the Starbucks site goes against your advice of pulling in specific images depending upon the screen size – it just seems to shrink using the same image.  This site is a pretty good example of a site that breaks down extremely well when you resize your browser screen – http://trafficdigital.com.

  • http://isabosler.de/ Isabella Bosler

    Interesting article! Responsive design is also what I’m recommending to my clients.
    What I’m just still wondering is how responsive websites will rank in mobile search. Google writes that responsive web design is their “recommended configuration” and “Google can discover your content more efficiently as we wouldn’t need to
    crawl a page with the different Googlebot user agents to retrieve and
    index all the content.” In terms of ranking in mobile search that sounds a bit contradictory to me. What do you think?

  • http://www.facebook.com/people/Michael-Martin/508010100 Michael Martin

    Agreed, responsive design on the same URL is a great first step, but alone is not Mobile SEO.  I write about this in an upcoming Search Engine Land post that addresses your question.

  • http://lazycash1.com/ Makemoneyonline.com

    my friend’s mother-in-law makes $85 every hour on the computer. She has been out of a job for 6 months but last month her paycheck was $19177 just working on the computer for a few hours. Read more her

    ⇛⇛⇛⇛► (Click Over My Name For Link)

  • http://lazycash1.com/ Makemoneyonline.com

    my friend’s mother-in-law makes $85 every hour on the computer. She has been out of a job for 6 months but last month her paycheck was $19177 just working on the computer for a few hours. Read more her

    ⇛⇛⇛⇛► (Click Over My Name For Link)

  • Donald LeGoullon

    Starbucks site has flash – perhaps this is eliminated in a true mobile device display but with Adobe’s new stance of mobile Flash it does not seem good to utilize Flash, and there are good alternative coding implementations giving nearly the same results such as:  http://www.threeriversregatta.net

  • http://twitter.com/msadiq303 Mohammed Sadiq

    I think this wonderful tips to tune-up responsive website to improve SEO. Thanks for sharing this post.

  • http://www.spinxwebdesignnewyork.com/ Web Design NYC

    Yes, these tips are
    very nice. It is very important to redesign your website which can easily use
    on the mobiles too by the users. Responsive is the great way to redesign your
    website by spending less with advantage to get good preview of website.

     

  • dave

    Responsive design is recommended by Google because it’s easier for them to track and understand one page rather than .mobi or sub domains. I don’t believe it’s the best solution for webmasters though.

    And there is also the question of does the viewer want responsive design? Many I speak to want the whole site and are more than happy the pinch and enlarge, it’s not difficult to do after all. And when G show how your site looks on a mobile they always show the vertical view not the horizontal. Why?

    A sports resulot site can look OK on 320 px but a more complicated site can be reduced to the absurd at that width.

    And nonone knows where the market is going – design your site for 320 px and in two years time you MAY find that anyone who will click on an ad is using an I-Pad type device.

    There are so mkany variables and unkowns at the moment

  • http://www.facebook.com/people/Manfred-Smellington/100003131475326 Manfred Smellington

    Responsive design *is* the whole site, that’s a key point of it especially relative to a separate mobile site. I realize you probably mean some want to see the full width layout, but ideally with a responsive approach equal care is given to each breakpoint so there isn’t such a thing as a “full site” anymore, just one set of content structured in a flexible and hopefully optimal way. Also regarding designing a site for 320px, that is not part of the responsive philosophy either. You adjust your layout based on where it breaks (breakpoints) and throw any ideas of common screen size out the window. In any case, it shouldn’t be too hard to include a “full site” link that forces the full width breakpoint, but “full site” links are probably going to look like dated relics a la a “Get Netscape” button in a couple of years as people continue to do more and more of their browsing on their phones and become more accustomed to the layout patterns that work on phones (which are still emerging).

 

Get Our News, Everywhere!

Daily Email:

Follow Search Engine Land on Twitter @sengineland Like Search Engine Land on Facebook Follow Search Engine Land on Google+ Get the Search Engine Land Feed Connect with Search Engine Land on LinkedIn Check out our Tumblr! See us on Pinterest

 
 

Click to watch SMX conference video

Join us at one of our SMX or MarTech events:

United States

Europe

Australia & China

Learn more about: SMX | MarTech


Free Daily Search News Recap!

SearchCap is a once-per-day newsletter update - sign up below and get the news delivered to you!

 


 

Search Engine Land Periodic Table of SEO Success Factors

Get Your Copy
Read The Full SEO Guide