I just finished speaking at Web Directions USA on “Effective & Efficient Design with CSS3,” the latest iteration of an the talk I gave at 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 and iPhones). 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 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:
Effective & Efficient Design with CSS3 (PDF, 2.9 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
Flexible Layouts
- 70+ essential resources for creating liquid and elastic layouts
- Flexible Web Design: Creating Liquid and Elastic Layouts with CSS
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.
Thanks for the sharing¡