Any conversation about the future of web design has to come to terms with a fundamental and rapid shift in the way we view the web. By 2014, mobile Internet usage will surpass desktop usage. And from desktops and laptops to smart phones and tablets of differing sizes and resolutions, viewing device options are also growing at an increasingly steady rate.

For web designers and developers, it simply won’t work to build websites for just one or two types of devices, and the days of checking your site in a few web browsers and launching are long gone.

So how are web designers, developers, and content strategists addressing this fundamental shift? Well, some pretty cool things are happening in the world of responsive web design that provide answers.

Responsive Web Design is the use of CSS techniques, design principles such as fluid grids, flexible images, and media queries to deliver the best possible viewing experience (without compromising the quality of content) to users no matter how large (or small) their display.

(Image source: Brain Traffic blog)

Certainly read Ethan Mariotte’s seminal article and book on responsive design to learn more about these techniques and principles … or if you are like me, start by checking out some web eye candy first!

WARNING: I have yet to tire of finding and playing with new responsive design websites.

Here are a few of my favorites. Re-size your browser to see responsive design in action:

• Responsive Design, Responsively Illustrated - Interactive illustration using the same basic HTML which adapts its appearance to the changing viewport size, representing different devices accordingly.
• The Seminal Responsive Design Example - Related to his article mentioned above, Ethan Mariotte created this web page as an example to show how responsive design can optimize presentation across a range of displays.
• The Boston Globe - Great example for those who have a lot of content and news article type content on their website.
• CONFAB - The Content Strategy Conference website designed by Sean Turbidy using responsive design principles, while keeping content consumption in mind.
• Mr. Simon Collision - I love this website’s clean, responsive design and the use of simple graphics to spruce up otherwise mundane links.
• Responsive Design Test - Curious how your own website responds to different devices? Check out this nifty little tool by Matt Kersley.

Want more? Don’t say I didn’t warn you! Here is the full list of responsive design examples over at Media Query. Check them out and rate your favorites.

Design is Key, Content is King

The shift we are seeing is not JUST about web design and development. People visit websites for content, not for design, although the design is key in how it facilitates (or doesn’t) content consumption. The future of web design and the future of content curation and consumption cannot be “viewed” separately.

As the web evolves, designers and content experts will need to work closely together so that designers are not making decisions about content strategy and content experts move towards producing the type of content that truly takes advantage of the web’s universality and ever-increasing speed. Read more on content strategy and responsive web design.

Looking Ahead

While contemporary web design may have overcome some of the legacy limitations of its static print design roots, embracing the web as its own medium is still a new and exciting area and one to keep a close eye on in 2012 and beyond. And if the web is to truly shine as it’s own medium, responsive design is a great candidate to take it to its next destination.

How will your website fare in the future of the web? Will it respond gracefully to different resolutions and according to the device the user is viewing it in? Will it easily give the visitor the content they want from wherever they want it?

Additional Resources and Links:

• Responsive Web Design (Book)
• Multi-Device Web Design: An Evolution