Going without Photoshop, and saving your self some time, while keeping the beauty of your site.<br />Progressive Enhanceme...
Progressive Enhancement<br />What is progressive enhancement?<br />When/why use it?<br />How to use it (the actual code)<b...
Progressive Enhancement: Primmer<br />What is it?<br />Progressive enhancement uses web technologies in a layered fashion ...
Progressive Enhancement: Primmer<br />“providing those with… a more advanced browser, an enhanced version of the page”<br />
Design Strategy<br />Susan’s Strategy<br />To design simple, intelligent, elegant design solutions that articulate intende...
Design Strategy<br />Dan’s Strategy<br />Content organization<br />User path through the site<br />Code compatibility acro...
Progressive Enhancement: Primmer<br />Using CSS 3, in place of using Photoshop<br />Saves a lot of time<br />Gives your mo...
Progressive Enhancement: When to use it?<br />Know your users<br />CEHD: Less than 50% IE<br />Firefox users have recent v...
Browsers<br />Acceptance<br />Once you can predict (and accept) the differences between browsers you can concentrate on th...
Progressive Enhancement: When to use it?<br />Why this is important<br />We work in one of the largest colleges at the U<b...
Progressive Enhancement: How to…<br />Progressive means… not quite done yet.<br />-moz and –webkit<br />Moz means…<br />Fi...
Progressive Enhancement: How to…<br />Transparency<br />background: rgba(255, 0, 0, 0.2);<br />opacity: 0.2;<br />PNGs<br />
Transparency<br />CSS3<br />Firefox<br />Chrome<br />IE<br />
Progressive Enhancement: How to…<br />Slightly different between browsers<br />-moz-border-radius-topleft: 3px<br />-webki...
Progressive Enhancement: How to…<br />Rounding the Corners<br />-moz-border-radius: 3px<br />-webkit-border-radius: 3px<br />
Round Corners using Photoshop<br />Step by step<br />
Step 1: Open image in Photoshop<br />
Step 2: Create a new layer<br />
Step 3: Click on rounded rectangle tool and determine desired radius <br />
Step 4: Draw a rectangle over your image on the new layer with the rounded rectangle tool <br />
Step 5: Go to the Layer pallet and double click on layer with the rectangle to open Layer Style palette. <br />
Step 6: In the Advance Blending area slide the Fill Opacity down to 0%, click OK<br />
Step 7: Go back to the Layers palette, click on Paths tab and click on the little arrow button, a drop down menu will appe...
Step 8: In the “Make Selection” area, set Feather Radius to 0 pixels, and check Anti-aliased, click OK<br />
Step 9: Go to top menu EDIT and select Copy Merged<br />
Step 10: Create a new document<br />
Step 11: Go to top menu FILE and Paste.   Step 12: Go to top menu FILE and Save for Web.  Step 13: etc. etc. etc etc.<br />
Rounded Corners using CSS3<br />Square Corners in IE8<br />Rounded Corner in Firefox<br />
Progressive Enhancement: How to…<br />Adding a drop shadow<br />-moz-box-shadow: 10px 10px 5px #888;<br />-webkit-box-shad...
Drop Shadow<br />Firefox<br />Chrome<br />IE<br />
CSS3: Firefox vs. IE<br />IE<br />Firefox<br />
Progressive Enhancement: Summary<br />It’s time to experiment with CSS3 on production sites and use it for prototyping. <b...
Progressive Enhancement: Summary<br />This is progressive enhancement, adding visual flair in places that support it.<br /...
Progressive Enhancement: Learn More<br />Css3.info<br />
Progressive Enhancement: Learn More<br />perishablepress.com<br />
Progressive Enhancement: Learn More<br />photoshopusersgroup.com<br />
Progressive Enhancement: Learn More<br />Google it!<br />
Progressive Enhancement: Learn More<br />Questions?<br />
Upcoming SlideShare
Loading in …5
×

Progressive Enhancement

1,276 views

Published on

This is a presentation from Minne Web Con 2010.

This presentation is about using CSS3 to enhance sites for browsers that support them, and the trade offs you make when only supporting some browsers.

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

  • Be the first to like this

