If you’ve been wanting to add responsiveness to your site but don’t know where to begin start with something small. In other words, you don’t have to jump from a 960 pixel fixed-width design to one that adjusts from the iPhone to an 80” wide-screen TV.
I’ll give you two examples of minor responsiveness.
If you’re viewing this site with a browser viewport larger than 1240 pixels it looks like this:
If the viewport width goes below that threshold then the layout adjusts slightly to this:
An even more minor implementation is the design for Wake Forest University that I did last year. In the header, the logo mark hangs outside of the primary left margin by 63 pixels. This creates a tasteful emphasis on the logo and has a nice balancing effect to the overall layout; except if a visitor’s computer has a resolution of 1024x768 (or less). Then the left portion of the logo is hidden by the screen and the visual emphasis we sought to achieve is destroyed. So we used @media queries to push the logo inside of the margin when the view port is less than 1080 pixels wide.
Greater than 1080 pixels:
Less than 1080 pixels:
Browser Support
Of course versions of Internet Explorer less than 9 don’t support media queries. What do we do? For Wake Forest (and my site) we could have used JavaScript to accomplish the same task (see adapt.js), but since it was a cosmetic preference only, we used IE conditional comments to set it inside the left margin for IE versions 6–8 irrespective of the viewport width.
Semantics, semantics.
Some may take me to task for labeling the above methodologies “responsive web design” because responsiveness goes beyond just @media queries. I see your argument and raise you these helpful resources for more reading on the subject:
- Responsive Web Design the book
- Responsive Web Design on A List Apart
- Lazy loading by Jeremy Keith
- Viewport, bandwidth and context by Jeremy Keith
- On being “responsive” by Ethan Marcotte
- Fluid Grids on A List Apart
- Responsive images by the Filament Group
- mediaqueri.es
The main goal is to encourage you try respsonsive approaches if you haven’t yet. It’s not hard at all. Baby steps.