Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf ·...
Transcript of Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf ·...
![Page 1: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/1.jpg)
Designing CSS Layouts for the Flexible WebSeptember 10, 2008NAGW National Conference, St. Charles, ILZoe Mickley Gillenwater
![Page 2: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/2.jpg)
A little about me• Design Services Manager at UNC
Highway Safety Research Center• Author of upcoming Flexible Web Design:
Creating Liquid and Elastic Layouts with CSS
• Author of Web Accessibility Principles for lynda.com
• Member, Adobe Task Force of Web Standards Project (WaSP)
![Page 3: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/3.jpg)
What is flexible design?
• Overall width is not fixed number of pixels• Liquid (aka fluid)• Elastic• Hybrid
![Page 4: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/4.jpg)
Liquid
Width adapts to viewport
![Page 5: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/5.jpg)
Elastic
Width adapts to text size
![Page 6: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/6.jpg)
Hybrid
Mixture of fixed-width, liquid, and/or elastic for column widths
![Page 7: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/7.jpg)
Why bother?
Why not?Why choose fixed-width when web is flexible by default?
![Page 8: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/8.jpg)
When fixed-width makes sense
• Lots of fixed-width, large content• Known users with known setup• Beginning designer• Just need to get something small and
simple up quickly
![Page 9: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/9.jpg)
Don’t swim upstream if you don’t have to
Image from flickr, “swimming upstream” by tempo
![Page 10: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/10.jpg)
Benefits of flexible layoutsLiquid Elastic
Increased usability, readability and accessibility
Respect user preferences
Less chance of horizontal scrollbars
Increased typographic control
Take advantage of screen real estate
Preserve design proportions
![Page 11: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/11.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 12: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/12.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 13: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/13.jpg)
Not just avoiding fixed widths
No fixed heights for anything containing text
![Page 14: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/14.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 15: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/15.jpg)
Avoid:
Irregular shapes defining a text area
#
![Page 16: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/16.jpg)
Example:
Mostly Lisa, www.mostlylisa.com
Irregular shapes defining a text area
![Page 17: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/17.jpg)
Example:
Scrapbook Your Memories, http://scrapbookyourmemories.myshopify.com
Example:
Irregular shapes defining a text area
![Page 18: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/18.jpg)
Example:
Scrapbook Your Memories, http://scrapbookyourmemories.myshopify.com
Irregular shapes defining a text area
![Page 19: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/19.jpg)
Are we stuck with only straight rectangles?
Image from flickr, “Rectangle” by Ikhlasul Amal
![Page 20: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/20.jpg)
Solution: Tile irregular patternIrregular shapes defining a text area
Miracles in Africa, www.miraclesinafrica.org
![Page 21: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/21.jpg)
Solution: Tile irregular pattern
Simon Wiffen, www.simonwiffen.co.uk
Irregular shapes defining a text area
![Page 22: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/22.jpg)
Solution: Tile straight piece
Neurotic, Web Design page, http://en.neuroticweb.com/web-design
Irregular shapes defining a text area
![Page 23: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/23.jpg)
Avoid:
Text matched with images that can’t expand
#
![Page 24: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/24.jpg)
Example:
etonDIGITAL, www.etondigital.com
Text matched with images that can’t expand
![Page 25: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/25.jpg)
Pick the right images
Image from flickr, “June 10, 2006: Picked!” by Matt McGee
![Page 26: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/26.jpg)
Solution: Masked images
Sesame Communications, www.sesamecommunications.com
Text matched with images that can’t expand
![Page 27: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/27.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 28: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/28.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 29: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/29.jpg)
Solution: Variable cropping
Background image:div {
width: 50%;min-height: 100px;background: url(image.jpg) no-repeat;}
<div></div>
Foreground image:div {
width: 50%;min-height: 100px;overflow: hidden;}
<div><img src="image.jpg" width="500" height="100" alt="text"></div>
Text matched with images that can’t expand
![Page 30: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/30.jpg)
Solution: Variable croppingCan stitch together multiple to make longer
Willamette University, www.willamette.edu
Text matched with images that can’t expand
![Page 31: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/31.jpg)
Solution: Blend into background
Air Adventure Australia, www.airadventure.com.au
Text matched with images that can’t expand
![Page 32: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/32.jpg)
Solution: Blend into background
Defacto, www.defacto-cms.com
Text matched with images that can’t expand
![Page 33: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/33.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 34: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/34.jpg)
Solution: Scalable images
Liquid image:img {
width: 50%;}
<img src="image.jpg" alt="text">
Elastic image:img {
width: 20em;}
<img src="image.jpg" alt="text">
Text matched with images that can’t expand
![Page 35: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/35.jpg)
Avoid:
Fixed-width, full-width content
#
![Page 36: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/36.jpg)
Example:
Roseville Health & Wellness Center, Personal Training page, www.rosevillehwc.com/personalTraining.php
Fixed-width, full-width content
![Page 37: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/37.jpg)
Example:
Roseville Health & Wellness Center, www.rosevillehwc.com
Fixed-width, full-width content
![Page 38: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/38.jpg)
Solution: Non-full-width images
Todd Silver Design, www.toddsilverdesign.net
Fixed-width, full-width content
![Page 39: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/39.jpg)
Solution: Composite images
Ronin Snowboards, www.roninsnowboards.com
Fixed-width, full-width content
![Page 40: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/40.jpg)
Solution: Scrollbars for large content
Bokardo, http://bokardo.com
Fixed-width, full-width content
CSS technique using overflow property
![Page 41: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/41.jpg)
Solution: Scrollbars for large contentdiv {
overflow: auto;}
<div><img src="image.jpg" alt="text" width="600" height="400"></div>
Fixed-width, full-width content
![Page 42: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/42.jpg)
Avoid:
Horizontal alignment across columns
#
![Page 43: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/43.jpg)
Example:Horizontal alignment across columns
Cafédirect, www.cafedirect.co.uk
![Page 44: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/44.jpg)
Example:Horizontal alignment across columns
UX Magazine, www.uxmag.com
![Page 45: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/45.jpg)
Solution: Accept misalignmentHorizontal alignment across columns
The Open University, Continuing Professional Development home page, www.open.ac.uk/cpd
![Page 46: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/46.jpg)
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
![Page 47: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/47.jpg)
What’s wrong with this picture?
![Page 48: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/48.jpg)
A more flexible-friendly version
![Page 49: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/49.jpg)
How it might look narrower
![Page 50: Designing CSS Layouts for the Flexible Webzomigi.com/...CSS-Layouts-Flexible-Web_080910.pdf · Designing CSS Layouts for the Flexible Web September 10, 2008 NAGW National Conference,](https://reader034.fdocuments.us/reader034/viewer/2022050217/5f62c214c08504259b445a08/html5/thumbnails/50.jpg)
Flexible design inspiration
www.zomigi.com/blog/inspiration-for-flexible- web-design