No Downloads
Views
Total views
1,276
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Design is crucial to the users Web experience and it is my job to find a balance between innovation and standardization that merges content with aesthetics.Throughout the design process I make decisions about balancing design elements with Photoshop or CSS, when to introduce primary and secondary color pallets and decide what is the most effective way to highlight content. At this point I can see what is excessive and can be left out of the design entirely or left out due to the users browser choice.Design is not simply about making a web site “prettier” Its essential to effective communication.Design defines the hierarchy of information, creates the mood and tone, it impacts content by its subtlety, even handedness, and strength. Typically one page will have numerous “types” of information that are equally important and subtle visual treatments connects information from page to page, defining a visual hierarchy. Once the hierarchy is defined, and I know how it will OR WILL NOT be displayed in the various browsers I then decide if the element crucial and deserves consistency in all browsers….and in contrast, Dan…
  • Once you can predict the differences between how the various browsers render Web pages you can spend your time focusing on effective messaging.You can make educated decisions about the best way to visually communicate. Because of how differently browsers display rounded corners, drop shadows and transparency,You can make decisions on what graphic elements are core and need dedicated time in Photoshop to craft the effect and which ones are superfluous.
  • Knowing how browsers render web pages helps streamline our work load.We need to produce andspending time negotiating and finessing 1 px shadows is not always the best use of time.BECAUSE
  • The bottom half of this graphic has a white transparent overlay made in Photoshop.Because the content is important I needed the text to be readable on all browsers. I could use CSS to find the right level of transparency but for visual consistency, I needed to make the design in Photoshop.This page has a carousel of photographsshot in different environments with different lighting levels and determining the level of transparency in relation to readability on each image is quick using Photoshop, I have the process down to 5 minutes per image andI think it is time well spent.Whereas rounding corners….Dan…
  • Step 1: Open image in Photoshop
  • Step 2: Create a new layer
  • Step 3: Click on rounded rectangle tool and determine desired radius of all four corners
  • Step 4: Draw a rectangle over the image on the new layer with the rounded rectangle tool, fill color doesn’t matter
  • Step 5: Go to the Layer pallet and double click on layer with the rectangle to open Layer Style palette. About half way finished, now
  • Step 6: In the Advance Blending area slide the Fill Opacity down to 0%, click OK
  • Step 7: Go back to the Layers palette, click on Paths tab and click on the little arrow button, a drop down menu will appear, select “Make Selection”
  • Step 8: In the “Make Selection” area, set Feather Radius to 0 pixels, and check Anti-aliased, click OK
  • Step 9: Go to top menu EDIT and select Copy Merged
  • Step 10: Go to top menu FILE and make a new document
  • Step 11: Go to top menu FILE and Paste. Step 12: Go to top menu FILE and Save for Web Step 13: etc. etc. etc.These steps are for a fixed image, if you wanted the image to expand and contract depending on text
  • Here is a comparison between Firefox and IE.If the image was to stand on it’s own without the text grounding the lower half, going through the drop shadow steps would be crucial but the rounded corners wouldn’t be crucial to the overall design.
  • Next meeting is this Wednesday 7-9pm MCAD
  • Progressive Enhancement

    1. 1. Going without Photoshop, and saving your self some time, while keeping the beauty of your site.<br />Progressive Enhancement<br />
    2. 2. Progressive Enhancement<br />What is progressive enhancement?<br />When/why use it?<br />How to use it (the actual code)<br />Questions<br />
    3. 3. Progressive Enhancement: Primmer<br />What is it?<br />Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing those with better bandwidth or more advanced browser software an enhanced version of the page. -Wikipedia<br />
    4. 4. Progressive Enhancement: Primmer<br />“providing those with… a more advanced browser, an enhanced version of the page”<br />
    5. 5. Design Strategy<br />Susan’s Strategy<br />To design simple, intelligent, elegant design solutions that articulate intended message<br />Balance between innovation and standardization <br />Majority of users do not see the code.<br />What the users sees, and interacts with, is what defines their experience<br />Applying aesthetic principles to design is not simply making the web site “prettier”<br />Visual design should contribute to a more effective communication experience between the user and the content<br />
    6. 6. Design Strategy<br />Dan’s Strategy<br />Content organization<br />User path through the site<br />Code compatibility across browsers<br />Viewing pages in different environments<br />Visual styling is an afterthought<br />The eye candy that I put into a page to liven it up, but not my main focus.<br />
    7. 7. Progressive Enhancement: Primmer<br />Using CSS 3, in place of using Photoshop<br />Saves a lot of time<br />Gives your more quick fine control<br />Ex: changing opacity back and fourth and take forever<br />Way less complicated<br />No fancy maneuvering<br />
    8. 8. Progressive Enhancement: When to use it?<br />Know your users<br />CEHD: Less than 50% IE<br />Firefox users have recent versions<br />IE use declines every month<br />
    9. 9.
    10. 10.
    11. 11.
    12. 12.
    13. 13.
    14. 14. Browsers<br />Acceptance<br />Once you can predict (and accept) the differences between browsers you can concentrate on the stuff that actually matters, such as content, usability, functionality, portability, etc.<br />It's safe to use border-radius, text and box shadows, and so on, provided you keep in mind what happens when browsers don't support them (and of course aren't obsessed with your pages looking identical in every browser).<br />
    15. 15. Progressive Enhancement: When to use it?<br />Why this is important<br />We work in one of the largest colleges at the U<br />Our group manages about 200 sites, equaling thousands of pages.<br />With around 100 people contributing content in some form.<br />We try our best to use layouts over, but that can only get you so far.<br />Photoshop is awesome, but it takes time. With this many sites, that can add up.<br />
    16. 16. Progressive Enhancement: How to…<br />Progressive means… not quite done yet.<br />-moz and –webkit<br />Moz means…<br />Firefox<br />Webkit means…<br />Safari and Chrome<br />Also iphone, android, and palm<br />
    17. 17. Progressive Enhancement: How to…<br />Transparency<br />background: rgba(255, 0, 0, 0.2);<br />opacity: 0.2;<br />PNGs<br />
    18. 18. Transparency<br />CSS3<br />Firefox<br />Chrome<br />IE<br />
    19. 19. Progressive Enhancement: How to…<br />Slightly different between browsers<br />-moz-border-radius-topleft: 3px<br />-webkit-border-top-left-radius: 3px<br />
    20. 20. Progressive Enhancement: How to…<br />Rounding the Corners<br />-moz-border-radius: 3px<br />-webkit-border-radius: 3px<br />
    21. 21. Round Corners using Photoshop<br />Step by step<br />
    22. 22. Step 1: Open image in Photoshop<br />
    23. 23. Step 2: Create a new layer<br />
    24. 24. Step 3: Click on rounded rectangle tool and determine desired radius <br />
    25. 25. Step 4: Draw a rectangle over your image on the new layer with the rounded rectangle tool <br />
    26. 26. Step 5: Go to the Layer pallet and double click on layer with the rectangle to open Layer Style palette. <br />
    27. 27. Step 6: In the Advance Blending area slide the Fill Opacity down to 0%, click OK<br />
    28. 28. Step 7: Go back to the Layers palette, click on Paths tab and click on the little arrow button, a drop down menu will appear, select “Make Selection”<br />
    29. 29. Step 8: In the “Make Selection” area, set Feather Radius to 0 pixels, and check Anti-aliased, click OK<br />
    30. 30. Step 9: Go to top menu EDIT and select Copy Merged<br />
    31. 31. Step 10: Create a new document<br />
    32. 32. Step 11: Go to top menu FILE and Paste. Step 12: Go to top menu FILE and Save for Web. Step 13: etc. etc. etc etc.<br />
    33. 33. Rounded Corners using CSS3<br />Square Corners in IE8<br />Rounded Corner in Firefox<br />
    34. 34. Progressive Enhancement: How to…<br />Adding a drop shadow<br />-moz-box-shadow: 10px 10px 5px #888;<br />-webkit-box-shadow: 10px 10px 5px #888;<br />
    35. 35. Drop Shadow<br />Firefox<br />Chrome<br />IE<br />
    36. 36. CSS3: Firefox vs. IE<br />IE<br />Firefox<br />
    37. 37. Progressive Enhancement: Summary<br />It’s time to experiment with CSS3 on production sites and use it for prototyping. <br />Adjusting opacity and color with RGBA saves time. <br />Using border-radius for rounding corners and adjusting roundedness and color on the fly is beneficial, while resolving design details.<br />Come to terms with the fact that Web sites don't need to look exactly the same in every browser! <br />Soon this not be “progressive” and you can spend your time designing and not worrying about drop shadows….. <br />
    38. 38. Progressive Enhancement: Summary<br />This is progressive enhancement, adding visual flair in places that support it.<br />Soon this will not be “progressive” and you can spend your time designing and not worrying about drop shadows…<br />
    39. 39. Progressive Enhancement: Learn More<br />Css3.info<br />
    40. 40. Progressive Enhancement: Learn More<br />perishablepress.com<br />
    41. 41. Progressive Enhancement: Learn More<br />photoshopusersgroup.com<br />
    42. 42. Progressive Enhancement: Learn More<br />Google it!<br />
    43. 43. Progressive Enhancement: Learn More<br />Questions?<br />

    ×