Last week, we wrote about why you should think about adopting a responsive layout for your website. The benefits are outstanding, and Google calls responsive design an industry best practice. But, as with any new technology, there is a high potential for blunders if you do not do your research. Here is a small guide on how to handle your adoption of responsive web design.
Don’t: Hide content
The old way of thinking about mobile sites was that users visiting your page from a phone wanted a “lite” experience. However, with powerful smartphones like the iPhone and Android becoming more and more popular, users are more likely to want to see everything on your website. A recent Google study verified this, finding 90% of users employ multiple devices to access the same content.
Do: Think about how mobile users browse your content
The ultimate goal of responsive design is to make your content accessible to more people. The best way to accomplish this is to think about how a mobile user browses your site. Consider what pages you would like to drive traffic to, and use Google Analytics to discover which pages your users visit the most, and make sure those spots are easy to access.
Don’t: Overload your website with plugins
There are number of resources webmasters can use to enhance their website, including jQuery, Javascript, and Flash. When designing for multiple platforms, it is important to remember to not go overboard with plugins. Some may not adapt to your responsive design properly or may cause a longer load time for mobile users, and Flash cannot even be displayed on mobile. Again, you do not want to hide any content that your users might be interested in.
Do: Optimize your site for faster load times
Since many mobile users access the web from low coverage areas or browse on expensive data plans, it is important to make your website load as quickly as possible. This means reducing HTTP requests by combining CSS files, combining Javascript files, utilizing CSS sprites, and optimizing images.
Don’t: “Set it and forget it”
It is important to remember that the web is still a fairly new technology, and responsive design is just the latest development in a growing field. Keeping an edge means staying on top of internet trends and deciding what techniques will work best for your website. While it is not ready yet, the next big thing in responsive design will likely be responsively scaled images. The W3C (the group that controls web standards) has an online community dedicated to developing a solution, and when they come to an agreement it will be important to decide what you need to do in order to stay up to date.