Your SlideShare is downloading. ×
0
×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Designing with CSS3 Effectively & Efficiently

2,415

Published on

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

No Downloads
Views
Total Views
2,415
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
32
Comments
0
Likes
8
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 1 Designing with CSS3 Effectively & Efficiently October 2010 Adobe MAX Zoe Mickley Gillenwater @zomigi
  • 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. What is CSS3? See modules at www.w3.org/Style/ CSS/current-work
  • 4. Current status
  • 5. Use the parts of CSS3 that: ✔ have generally stable syntax. ✔ have good support. ✔ don't harm non-supporting browsers by their lack.
  • 6. Progressive enhancement
  • 7. Progressive enhancement
  • 8. Progressive enhancement
  • 9. Progressive enhancement
  • 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. Good enhancement Firefox IE 8
  • 12. Enhancement failure RGBA/HSLA in Firefox RGBA/HSLA in IE 8
  • 13. A few of the things you can use... Photo by Kristin Roach, www.flickr.com/photos/kristinroach/3995676135
  • 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. 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. 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. 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. 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. @font-face www.blueskyresumes.com, www.jasonsantamaria.com, http://lostworldsfairs.com/atlantis, www.fredssoldater.se Fonts Module
  • 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. Benefits of CSS3 Decrease development time maintenance time page loading time Increase usability accessibility adaptability across devices search engine placement (besides looking cool)
  • 22. Reduced development and maintenance time • Less images, Flash, JavaScript • Streamlined markup
  • 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. Better search engine placement • Google uses speed as ranking factor • Real text instead of image or Flash text
  • 25. Increased usability • Real text • Optimized styles based on device capabilities
  • 26. Real-world example
  • 27. Before CSS3 FF 3.6 IE 8 IE 6 HTTP requests 36 37 47 Loading time 1.5 1.3 3seconds
  • 28. The nav bar inactive hovered current page indicator Before: 8 images
  • 29. The nav bar inactive hovered current page indicator After: 1 image Before: 8 images
  • 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. 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. IE 9 beta
  • 33. IE 8
  • 34. IE 6
  • 35. Wrapping tabs Larger text + narrow window = ugly Amazon double-row tabs from 2000
  • 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. Media queries for mobile min-width max-width device-width min-device-width max-device-width orientation -webkit-min-device-pixel-ratio
  • 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. 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. 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. Media queries in Dreamweaver
  • 42. Learn more Download slides, get links: www.zomigi.com/blog/adobe-max/ Zoe Mickley Gillenwater @zomigi design@zomigi.com www.zomigi.com
  • 43. Learn more with my book WEB2010 35% off + free shipping on peachpit.com www.stunningcss3.com
  • 44. Questions? Zoe Mickley Gillenwater @zomigi design@zomigi.com www.zomigi.com

×