Featured

Responsive Web Design, SEO and Google

spn_exclusive1The Great Debate between Responsive HTML and Native Applications

By now, you’ve likely heard scads about responsive web design, one of the more important and trendy technologies currently on the scene. Responsive HTML is programming that simply responds to the user’s device, delivering an experience appropriate for the screen they are using to view the content. For developers, this means the days of painstakingly building sites for specific screens is potentially over, as responsive design lets webmasters create one cohesive site that works on desktops, tablets, smartphones and everything in between.

At first glance, it would seem responsive HTML must be the new obvious choice for all development, as it enables you to reach every screen with one batch of code. Depending on your audience, product and site, however, it may still make more sense to tackle each screen separately.

The big question though centers around the ever-present SEO factor: Is responsive web design good or bad for SEO? The answer: both. It all depends on you.

Responsive Web Design in Detail

There are essentially three key pieces of technology woven into well-written responsive HTML.

1) CSS3 Media Queries – These are the elements that identify the actual screen size and device a visitor uses to access your site. They test conditions on each device including minimum and maximum height, resolution, orientation and aspect ratio. These media queries allow you to determine which CSS style should be displayed for any given device; a critical step to achieving responsive design.

2) Fluid Grid Layout – These parts of the code are the magic that allow the page to expand or shrink dimensions so that it stays within the viewable area, without the need to scroll. Fixed-pixel sizing is rendered obsolete with this method, allowing the design to freely adjust itself by percentages and dynamically change position without breaking any other area of the site.

3) Fluid Image Scaling – Just as above, but for images. When images are sized using CSS in this fashion, the pictures work in conjunction with the fluid grid layout to achieve maximum design flexibility.

The Advantages of Responsive HTML

Besides the obvious flexibility, responsive design can save significant dollars by allowing developers to create one site only, rather than multiple sites and apps to cater to all manner of screens. While there are certainly reasons to create a native app, you need to first consider what your audience is looking for. If you offer services that users need on the go – like a restaurant, book store, salon or hotel – a responsive experience eliminates the need to download a mobile app, and will likely land you far more customers because of the ease and speed. Since mobile browsing is surpassing desktop usage across the globe, this is a major windfall.

It used to be SEO experts touted the responsive method as a superior choice because of the complexity of multiple URLs, but in recent months, Google has changed the game. Up until recently, Google was not able to consolidate multiple site URLs for mobile and desktop experiences and equate it to the same business. That, however, has now changed. If you have one URL for your desktop site and another for mobile, switchboard tags now allow Google to understand which site should appear when, and your URL structure matters not. One URL may still feel like a simpler tactic for your business, but Google will find you either way.

When Responsive Design Is Not the Best Choice

Last June, Google did declare that responsive HTML was their development preference, but they clearly stated they will still support dynamic serving and mobile URLs. Many wrongly assumed that because responsive is Google’s “preference,” it’s the only way to go. Google themselves still develop native apps for tablets, mobile devices and desktops, so that’s your first clue that there are still other factors to consider.

One of the biggest drawbacks to responsive design right now is speed. Because this kind of programming generally requires more code, responsive sites often take longer to load. Speed is a key SEO ranking factor, as Google gives preference to all aspects that create the best possible user experience. Slower load times could also negatively affect your site’s bounce rate and conversions. There’s a lot of research that shows mobile users are an impatient bunch, so make sure your responsive site still falls in reasonable load time parameters, and watch that you don’t lose customers because of speed.

Likewise, if your audience primarily uses one screen only – maybe your site revolves almost entirely around a mobile app, like FourSquare – then using responsive design for multiple screens wouldn’t make sense. Choosing the responsive route could also prove damaging to your SEO results if you only consider keywords and categories that desktop visitors will use, and not cater to mobile as well. True, this is more an issue with content than the code itself, but it’s easy to leave one audience out when you’re consolidating your efforts.

Your Key Considerations

The biggest factor in determining if responsive design is right for your business: your audience. If your customers are primarily smartphone users, they have very specific needs that would likely only be met through a mobile-centric experience.

On the other hand, if your demographic will access your site through screens of all sizes, and you are looking for a faster, easier and less expensive development process, responsive HTML is just the ticket.

No matter what you choose, you will obviously need to give heavy consideration to the unique SEO factors inherent with each solution. Responsive HTML isn’t intrinsically good or bad for SEO, especially now that Google consolidates link equity for equivalent mobile URLs. Again, it’s about your customers. If you find keywords and categories are similar across screen sizes, by all means, consolidate and enjoy responsive benefits. But if you need to consider your demo on a screen by screen basis, you may save time and money with responsive design, but the SEO and individual product losses could be catastrophic.

Yes, the current hype around responsive web design is certainly warranted. It’s a fantastic technology that is making life better for developers and users alike. But just as with any technology, it’s certainly not one-size-fits-all.


Producer, game designer and freelance writer, Tina Courtney-Brown has been a bona fide web fiend since she discovered Poetry.com in 1994. Tina’s fortés include all aspects of online business, social media, marketing trends, alternative health, digital production and many more. She’s a passionate truth-teller, a sincere advocate for the environment, and an obsessive dessert creator. Learn more at her personal website, or find her on Facebook.

About the author

avatar

Tina Courtney

Conscious online marketer, web executive, and multi-faceted writer Tina Courtney has been creating and fostering online innovations since 1996. Tina has assisted many clients in maximizing online production and marketing efforts, and is a staff writer for SiteProNews, one of the Web’s foremost webmaster and tech news blogs. She’s produced and marketed innovative content for major players like Disney and JDate, as well as boutique startups galore, with fortes including social media, SEO, influencer marketing, community management, lead generation, and project management. Tina is also a certified Reiki practitioner, herbalist, and accomplished life coach.  Learn more on LinkedIn, Facebook and Google+. Visit My Google+ Profile

