Responsive Web Design

Responsive web design is a technique for setting up a website so that it can be flexible to view on different sizes of screens.  When smaller web-accessing devices gained popularity, web developers started setting up two different web sites: one that could be viewed on a regular desktop or laptop, and one that could be viewed on smaller devices like phones or tablets.  The latest practice – that has been in action for about a year – is to create a website that is based on proportions and percentages rather than fixed sizes, a fluid grid.  The contents on the website scale down and/or stack on top of each other so that as you collapse the window (or view from a smaller screen), the look of the website is the same, just narrower and longer.  This technique helps solve readability issues with smaller screens and prevents you from having to build two separate sites.  As Nick Pettit points out in his article on Think Vitamin, varying screen sizes are becoming more predominant and are swaying both smaller and larger-than-conventional screens.

In Vince Allen’s article on .net he uses his first-hand experience to describe his process for setting up and testing a responsive web site.  He points out that not only are people using different devices for accessing the web, but they are also using the web in different ways.  Testing your website on different devices in real life scenarios can help unveil the effectiveness of it based on user experience standards.  He emphasizes that it’s more about the experience and interaction that the user has with the site.  Another benefit of responsive web design is that it creates consistency across devices, which helps with maintaining a strong brand presence.

Ethan Marcotte’s article on A List Apart is very comprehensive in scope, while giving specific examples of how the technique is used.  He delves into the challenge of creating flexible images, while also noting how the size of other components on the page have different scale ratios (like a button that needs to be functional on a small screen).

Based on it’s goal of creating easier user functional and providing versatility, I can see why responsive web design is taking a strong hold of the present and near future of web design.  It also makes me wonder how else websites will be changing as more people move to web browsing on mobile devices.  Maybe touch screen features and functions will become more relevant?

Here are the articles I referenced and found helpful in describing the purpose and uses of responsive web design:

A List Apart:  Responsive Web Design

.net:  Seven Lessons Learned from Responsive Web Design

Think Vitamin:  Beginner’s Guide to Responsive Web Design


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s