Download the slides from my presentation at Voices That Matter: Web Design Conference 2009, as well as get links to related tutorials on designing flexible images.
Posts Tagged: liquid
Create the appearance of a single image by layering multiple images on top of each other. The pieces can slide around the page as its width is changed, making it a perfect technique for liquid layouts.
It’s possible to dynamically “crop” both background and foreground images as the layout changes in width, solving the problem of overflowing fixed-width images in a flexible page.
Simple CSS techniques can make the content images inside your liquid or elastic pages scale with the layout.
I’ve updated my original post on sites to explore for flexible web design inspiration.
Presenting static image comps to clients can be especially problematic if you create flexible layouts. Try building an (X)HTML/CSS version of the design to show to your client instead in order to make designing and creating flexible layouts easier.
Download the slides from my presentation Designing CSS Layouts for the Flexible Web at the National Association of Government Webmasters 2008 Annual Conference.
Download the slides from my presentation Designing CSS Layouts for the Flexible Web at the Voices That Matter Web Design Conference.
Liquid and elastic web sites don’t have to be ugly or boring. There are plenty of beautiful examples of flexible design to inspire you.