If you've heard of it, you've probably also been told that it's a must-have feature when commissioning a new website, but what exactly is a responsive website?
Put simply, a responsive website is one that adapts its layout, size and appearance to different screen sizes and shapes. It's what keeps it looking good and working well no matter what you view it on. If a website is not designed to be responsive, then when viewed on some types of device the design or the content might break. At other times it may work but do so completely inappropriately for the given device, making the website hard or even impossible to use on some screens such as smartphones or tablets.
Traditionally, websites were built for viewing on a desktop computer, and to be navigated by clicking the mouse. While that's still the case to a degree, more and more people are using tablets, smartphones and other devices to view websites.
On traditional websites, the size of buttons and style of navigation works well with the tiny, accurate mouse pointer. Nowadays however, for more and more people, the finger has replaced the mouse, meaning we're pointing and selecting much less accurately than before. Couple that with the tiny screens of many modern smartphones (at least when compared to a desktop screen) and you'll see why websites these days are designed somewhat differently.
On the other hand we can't just go and design all websites solely with enormous buttons, because some people do use a desktop PC or iMac to surf the web. This calls for a type of website that can be all things to all people. Allow me to introduce you to your new best friend, 'Responsive Website Design'.
One of our recent website designs, viewed on a Full HD desktop computer screen, such as on a PC, Windows or iMac. It looks and works well with mouse navigation on a big screen like this!
This is what that website would look like on a mobile smartphone without adapting it to the smaller screen. Note the illegibly small text and tiny menu buttons, completely impractical for smartphone navigation with fingers on a small screen.
Instead, here is a responsively-designed website. This is the same website design as in the previous examples, but this is how it really adapts to the small screen format of a mobile smart phone. Notice that the text is east to read and the menu button in the top-right is clear and large enough for even the fattest of fingers to find.
Finally, here is the same, responsive website design after tapping the menu button. A simple, large, clear menu appears, allowing the user to easily navigate and use the website.
But of course, there aren't only two options. Phones, tablets and desktop screens come in all shapes, sizes and resolutions. What if the device is held horizontally rather than vertically? What about wearable tech like smart watches such as the Apple Watch? Designers and developers of responsive websites have to take all of the above into account if they want to make the website accessible to users of many different devices.
So how's it all done?
Responsive websites are created by implementing some relatively simple code, usually in the form of what's known as a 'CSS3 media query'. Media queries simply ask the device questions about its screen and other features, for example, how many pixels of width or height are available, and whether the screen is portrait or landscape (screen orientation). The website then works out how best to display itself based on these factors and adjusts elements of the design such as text size, number of columns of text, what type of menu to display, picture locations, etc.
There's much more to it of course, but hopefully this article has helped you understand what a responsive website is, and how we begin creating one.
Are you looking for a new, responsive website, made by a knowledgeable, local website designer and developer in Ipswich, Suffolk? Please get in touch today and we'll discuss your options. Don't know what you need yet? No problem, we're happy to work through everything with you. Please contact us here today to commission a new website!