designing with css3 effectively efficiently€¦ · progressive enhancement…aims to deliver the...
TRANSCRIPT
![Page 1: Designing with CSS3 Effectively Efficiently€¦ · Progressive enhancement…aims to deliver the best possible experience to the widest possible audience — whether your users are](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5edfc92fad6a402d666b1891/html5/thumbnails/1.jpg)
1
Designing with CSS3 Effectively & EfficientlyOctober 2010Adobe MAXZoe Mickley Gillenwater@zomigi
![Page 2: Designing with CSS3 Effectively Efficiently€¦ · Progressive enhancement…aims to deliver the best possible experience to the widest possible audience — whether your users are](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5edfc92fad6a402d666b1891/html5/thumbnails/2.jpg)
What I do
BooksFlexible Web Design: Creating Liquid and Elastic Layouts with CSSwww.flexiblewebbook.com
Stunning CSS3: A Project-based Guide to the Latest in CSSwww.stunningcss3.com
WebFreelance graphic designer and web developerCSS consultantMember of Adobe Task Force for WaSP
outnow
outDec 10
![Page 3: Designing with CSS3 Effectively Efficiently€¦ · Progressive enhancement…aims to deliver the best possible experience to the widest possible audience — whether your users are](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5edfc92fad6a402d666b1891/html5/thumbnails/3.jpg)
What is CSS3?
See modules at www.w3.org/Style/CSS/current-work
![Page 4: Designing with CSS3 Effectively Efficiently€¦ · Progressive enhancement…aims to deliver the best possible experience to the widest possible audience — whether your users are](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5edfc92fad6a402d666b1891/html5/thumbnails/4.jpg)
Current status
![Page 5: Designing with CSS3 Effectively Efficiently€¦ · Progressive enhancement…aims to deliver the best possible experience to the widest possible audience — whether your users are](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5edfc92fad6a402d666b1891/html5/thumbnails/5.jpg)
Use the parts of CSS3 that:✔ have generally stable syntax.✔ have good support.✔ don't harm non-supporting browsers by
their lack.
![Page 6: Designing with CSS3 Effectively Efficiently€¦ · Progressive enhancement…aims to deliver the best possible experience to the widest possible audience — whether your users are](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5edfc92fad6a402d666b1891/html5/thumbnails/6.jpg)
Progressive enhancement
![Page 7: Designing with CSS3 Effectively Efficiently€¦ · Progressive enhancement…aims to deliver the best possible experience to the widest possible audience — whether your users are](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5edfc92fad6a402d666b1891/html5/thumbnails/7.jpg)
Progressive enhancement
![Page 8: Designing with CSS3 Effectively Efficiently€¦ · Progressive enhancement…aims to deliver the best possible experience to the widest possible audience — whether your users are](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5edfc92fad6a402d666b1891/html5/thumbnails/8.jpg)
Progressive enhancement
![Page 9: Designing with CSS3 Effectively Efficiently€¦ · Progressive enhancement…aims to deliver the best possible experience to the widest possible audience — whether your users are](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5edfc92fad6a402d666b1891/html5/thumbnails/9.jpg)
Progressive enhancement
![Page 10: Designing with CSS3 Effectively Efficiently€¦ · Progressive enhancement…aims to deliver the best possible experience to the widest possible audience — whether your users are](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5edfc92fad6a402d666b1891/html5/thumbnails/10.jpg)
Progressive enhancement…aims to deliver the best possible experience to the widest possible audience — whether your users are viewing your sites on an iPhone, a high-end desktop system, a Kindle, or hearing them on a screen-reader, their experience should be as fully featured and functional as possible.Designing with Progressive Enhancement,
www.filamentgroup.com/dwpe
![Page 11: Designing with CSS3 Effectively Efficiently€¦ · Progressive enhancement…aims to deliver the best possible experience to the widest possible audience — whether your users are](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5edfc92fad6a402d666b1891/html5/thumbnails/11.jpg)
Good enhancementFirefox
IE 8
![Page 12: Designing with CSS3 Effectively Efficiently€¦ · Progressive enhancement…aims to deliver the best possible experience to the widest possible audience — whether your users are](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5edfc92fad6a402d666b1891/html5/thumbnails/12.jpg)
Enhancement failureRGBA/HSLA in
Firefox
RGBA/HSLA in IE 8
![Page 13: Designing with CSS3 Effectively Efficiently€¦ · Progressive enhancement…aims to deliver the best possible experience to the widest possible audience — whether your users are](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5edfc92fad6a402d666b1891/html5/thumbnails/13.jpg)
A few of the things you can use...
Photo by Kristin Roach, www.flickr.com/photos/kristinroach/3995676135
![Page 14: Designing with CSS3 Effectively Efficiently€¦ · Progressive enhancement…aims to deliver the best possible experience to the widest possible audience — whether your users are](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5edfc92fad6a402d666b1891/html5/thumbnails/14.jpg)
border-radius
www.blueskyresumes.com, http://blog.gesteves.com, http://nicolasgallagher.com/demo/pure-css-speech-bubbles/bubbles.html
Backgrounds and Borders Module
![Page 15: Designing with CSS3 Effectively Efficiently€¦ · Progressive enhancement…aims to deliver the best possible experience to the widest possible audience — whether your users are](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5edfc92fad6a402d666b1891/html5/thumbnails/15.jpg)
box-shadow
www.fredssoldater.se, http://chris-armstrong.com, http://girliemac.com/sandbox/button.html, http://weston.ruter.net/2009/06/15/multiple-borders-via-css-box-shadow
Backgrounds and Borders Module
![Page 16: Designing with CSS3 Effectively Efficiently€¦ · Progressive enhancement…aims to deliver the best possible experience to the widest possible audience — whether your users are](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5edfc92fad6a402d666b1891/html5/thumbnails/16.jpg)
text-shadow
http://desandro.com, http://chunkytheme.tumblr.com, http://safe.tumblr.com/theme/preview/5932, http://sixrevisions.com/css/how-to-create-inset-typography-with-css3, , www.time2project.com
Text Module
![Page 17: Designing with CSS3 Effectively Efficiently€¦ · Progressive enhancement…aims to deliver the best possible experience to the widest possible audience — whether your users are](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5edfc92fad6a402d666b1891/html5/thumbnails/17.jpg)
Gradients
http://designindevelopment.com/demos/grooveshark, www.broken-links.com/tests/studio_effect, www.yummly.com, http://nimbupani.com/sexy-css3-buttons.html
Image Values Module
![Page 18: Designing with CSS3 Effectively Efficiently€¦ · Progressive enhancement…aims to deliver the best possible experience to the widest possible audience — whether your users are](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5edfc92fad6a402d666b1891/html5/thumbnails/18.jpg)
RGBA and HSLA
http://24ways.org, http://css-tricks.com/text-blocks-over-image, www.marcofolio.net/css/sweet_tabbed_navigation_using_css3.html
Color Module
![Page 19: Designing with CSS3 Effectively Efficiently€¦ · Progressive enhancement…aims to deliver the best possible experience to the widest possible audience — whether your users are](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5edfc92fad6a402d666b1891/html5/thumbnails/19.jpg)
@font-face
www.blueskyresumes.com, www.jasonsantamaria.com, http:// lostworldsfairs.com/atlantis, www.fredssoldater.se
Fonts Module
![Page 20: Designing with CSS3 Effectively Efficiently€¦ · Progressive enhancement…aims to deliver the best possible experience to the widest possible audience — whether your users are](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5edfc92fad6a402d666b1891/html5/thumbnails/20.jpg)
Transforms
http://butterlabel.com, http://forabeautifulweb.com, http://girliemac.com/sandbox/dock.html, http://lab.simurai.com/css/tilt-shift
2D Transforms Module
![Page 21: Designing with CSS3 Effectively Efficiently€¦ · Progressive enhancement…aims to deliver the best possible experience to the widest possible audience — whether your users are](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5edfc92fad6a402d666b1891/html5/thumbnails/21.jpg)
Benefits of CSS3
Decreasedevelopment timemaintenance timepage loading time
Increaseusabilityaccessibilityadaptability across devicessearch engine placement
(besides looking cool)
![Page 22: Designing with CSS3 Effectively Efficiently€¦ · Progressive enhancement…aims to deliver the best possible experience to the widest possible audience — whether your users are](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5edfc92fad6a402d666b1891/html5/thumbnails/22.jpg)
Reduced development and maintenance time• Less images, Flash, JavaScript• Streamlined markup
![Page 23: Designing with CSS3 Effectively Efficiently€¦ · Progressive enhancement…aims to deliver the best possible experience to the widest possible audience — whether your users are](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5edfc92fad6a402d666b1891/html5/thumbnails/23.jpg)
Increased page performance• Smaller file sizes• Fewer HTTP requests
Reducing the number of HTTP requests…is the most important guideline for improving performance for first time visitors.Yahoo! Exceptional Performance Team,
http://developer.yahoo.com/performance/rules.html
![Page 24: Designing with CSS3 Effectively Efficiently€¦ · Progressive enhancement…aims to deliver the best possible experience to the widest possible audience — whether your users are](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5edfc92fad6a402d666b1891/html5/thumbnails/24.jpg)
Better search engine placement• Google uses speed as ranking factor• Real text instead of image or Flash text
![Page 25: Designing with CSS3 Effectively Efficiently€¦ · Progressive enhancement…aims to deliver the best possible experience to the widest possible audience — whether your users are](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5edfc92fad6a402d666b1891/html5/thumbnails/25.jpg)
Increased usability• Real text• Optimized styles based on device
capabilities
![Page 26: Designing with CSS3 Effectively Efficiently€¦ · Progressive enhancement…aims to deliver the best possible experience to the widest possible audience — whether your users are](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5edfc92fad6a402d666b1891/html5/thumbnails/26.jpg)
Real-world example
![Page 27: Designing with CSS3 Effectively Efficiently€¦ · Progressive enhancement…aims to deliver the best possible experience to the widest possible audience — whether your users are](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5edfc92fad6a402d666b1891/html5/thumbnails/27.jpg)
Before CSS3
FF 3.6 IE 8 IE 6HTTP requests 36 37 47Loading time 1.5 1.3 3seconds
![Page 28: Designing with CSS3 Effectively Efficiently€¦ · Progressive enhancement…aims to deliver the best possible experience to the widest possible audience — whether your users are](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5edfc92fad6a402d666b1891/html5/thumbnails/28.jpg)
The nav barinactive
hovered
current page indicator
Before: 8 images
![Page 29: Designing with CSS3 Effectively Efficiently€¦ · Progressive enhancement…aims to deliver the best possible experience to the widest possible audience — whether your users are](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5edfc92fad6a402d666b1891/html5/thumbnails/29.jpg)
The nav barinactive
hovered
current page indicator
After: 1 image
Before: 8 images
![Page 30: Designing with CSS3 Effectively Efficiently€¦ · Progressive enhancement…aims to deliver the best possible experience to the widest possible audience — whether your users are](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5edfc92fad6a402d666b1891/html5/thumbnails/30.jpg)
Before CSS3, optimized
FF 3.6 IE 8 IE 6HTTP requests 29 30 33Loading time 1.3 1.15 2
13% 11% 33%seconds
decrease
![Page 31: Designing with CSS3 Effectively Efficiently€¦ · Progressive enhancement…aims to deliver the best possible experience to the widest possible audience — whether your users are](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5edfc92fad6a402d666b1891/html5/thumbnails/31.jpg)
After CSS3
FF 3.6 IE 8 IE 6HTTP requests 22 23 24Loading time 1.1 1 1.5
15% 13% 25%seconds
decrease
![Page 32: Designing with CSS3 Effectively Efficiently€¦ · Progressive enhancement…aims to deliver the best possible experience to the widest possible audience — whether your users are](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5edfc92fad6a402d666b1891/html5/thumbnails/32.jpg)
IE 9 beta
![Page 33: Designing with CSS3 Effectively Efficiently€¦ · Progressive enhancement…aims to deliver the best possible experience to the widest possible audience — whether your users are](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5edfc92fad6a402d666b1891/html5/thumbnails/33.jpg)
IE 8
![Page 34: Designing with CSS3 Effectively Efficiently€¦ · Progressive enhancement…aims to deliver the best possible experience to the widest possible audience — whether your users are](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5edfc92fad6a402d666b1891/html5/thumbnails/34.jpg)
IE 6
![Page 35: Designing with CSS3 Effectively Efficiently€¦ · Progressive enhancement…aims to deliver the best possible experience to the widest possible audience — whether your users are](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5edfc92fad6a402d666b1891/html5/thumbnails/35.jpg)
Wrapping tabs
Larger text + narrow window = ugly Amazon double-row tabs from 2000
![Page 36: Designing with CSS3 Effectively Efficiently€¦ · Progressive enhancement…aims to deliver the best possible experience to the widest possible audience — whether your users are](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5edfc92fad6a402d666b1891/html5/thumbnails/36.jpg)
Media query for nav bar@media all and (max-width:52em) { #swoosh { display: none; } #mainnav { padding: 8px 0; } #mainnav ul { margin: 0; } #mainnav li { margin-left: 12px; padding: 0; border: none; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; background: none; } #mainnav li:hover { background: none; }}
English translation:Up to a maximum
width of 52 ems, use
these styles. Once you
get past 52 ems, use
the regular styles.
![Page 37: Designing with CSS3 Effectively Efficiently€¦ · Progressive enhancement…aims to deliver the best possible experience to the widest possible audience — whether your users are](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5edfc92fad6a402d666b1891/html5/thumbnails/37.jpg)
Media queries for mobilemin-widthmax-widthdevice-widthmin-device-widthmax-device-widthorientation-webkit-min-device-pixel-ratio
![Page 38: Designing with CSS3 Effectively Efficiently€¦ · Progressive enhancement…aims to deliver the best possible experience to the widest possible audience — whether your users are](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5edfc92fad6a402d666b1891/html5/thumbnails/38.jpg)
Targeting iPhone, Android, etc.
(min-width: 320px) and (max-width: 480px)(min-device-width: 320px) and (max-device-width: 480px)(max-device-width: 480px)(min-width: 321px)(max-width: 320px)
@media screen andportrait & landscape
portrait & landscape
portrait & landscape
landscape only
portrait only
![Page 39: Designing with CSS3 Effectively Efficiently€¦ · Progressive enhancement…aims to deliver the best possible experience to the widest possible audience — whether your users are](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5edfc92fad6a402d666b1891/html5/thumbnails/39.jpg)
Targeting iPad
(min-device-width: 768px) and (max-device-width: 1024px)(min-width: 769px)(min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape)(min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait)
@media screen andportrait & landscape
landscape only
landscape only
portrait only
![Page 40: Designing with CSS3 Effectively Efficiently€¦ · Progressive enhancement…aims to deliver the best possible experience to the widest possible audience — whether your users are](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5edfc92fad6a402d666b1891/html5/thumbnails/40.jpg)
Viewport meta tagForces mobile devices to scale viewport to actual device width
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
![Page 41: Designing with CSS3 Effectively Efficiently€¦ · Progressive enhancement…aims to deliver the best possible experience to the widest possible audience — whether your users are](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5edfc92fad6a402d666b1891/html5/thumbnails/41.jpg)
Media queries in Dreamweaver
![Page 42: Designing with CSS3 Effectively Efficiently€¦ · Progressive enhancement…aims to deliver the best possible experience to the widest possible audience — whether your users are](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5edfc92fad6a402d666b1891/html5/thumbnails/42.jpg)
Learn moreDownload slides, get links:www.zomigi.com/blog/adobe-max/
Zoe Mickley Gillenwater@[email protected]
![Page 43: Designing with CSS3 Effectively Efficiently€¦ · Progressive enhancement…aims to deliver the best possible experience to the widest possible audience — whether your users are](https://reader035.vdocuments.mx/reader035/viewer/2022070720/5edfc92fad6a402d666b1891/html5/thumbnails/43.jpg)
Learn more with my bookWEB201035% off + free shippingon peachpit.com
www.stunningcss3.com