Introduction to Responsive Web Design
Anyone with the slightest idea of what’s going on shouldn’t be surprised to hear that there is a new, potentially groundbreaking development in the web world. Every facet of the World Wide Web is in a constant state of evolution, from the algorithms used by search engines to the way people share content.
What’s Changed Now?
It takes one look at a shiny new iPad, a hyper-intelligent cellphone or a massive LCD monitor to recognize that the way individuals access and subsequently view web content has evolved. Formerly, any responsible web developer, concerned with how their fixed width website might render on a mobile device, was forced to build and redesign a second site that would comfortably display content in a phone’s browser window. But now with the variety of Wi-Fi capable devices on the market, what is a responsible web developer to do?
Two Words: Responsive Design
Responsive design is not some new-fangled technology, but rather, a series of techniques and processes that when followed, enable the layout of a webpage to adjust and adapt according to the size of the screen it is viewed on.
- The site structure must consist of a fluid or flexible grid foundation.
- Images on the site (whether background or hard-coded) must be fluid as well.
- The layout of the web pages must adapt according to the screen resolution using media queries.
Responsive Design in Action
Want to see responsive design in action? Slowly reduce the size of your browser window and watch as this page reconfigures as the window decreases in width.
A Step in the Right Direction
Over the past few months both VR’s design and development teams have been consumed with the notion of responsive design. Although us designers don’t always seem to be speaking the same language as the developers (could someone please define “cookie”!?), we seem to be in agreement: Responsive design represents a step towards consistency and continuity in the world of web.
Over the next few weeks VR plans to publish a variety of articles that take a closer look at many of the issues, techniques and even controversies surrounding responsive design. So stay tuned!
Don’t Miss These Articles:
Responsive Web Design, Ethan Marcotte — May 25th, 2010
Responsive Web Design: What it is and How to Use it, Kayla Knight — January 12th, 2011
Understanding the Elements of Responsive Web Design, Jason Gross — March 14th, 2011
Beginner’s Guide to Responsive Web Design, Nick Pettit — August 9th, 2011
Designing for a Responsive Web, Max Luzuriaga — August 9th, 2011
The Ultimate Responsive Web Design Roundup, Cameron Chapman — September 1st, 2011

One Response to Introduction to Responsive Web Design
Trackbacks & Pingbacks
[...] Responsive Design for your site since Google and Bing recommend this over having a website and a mobile version, [...]
Leave a Reply
Want to join the discussion?Feel free to contribute!