Designing with CSS3 Effectively & Efficiently. October 2010 Adobe MAX Zoe Mickley

Size: px

Start display at page:

Download "Designing with CSS3 Effectively & Efficiently. October 2010 Adobe MAX Zoe Mickley"

Leonard Warner
6 years ago
Views:

1 Designing with CSS3 Effectively & Efficiently October 2010 Adobe MAX Zoe Mickley 1

2 What I do out now out Dec 10 Books Web Flexible Web Design: Creating Liquid and Elastic Layouts with CSS Freelance graphic designer and web developer CSS consultant Member of Adobe Task Force for WaSP Stunning CSS3: A Project-based Guide to the Latest in CSS

3 What is CSS3? See modules at 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 highend 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,

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,

14 Backgrounds and Borders Module border-radius

Backgrounds and Borders Module box-shadow www.fredssoldater.se, http://chris-armstrong.

15 Backgrounds and Borders Module box-shadow

16 Text Module text-shadow

com/demos/grooveshark, www.broken-links.

17 Image Values Module Gradients

18 Color Module RGBA and HSLA

19 Fonts

20 2D Transforms Module Transforms

21 Benefits of CSS3 (besides looking cool) Decrease Increase development time maintenance time page loading time usability accessibility adaptability across devices search engine placement

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,

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 HTTP requests Loading time seconds FF IE IE

28 The nav bar Before: 8 images inactive hovered current page indicator

29 The nav bar Before: 8 images inactive hovered current page indicator After: 1 image

30 Before CSS3, optimized HTTP requests Loading time seconds decrease FF % IE % IE %

31 After CSS3 HTTP requests Loading time seconds decrease FF % IE % IE %

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 all and (max-width:52em) { English translation: #swoosh { display: none; } Up to a maximum #mainnav { padding: 8px 0; } width of 52 ems, use #mainnav ul { margin: 0; } these styles. Once you #mainnav li { get past 52 ems, use margin-left: 12px; padding: 0; the regular styles. border: none; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; background: none; } #mainnav li:hover { background: none; } }

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, screen and portrait & landscape (min-width: 320px) and (max-width: 480px) portrait & landscape (min-device-width: 320px) and (max-device-width: 480px) portrait & landscape (max-device-width: 480px) landscape only (min-width: 321px) portrait only (max-width: 320px)

39 Targeting screen and portrait & landscape (min-device-width: 768px) and (max-device-width: 1024px) landscape only (min-width: 769px) landscape only (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape) portrait only (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait)

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: Zoe Mickley

Learn more with my book WEB2010 35% off +

43 Learn more with my book WEB % off + free shipping on peachpit.com

44 Questions? Zoe Mickley

CSS3: Using media queries to improve the web site experience. November 19, 2011 indieconf Zoe Mickley

CSS3: Using media queries to improve the web site experience November 19, 2011 indieconf Zoe Mickley Gillenwater @zomigi What I do Books Web Stunning CSS3: A Project-based Guide to the Latest in CSS Accessibility