Imagine walking down the street, and buildings and houses bending and flexing as soon as you approach ... Whenever you want to go to any house, that house shapes according to your needs ... Well think about responsive web design like something similar.
In the last few months, every new client wants a mobile version of their website, and we had some old clients coming back and asking us to build them a mobile version. It’s been a bit surprising at the start that now everybody wants a mobile version of the website. And it’s a good thing, because it is one of the essential factors, whether it’s about high ranking in the SERPs, or just improving user experience.
But imagine that you had to do separate coding for every mobile device; there is one design for iPhone, another for BlackBerry, iPad, Kindle, Android smartphones… That would be madness.
When working in web design and web development, or almost any other sector in IT, we are getting to the point where we are unable to keep up with new resolutions and devices. For huge number of websites, it would be almost impossible to create different versions of the website for every resolution. Well, maybe not impossible, but impractical for sure. But don’t worry, we got a better, faster and cheaper solution …
Responsive web design
Responsive web design is relatively new thing in web design and development, came along with CSS3 and HTML5. It is another approach that says that web design and web development should answer (or respond) to user environment based on screen size, orientation and platform. It’s a mix of images, flexible layouts and grids, and smart use of CSS media queries. Let’s say the visitor switches from their laptop, goes to a smartphone, and the screen should change by itself to respond to the user’s device.
That’s why it’s called responsive web design, because website should respond to user device, and switch to accommodate for resolution, image size and scripting abilities…
So, why should we write code for every device individual, when we can make it bend and flex by itself?
Web design is evolving every day, and responsive web design requires a bit more abstract way of thinking than needed before, and some of the ideas are even being practiced as you read this! Its about fluid layouts, media queries and scripts that can reformat web sites.
Screen Resolution
With more smartphones being released every day, responsive web design helps us with search engine optimization because Google and other search engines can see you are taking care of your potential clients.
Additional, designing for landscape and portrait, and leaving settings to switch for anybody with different screen resolution that comes to your site, we gotta think of hundreds, or even thousands of new screen sizes.
Flexible Everything – Solution ?
Several years ago, responsive web design was just too expensive for most of webmasters, and the one and only thing that was flexible were layout columns and that are structural elements.
Responsive web design works in that way where the page serves same HTML to any visitor, but using different CSS parameters, based on screen size, and this was the first suggested by Ethan Marcotte when he wrote an article for alistapart.com called “Responsive Web Design” suggesting web site flexibility depending on the screen size and speed of the mobile device.
But responsive design is not only about adjustable resolution and changing image size. It’s more about caring about your visitors and their time on your site, and about a whole new approach to web design.
