Everyone wants a mobile version of their website. It’s practically essential after all: one design for the BlackBerry, another for the iPhone, the iPad, netbook, Kindle — and all screen resolutions must be compatible, too. And, it only gets more complex and crowded...we’ll likely need to design for a number of additional inventions. When will the madness stop? It won’t, of course.
In the field of Web design and development, we’re quickly getting to the point of being unable to keep up with the endless new resolutions and devices. For many websites, creating a website version for each resolution and new device would be impossible, or at least impractical. Where do we go from here?
Responsive Web design provides the ability of a website to resize automatically based on screen size, platform and orientation by utilizing a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website automatically switches to accommodate for resolution, image size and scripting. In other words, the website has the technology to automatically respond to the user’s preferences. This eliminates the need for a different design and development phase for each new gadget on the market.
Responsive to the Rescue!
A few years ago, when flexible layouts were almost a “luxury” for websites, the only things that were flexible in a design were the layout columns (structural elements) and the text. Images could easily break layouts, and even flexible structural elements broke a layout’s form when pushed enough. Flexible designs weren’t really that flexible; they could give or take a few hundred pixels, but they often couldn’t adjust from a large computer screen to a netbook.
Now we can make things far more flexible. Images can be automatically adjusted, and we have workarounds so that layouts never break. Responsive design gives us far more options. It’s perfect for devices that switch from portrait orientation to landscape in an instant or for when users switch from a large computer screen to an iPad or mobile phone.