Have you heard of Responsive Web Design (RWD)? It’s still a relatively new web design practice, but it is spreading rather rapidly. For those of you that are completely new to the RWD terminology, you might want to check out this thorough explanation [in the form of an attractive scrolling website].
The back story…
In recent years, companies have started creating mobile versions of their websites. Have you ever tried accessing Facebook on your mobile device through a browser? It probably took you to their mobile site. That way, when we access different sites on our cell phones or tablets, we don’t have to majorly zoom in to view all the content.
Well now, instead of creating a separate mobile site, developers have created Responsive Web Design: one single page that automatically adapts to the screen size it is viewed on.
Still confused? Here’s a walk-through of what that looks like…
These screenshot examples were taken from Chrome as I adjusted the size of the browser window manually.
Screen view 1: Here is a view of the full-sized site. This is how the site looks on a large monitor.
Screen view 2: Only a minor change as the middle navigation shrinks slightly.
Screen view 3: Bigger change; the left side navigation shifts to the top of the screen.
Screen view 4: The top navigation icons change to text as the screen is compressed even more.
Screen view 5: The smallest view of the screen. The navigation rests on top of the logo. This is equivalent to how the site would look on your mobile device.
I know what you’re thinking, “this is going to cost me FORTUNES!” Well, before you start stressing out, read this article entitled How Much Does a Responsive Web Design Cost?
Last, but not least, it’s time to think about adapting your e-marketing strategy for the mobile market as well. Here’s a resource on building a Responsive Email Design.
What are your thoughts on RWD? Do you think this will become a default web design practice in the next five years? Share your favorite RWDs with us!