Technology Training 1

 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

 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.’

PlanOrganizeDesignRevise From site structure to front-end design 4

The who, what, why, and how 5

 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

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

 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

 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

 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

Common Mistakes, Site Maps, Print vs. Web

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

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

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

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

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

 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?

Common Mistakes, Layout, and Accessibility

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

 (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

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

 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

Validators, Simulators, and Guinea Pigs

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

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

Hosting, domain names, and publishing options

 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

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

Technology Training