Responsive Web Design
[ri-spon-siv web dih-zahyn]
noun
- An approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).
- Design and development that should respond to a user’s behavior, including but not limited to, screen size, platform, and orientation.
- Making a website look good on an iPhone.
Responsive web design (RWD) is essentially the approach to web design that ensures any page looks great at any size. At this point, RWD is not a new concept, and just about every developer has taken it on as an industry standard.
So why is it so important?
Even though RWD has been around for about 6 years, many companies still have not updated their websites to respond to the market. This means your clients have a very real problem that you need to fix. Consider it low hanging fruit that can be your foot in the door to getting that next big contract.
Back in 2010, Ethan Marcotte wrote a piece on Responsive Web Design for A List Apart. He references the book Interactive Architecture, by Michael Fox and Miles Kemp and suggests that the same user experience should be accessible to all, regardless of the physical constraints created by hardware.
“…rather than creating immutable, unchanging spaces that define a particular experience, they suggest inhabitant and structure can—and should—mutually influence each other.” –Ethan Marcotte, Responsive Web Design
With the increasing number of mobile devices, the need for RWD is apparent, not only for the end user, but for the developer. The high demand for customization means that one must anticipate the needs of a given user, and therefore must anticipate the device in which he consumes his media. To create multiple websites for multiple devices is seemingly impossible, if not improbable. Creating a responsive design saves you time and money on the deliverable.
How Do You Do It?
“Stop Thinking in Pages. Start Thinking in Systems.” -Jeremy Keith
Responsive web design works on a fluid grid. Meaning, all the elements on the page are not sized by pixels, but rather by what size they should be in relation to every other element on the page. For example, if a web page has three columns and column one should take up 50% of the page, column two should take up 30%, and column three 20%, each of these three columns will always take up this percentage of a page regardless of screen size.
We call these fluid grids flexible layouts where images can be adjusted to size and won’t break the layout.
Other considerations when creating a responsive design are touch screens, download speed, and image quality. At this point, there are myriad studies showing that the majority of users experience web sites and applications on a mobile device, so keep this in mind when designing buttons or graphics for a smaller screen.
There are many tools and frameworks available for creating RWD as well as responsive WordPress themes available to make responsive designs work for you.
Further Resources
- CSS Media Query for Mobile is Fool’s Gold, Cloud Four
- Designing for a Responsive Web with Heuristic Methods, Design Reviver
- Examples Of Flexible Layouts With CSS3 Media Queries, Zoe Mickley Gillenwater
- The Big Web Show #9: Responsive Web Design, 5by5 Studios
- How to Use CSS3 Media Queries to Create a Mobile Version of Your Website, Smashing Magazine
- Application: Rapid Prototyping of Adaptive CSS and Responsive Design, ProtoFluid
- Handcrafted CSS: More Bulletproof Web Design, Dan Cederholm (printed book)
- Flexible Web Book, Zoe Mickley Gillenwater (printed book)
Source: Wikipedia, A List Apart, Smashing Magazine
Hello
Very informative post. Thank you for sharing.