Slide 1

Technology Training 1

Slide 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

Slide 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 clients goals. The user: Functional. Its easy to read, easy to use and easy to get out of it what was promised.

Slide 4

PlanOrganizeDesignRevise From site structure to front-end design 4

Slide 5

The who, what, why, and how 5

Slide 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

Slide 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

Slide 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

Slide 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

Slide 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

Slide 11

Common Mistakes, Site Maps, Print vs. Web

Slide 12

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

Slide 13

Slide 14

Slide 15

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

Slide 16

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

Slide 17

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

Slide 18

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

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

Slide 20

Slide 21

Slide 22

Common Mistakes, Layout, and Accessibility

Slide 23

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

Slide 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

Slide 25

Slide 26

Slide 27

Slide 28

Slide 29

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

Slide 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

Slide 31

Validators, Simulators, and Guinea Pigs

Slide 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

Slide 33

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

Slide 34

Hosting, domain names, and publishing options

Slide 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

Slide 36

Vanity plate of the web Examples Go Daddy Network Solutions Register.com

Slide 37

Technology Training www.scu.edu/training