Responsive Web Design – A Real Update

Since my talk at WordCamp San Diego 2011, Responsive Web Design With WordPress, There has been a tremendous amount of misinformation. Let me clarify a few things and give an update to where I see Responsive Web Design.

What Really is Responsive Web Design?

I like to explain Responsive Web Design like this,

For Layout:

Responsive Design is “fluid” design with some breakpoints for known viewport sizes. The whole idea with Responsive Design is that if you design a fluid layout, you don’t have to know as many breakpoints, it should automatically adapt to the viewport size.

For Design:

When designing for Responsive Web Design the mantra is Mobile First. Popularized by  Luke Wroblewski.

A thoughtful design would take into consideration everywhere a modern design would appear, who their customers were and the websites goals. It would prepare for that design to be used on small screens, large screens and even larger screens. A designer, setting their client up for success, needs to champion information control. In this sense more is not always better.

For Content:

A Responsive Web Design approach to content is not just referring to text, but images and video as well. Your content strategy needs to be deliberate, condensed and efficient. Get to the point!

So, Then What Is Adaptive Design and Progressive Enhancement?

Adaptive Design:

Before Responsive Design, “Adaptive” would be used to create sites for specific devices, i.e. phones, TV, etc.

Progressive Enhancement:

This idea was the least common denominator approach and started with a minimal screen and features. For larger and more powerful features the experience would get “progressively” better.

What’s next for Responsive Web Design?

Responsive Web Design has a bright future. Already we’re seeing huge progress in Ecommerce.  A recent case study by Blastam.com found that smartphone users are more inclined to purchase from a “Responsive” website rather than download an app. The reasons are obvious, but the data is encouraging. During their testing period, compared to the same time the year before, they saw a 188% increase in revenue and a 96% increase in transactions from smartphones and tablets.

The “hiding content” idea for smaller viewports has always been controversial. Doing that changes the experience. Trent Walton first brought forth the idea of not hiding, but prioritizing content on a page for smaller viewports. This was taken further by Jordan Moore by using the CSS3 Property “Flexbox” to number content blocks in the order you would like them to appear.

More progress has been made with images. One of the other issues people tend to comment the most on is the scaling of images. Having large images scale down to smaller viewports over mobile networks is less than ideal. There are several solutions most employing some sort of JavaScript, but there is also some deep thought. RESS, recently promoted by Luke Wroblewski, looks at selecting the right image on the server, before it gets to the screen.

One thing for sure about Responsive Web Design, is that it’s not slowing down. In fact, it’s evolving. Soon we’ll see a time, just like Content Management Systems, where all sites will be expected to be Responsive.

This is a guest post by Wes Chyrchel – Crowded Sites

wes_chyrchel_headshot