Benjamin Lu

everyday is cool

Designing for the Width You Have

Retrospective web development exercise for the 2010 archive.

Open a two-column page and drag the window narrower until the article becomes hard to read. Write down the point where it happens. That gives you a better starting point for a layout change than picking a width because it matches one particular phone.

Use a media query to move the sidebar below the article near that width. Test with a long heading and a wide image, then zoom in. A layout that survives those tests is more useful than one that only looks right with short sample text.

Further reading