That’s what I’d like to see for most of my clients – a website that works well for all of their customers. Responsive design is a relatively new movement (made popular by Ethan Marcotte) for how designers and developers go about creating web experiences.

When creating a new website, designers must think first and foremost about who will be using the site and how they will go about consuming the information on the site. More than ever, people browsing the web do so from myriad devices. From the HDTV in your living room to the iPhone in your hand, the web experience should be optimized for whichever device you use and however that device is oriented (vertically or horizontally). This is where using responsive design techniques becomes paramount.

Responsive design is made possible by advancements in CSS (Cascading Style Sheets) and the emergence of CSS3. Using CSS3 Media Queries, web designers have the tools to create a custom experience for the user. The user is not sent to a mobile site or some completely separate url. Users are given the same content on all devices, but the layout and experience of viewing that content is optimized for their specific device.

While I’ll be continuing to write future posts on responsive design as the industry moves along, here are a few responsive basics that can truly make for a better experience.

Responsive Layout

When I’m viewing a website on my 21-inch desktop monitor, I’m able to easily view a 3-column layout with room to spare. If I visit that same website on an iPad positioned vertically, a 3-column layout is either going to be uncomfortably squeezed together, or simply not fit on the screen at all, forcing the user to swipe all over the web page.

With responsive design, we can allow that 3-column layout to remain on the desktop, but transform into a 2-column layout specifically for devices like the iPad oriented vertically. Further, we can transform the 2-column layout down to a 1-column layout if the user has now switched to an iPhone/smart phone.

Responsive Imagery

On the desktop, a large header image can be a beautiful thing. That same image may make for a poor experience on smaller devices. Using responsive techniques, now that same image can be shrunk to fit the user’s device while not sacrificing all of the screen’s real estate.

Responsive Font Size

If you’re still with me, you’re probably aware of a trend forming here. Larger is not always better. While larger fonts on the desktop can improve readability, using the same size font on a smaller screen may simply seem obtrusive. Again, responsive design comes to the rescue by allowing fonts to resize depending on screen resolution.

While I’ve only scratched the surface in terms of responsive design’s impact on modern web design, I hope you have a better idea of how it can make everyone’s web experience a smarter one. In future posts, we’ll come back to these and other responsive design concepts and walk through some of their practical uses.

Dave, CRE8IVE director