1. Technology Training 1

2.  Shop in Paradise Shop in Paradise  Thomas Edison Foundation Thomas Edison Foundation  LA Eyeworks LA Eyeworks  Google Google  Mint.com Mint.com  J Sainsbury plc J Sainsbury plc

3.  The designer:  ‘Beautiful design. A significant amount of effort must be placed into making it attractive.’  The client:  ‘Effective. It must bring in customers and meet client’s goals.’  The user:  ‘Functional. It’s easy to read, easy to use and easy to get out of it what was promised.’

4. PlanOrganizeDesignRevise From site structure to front-end design 4

5. The who, what, why, and how 5

6.  Who are they and why would they use your site?  They want/need information  They want/need to make a purchase/donation  They want/need to be entertained  They want/need to be part of a community Who

7.  What is your content?  “Heroin Content”  Web writing basics ▪ Shorter is better ▪ Use search keywords ▪ Drive user action ▪ Proofread  Get a second opinion What

8.  Why a website?  Share information (photo albums, profiles, calendars)  Gather data, materials, or money (surveys, forms, shopping carts, etc)  Facilitate collaboration, discussion, and creation of ideas (wikis, blogs, forums) Why

9.  How will you deliver your content?  Dictated by Purpose and Content  Happens mostly in Plan and Organize phase  Blogs, surveys, calendar, video, podcasts, social networking (Facebook, Twitter, etc.) How

10.  Wikis  Wikipedia Wikipedia  TV Tropes TV Tropes  Blogs  The Huffington Post The Huffington Post  The Official Google Blog The Official Google Blog  Facebook  Chevron Chevron  Skittles Skittles  Twitter  Starbucks Starbucks  Barack Obama Barack Obama  YouTube  Universal Music Group Universal Music Group  Geico Geico

11. Common Mistakes, Site Maps, Print vs. Web

12.  Unclear purpose  Too much material on one page  Navigational failure  Direct Print to web

15.  Too Much Material  Priority: Before, AfterBeforeAfter  Beware scrolling: Before, AfterBeforeAfter

16.  Navigational Failure  Poorly worded links  Inconsistent navigation  Dead-end pages and lead links  No way back home

17. PRINT Linear Non-linear WEB Author- driven Reader- driven

18.  Show site architecture  Link related topics together  Organize material based on users’ needs  No dead-end pages

19.  All navigation must answer:  Where am I?  Where have I been?  Where can I go next?  Where's the Home Page?  Where's the Home Home Page?

22. Common Mistakes, Layout, and Accessibility

23.  Form over Function  Elements that get in the way  Not enough contrast  Visual elements vs. text

24.  (Mis)Using visual elements instead of text  Limits accessibility of screen readers  Not search-engine friendly  Increases page size and load time  Harder to edit

29. Disability Device Independence Usability  When sites are correctly designed, developed and edited, all users can have equal access to information and functionality.

30.  Text Alternatives for Non-Text  Alternatives for Time- based Media  Adaptable  Distinguishable  Keyboard Accessible  Well-timed  Avoid Seizures  Navigable  Readable  Predictable  Input Assistance  Compatible Web Content Accessibility Guidelines are good for all users

31. Validators, Simulators, and Guinea Pigs

32. QUANTITATIVE  Validators  Check for broken links  Compare to web standards  Simulators  Mobile device simulators  Search Engine Optimization Tools (SEOs)  Cross-platform check  Firefox, IE, Safari, Chrome, Opera, etc.  Mac OS X, XP, Vista, Windows 7, Linux, etc. QUALITATIVE  User testing  Friends  Colleagues  Designers/Developers  OMC

33.  Create/find new content regularly  Replace images  Verify external links are active  Look for broken links  Solicit user input  Check marketing outlets

34. Hosting, domain names, and publishing options

35.  Determine your needs  Bandwidth: streaming video vs. portfolio  Space requirements  Choosing the right host  Reliability  Contact  Cost  Extra features  Some hosting sites offer domain names or entire publishing packages

36.  ‘Vanity plate’ of the web  Examples  Go Daddy  Network Solutions  Register.com

37. Technology Training www.scu.edu/training