32 Comments

Click here to post a comment
  • I agree with your points that the combination of these 3 aspects will definitely help you create a website that is not only creative but also effective and moreover it will reach the public in a quick way through the SEO efforts.

  • Very Nice and informative article about responsive HTML,

    current trend is also because People are going for apps integrated by web services e.g. HTML and others, Easily downloadable on their devices by which any one can see in free time offline. 🙂

  • It is rightly said. One killer post can prevail for a longer time than many poor quality posts. Web-enabled multichannel commerce is evolving quickly, and consumer shopping behavior is changing rapidly. Thanks for the share.

    • Hey Shilpi,

      Your right, it took me a long time to actually figure this out.

      Thanks,

      Christopher Pontine

  • I agree with the points raised here by the author. Responsive HTML can help website browsing from different platforms easier.

  • Good article. I never thought about the SEO side of things as almost all of our sites are now responsive. That said in most cases we haven’t found speed to be in issue. In fact by targeting mobiles we pay even more attention to speed optimization to assure the best mobile browsing experience.

  • I am seo service provide i have read your article i want to know that why Responsive websites are not getting fast Google page rank and alexa rank ?

  • The reduction in speed factor is not really that much. It does not slow down the website by 30 sec or so. CSS loads fairly fast when compared to the web pages. It’s the images that take awfully lot of time to load. So if you really want to reduce the time taken to load the web page, then focus the images.

    If you really want to tweak CSS to the maximum possible level & get the most out of it, then use the Bee CSS Cleaner Minifier. Simply copy your existing CSS and paste it in the box on the left. Then hit the “Minify CSS” button. It will minify your CSS and give you the output in the box on the right.

    Note that the minified CSS are harder to read. So each time you make a change to the CSS file and you wish to save some bytes off of it, you will have to repeat the same procedure. But it’s worth the effort if you do spend some time on it.

    Hope that helps anyone who wants to tweak their CSS to make it load fast.

    If you want more free Web Design & Web Development tools, check out
    Extreme Web Designs Labs

  • Nice article, Users prefer responsive sites 3 to 1 i heard somewhere?? But for the SEO side of things, HTML5 can help LOCAL SEO, there are some good articles out there about HTML Local Address tags, also Yoast just came out with a new plugin specific for Local SEO.

    Good Luck Everyone!!!!

  • Hi Tina,

    Great points! I saw another article recently that touched on all the different type of mobile options to consider. Check it out here! It’s pretty thorough…

  • I really enjoyed reading this. We decided on mobile responsive design for most of our sites but this article really may tip the scale in favor of a separate native mobile website design.

  • Hey there, Great website you have – Congratulation!

    I’m very new to this online business so I don’t know so much as you guys.

    I read couple of blogs like John Chow and couple alike. M. Chibuzor(content marketing expert) said an article must have at least 1000 words to have some weight. I will read read and read hope I find the answer some day what SEO all about.

    Bets regards I. C. Daniel – Romania

  • I completely agree with this article. The biggest negative factor is a higher bounce rate due to sites taking too long to load. Many of us want the site to load almost instantly on our mobile devices… it seems when we want something, we want it NOW. No matter where I go (coffee shops, super-markets, anywhere) I see people get on their phone, type in a URL, wait about 10-15 seconds tops, then say ‘This is taking way too long, I’ve got better things to do than wait for this website to load’… Something all of us never want to hear from our potential clients/customers.

  • We switched everything to responsive a couple months back. Everything is moving in that direction, seemed silly not to. Long live rows and columns, eh?

  • Now it’s very useful that our websites are design according to mobiles version because majority of users are using there web browsers for visiting webpages.

    • Yes thats what i said Hammad, btw my brother name is Hammad also Nice to see you commenting here. People are going Mobile and being Smart using their smart phones to Browse internet and even Buy/purchase products more often using them.

  • We have just changed to Responsive design. I don`t notice any real difference to site speed. Certainly nothing that will effected google`s decision on ranking. I would not get to hung up about site speed using responsive designed sites. Remember a users experience of viewing the website is far more important. This is something google is always suggesting in their guidelines.
    My site has recently improved ranking since changing.

  • great point about your market and if it is primarily mobile then maybe you only need a site for this.

    but in my opinion responsive is the way to go.

    sites should be developed in a mobile first fashion and use of images that are severed depending on screen size should be used. Adaptive images is one of these technologies but there are many others, note I have no affiliation to adaptive images but is free technology like many others.

    • would like to add that using mobile forist and an adaptive image technology and other code should serve up you website fast on any device, mobile , tablet or desktop,

  • Responsive Web Design has SEO benefits to consider when deciding how to adapt a website for mobile platforms. It will highly target the mobile audience and if you want to strengthen your mobile presence, then a responsive web design should be in your to-do list. Thanks!

  • We have been doing nothing but responsive websites for over 2 years now. As 55% of people online use mobile devices as of Jan 2014 it is not even a question any longer, it is just a matter fine-tuning to make everyone happy. Btw, some people still don’t get it – we have two customers with responsive sites who keep talking about their “mobile” site, like it’s a separate thing.

  • I was fortunate to jump on the responsive bandwagon early on. From an SEO perspective responsive makes perfect sense….Google owns android….Android is mobile…end of story 🙂