Responsive Web Design – Ideas, Technology, and Examples

The web design industry is constantly evolving, whether that be with the latest trends in web design – big header images, large photographic backgrounds, etc, or with the latest technologies – HTML5, jQuery, CSS3, and so on. It's important as a web designer and developer to keep up with these ever changing “trends” within the industry.

One of the biggest “trends” that has hit this field over the past year or so, is the concept of responsive web design. It has become much more than just a buzz word and has taken the industry by storm. It is clearly not going away. If anything, if you haven’t already got on board with it, it maybe it's about time to start warming to the idea.

RESPONSIVE WEB DESIGN

What is Responsive Web Design?

Responsive web design is the term given to the concept of designing and developing a website so that the layout changes depending on the device/viewport on which the website is being viewed. By device, this could be a mobile phone, tablet, laptop, desktop computer, or even a smart TV. The term 'Responsive Web Design' was coined by its creator, Ethan Marcotte – his book is highly recommended reading “A Book Apart - Responsive web design”

In the book, Ethan covers where the term 'Responsive Web Design' came from and why it was required.

As a start, its' important to understand that responsive web design is not one particular technology or item but in fact it is a collection of techniques and ideas, which together establish a new way of thinking in moving the web design industry forward.

Why is Responsive Web Design Such a Big Thing?

With technologies evolving and new products and devices being introduced to the market it's only natural that consumers will want to keep up with the latest gadgets that we become more and more reliant on.

First it was desktop computers and laptops, then mobile phones and tablets. What's next?

The fact that we are in an era where it is becoming easier to browse the web means that we need to make it easier for consumers to “reach” us and see what we have to offer, at their convenience.

We naturally have a requirement as designers and developers to provide our end user with the option, or rather, convenience to browse through whatever medium (within reason) they see fit. Therefore, we need to provide a clearer means of portraying the information on different screen sizes, whether this be big or small, vertically or horizontally.

It has been noted that in the past creating different versions of a website was the way forward, however it was not the most practical solution, especially as in most cases the user would end up having to download a lot of extra code and design, alongside receiving a poor user journey.
This is why responsive web design has become such a big thing.

Responsive web design provides us with the solution of meeting these requirements without having to create and design different versions of a website depending on the device.

One point to make is that from a business perspective it is not essential we make these changes or adjustments, but rather by doing so we are inevitably meeting the unconscious needs of our end user.

OK so we know what responsive web design is and we know why we may need it. The next step would be how to go about producing it.

How to Make a Website Responsive

As mentioned earlier responsive web design is a collection of techniques and ideas. The two main techniques consist of flexible grid and media queries.

Flexible grid
When designing a website we first start off in Photoshop, making sure each element is designed to pixel perfect measurements. We then translate this design into code, all again based on pixels.

This is fine, and still correct. The website will be viewable all on devices, however not in the most convenient manner, or the prettiest. Stating pixel measurements and viewing on a screen smaller than the one it is intended for forces horrible scrollbars to appear.

Hence we need a solution that is fluid, more relative to the issue, but also keeps its proportional values.

To find a proportional value of an item we use the formula:

“ target / content = results ”

It's quite an important formula and one that is key to making designs responsive.

If all values are proportional then the grid based design will scale nicely between devices. So, in other words, no scrollbars.

So, for example, using a Photoshop design mock up, we can find the layout width, typically this could be 960px (this being your main body container). Now say you want this container to “shrink” to 310px wide then the formula would read as follows:

310px / 960px = 0.32291666666667

To obtain the percentage value we multiply by 100 to get: 32.291666666667%

More often than not the percentage value may result in NOT being a whole number. If this is the case then it is important to NOT round up or down to the nearest whole number. Although it may look pretty, your machine will understand the figures in a proportional manner, so its important to keep them as they are!

The Grid System
Perfect grid layout that can be very useful.

Once the fluid grid is in place, the web design is scalable but not responsive.

That is where media queries come into play.

Media Queries

CSS3 media queries go hand in hand with the flexible grid to make responsive web design work.

Luckily CSS3 is supported by many modern browsers.

Media queries were first investigated by W3C a few years ago. A media query allows you to gain information about the viewport from which the user/visitor is looking at the website and target that particular screen size by applying specific CSS styles.

For the purpose of making web sites responsive it can be said that the most important media feature is the “min-width”, this property allows us to apply specific CSS styles if the browser window (in pixels) drops below a particular width.

As a starting point, and possibly the most common pixel min-widths that are targeted are the following:

320px
480px
600px
768px
900px
1200px

It goes without saying that targeting more resolutions will naturally require more time and effort, so it generally depends on the clients' requirements and your judgment as to whether targeting all resolutions is necessary or not.

Progressive Enhancement

Progressive enhancement is the term or rather strategy for web design which focuses on the content, rather than device or browser. The aim is to enhance the web design by creating semantic HTML markup and giving prominence to accessibility and content.

Many web designers will argue that content is the most important element of a website project and should therefore be considered ahead of the presentation layer, or design.

With this in mind, we could relate progressive enhancement to responsive web design by aiming to design for mobile first.

Essentially when designing for mobile first the restriction due to the smaller screen automatically pushes the thought process into considering what important elements (content) need to be featured for this device. Therefore we naturally start to design around content.

Obviously as the screen sizes differ between tablets, laptops and desktops more space is available and therefore secondary content (social media or RSS links) can be added in a "nice to have" manner for the larger mediums.

It can be said that designing for mobiles enriches the experience of the user by focusing on the content and providing them, the user, with what is considered the most important elements on first view/load.

Showcase of Responsive Web Designs in Action

Below are a few examples of responsive web design in action. The screenshots show a couple of the variations, however to see the full variation of each site (in some cases there are more than others), view the website and change the browser window size. Alternatively view the website on a different device.

Responsive Web Design Resources

Responsive web design concentrates quite heavily on devices, viewports and how to gracefully degrade the designs we create across these mediums. In all of the “hype” about RWD we shouldn’t forget Progressive enhancement and its relationship with responsive web design.

CONCLUSION

It's safe to say that as technology evolves and new gadgets are invented, new trends happen.

Do you think responsive web design is here to stay? What do you think of responsive web design? Let us know what you think at the bottom of this article.

Tuesday, December 13, 2016