0
Designing CSS Layouts for
the Flexible Web
July 18, 2009
The CSS Summit
Zoe Mickley Gillenwater
A little about me
• Author of Flexible Web Design: Creating
  Liquid and Elastic Layouts with CSS
• Author of lynda.com vi...
What is flexible design?
•   Overall width is not fixed number of pixels
•   Liquid (aka fluid)
•   Elastic
•   Hybrid
Liquid
Width adapts
to viewport
Elastic
Width adapts
to text size
Hybrid
Mixture of
fixed-width,
liquid, and/or
elastic for
column widths
Why bother?
Why bother?

Why not?
Why choose fixed-width when web is flexible
by default?
Image from flickr, “swimming upstream” by tempo




                                  Don’t swim upstream
                ...
Benefits of flexible layouts
Liquid                         Elastic
Respect user preferences

Increased usability, readabi...
Work well and look good for
         a larger number of people
         a greater amount of the time

Image from Flickr, “...
Design differently from the start
• Not every comp (aka mock-up) can be
  turned into liquid or elastic layout
• Learn whi...
Goals of this presentation
Fixed-width
designer:
Make designs
more adaptive to
user preferences
Goals of this presentation
Fixed-width        Flexible
designer:          designer:
Make designs       Know what to
more a...
Goals of this presentation
Fixed-width        Flexible             Non-
designer:          designer:            designer:
...
Not just avoiding fixed widths
No fixed heights for anything containing text
Width affects height
Width affects height
Liquid:
Change in viewport width


Text wraps differently


Change in number of lines
of text


Chang...
Width affects height
Liquid:                     Elastic:
Change in viewport width    Change in font size


Text wraps dif...
Avoid:
                                   #
Irregular shapes defining a text area
                                        1
Irregular shapes defining a text area
  Example:




The Lippincott, www.thelippincott.net (site currently down)
Irregular shapes defining a text area
  Example:




Mostly Lisa, www.mostlylisa.com (since redesigned)
Irregular shapes defining a text area
  Example:



                                          Example:




Scrapbook Your ...
Irregular shapes defining a text area
  Example:




Scrapbook Your Memories, http://scrapbookyourmemories.myshopify.com
Are we stuck with only
    straight rectangles?




Image from flickr, “Rectangle” by Ikhlasul Amal
Irregular shapes defining a text area
  Solution: Tile irregular pattern




Miracles in Africa, www.miraclesinafrica.org
Irregular shapes defining a text area
  Solution: Tile irregular pattern




Simon Wiffen, www.simonwiffen.co.uk
Irregular shapes defining a text area
  Solution: Tile straight piece




Neurotic, Web Design page, http://en.neuroticweb...
Avoid:
                                  #
Text matched with images that can’t
                                      2
exp...
Text matched with images that can’t expand
  Example:




etonDIGITAL, www.etondigital.com
Pick the right images




Image from flickr, “June 10, 2006: Picked!” by Matt McGee
Text matched with images that can’t expand
  Solution: Masked images




Sesame Communications, www.sesamecommunications.c...
Text matched with images that can’t expand
  Solution: Masked images
  Use the proper CSS to ensure text has
  enough spac...
