4 Things you need to know about Responsive Web Design

The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must ‘accept the ebb and flow of things.’- John Allsopp, ‘A Dao of Web Design’.


No doubt you have come across the term Responsive Design recently; if not then you will have certainly experienced it. Though it is still a working concept there is debate as to whether it will be a design trend that will pave the way for the future of multi-platform web design.


‘The future of web design’ is a phrase that gets batted around a quite a lot as web design is a rapidly progressive industry and website designers are constantly getting excited and heralding new design trends as the future; like Flat Design for instance.


Though unlike many other trends that have popped up, Responsive Design is a really sensible bet for one of the trends that will stay with us for a very, very long time. Logically speaking, with the industry stress shifting to the importance of user experience on mobile devices, then Responsive Design is definitely something that any web designer needs to be familiar with.


The philosophy behind Responsive Design is one of enhanced user viewing experience. Features that typically appear in Responsive Design are effortless site navigation and reading; and the need for browser re-sizing, scrolling and panning kept to a minimal. These features are essential as the experience takes place across a range of devices; desktops, smartphones, tablets: you name it.


In a nutshell, Responsive Design is all about seamlessly displaying content across a variety of platforms, obviously with this comes the prospect of ease of access, enhanced website aesthetics and of course company sales through ease of user experience.


While the standards of Responsive Design are still nebulous, that hasn’t stopped the multitudes of design prophets heralding the rise of Responsive Design as the forecast for the future, in fact Mashable have already declared that this year is THE year of Responsive Design. So to make sure that you are familiar with the concept we have put together this list of four things you must know about Responsive Design.


Importance of image size and quality

When it comes to Responsive Design the aphorism ‘quality over quantity’ is key. The quality of the images you place on a site is far more important than the quantity of images. This is because low-quality images do not maintain attractiveness at any size. Secondly the time it takes to load the images is just as important as its size.


Due to the fact that many mobile users will be working against limited bandwidth when they access your site from their device a web designer will; need to reach a sensible balance between the load time of an image and the quality of it.


This means that images will need to be scaled with CSS height and width properties and to avoid loading full-size internet optimised images. A web designer will also need to crop any images before loading them and save any pictures that have been used at their smallest size possible; granted that they maintain an acute visual quality at that size.


A great example of this is Deux Huit Huit’s website. The images flow superbly across all screen sizes and even on a tiny mobile screen you can see the images in sharp quality. We particularly like the way the full screen logo re-adapts seamlessly throughout several breakpoints, and as you can see, the images load up quickly across multiple devices.


Navigation must be smooth and seamless

With focus centered on user experience then navigation is another priority that a designer must consider with esteem when working with Responsive Design. The bottom line is that navigation must be smooth, seamless and efficient throughout to create a comfortable user experience.


To ensure that this is achieved extra attention will need to be targeted towards the specific widths of web browsers. An effectively designed Responsive site will adapt its navigation in different areas, dependent on the browsers width. A really good example of this Food Sense; the navigation will re-position itself nicely to adapt to the size of the browser you are using.


Be careful which type you go for

One golden rule that you should remember when it comes to using type in Responsive Design is that one size doesn’t suit all. The visual appeal of fonts can vary across different platforms; one that could look amazing on your desktop may look terrible on your smartphone, therefore typography is no exception to the rules that govern the other aspects of responsive design.


The general consensus is that the most important part of responsive typography is the length of the line. To allow the smoothest possible reading experience type should be optimised based on the width of the screen.


For desktop sites, it tends to be that somewhere between 50 and 75 characters a line is ideal and for mobile devices, somewhere between 35 and 50 characters.


Special consideration should also be taken when choosing a specific font. Complex, novelty and elaborate fonts can look stunning on a larger screen, but in most cases when they are reduced to the size of a mobile screen they tend to look convoluted and are therefore difficult to read. Obviously, these sorts of fonts benefit from having space between characters which is difficult to do when working for a smaller space. When working for a smaller size, it is better to use normal sans serif styles.


Don’t mistake Responsive for Mobile Design

A common misconception is thinking that Mobile and Responsive Design are the same thing; they are not! While you would be forgiven for making this mistake; due to the fact that Responsive Design is used to create websites that respond to different browser sizes and are therefore mobile-friendly, but Responsive Design goes beyond just the faculty to accommodate mobile platforms.


Effective use of Responsive Design allows a website to be viewed with clarity across all ranges of resolutions; including across tablets and smartphones, but not strictly adapted to these mediums. By viewing Responsive Design purely as a medium to adapted to a mobile context then you are missing out on some it’s broader capabilities and therefore limiting the possibilities of user experience.


Something to leave with

From what you have read hopefully you will have some grasp of what Responsive Design, although is in it’s still-progressing stages. As well as ensuring that the visual qualities of a site are adapted to provide a brilliant user experience across various devices and screen sizes, it is also a design practice based on the principles of creating a universally optimal experience for a user, no matter what device they are viewing the site on.


As I have already said, Responsive Design, while not a brand new concept it is still in its early stages and will be subject to evolution, so you can be sure that elements will change and progress. As it stands at this point in time, Responsive Design is here to enhance user experience universally; regardless of what device they are using, a user wants the best possible site experience.