The document discusses the concept of progressive enhancement in web design, emphasizing its benefits in ensuring basic accessibility while enhancing user experience for those with advanced browsers. It advocates for using CSS3 over Photoshop to save time and achieve better design efficiency, highlighting specific techniques like transparent backgrounds and rounded corners. The importance of understanding browser compatibility and design flexibility is stressed, encouraging designers to focus on content and user experience rather than consistent appearance across all browsers.

1. Going without Photoshop, and saving your self some time, while keeping the beauty of your site.Progressive Enhancement

2. Progressive EnhancementWhat is progressive enhancement?When/why use it?How to use it (the actual code)Questions

3. Progressive Enhancement: PrimmerWhat is it?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

4. Progressive Enhancement: Primmer“providing those with… a more advanced browser, an enhanced version of the page”

5. Design StrategySusan’s StrategyTo design simple, intelligent, elegant design solutions that articulate intended messageBalance between innovation and standardization Majority of users do not see the code.What the users sees, and interacts with, is what defines their experienceApplying aesthetic principles to design is not simply making the web site “prettier”Visual design should contribute to a more effective communication experience between the user and the content

6. Design StrategyDan’s StrategyContent organizationUser path through the siteCode compatibility across browsersViewing pages in different environmentsVisual styling is an afterthoughtThe eye candy that I put into a page to liven it up, but not my main focus.

7. Progressive Enhancement: PrimmerUsing CSS 3, in place of using PhotoshopSaves a lot of timeGives your more quick fine controlEx: changing opacity back and fourth and take foreverWay less complicatedNo fancy maneuvering

8. Progressive Enhancement: When to use it?Know your usersCEHD: Less than 50% IEFirefox users have recent versionsIE use declines every month

14. BrowsersAcceptanceOnce 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.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).

15. Progressive Enhancement: When to use it?Why this is importantWe work in one of the largest colleges at the UOur group manages about 200 sites, equaling thousands of pages.With around 100 people contributing content in some form.We try our best to use layouts over, but that can only get you so far.Photoshop is awesome, but it takes time. With this many sites, that can add up.

16. Progressive Enhancement: How to…Progressive means… not quite done yet.-moz and –webkitMoz means…FirefoxWebkit means…Safari and ChromeAlso iphone, android, and palm

17. Progressive Enhancement: How to…Transparencybackground: rgba(255, 0, 0, 0.2);opacity: 0.2;PNGs

18. TransparencyCSS3FirefoxChromeIE

19. Progressive Enhancement: How to…Slightly different between browsers-moz-border-radius-topleft: 3px-webkit-border-top-left-radius: 3px

20. Progressive Enhancement: How to…Rounding the Corners-moz-border-radius: 3px-webkit-border-radius: 3px

21. Round Corners using PhotoshopStep by step

22. Step 1: Open image in Photoshop

23. Step 2: Create a new layer

24. Step 3: Click on rounded rectangle tool and determine desired radius

25. Step 4: Draw a rectangle over your image on the new layer with the rounded rectangle tool

26. Step 5: Go to the Layer pallet and double click on layer with the rectangle to open Layer Style palette.

27. Step 6: In the Advance Blending area slide the Fill Opacity down to 0%, click OK

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”

29. Step 8: In the “Make Selection” area, set Feather Radius to 0 pixels, and check Anti-aliased, click OK

30. Step 9: Go to top menu EDIT and select Copy Merged

31. Step 10: Create a new document

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.

33. Rounded Corners using CSS3Square Corners in IE8Rounded Corner in Firefox

34. Progressive Enhancement: How to…Adding a drop shadow-moz-box-shadow: 10px 10px 5px #888;-webkit-box-shadow: 10px 10px 5px #888;

35. Drop ShadowFirefoxChromeIE

36. CSS3: Firefox vs. IEIEFirefox

37. Progressive Enhancement: SummaryIt’s time to experiment with CSS3 on production sites and use it for prototyping. Adjusting opacity and color with RGBA saves time. Using border-radius for rounding corners and adjusting roundedness and color on the fly is beneficial, while resolving design details.Come to terms with the fact that Web sites don't need to look exactly the same in every browser! Soon this not be “progressive” and you can spend your time designing and not worrying about drop shadows…..

38. Progressive Enhancement: SummaryThis is progressive enhancement, adding visual flair in places that support it.Soon this will not be “progressive” and you can spend your time designing and not worrying about drop shadows…

39. Progressive Enhancement: Learn MoreCss3.info

40. Progressive Enhancement: Learn Moreperishablepress.com

41. Progressive Enhancement: Learn Morephotoshopusersgroup.com

42. Progressive Enhancement: Learn MoreGoogle it!

43. Progressive Enhancement: Learn MoreQuestions?