Best Practices for Designing a Responsive Website
With the official Google stamp of approval given to Responsive Website Design, we can be sure that it is the best plan of action for anyone who wants to make their Internet assets available to customers and potential customers using mobile devices (which according to the latest stats basically means everyone). In fact, Google’s formal stance on Responsive Website Design is: “Google recommends webmasters follow the industry best practice of using responsive web design, namely serving the same HTML for all devices and using only CSS media queries to decide the rendering on each device.” (Source)
So you’ve decided that implementing Responsive Website Design on your site is the smart move (congratulations!). What next?
Well, we’ve collected some of the industry’s most recommended “best practices” to help ensure that you know what to focus on as you set out to work with development/design partners in order to build your site.
Ditch The Old Design
Because responsive web design is so fluid, starting off by constraining yourself to old architecture (even if you are breaking it up) will really hurt you long term. It is likely easier and even less expensive to rebuild the site from the ground up based on the best practices for responsive web design. Besides, the entire industry has been moving in this direction and will continue to do so. If you are going to design a site to be more usable and visually appealing to customers and potential customers, have the good business sense to also realize that you want to leverage this new design to the highest degree possible.
Think About Mobile First
Even Google advises an initial focus on mobile users – which is understandable when mobile access accounts for 77% of all internet usage! When you are creating the design for your responsive website start with designing with the mobile screens in mind first, and then “build outward” and enhance the site for large screen laptop/desktop use.
Approach Content Visually
The content on your site should be airy and light (in quantity not in meaning!). Understanding that internet access is now almost completely mobile means understanding that your users need spare, well thought through content that informs them and does not bog them down.
Set Breakpoints According To Content
While you may be aiming to make things most pleasing for iPad users, or for the standard Android screen sized users, the true nature of Responsive Web Design is to allow it to “respond” as dictated by the hardware. Don’t be shortsighted and try and still design to specific sizes. After all, no one screen size has more than 20% of the market share. And with the imminent arrival of Google Glass (smaller surface) and smart glass on refrigerators (enormous surface), who knows what the future holds in terms of screen size? Design the breaks around your content, and you will guarantee that everyone who visits your site will find navigation to be intuitive.