Text matched with images that can’t expand
Solution: Masked images
Anchoring the background image:
div {
  padding: 20px 2...
Text matched with images that can’t expand
  Solution: Variable cropping
  CSS technique, but requires designing with
  ri...
Text matched with images that can’t expand
Solution: Variable cropping
Background image:              Foreground image:
di...
Text matched with images that can’t expand
  Solution: Variable cropping
  Can stitch together multiple to make longer



...
Text matched with images that can’t expand
  Solution: Blend into background




Air Adventure Australia, www.airadventure...
Text matched with images that can’t expand
  Solution: Blend into background




Defacto, www.defacto-cms.com
Text matched with images that can’t expand
  Solution: Scalable images
  CSS technique, but requires designing with
  righ...
Text matched with images that can’t expand
Solution: Scalable images
Liquid image:                Elastic image:
img {    ...
Avoid:
Fixed-width, full-width content
                                  #
                                      3
Fixed-width, full-width content
  Example:




Roseville Health & Wellness Center, Personal Training page, www.rosevillehw...
Fixed-width, full-width content
  Example:




Roseville Health & Wellness Center, www.rosevillehwc.com
Fixed-width, full-width content
  Solution: Non-full-width images




Todd Silver Design, www.toddsilverdesign.net
Fixed-width, full-width content
  Solution: Composite images




Ronin Snowboards, www.roninsnowboards.com (since redesign...
Fixed-width, full-width content
  Solution: Composite images




Ronin Snowboards, www.roninsnowboards.com (since redesign...
Text matched with images that can’t expand
Solution: Composite images
<div id="outer">
<div id="inner">
...
</div>
</div>
...
Fixed-width, full-width content
  Solution: Scrollbars for large
  content
  CSS technique
  using overflow
  property



...
Fixed-width, full-width content
Solution: Scrollbars for large
content
div {
   overflow: auto;
   }

<div>
<img src="imag...
Avoid:
                                #
                                      4
Horizontal alignment across columns
Horizontal alignment across columns
  Example:




Cafédirect, www.cafedirect.co.uk
Horizontal alignment across columns
  Example:




Cafédirect, www.cafedirect.co.uk
Horizontal alignment across columns
  Example:




UX Magazine, www.uxmag.com
Horizontal alignment across columns
  Solution: Accept misalignment




The Open University, Continuing Professional Devel...
Summary of what to avoid:
• Irregular shapes defining a text area
• Text matched with images that can’t
  expand
• Fixed-w...
Cute Cat Theory of the Web
Web 1.0 was                                        Web 2.0 was
invented to allow               ...
What’s wrong with this picture?
A more flexible-friendly version
How it might look narrower
Learn more
Download slides, get links:
www.zomigi.com/blog/css-summit

Flexible design inspiration:
www.zomigi.com/blog/in...
Questions?




Zoe Mickley Gillenwater
design@zomigi.com
www.zomigi.com
Upcoming SlideShare
Loading in...5
×

Designing CSS Layouts for the Flexible Web

3,400

Published on

Published in: Design
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,400
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
57
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Designing CSS Layouts for the Flexible Web"

  1. 1. Designing CSS Layouts for the Flexible Web July 18, 2009 The CSS Summit Zoe Mickley Gillenwater
  2. 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. 3. What is flexible design? • Overall width is not fixed number of pixels • Liquid (aka fluid) • Elastic • Hybrid
  4. 4. Liquid Width adapts to viewport
  5. 5. Elastic Width adapts to text size
  6. 6. Hybrid Mixture of fixed-width, liquid, and/or elastic for column widths
  7. 7. Why bother?
  8. 8. Why bother? Why not? Why choose fixed-width when web is flexible by default?
  9. 9. Image from flickr, “swimming upstream” by tempo Don’t swim upstream if you don’t have to
  10. 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. 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. 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. 13. Goals of this presentation Fixed-width designer: Make designs more adaptive to user preferences
  14. 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. 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. 16. Not just avoiding fixed widths No fixed heights for anything containing text
  17. 17. Width affects height
  18. 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. 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. 20. Avoid: # Irregular shapes defining a text area 1
  21. 21. Irregular shapes defining a text area Example: The Lippincott, www.thelippincott.net (site currently down)
  22. 22. Irregular shapes defining a text area Example: Mostly Lisa, www.mostlylisa.com (since redesigned)
  23. 23. Irregular shapes defining a text area Example: Example: Scrapbook Your Memories, http://scrapbookyourmemories.myshopify.com
  24. 24. Irregular shapes defining a text area Example: Scrapbook Your Memories, http://scrapbookyourmemories.myshopify.com
  25. 25. Are we stuck with only straight rectangles? Image from flickr, “Rectangle” by Ikhlasul Amal
  26. 26. Irregular shapes defining a text area Solution: Tile irregular pattern Miracles in Africa, www.miraclesinafrica.org
  27. 27. Irregular shapes defining a text area Solution: Tile irregular pattern Simon Wiffen, www.simonwiffen.co.uk
  28. 28. Irregular shapes defining a text area Solution: Tile straight piece Neurotic, Web Design page, http://en.neuroticweb.com/web-design
  29. 29. Avoid: # Text matched with images that can’t 2 expand
  30. 30. Text matched with images that can’t expand Example: etonDIGITAL, www.etondigital.com
  31. 31. Pick the right images Image from flickr, “June 10, 2006: Picked!” by Matt McGee
  32. 32. Text matched with images that can’t expand Solution: Masked images Sesame Communications, www.sesamecommunications.com
  33. 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. 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. 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. 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. 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. 38. Text matched with images that can’t expand Solution: Blend into background Air Adventure Australia, www.airadventure.com.au
  39. 39. Text matched with images that can’t expand Solution: Blend into background Defacto, www.defacto-cms.com
  40. 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
  41. 41. Text matched with images that can’t expand Solution: Scalable images Liquid image: Elastic image: img { img { width: 50%; width: 20em; } } <img src="image.jpg" <img src="image.jpg" alt="text"> alt="text">
  42. 42. Avoid: Fixed-width, full-width content # 3
  43. 43. Fixed-width, full-width content Example: Roseville Health & Wellness Center, Personal Training page, www.rosevillehwc.com/personalTraining.php
  44. 44. Fixed-width, full-width content Example: Roseville Health & Wellness Center, www.rosevillehwc.com
  45. 45. Fixed-width, full-width content Solution: Non-full-width images Todd Silver Design, www.toddsilverdesign.net
  46. 46. Fixed-width, full-width content Solution: Composite images Ronin Snowboards, www.roninsnowboards.com (since redesigned)
  47. 47. Fixed-width, full-width content Solution: Composite images Ronin Snowboards, www.roninsnowboards.com (since redesigned)
  48. 48. Text matched with images that can’t expand Solution: Composite images <div id="outer"> <div id="inner"> ... </div> </div> #outer { background: url(leftimage.png) no-repeat bottom left; } #inner { background: url(rightimage.png) no-repeat bottom right; }
  49. 49. Fixed-width, full-width content Solution: Scrollbars for large content CSS technique using overflow property Bokardo, http://bokardo.com
  50. 50. Fixed-width, full-width content Solution: Scrollbars for large content div { overflow: auto; } <div> <img src="image.jpg" alt="text" width="600" height="400"> </div>
  51. 51. Avoid: # 4 Horizontal alignment across columns
  52. 52. Horizontal alignment across columns Example: Cafédirect, www.cafedirect.co.uk
  53. 53. Horizontal alignment across columns Example: Cafédirect, www.cafedirect.co.uk
  54. 54. Horizontal alignment across columns Example: UX Magazine, www.uxmag.com
  55. 55. Horizontal alignment across columns Solution: Accept misalignment The Open University, Continuing Professional Development home page, www.open.ac.uk/cpd
  56. 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. 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/
  58. 58. What’s wrong with this picture?
  59. 59. A more flexible-friendly version
  60. 60. How it might look narrower
  61. 61. Learn more Download slides, get links: www.zomigi.com/blog/css-summit Flexible design inspiration: www.zomigi.com/blog/inspiration-for-flexible-web-design Book: www.flexiblewebbook.com
  62. 62. Questions? Zoe Mickley Gillenwater design@zomigi.com www.zomigi.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×