CSS3 and Progressive Enhancement

CSS3 and Progressive Enhancement

Amanda Garceau

I recently attended a seminar about CSS3, all the cool new features, and how to use them. There are many exciting advancements including:

  • Shadows
  • Strokes
  • Text Wrapping for input fields
  • Opacity
  • Hue/saturation/luminance
  • Rounded corners
  • Gradients
  • Background sizing
  • Multiple backgrounds (my favorite!)
  • Transitions
  • Many, many more!

This, much like other new technologies (HTML5) do not work in all browsers, that is where the concept of Progressive Enhancement comes in. It’s always been something that we developers keep in mind, especially here at eROI with all of the email work that we do … we love building for Outlook ;)

Essentially, the theory behind it is that all websites don’t need to look the same in all browsers, but to try and keep a good user experience throughout. For a basic example, rounded corners … For the browsers that do support it, great but for the others that don’t (IE6-8) the user will see square corners. Does this change the user experience at all? No, and someone using IE most likely won’t even realize there’s anything missing.

Here are a few guidelines when thinking about Progressive Enhancement:

  • Websites do not need to look the same in all browsers
  • Take full advantage of each browser’s strengths and weakness based on web standards
  • Basic functionality and content should be accessible to all browsers
  • Respect the end user’s preferences:
    • Some users have special stylesheets applied to all websites
      (enlarged fonts, hearing impairment, etc.)

For more info, check out Jason Cranford Teague’s post about the seminar.

Amanda Garceau Google+ profile
_amanda garceau :: Development Manager at eROI.

I recently attended a seminar about CSS3, all the cool new features, and how to use them. There are many exciting advancements including:

  • Shadows
  • Strokes
  • Text Wrapping for input fields
  • Opacity
  • Hue/saturation/luminance
  • Rounded corners
  • Gradients
  • Background sizing
  • Multiple backgrounds (my favorite!)
  • Transitions
  • Many, many more!

This, much like other new technologies (HTML5) do not work in all browsers, that is where the concept of Progressive Enhancement comes in. It’s always been something that we developers keep in mind, especially here at eROI with all of the email work that we do … we love building for Outlook ;)

Essentially, the theory behind it is that all websites don’t need to look the same in all browsers, but to try and keep a good user experience throughout. For a basic example, rounded corners … For the browsers that do support it, great but for the others that don’t (IE6-8) the user will see square corners. Does this change the user experience at all? No, and someone using IE most likely won’t even realize there’s anything missing.

Here are a few guidelines when thinking about Progressive Enhancement:

  • Websites do not need to look the same in all browsers
  • Take full advantage of each browser’s strengths and weakness based on web standards
  • Basic functionality and content should be accessible to all browsers
  • Respect the end user’s preferences:
    • Some users have special stylesheets applied to all websites
      (enlarged fonts, hearing impairment, etc.)

For more info, check out Jason Cranford Teague’s post about the seminar.

If you like this story subscribe to our newsletter.

Get updates directly to your email and never miss a thing.

Thanks!

This entry was posted in Development, Process, Tips & Tricks. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.
Google+