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:
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
The main goal is to encourage you try respsonsive approaches if you haven’t yet. It’s not hard at all. Baby steps.