Why your next site needs to be “Responsive”

We all know that we need to cater for people who access our websites on mobile devices, and that means offering a version of the site dedicated to small screens. Showing a tiny version of the normal website is no longer acceptable to most mobile device users, and they’ll swiftly hit the back button.

The short term solution is to have a “mobile version” of the site, which cuts in when a mobile device is detected. I’ve recommended this in the past. However, there are a series of reasons why this isn’t ideal, including the fact that some people may end up seeing the mobile site on their desktop computers (which is just odd), the need to maintain two websites, and an increase in loading time. In addition, there aren’t two browser sizes (desktop and mobile), there are dozens.

The 2013 approach is to create a “responsive” website design.

In essence, this works as follows. Your large browser window, desktop version of the site might have two or three columns, including menus, sidebars, etc. These will form a page with a standard (maximum) width. In a responsive design, when viewed in browsers narrower than that width, the columns will contract to fill the screen width, as will the images. At certain points, the whole page may rearrange itself, so that the columns stack on top of one another. Whatever the designer does, it’s with the aim of providing a legible display on any size device.

Why go to all this effort? Quite simply, it’s to ensure that every website visitor can clearly see what you have to say. I’ve spent the last few weeks, in my spare time, coding a website from the ground up using responsive techniques to fully understand how it works. It’s not just a “no brainer”, I’d say that it’s enough of a reason on its own for most companies to get their website redesigned.

To see responsive design in action (and I recommend you do so), visit the site below (click the image). If you’re reading this on a desktop PC, grab the bottom right corner of your browser window and slowly make the window narrower. With each movement, you’re simulating the browser window on a smaller screen device. Watch what happens.