Designing with CSS3 Effectively & Efficiently

2,882 views

Published on

Published in: Design
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,882
On SlideShare
0
From Embeds
0
Number of Embeds
24
Actions
Shares
0
Downloads
34
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Designing with CSS3 Effectively & Efficiently

  1. 1. 1 Designing with CSS3 Effectively & Efficiently October 2010 Adobe MAX Zoe Mickley Gillenwater @zomigi
  2. 2. What I do Books Flexible Web Design: Creating Liquid and Elastic Layouts with CSS www.flexiblewebbook.com Stunning CSS3: A Project-based Guide to the Latest in CSS www.stunningcss3.com Web Freelance graphic designer and web developer CSS consultant Member of Adobe Task Force for WaSP out now out Dec 10
  3. 3. What is CSS3? See modules at www.w3.org/Style/ CSS/current-work
  4. 4. Current status
  5. 5. Use the parts of CSS3 that: ✔ have generally stable syntax. ✔ have good support. ✔ don't harm non-supporting browsers by their lack.
  6. 6. Progressive enhancement
  7. 7. Progressive enhancement
  8. 8. Progressive enhancement
  9. 9. Progressive enhancement
  10. 10. 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
  11. 11. Good enhancement Firefox IE 8
  12. 12. Enhancement failure RGBA/HSLA in Firefox RGBA/HSLA in IE 8
  13. 13. A few of the things you can use... Photo by Kristin Roach, www.flickr.com/photos/kristinroach/3995676135
  14. 14. border-radius www.blueskyresumes.com, http://blog.gesteves.com, http://nicolasgallagher.com/demo/pure-css-speech-bubbles/bubbles.html Backgrounds and Borders Module
  15. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. 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
  19. 19. @font-face www.blueskyresumes.com, www.jasonsantamaria.com, http://lostworldsfairs.com/atlantis, www.fredssoldater.se Fonts Module
  20. 20. Transforms http://butterlabel.com, http://forabeautifulweb.com, http://girliemac.com/sandbox/dock.html, http://lab.simurai.com/css/tilt-shift 2D Transforms Module
  21. 21. Benefits of CSS3 Decrease development time maintenance time page loading time Increase usability accessibility adaptability across devices search engine placement (besides looking cool)
  22. 22. Reduced development and maintenance time • Less images, Flash, JavaScript • Streamlined markup
  23. 23. 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
  24. 24. Better search engine placement • Google uses speed as ranking factor • Real text instead of image or Flash text
  25. 25. Increased usability • Real text • Optimized styles based on device capabilities
  26. 26. Real-world example
  27. 27. Before CSS3 FF 3.6 IE 8 IE 6 HTTP requests 36 37 47 Loading time 1.5 1.3 3seconds
  28. 28. The nav bar inactive hovered current page indicator Before: 8 images
  29. 29. The nav bar inactive hovered current page indicator After: 1 image Before: 8 images
  30. 30. Before CSS3, optimized FF 3.6 IE 8 IE 6 HTTP requests 29 30 33 Loading time 1.3 1.15 2 13% 11% 33% seconds decrease
  31. 31. After CSS3 FF 3.6 IE 8 IE 6 HTTP requests 22 23 24 Loading time 1.1 1 1.5 15% 13% 25% seconds decrease
  32. 32. IE 9 beta
  33. 33. IE 8
  34. 34. IE 6
  35. 35. Wrapping tabs Larger text + narrow window = ugly Amazon double-row tabs from 2000
  36. 36. 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.
  37. 37. Media queries for mobile min-width max-width device-width min-device-width max-device-width orientation -webkit-min-device-pixel-ratio
  38. 38. 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 and portrait & landscape portrait & landscape portrait & landscape landscape only portrait only
  39. 39. 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 and portrait & landscape landscape only landscape only portrait only
  40. 40. Viewport meta tag Forces mobile devices to scale viewport to actual device width <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
  41. 41. Media queries in Dreamweaver
  42. 42. Learn more Download slides, get links: www.zomigi.com/blog/adobe-max/ Zoe Mickley Gillenwater @zomigi design@zomigi.com www.zomigi.com
  43. 43. Learn more with my book WEB2010 35% off + free shipping on peachpit.com www.stunningcss3.com
  44. 44. Questions? Zoe Mickley Gillenwater @zomigi design@zomigi.com www.zomigi.com

×