Responsive Web Design, SEO and Google

The 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, bookstore, 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 is not 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.