Designing CSS Layouts for the Flexible...
Transcript of Designing CSS Layouts for the Flexible...
![Page 1: Designing CSS Layouts for the Flexible Webzomigi.com/downloads/Designing-CSS-Layouts-Flexible-Web.pdf · 2008. 6. 17. · Designing CSS Layouts for the Flexible Web June 11, 2008](https://reader036.fdocuments.in/reader036/viewer/2022070223/613efb86c500cf75ab363bae/html5/thumbnails/1.jpg)
Designing CSS Layouts for the Flexible WebJune 11, 2008Voices That Matter: Web Design ConferenceZoe Mickley Gillenwater
![Page 2: Designing CSS Layouts for the Flexible Webzomigi.com/downloads/Designing-CSS-Layouts-Flexible-Web.pdf · 2008. 6. 17. · Designing CSS Layouts for the Flexible Web June 11, 2008](https://reader036.fdocuments.in/reader036/viewer/2022070223/613efb86c500cf75ab363bae/html5/thumbnails/2.jpg)
What is flexible design?• Overall width is not fixed number of pixels• Liquid (or fluid)• Elastic• Hybrid
![Page 3: Designing CSS Layouts for the Flexible Webzomigi.com/downloads/Designing-CSS-Layouts-Flexible-Web.pdf · 2008. 6. 17. · Designing CSS Layouts for the Flexible Web June 11, 2008](https://reader036.fdocuments.in/reader036/viewer/2022070223/613efb86c500cf75ab363bae/html5/thumbnails/3.jpg)
Liquid
Width adapts to viewport
![Page 4: Designing CSS Layouts for the Flexible Webzomigi.com/downloads/Designing-CSS-Layouts-Flexible-Web.pdf · 2008. 6. 17. · Designing CSS Layouts for the Flexible Web June 11, 2008](https://reader036.fdocuments.in/reader036/viewer/2022070223/613efb86c500cf75ab363bae/html5/thumbnails/4.jpg)
Elastic
Width adapts to text size
![Page 5: Designing CSS Layouts for the Flexible Webzomigi.com/downloads/Designing-CSS-Layouts-Flexible-Web.pdf · 2008. 6. 17. · Designing CSS Layouts for the Flexible Web June 11, 2008](https://reader036.fdocuments.in/reader036/viewer/2022070223/613efb86c500cf75ab363bae/html5/thumbnails/5.jpg)
Hybrid
Mixture of fixed-width, liquid, and/or elastic for column widths
![Page 6: Designing CSS Layouts for the Flexible Webzomigi.com/downloads/Designing-CSS-Layouts-Flexible-Web.pdf · 2008. 6. 17. · Designing CSS Layouts for the Flexible Web June 11, 2008](https://reader036.fdocuments.in/reader036/viewer/2022070223/613efb86c500cf75ab363bae/html5/thumbnails/6.jpg)
Why bother?• Disclaimer: fixed-width layouts are not evil• But, flexible layouts have benefits:
– Take advantage of screen real estate– Less chance of horizontal scrollbars to
increase usability and readability– Respect user preferences– Increase accessibility
![Page 7: Designing CSS Layouts for the Flexible Webzomigi.com/downloads/Designing-CSS-Layouts-Flexible-Web.pdf · 2008. 6. 17. · Designing CSS Layouts for the Flexible Web June 11, 2008](https://reader036.fdocuments.in/reader036/viewer/2022070223/613efb86c500cf75ab363bae/html5/thumbnails/7.jpg)
Don’t swim upstream if you don’t have to
Image from flickr, “swimming upstream” by tempo
![Page 8: Designing CSS Layouts for the Flexible Webzomigi.com/downloads/Designing-CSS-Layouts-Flexible-Web.pdf · 2008. 6. 17. · Designing CSS Layouts for the Flexible Web June 11, 2008](https://reader036.fdocuments.in/reader036/viewer/2022070223/613efb86c500cf75ab363bae/html5/thumbnails/8.jpg)
Design differently from the start
• Not every comp can be turned into liquid or elastic layout
• Learn which design features aren’t “flexible-friendly” and how to change them so they are
![Page 9: Designing CSS Layouts for the Flexible Webzomigi.com/downloads/Designing-CSS-Layouts-Flexible-Web.pdf · 2008. 6. 17. · Designing CSS Layouts for the Flexible Web June 11, 2008](https://reader036.fdocuments.in/reader036/viewer/2022070223/613efb86c500cf75ab363bae/html5/thumbnails/9.jpg)
Goals of this presentation
Fixed-width designer:Make designs more adaptive to user preferences
Flexible designer:Know what to watch out for/plan for in comps to make construction easier, layout more robust
Non-designer:Identify problematic design elements to convince designer to change or tweak yourself
![Page 10: Designing CSS Layouts for the Flexible Webzomigi.com/downloads/Designing-CSS-Layouts-Flexible-Web.pdf · 2008. 6. 17. · Designing CSS Layouts for the Flexible Web June 11, 2008](https://reader036.fdocuments.in/reader036/viewer/2022070223/613efb86c500cf75ab363bae/html5/thumbnails/10.jpg)
Not just avoiding fixed widths
Web Designer’s Creed:Thou shalt avoid fixed heights for anything containing text.
![Page 11: Designing CSS Layouts for the Flexible Webzomigi.com/downloads/Designing-CSS-Layouts-Flexible-Web.pdf · 2008. 6. 17. · Designing CSS Layouts for the Flexible Web June 11, 2008](https://reader036.fdocuments.in/reader036/viewer/2022070223/613efb86c500cf75ab363bae/html5/thumbnails/11.jpg)
Width affects height
Liquid: Elastic:Change in viewport width
Text wraps differently
Change in number of lines of text
Change in height of block text sits in
Change in font size
Change in height of text characters
Change in height of block text sits in
![Page 12: Designing CSS Layouts for the Flexible Webzomigi.com/downloads/Designing-CSS-Layouts-Flexible-Web.pdf · 2008. 6. 17. · Designing CSS Layouts for the Flexible Web June 11, 2008](https://reader036.fdocuments.in/reader036/viewer/2022070223/613efb86c500cf75ab363bae/html5/thumbnails/12.jpg)
Avoid:
Irregular shapes defining a text area
#1
![Page 13: Designing CSS Layouts for the Flexible Webzomigi.com/downloads/Designing-CSS-Layouts-Flexible-Web.pdf · 2008. 6. 17. · Designing CSS Layouts for the Flexible Web June 11, 2008](https://reader036.fdocuments.in/reader036/viewer/2022070223/613efb86c500cf75ab363bae/html5/thumbnails/13.jpg)
Example:
Mostly Lisa, www.mostlylisa.com
Irregular shapes defining a text area
![Page 14: Designing CSS Layouts for the Flexible Webzomigi.com/downloads/Designing-CSS-Layouts-Flexible-Web.pdf · 2008. 6. 17. · Designing CSS Layouts for the Flexible Web June 11, 2008](https://reader036.fdocuments.in/reader036/viewer/2022070223/613efb86c500cf75ab363bae/html5/thumbnails/14.jpg)
Example:
Scrapbook Your Memories, http://scrapbookyourmemories.myshopify.com
Example:
Irregular shapes defining a text area
![Page 15: Designing CSS Layouts for the Flexible Webzomigi.com/downloads/Designing-CSS-Layouts-Flexible-Web.pdf · 2008. 6. 17. · Designing CSS Layouts for the Flexible Web June 11, 2008](https://reader036.fdocuments.in/reader036/viewer/2022070223/613efb86c500cf75ab363bae/html5/thumbnails/15.jpg)
Example:
Scrapbook Your Memories, http://scrapbookyourmemories.myshopify.com
Irregular shapes defining a text area
![Page 16: Designing CSS Layouts for the Flexible Webzomigi.com/downloads/Designing-CSS-Layouts-Flexible-Web.pdf · 2008. 6. 17. · Designing CSS Layouts for the Flexible Web June 11, 2008](https://reader036.fdocuments.in/reader036/viewer/2022070223/613efb86c500cf75ab363bae/html5/thumbnails/16.jpg)
Are we stuck with only straight rectangles?
Image from flickr, “Rectangle” by Ikhlasul Amal
![Page 17: Designing CSS Layouts for the Flexible Webzomigi.com/downloads/Designing-CSS-Layouts-Flexible-Web.pdf · 2008. 6. 17. · Designing CSS Layouts for the Flexible Web June 11, 2008](https://reader036.fdocuments.in/reader036/viewer/2022070223/613efb86c500cf75ab363bae/html5/thumbnails/17.jpg)
Solution: Tile irregular pattern
Simon Wiffen, www.simonwiffen.co.uk
Irregular shapes defining a text area
![Page 18: Designing CSS Layouts for the Flexible Webzomigi.com/downloads/Designing-CSS-Layouts-Flexible-Web.pdf · 2008. 6. 17. · Designing CSS Layouts for the Flexible Web June 11, 2008](https://reader036.fdocuments.in/reader036/viewer/2022070223/613efb86c500cf75ab363bae/html5/thumbnails/18.jpg)
Solution: Tile straight piece
Neurotic, Web Design page, http://en.neuroticweb.com/web-design
Irregular shapes defining a text area
![Page 19: Designing CSS Layouts for the Flexible Webzomigi.com/downloads/Designing-CSS-Layouts-Flexible-Web.pdf · 2008. 6. 17. · Designing CSS Layouts for the Flexible Web June 11, 2008](https://reader036.fdocuments.in/reader036/viewer/2022070223/613efb86c500cf75ab363bae/html5/thumbnails/19.jpg)
Avoid:
Text matched with images that can’t expand
#2
![Page 20: Designing CSS Layouts for the Flexible Webzomigi.com/downloads/Designing-CSS-Layouts-Flexible-Web.pdf · 2008. 6. 17. · Designing CSS Layouts for the Flexible Web June 11, 2008](https://reader036.fdocuments.in/reader036/viewer/2022070223/613efb86c500cf75ab363bae/html5/thumbnails/20.jpg)
Example:
etonDIGITAL, www.etondigital.com
Text matched with images that can’t expand
![Page 21: Designing CSS Layouts for the Flexible Webzomigi.com/downloads/Designing-CSS-Layouts-Flexible-Web.pdf · 2008. 6. 17. · Designing CSS Layouts for the Flexible Web June 11, 2008](https://reader036.fdocuments.in/reader036/viewer/2022070223/613efb86c500cf75ab363bae/html5/thumbnails/21.jpg)
Pick the right images
Image from flickr, “June 10, 2006: Picked!” by Matt McGee
![Page 22: Designing CSS Layouts for the Flexible Webzomigi.com/downloads/Designing-CSS-Layouts-Flexible-Web.pdf · 2008. 6. 17. · Designing CSS Layouts for the Flexible Web June 11, 2008](https://reader036.fdocuments.in/reader036/viewer/2022070223/613efb86c500cf75ab363bae/html5/thumbnails/22.jpg)
Solution: Masked images
Sesame Communications, www.sesamecommunications.com
Text matched with images that can’t expand
![Page 23: Designing CSS Layouts for the Flexible Webzomigi.com/downloads/Designing-CSS-Layouts-Flexible-Web.pdf · 2008. 6. 17. · Designing CSS Layouts for the Flexible Web June 11, 2008](https://reader036.fdocuments.in/reader036/viewer/2022070223/613efb86c500cf75ab363bae/html5/thumbnails/23.jpg)
Solution: Masked images
Usolab, www.usolab.com
Text matched with images that can’t expand
Use the proper CSS to ensure text has enough space to sit in
![Page 24: Designing CSS Layouts for the Flexible Webzomigi.com/downloads/Designing-CSS-Layouts-Flexible-Web.pdf · 2008. 6. 17. · Designing CSS Layouts for the Flexible Web June 11, 2008](https://reader036.fdocuments.in/reader036/viewer/2022070223/613efb86c500cf75ab363bae/html5/thumbnails/24.jpg)
Solution: Variable cropping
Erskine Corporation, www.erskinecorp.com
Text matched with images that can’t expand
CSS technique, but requires designing with right type of images
![Page 25: Designing CSS Layouts for the Flexible Webzomigi.com/downloads/Designing-CSS-Layouts-Flexible-Web.pdf · 2008. 6. 17. · Designing CSS Layouts for the Flexible Web June 11, 2008](https://reader036.fdocuments.in/reader036/viewer/2022070223/613efb86c500cf75ab363bae/html5/thumbnails/25.jpg)
Solution: Variable croppingCan stitch together multiple to make longer
Willamette University, www.willamette.edu
Text matched with images that can’t expand
![Page 26: Designing CSS Layouts for the Flexible Webzomigi.com/downloads/Designing-CSS-Layouts-Flexible-Web.pdf · 2008. 6. 17. · Designing CSS Layouts for the Flexible Web June 11, 2008](https://reader036.fdocuments.in/reader036/viewer/2022070223/613efb86c500cf75ab363bae/html5/thumbnails/26.jpg)
Solution: Blend into background
Air Adventure Australia, www.airadventure.com.au
Text matched with images that can’t expand
![Page 27: Designing CSS Layouts for the Flexible Webzomigi.com/downloads/Designing-CSS-Layouts-Flexible-Web.pdf · 2008. 6. 17. · Designing CSS Layouts for the Flexible Web June 11, 2008](https://reader036.fdocuments.in/reader036/viewer/2022070223/613efb86c500cf75ab363bae/html5/thumbnails/27.jpg)
Solution: Blend into background
Defacto, www.defacto-cms.com
Text matched with images that can’t expand
![Page 28: Designing CSS Layouts for the Flexible Webzomigi.com/downloads/Designing-CSS-Layouts-Flexible-Web.pdf · 2008. 6. 17. · Designing CSS Layouts for the Flexible Web June 11, 2008](https://reader036.fdocuments.in/reader036/viewer/2022070223/613efb86c500cf75ab363bae/html5/thumbnails/28.jpg)
Solution: Scalable images
Castello di Bolgheri, www.castellodibolgheri.eu
Text matched with images that can’t expand
CSS technique, but requires designing with right type of images
![Page 29: Designing CSS Layouts for the Flexible Webzomigi.com/downloads/Designing-CSS-Layouts-Flexible-Web.pdf · 2008. 6. 17. · Designing CSS Layouts for the Flexible Web June 11, 2008](https://reader036.fdocuments.in/reader036/viewer/2022070223/613efb86c500cf75ab363bae/html5/thumbnails/29.jpg)
Avoid:
Fixed-width, full-width content
#3
![Page 30: Designing CSS Layouts for the Flexible Webzomigi.com/downloads/Designing-CSS-Layouts-Flexible-Web.pdf · 2008. 6. 17. · Designing CSS Layouts for the Flexible Web June 11, 2008](https://reader036.fdocuments.in/reader036/viewer/2022070223/613efb86c500cf75ab363bae/html5/thumbnails/30.jpg)
Example:
Roseville Health & Wellness Center, Personal Training page, www.rosevillehwc.com/personalTraining.php
Fixed-width, full-width content
![Page 31: Designing CSS Layouts for the Flexible Webzomigi.com/downloads/Designing-CSS-Layouts-Flexible-Web.pdf · 2008. 6. 17. · Designing CSS Layouts for the Flexible Web June 11, 2008](https://reader036.fdocuments.in/reader036/viewer/2022070223/613efb86c500cf75ab363bae/html5/thumbnails/31.jpg)
Example:
Roseville Health & Wellness Center, www.rosevillehwc.com
Fixed-width, full-width content
![Page 32: Designing CSS Layouts for the Flexible Webzomigi.com/downloads/Designing-CSS-Layouts-Flexible-Web.pdf · 2008. 6. 17. · Designing CSS Layouts for the Flexible Web June 11, 2008](https://reader036.fdocuments.in/reader036/viewer/2022070223/613efb86c500cf75ab363bae/html5/thumbnails/32.jpg)
Solution: Non-full-width images
Todd Silver Design, www.toddsilverdesign.net
Fixed-width, full-width content
![Page 33: Designing CSS Layouts for the Flexible Webzomigi.com/downloads/Designing-CSS-Layouts-Flexible-Web.pdf · 2008. 6. 17. · Designing CSS Layouts for the Flexible Web June 11, 2008](https://reader036.fdocuments.in/reader036/viewer/2022070223/613efb86c500cf75ab363bae/html5/thumbnails/33.jpg)
Solution: Composite images
Ronin Snowboards, www.roninsnowboards.com
Fixed-width, full-width content
![Page 34: Designing CSS Layouts for the Flexible Webzomigi.com/downloads/Designing-CSS-Layouts-Flexible-Web.pdf · 2008. 6. 17. · Designing CSS Layouts for the Flexible Web June 11, 2008](https://reader036.fdocuments.in/reader036/viewer/2022070223/613efb86c500cf75ab363bae/html5/thumbnails/34.jpg)
Solution: Scrollbars for large content
Bokardo, http://bokardo.com
Fixed-width, full-width content
CSS technique using overflow property
![Page 35: Designing CSS Layouts for the Flexible Webzomigi.com/downloads/Designing-CSS-Layouts-Flexible-Web.pdf · 2008. 6. 17. · Designing CSS Layouts for the Flexible Web June 11, 2008](https://reader036.fdocuments.in/reader036/viewer/2022070223/613efb86c500cf75ab363bae/html5/thumbnails/35.jpg)
What’s wrong with this picture?
![Page 36: Designing CSS Layouts for the Flexible Webzomigi.com/downloads/Designing-CSS-Layouts-Flexible-Web.pdf · 2008. 6. 17. · Designing CSS Layouts for the Flexible Web June 11, 2008](https://reader036.fdocuments.in/reader036/viewer/2022070223/613efb86c500cf75ab363bae/html5/thumbnails/36.jpg)
A more flexible-friendly version
![Page 37: Designing CSS Layouts for the Flexible Webzomigi.com/downloads/Designing-CSS-Layouts-Flexible-Web.pdf · 2008. 6. 17. · Designing CSS Layouts for the Flexible Web June 11, 2008](https://reader036.fdocuments.in/reader036/viewer/2022070223/613efb86c500cf75ab363bae/html5/thumbnails/37.jpg)
How it might look narrower
![Page 38: Designing CSS Layouts for the Flexible Webzomigi.com/downloads/Designing-CSS-Layouts-Flexible-Web.pdf · 2008. 6. 17. · Designing CSS Layouts for the Flexible Web June 11, 2008](https://reader036.fdocuments.in/reader036/viewer/2022070223/613efb86c500cf75ab363bae/html5/thumbnails/38.jpg)
Flexible design inspiration
www.zomigi.com/blog/inspiration-for-flexible-web-design