A responsive website is one that “responds” to the platform the visitor is using. Most commonly this is the screen or browser size. For example, if the browser width is less than a certain size, the site could be programmed to display everything in a single column — effectively creating a mobile-optimised website.
When Google started factoring in whether a website was mobile-optimised for mobile searches on 21 April 2015 many website owners naturally started to think about making their site responsive.
If you’re commissioning a new website in most cases your developer would make the site responsive unless there was good reason not to since access to websites on desktop computers now only represents part of your potential traffic.
Whether you have an older site that was built before the need for responsiveness or you are having a new site built the process is the same (though the latter is more time-efficient than the former).
When you view a web page you’re actually viewing two different things combined into a whole: the content and the style. The content is HTML (HyperText Markup Language) and the style is CSS (Cascading Style Sheets).
In a responsive website the content doesn’t actually change (sometimes small parts are shown/hidden but no need to get bogged down with that).
Parts of the CSS, however, can be set to only kick in when certain rules are met; browser or screen size was mentioned in the introduction. There are many types of rules such as height, orientation and pixel density (for retina displays).
At the core of making a site responsive is to go through each page and create rules and styles so that the site formats itself under certain conditions. Usually this is based around arbitrary mobile, tablet and desktop platforms.
On top of that, as space is limited usually navigation is changed to a format that uses up less of the page. For example, navigation items can be converted into drop downs and menus can be hidden off screen and shown/hidden by a button.
Finally, images need to be optimised as it’s a waste of bandwidth to show huge desktop images on a mobile. Conversely, mobile images would look pixelated on a large desktop display.
All of these aren’t particularly hard but they can be time-consuming on large sites. Also, the testing process is longer as you need to try everything it on multiple devices.
Do you need a responsive website? Call me on 07843 483 078 or get a free quote online.
Tim Bennett is a freelance web designer from Leeds. He has a First Class Honours degree in Computing from
Leeds Metropolitan University and currently runs his own one-man web design company, Texelate.