The desktop is dead!…
or haven’t you heard of responsive design? Not only are laptops powerful enough to handle business needs, now people are using their phones, tablets, and a few enterprising souls swear by their iPods.
One-Size Websites are Losing Ground
It used to be that if you had a website, and if you were really savvy, you built a mobile version. That sort of ‘single use’ design is quickly losing popularity, and for good reason. Not only can the technical side be a nightmare, a lot of users aren’t fans either.
The solution can be Responsive Design, sometimes called Fluid Layout. Responsive Web Design means that a website has used CSS3 and HTML5. The server always sends the same HTML code to all devices and CSS is used to alter the rendering of the page on the device using media queries.
Not only is this better for user experience, there is also an SEO benefit. By encouraging webmasters to develop one cohesive web experience that adapts to the platform, Google is able to preserve many of its link algorithms and should be able to reduce or eliminate the burden of evaluating mobile and desktop versions separately. Google algorithms can automatically detect this setup if all Googlebot user-agents (both Googlebot and Googlebot-Mobile) are allowed to crawl the page assets; CSS, javascript, and images.
Instead of regimented pixel widths or percentages, Responsive Design uses a fluid grid that manages elements in terms of proportions. And because end user needs are the name of the game, extra care is taken to ensure that the mobile user sees the most important elements first— without restricting access to the rest of the site features, as is the norm in mobile sites. Users are demanding as much access on their phones as they would have on their desktop.
Using responsive web design has multiple advantages, including:
- It keeps your desktop and mobile content on a single URL, which is easier for your users to interact with, share, and link to and for Google’s algorithms to assign the indexing properties to your content.
- Google can discover your content more efficiently as Google wouldn’t need to crawl a page with the different Googlebot user agents to retrieve and index all the content.
There’s plenty of evidence the web is going mobile, and the variety of web-accessible devices is exploding. It makes little sense to create different versions for different screen sizes. Take the time build it with usability and faster loading speedsin mind, and reap the benefits of higher engagement. Below are just a few sites you can visit for experimenting with responsive design.
- Twitter Bootstrap: Great toolset for building responsive sites and landing pages.
- Net Magazine: Check out Net Magazine’s top 50 tools for Responsive WordPress Design.
- Themeforest: WordPress templates with hundreds of responsive designs including reviews.
Have you ever been frustrated by the limitations of mobile websites? Have you used Responsive Design/Fluid Layout techniques? What are your thoughts? Let us know in the comments!