Design Trends Series 2012: #1 – Responsive Web Design

We are launching the Evolve Design Trend Series with this article. Expect that in the next few weeks, we will be helping you learn more about the latest design trends to help EVOLVE your business.

In the last year, there has been a huge growth in smart phone usage and mobile data access. More and more people use their mobile devices to access websites, but most websites to date are not compatible in terms of layout and design. We often find these sites to be too small when loaded, or the images and text layout are way off because they were created based on a computer screen resolution (i.e., 800 x 600, 1024 x 768).

Hence, our first design trend for 2012 is Responsive Web Design.

What is Responsive Web Design? Simply put, it allows the design and layout of your site to be more fluid and adapt to the different screen sizes your site is being viewed on. These are normally your iOS, Blackberry and Android phones. Responsive does not only mean optimizing for smaller screens, but for bigger screens as well! With this type of design, you can read and navigate without having to resize, pan and scroll.

How do we do that? By using CSS3 media queries, which adapts the layout to the viewing environment. Want to see an example? Well, you’re looking at one right now! The Evolve website was created with RWD. Try it now by resizing your browser window and you will see that the design fluidly responds to the window size as you make it bigger or smaller. You can also test it on your iPhone, iPad, Blackberry or Android device.

Here’s a snapshot of a full browser view and a mobile browser view:

Responsive Web Design - Evolve

This design trend will definitely gain more popularity in 2012, as more and more people use mobile devices for immediate information.

Note that all design trends we will feature can be implemented by our team. If you’re interested in applying this to your site, contact us now!