September 11, 2014
Responsive Website Design – Making The Right Choice For Your Business
Responsive Web Design It’s the current trend in the web design world that you’ve probably heard of, yes responsive design. Responsive HTML is programming that simply responds uniquely depending on the users device, resulting in an appropriate display for the screen that they are using to view content. For us web developers, this means the painful process of hours spent designing for specific screens is potentially over. The idea is that responsive design lets webmasters create one cohesive site that works over all the current platforms, desktops, tablets, smartphones and everything in between. A quick view and it would seem responsive HTML must be the new obvious choice for all web development, enabling you to reach every screen using one piece of code. Depending on your audience, product and site, however, it could be more sensible to tackle each screen individually. The most important discussion taking place are based around the effect on SEO: Is responsive web design A positive or negative for SEO? There are arguments for both and it ultimately depends on you. Responsive Web Design the details Well written responsive design is essentially 3 key pieces of technology. 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. Responsive HTML Advantages Besides the obvious flexibility, responsive design can save money by allowing developers to create one design site, rather than multiple sites and apps to cater to all manner of screens and devices. There are certainly reasons to create native apps but you need to first consider your target audience and what they are searching for. If you offer services that users need on the go – like a restaurant, shop service, salon or hotel – a responsive experience eliminates the need to download a specific mobile app, this is more likely to lead to more customers because of the ease and speed. Since mobile browsing is now the preferred platform over the desktop for searches this is a big breakthrough.. 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. So when is responsive design not ideal? 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. It isn’t quite black and white at this point. Speed is one of the drawbacks of responsive design right now. Because this kind of programming generally requires more code, responsive sites are often slower loading. Speed is a key SEO ranking factor, as Google gives preference to all aspects that create the best possible user experience and speed is a key factor within that. Slower load times could also negatively affect your site’s bounce rate and conversions, picked up by Google. Current research shows that mobile users aren’t the most patient and that loading times will be crucial, so it’s imperative that 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 for example – then using responsive design for multiple screens would not make much 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. Content is quite important when you look at responsive design from this angle. 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.