However, with the growth of smartphone and tablet users, a variety of screen sizes has made Responsive Design go mainstream. Many reports claim that it will really take off this year, so keep your eyes peeled.
But what exactly is "Responsive Design"?
In simple terms, Responsive Design uses multiple fluid grids and layouts as well as CSS media queries to automatically adjust your site according to screen size, platform and orientation. In other words, layouts and image size/resolution, etc. automatically switch to accommodate the user's environment.
Some web designers use a mixed approach in which medium to large screens take on an Adaptive Design, which has multiple fixed screen layouts, and use Responsive Design for small screens.
Here is an example of the various screen sizes we have out there:
However, Responsive Design is actually more than just making your site "flexible" with adjusting layouts, resized images, and disappearing bars. It is rather a new concept for design, making web designers think differently and change their approach to the overall design of a website or web app. It is something designers consider from the start of creating a site, rather than simply adjusting and adding at the end.
To show you an example of Responsive Design concepts being applied, here is The Boston Globe's website.
Wide Screen:
Medium Screen:
Small Screen:
With HTML5 slowly taking off and increasing rates of hybrid apps being released, it can only be expected that Responsive Design will become an essential element not only for websites, but also for mobile web/hybrid apps. If you're planning on using HTML5 to make an app run on web browsers in order to support all OS and devices, it is only natural that you have the app's layout and design "respond" to each user's environment. We are far past the point where designers assume that one layout works for all -- because it doesn't.
No comments:
Post a Comment