Designing CSS Layouts for the Flexible Web
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Designing CSS Layouts for the Flexible Web

on

  • 3,625 views

 

Statistics

Views

Total Views
3,625
Views on SlideShare
3,290
Embed Views
335

Actions

Likes
3
Downloads
53
Comments
1

4 Embeds 335

https://studentcentral.brighton.ac.uk 323
http://www.linkedin.com 10
https://visit.brighton.ac.uk 1
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Designing CSS Layouts for the Flexible Web Presentation Transcript

  • 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
  • 4. Liquid Width adapts to viewport
  • 5. Elastic Width adapts to text size
  • 6. Hybrid Mixture of fixed-width, liquid, and/or elastic for column widths
  • 7. Why bother?
  • 8. Why bother? Why not? Why choose fixed-width when web is flexible by default?
  • 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
  • 17. Width affects height
  • 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)
  • 22. Irregular shapes defining a text area Example: Mostly Lisa, www.mostlylisa.com (since redesigned)
  • 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
  • 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. Avoid: Fixed-width, full-width content # 3
  • 43. Fixed-width, full-width content Example: Roseville Health & Wellness Center, Personal Training page, www.rosevillehwc.com/personalTraining.php
  • 44. Fixed-width, full-width content Example: Roseville Health & Wellness Center, www.rosevillehwc.com
  • 45. Fixed-width, full-width content Solution: Non-full-width images Todd Silver Design, www.toddsilverdesign.net
  • 46. Fixed-width, full-width content Solution: Composite images Ronin Snowboards, www.roninsnowboards.com (since redesigned)
  • 47. Fixed-width, full-width content Solution: Composite images Ronin Snowboards, www.roninsnowboards.com (since redesigned)
  • 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. Fixed-width, full-width content Solution: Scrollbars for large content CSS technique using overflow property Bokardo, http://bokardo.com
  • 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. Avoid: # 4 Horizontal alignment across columns
  • 52. Horizontal alignment across columns Example: Cafédirect, www.cafedirect.co.uk
  • 53. Horizontal alignment across columns Example: Cafédirect, www.cafedirect.co.uk
  • 54. Horizontal alignment across columns Example: UX Magazine, www.uxmag.com
  • 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/
  • 58. What’s wrong with this picture?
  • 59. A more flexible-friendly version
  • 60. How it might look narrower
  • 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. Questions? Zoe Mickley Gillenwater design@zomigi.com www.zomigi.com