Responsive web design is something everyone is starting to do. The prevalence of modern browsers that support CSS 3 media queries allows web designers to style a site such that sizes, positions, and spacing change based on the size of the browser. In this way, the same site can be viewed on your iPhone, your Android tablet, and your desktop computer, and it will look good on all three. On a mobile device, you can have legible text sizes, no horizontal scrollbars, and form controls that are large enough for you to select with your finger. On a desktop computer, you can make use of the larger real estate.
You don’t have to have a mobile device to experience responsive design: just resize your desktop browser and watch how a responsive web site adjusts its layout to suit your browser size. Responsive and adaptive design are very exciting to me, because it doesn’t seem like that long ago when I would visit a site and see links to open an 800×600 version or a 1024×768 version. Now, we are seeing web sites that display nicely regardless of the user’s screen size, and the user isn’t required to do anything extra. In fact, if the user doesn’t view the site on a different device or change her browser size, she’ll never know the site could look any different. That’s a big goal with responsive and adaptive layouts: the layout should look “right” regardless of the resolution or aspect ratio used to view it.
Having a responsive web site doesn’t mean you have to create a new layout from scratch. Most sites can keep their existing design and simply add some additional CSS to change their existing styles at different browser sizes. We recently made this web site, ThinkSIS.com, responsive without having to change the page structure or rethink anything. It is easier to make an existing design responsive if it already has good HTML and CSS markup, because it will be easier to target specific elements in the page for styling.
The best way I’ve found for making an existing design responsive is to work with a browser like Chrome, simply shrinking it and seeing what parts of your page suddenly look weird at smaller sizes. You’ll find that horizontal scrollbars appear, large text wraps, columns are too wide, and content generally just doesn’t fit. The Chrome extension Window Resizer is helpful because it will display a popup saying how big your window is as you resize your browser. You can then use this size to create a media query that targets browsers that size or smaller.