Responsive design: Handling any screen size

Beaconfire just posted about the new responsive design on the Boston Globe‘s site. The site adapts to the width of your browser. Well, they’re not the only ones — EDF’s site also uses a responsive design.

And our design firm, Headscape, added a twist that none of us had seen before. Our home page responds to both the width and height of your browser window.  Here’s why we did it this way.

We wanted to feature larger images than we had on our old site, but as we reviewed the site internally, it proved painful for anyone not using a fairly new desktop monitor. On smaller screens, including laptops, the dominant image was just too big. It pushed everything else off the page.

We checked the usage data and found that this would be an issue for some site visitors, too. No one wanted to sacrifice the larger images, so designer Ed Merritt came up with a neat solution.

  • If you’re using a big screen, you see the main image in all its glory.
  • If you’re on a screen that’s wide but not very tall (like my laptop), the main image gets smaller. Then, taking advantage of the extra width, we slide a few key elements up next to it.
  • And if you’re on a small screen (including iOS and Android), the image and text containers are all smaller so that they fit comfortably on your screen.

See it in action — if you’re on one of the larger screens, go to our home page and re-size your browser. It’s no Angry Birds, but it’s strangely fun! (Other main pages resize, too, but the home page is the only one that adapts to three sizes.)

Update: See a broader and more technical explanation from Paul Boag of Headscape, including a nifty video of the site responding to screen size changes.