Responsive Web Design

Responsive Web Design

Defining Responsive Design

Responsive web design (RWD) is a web development approach that creates dynamic changes to the appearance of a website, depending on the screen size and orientation of the device being used to view it. RWD is one approach to the problem of designing for the multitude of devices available to customers.

The phrase Responsive Web Design was invented several years ago by Ethan Marcotte and was first introduced in his “A List Apart” article, "Responsive Web Design" and later, in his book, A Book Apart - Responsive Web Design.

Responsive web design is a way of making a single website that works effectively on both desktop browsers and the countless numbers of mobile devices on the market. Responsive architecture gives the best quality in browsing experience - whether on a smartphone, tablet or netbook, and regardless of the operating system.

People who browse while on-the-move have very different needs than those sitting at a desk, responsive web sites re-organize themselves automatically according to the device viewing them so that the same website provides the same great experience everywhere. Desktops get a full-blown interface with videos, large images and animations. Smartphones get a simplified website that runs fast. Tablets and netbooks get something in the middle. Responsive web design controls the amount of content presented to the visitor.

Responsive design is a tool. While using responsive design has many perks when designing across devices, using the technique does not ensure a usable experience.

Designing for a Responsive Web

It used to be the case that to access the internet you’d have to try through computer. Now though, you can access the internet through computers, laptops, mobile phones, smartphones, tablets, televisions, games consoles.

What Does Responsive Web Design Look Like?

The purpose of responsive design is to have one site, but with different elements that respond differently when viewed on devices of different sizes.

Let’s take a traditional website.  When viewed on a desktop computer the website might show five columns. But when you view that same layout on a smaller tablet, it might force you to scroll horizontally, something users don’t like so much. The impact is also complicated by the fact that many tablets can be viewed either in portrait orientation, or turned sideways for landscape view.

On a tiny smartphone screen, websites can be even more challenging to see. Large images may “break” the layout. Sites can be slow to load on smartphones if they are graphics heavy.

However, if a site uses responsive design, the tablet version might automatically adjust to display just three columns. That way, the content is readable and easy to navigate. On a smartphone, the content might appear as a single column, perhaps stacked vertically. Or possibly the user would have the ability to swipe over to view other columns. Images will resize instead of distorting the layout or getting cut off.

The point is: with responsive design, the website automatically adjusts based on the device the viewer sees it on.

How Does Responsive Web Design Work?

Responsive sites use fluid grids. All page elements are sized by proportion, rather than pixels. So if you have five columns, you wouldn’t say exactly how wide each should be, but rather how wide they should be in relation to the other columns. Column 1 should take up half the page, column 2 should take up 15%, column 3 should take up 20%, for instance and column 4 and 5 should take the rest of the 15% left.

Media such as images is also resized relatively. That way an image can stay within its column or relative design element.

Why Small Businesses Need to Switch to Responsive Web Design

More people are using mobile devices. A recent Pew study found that 58% of American adults own a smartphone, and 42% own a tablet computer. Check your traffic and you might just be shocked at how many visitors are getting to your website through mobile devices.

Conclusion

Responsive web design is recommended by Google, it allows one website to provide a great user-experience across many devices and screen sizes, and it makes managing your Search Engine Optimization (SEO) strategy easier. For this reason, responsive web design is the best option for your mobile SEO strategy.