In a nutshell, responsive web design is a method of designing websites so that they “respond” to the size of the screen you are viewing them on. A recent glance at the Google Analytics dashboard of one of our clients showed that a whopping 70% of their traffic was coming from mobile devices, particularly iPhones. When faced with these kinds of statistics, it’s in every businesses’ best interests to display their site differently depending on the device their users have chosen to browse with. Optimizing the view for smaller screens eliminates the need for pinch zooming, makes fonts nice and legible and adds the ability to modify menus and navigation elements for touching rather than clicking. In short – it makes your website more user friendly.
As with all web solutions though, there are many ways to achieve this, and of course this leads to the inevitable question of “which method is the best”?
While I’m not going to claim that any method is be all and end all of responsive design, I will put my hand up in favour of grids. We’ve been using grids for a while now and have completely stopped developing websites without them because they just work so well. The concept behind a grid based system is simple enough – design your website to fit into a column and row based layout, then set the width of the columns with percentages rather than fixed pixels. This way the browser resizes the columns on the fly depending on the user’s screen size. By using ems for font sizes rather than pixels, fonts will also scale with the screen’s size. Because there is no separate “mobile” site, the user will never accidentally land on the desktop version and have to switch to the mobile one, or vice versa. The site will just work the way it does, depending on the user’s screen.