1. Designing CSS Layouts for
the Flexible Web
July 18, 2009
The CSS Summit
Zoe Mickley Gillenwater
2. A little about me
• Author of Flexible Web Design: Creating
Liquid and Elastic Layouts with CSS
• Author of lynda.com video course Web
Accessibility Principles
• Freelance web and print designer,
HTML/CSS developer, consultant
• Member, Adobe Task Force of Web
Standards Project (WaSP)
3. What is flexible design?
• Overall width is not fixed number of pixels
• Liquid (aka fluid)
• Elastic
• Hybrid
9. Image from flickr, “swimming upstream” by tempo
Don’t swim upstream
if you don’t have to
10. Benefits of flexible layouts
Liquid Elastic
Respect user preferences
Increased usability, readability, and accessibility
Less chance of horizontal Increased typographic
scrollbars control
Take advantage of screen Preserve design
real estate proportions
11. Work well and look good for
a larger number of people
a greater amount of the time
Image from Flickr, “Cal crowds for inauguration screening” by maxpixpix
12. Design differently from the start
• Not every comp (aka mock-up) can be
turned into liquid or elastic layout
• Learn which design features aren’t
“flexible-friendly” and how to change them
so they are
13. Goals of this presentation
Fixed-width
designer:
Make designs
more adaptive to
user preferences
14. Goals of this presentation
Fixed-width Flexible
designer: designer:
Make designs Know what to
more adaptive to watch out for/plan
user preferences for in comps to
make construction
easier, layout
more robust
15. Goals of this presentation
Fixed-width Flexible Non-
designer: designer: designer:
Make designs Know what to Identify
more adaptive to watch out for/plan problematic
user preferences for in comps to design elements
make construction to convince
easier, layout designer to
more robust change or tweak
yourself
16. Not just avoiding fixed widths
No fixed heights for anything containing text
18. Width affects height
Liquid:
Change in viewport width
Text wraps differently
Change in number of lines
of text
Change in height of block
text sits in
19. Width affects height
Liquid: Elastic:
Change in viewport width Change in font size
Text wraps differently Change in height of text
characters
Change in number of lines
of text Change in height of block
text sits in
Change in height of block
text sits in
20. Avoid:
#
Irregular shapes defining a text area
1
21. Irregular shapes defining a text area
Example:
The Lippincott, www.thelippincott.net (site currently down)
23. Irregular shapes defining a text area
Example:
Example:
Scrapbook Your Memories, http://scrapbookyourmemories.myshopify.com
24. Irregular shapes defining a text area
Example:
Scrapbook Your Memories, http://scrapbookyourmemories.myshopify.com
25. Are we stuck with only
straight rectangles?
Image from flickr, “Rectangle” by Ikhlasul Amal
26. Irregular shapes defining a text area
Solution: Tile irregular pattern
Miracles in Africa, www.miraclesinafrica.org
27. Irregular shapes defining a text area
Solution: Tile irregular pattern
Simon Wiffen, www.simonwiffen.co.uk
28. Irregular shapes defining a text area
Solution: Tile straight piece
Neurotic, Web Design page, http://en.neuroticweb.com/web-design
29. Avoid:
#
Text matched with images that can’t
2
expand
30. Text matched with images that can’t expand
Example:
etonDIGITAL, www.etondigital.com
31. Pick the right images
Image from flickr, “June 10, 2006: Picked!” by Matt McGee
32. Text matched with images that can’t expand
Solution: Masked images
Sesame Communications, www.sesamecommunications.com
33. Text matched with images that can’t expand
Solution: Masked images
Use the proper CSS to ensure text has
enough space to sit in
Usolab, www.usolab.com
34. Text matched with images that can’t expand
Solution: Masked images
Anchoring the background image:
div {
padding: 20px 20px 100px 20px;
background: #fff url(image.jpg) no-repeat bottom left;
}
35. Text matched with images that can’t expand
Solution: Variable cropping
CSS technique, but requires designing with
right type of images
Erskine Corporation, www.erskinecorp.com (since redesigned)
36. Text matched with images that can’t expand
Solution: Variable cropping
Background image: Foreground image:
div { div {
width: 50%; width: 50%;
min-height: 100px; min-height: 100px;
background: overflow: hidden;
url(image.jpg) no-repeat; }
}
<div><img src="image.jpg"
<div></div> width="500" height="100"
alt="text"></div>
37. Text matched with images that can’t expand
Solution: Variable cropping
Can stitch together multiple to make longer
Dartmouth College, www.dartmouth.edu
38. Text matched with images that can’t expand
Solution: Blend into background
Air Adventure Australia, www.airadventure.com.au
39. Text matched with images that can’t expand
Solution: Blend into background
Defacto, www.defacto-cms.com
40. Text matched with images that can’t expand
Solution: Scalable images
CSS technique, but requires designing with
right type of images
Castello di Bolgheri, www.castellodibolgheri.eu
55. Horizontal alignment across columns
Solution: Accept misalignment
The Open University, Continuing Professional Development home page, www.open.ac.uk/cpd
56. Summary of what to avoid:
• Irregular shapes defining a text area
• Text matched with images that can’t
expand
• Fixed-width, full-width content
• Horizontal alignment across columns
57. Cute Cat Theory of the Web
Web 1.0 was Web 2.0 was
invented to allow created to allow
physicists to share people to share
research papers pictures of cute cats
Ethan Zuckerman
http://www.ethanzuckerman.com/blog/2008/03/08/the-cute-cat-theory-talk-at-etech/
