Designing CSS Layouts for the Flexible Web

3,503
-1

Published on

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

No notes for slide

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

×