Recently the buzz in the web design world has been about Responsive Web Design and Adaptive Websites. It’s the latest and most popular trend in web design / development, and with Google’s latest “endorsement“, it could very well be the preferred future of most sites on the web. If you haven’t heard of adaptive or responsive web design yet, let us provide you with a brief explanation.
The Responsive and Adaptive Design concept came about with the introduction of HTML5 and CSS3, and uses one of CSS3’s new features called “Media Queries” to display different layouts of the same site based on the visitor’s screen resolution. Responsive design uses fluid, percentage based, widths while, adaptive web design uses pixel based fixed widths to conform a sites layout to a given pixel resolution. By using these media queries, designers and developers make “breakpoints” where the if the screen resolution is smaller than a given value, the website layout changes, or responds (see what we did there?).
Commonly, a responsive or adaptive site is divided up into 4 different layouts to accomodate 4 specific screen sizes (computer, tablet, mobile landscape and portrait resolutions). However, some designers feel this isn’t enough and add a couple more, like tablet landscape, and media queries for the differing screen resolutions of a laptop and desktop monitor. The goal is to create just one web presence that will present your content and branding, in the most usable and attractive way, across all viewers screen resolutions. Utilizing responsive and adaptive design eliminates the need for a separate or mobile site dedicated to only smart phones.
With the increasing migration of people using mobile devices as their primary means to browse the web, make purchase decisions, and share their experiences, you need to start developing a strategy to ensure your web presence works well for both mobile and desktop visitors. Responsive and Adaptive Web Design does take more in-depth planning and time to develop, but the benefits of cross resolution screen compatibility, and the use of modern HTML5 and CSS3 code, will ensure your web presence is relevant and visually effective.
If you are still having trouble comprehending the idea of a flexible, adaptive website, take a look at some examples we think look great and perform pretty well:
Example of responsive web design executed beautifully by Desk.com
http://www.desk.com/ – Perhaps one of the best responsive site designs we’ve seen here at Render Perfect. Clean, easy to navigate, and right to the point. Cheers, Salesforce!
Responsive Design & Interesting HTML5 and CSS3 Features
http://nationallgbtmuseum.org/ – A great example of responsive design, and other features of HTML5 and CSS3 as well. This site is a little busy in our opinion and may be a little confusing at first, but once you understand how it works, it is effective and attention grabbing.
Great example of a non-technology based company using Responsive Design.
http://cafeevoke.com/ – Again, another simple, clean, beautiful example of Responsive Design. This site is a great example of how you don’t necessarily need to be a technology orientated business to have an effective responsive site.
Effective usage of photos and video as links, and, of course, Responsive!
http://wmcfest.com/ – Lastly, besides being an awesome event, we picked the Weapons of Mass Creation Fest site because it utilizes video and photos in a good looking, effective way. Tip of the hat to you guys.
While these are all great examples, there are thousands more and a couple good directories of beautiful and highly functional responsive and adaptive websites. Media Queries and Design Bombs are two really good resources for responsive web design examples.
604 E Joppa Road