Adobe MAX slides and resources

I just finished speaking at Adobe MAX on “Designing with CSS3 Effectively & Efficiently,” the latest iteration of the talk I gave at Web Directions USA, the CSS Summit, and ConvergeSE. I talked about how CSS3 is about more than making things look pretty (though it’s really good at that too). Many CSS3 techniques can reduce your development times, decrease page loading times, improve usability, and increase the adaptability of your pages to different devices (including iPads, iPhones, and Android smart phones). I showed examples of the pieces of CSS3 you can add to your web sites right now and how they might benefit your projects in tangible ways. I included a case study of a real site’s loading time and appearance before and after CSS3, plus an example page built using media queries to improve its appearance and usability at different screen sizes.

You can view the slides on SlideShare, or download the slides here:

Designing with CSS3 Effectively & Efficiently (PDF, 3.3 mb)

Here are several links to related resources that I couldn’t put in the slides but which you might find useful.

Beginner CSS3 Articles

• Start Using CSS3 Today: Techniques and Tutorials
• Modern CSS Layouts: The Essential Characteristics
• Modern CSS Layouts, Part 2: The Essential Techniques
• Prefix or Posthack

Benefits of CSS3

• CSS3 and Veer navigation
• How to: Get CSS3 box-shadow and border-radius accepted as a viable option at your workplace

Media Queries

• A tale of two viewports – part two
• The viewport metatag (Mobile web part 1)
• The orientation media query
• Detecting device size & orientation in CSS
• Designing for the Retina Display (326ppi)
• Protofluid
• css3-mediaqueries-js
• Dreamweaver CS5 media queries

Flexible Layouts

• 70+ essential resources for creating liquid and elastic layouts
• Flexible Web Design: Creating Liquid and Elastic Layouts with CSS

Performance

• The performance business pitch
• Using site speed in web search ranking
• Bing and Google Agree: Slow Pages Lose Users

Finally, if you’re interested in learning more about my book, Stunning CSS3: A Project-based Guide to the Latest in CSS, head on over to www.stunningcss3.com. That’s where the example files for the media query site I showed during my presentation will eventually be hosted. For now, check out the CSS used on the site to see a wide variety of CSS3 techniques in use.