CA 272 - Professional Web Site Development

1. CA 272 - Professional Web Site Development Class 25 - Microformats, Accessibility & Search Engine Optimization

2. Print Style Sheet Review • Web Developer extension - good tool for viewing print styles • Questions? • Applying print styles • Overriding screen styles • Content order • Hiding content

3. Intro to Microformats • Common patterns of content that do not have HTML tags: • Contact info • Calendar/event info • Ratings & reviews • Relationships between people • Resumes • Content labeling (e.g., social bookmarking, tagging)

4. Microformats • Humans can recognize contact info, events, ratings, etc. • But, computers cannot • Microformats provide standard syntax for marking up this data using existing HTML tags • Mainly use divs, spans for elements, with classes

5. hCard • Based on exising vCard format - standard for exchanging contact info • hCard data can be harvested from Web page and converted to vCard data for import into Outlook and other address books • Online tools for creating hCards • Also microformats DW extension that helps you create hCard content

6. hCalendar • hCalendar format is based on iCalendar format - standard for calendar data • hCalendar can be converted into iCalendar format which can be imported into Outlook and other calendar apps • Online tools and DW extension for hCalendar

7. Tag-based Microformats • rel attribute of <a> specifies relationship of linked doc to current page • rev attribute specifies relationship of current page to linked doc • rel=“license” - Creative Commons licensing • rel=“tag” - link to ‘tag-space’ for tagging content • rel=“nofollow” - avoid giving PageRank • VoteLinks: rev=“vote-for”, “vote-against”, “vote-abstain”

8. Relationship Microformats • XFN (XHMTL Friends Network) • rel= • Friend • Acquaintance • Contact • Met • Co-worker • Colleague • Co-resident • Neighbor • Child • Parent • Sibling • Spouse • Kin • Muse • Crush • Date • Sweetheart • Me

9. ‘Operator’ Extension • Firefox extension for leveraging microformats:https://addons.mozilla.org/en-US/firefox/addon/4106 • Lets you view and export microformat data on page • Can map addresses in Google maps • Can export vCards (from hCard data) • Etc.

10. Microformats Exercise • Open hCard creator: http://microformats.org/code/hcard/creator • Type in your info (or dummy info) • Copy code • Paste into new HTML document • Examine code • How could we format this with CSS? • You need to include microformat in final project

11. Accessibility • Accessibility: making your Web content readable and understandable to the widest possible audience, including: • those with ‘disabilities’ or • technical requirements outside the mainstream – such as older computers, screen readers, zoomed displays, etc. • U.S. government code Section 508 mandates that you must make your site accessible if doing business with government

12. Search Engine Optimization • Search engine optimization (SEO):making your Web site appear and rank highly in search engines for search terms that are relevant to your content • interestingly, many accessibility tips also help with SEO • Searchbot is a special needs user — e.g., searchbot cannot ‘see’ graphics

13. Importance of Web Standards to Accessibility and SEO • Foundation of Accessibility and SEO is well-formed, semantic content separate from presentation • Presentation is the main issue - different users have different ways of perceiving content (e.g., blind must hear your content) • Presentation should not get in the way of content • Content issues such as clear writing and serving non-native speakers can be important, but not addressed here

14. Semantic Markup • Semantic markup – well-structured content with headers, paragraphs, lists, etc. • Logical content order – for many users, content will appear (or be read) in source order • Imagine that user cannot see your CSS or graphics (Google also does not see) • Do not use graphics for important text • Image replacement

15. Accessible Navigation • Use list-based navigation with real (or image-replaced) text for nav items (as we have learned in class) • These work anywhere • Google can follow links to other pages in your site and index them • Do not use image-based JavaScript rollovers for navigation • Also suggest not using Flash for navigation

16. ‘Skip Navigation’ Links • Provide ‘skip navigation’ links for users with screen readers (also useful for text-based browsers) • Requires <a> link at top of page to anchor at top of main content: • <a href=“#main” id=“skipnav”>Skip navigation</a> … [navigation] … • <a name=“main” id=“main”></a> … [main content] • Hide ‘skip links’ with CSS

17. Exercise: Skip Navigation • Open your float layout and add skip navigation links: • Insert ‘main’ anchor before text in #mainContent • Insert link to #main at top of page: “Skip navigation”; give id ‘skipnav’ • Create CSS rule to hide link and anchor from visual browsers: • Problem with display: none; • Try position: absolute; left: -5000px;

18. Review: CSS Image Replacement • When we want to use a graphic to display text (e.g., Coca-Cola logo), we should use ‘image replacement’ • Insert real text: <h1 id=“logo”>Coca-Cola</h1> • Replace with background image:h1#logo { background: url(coke-logo.gif) 0 0 no-repeat; width: 100px; height: 50px; text-indent: -5000px; } • Remember to be careful using background images for important text - will not print

19. Other Accessibility Tips • Keep page size (kB) small • Use alt attribute on images - display or are read by alternative browsers • Use relative font sizes (ems) so that users can enlarge - IE cannot scale fonts with px sizes • body { font-size: 62.5%; } /* sets to 10px */ • p { font-size: 1.2em; } /* sets to 12px */

20. Other Accessibility Tips • Use DOCTYPE so browsers don’t have to guess • Use lang attribute of <html> (probably “en” for English) • Use sufficient color contrast and visual clues • E.g., should change two aspects of links: color and underlining • Don’t open new windows - harder for some users to close them and they can’t use back-button functionality

21. Other Accessibility Tips • Label form elements, use table headers, etc. • Use title attribute for elements that need more explanation (e.g., ambiguous links) • Define acronyms and abbreviations: • <acronym title=“Extensible Hypertext Markup Language”>XHTML</acronym> • Caption audio/video • Provide a site map • Provide an accessibility statement

22. Access keys • Can provide keyboard shortcuts for commonly followed links - particularly: • Homepage - 1 • Skip to main content - 2 • Feedback/contact site author - 9 • Syntax: <a href=“index.html” accesskey=“1”> • User types ALT-1 to follow link • Don’t overuse - can conflict with system-defined or browser-defined shortcuts

23. Metadata: Page Titles • Meaningful page titles are important for accessibility and search engines • Google displays ~ 65 characters • Use different page titles for EACH page • Instead of ‘Welcome to Widget World’ … • Widget World - Widget Parts for Commercial and Industrial Grommets’ … or … • Widget World | Industrial - Grommet and Gasket Applications’ (60 chars with spaces)

24. Metadata: Keywords • Keywords used to be considered very important • Laundry list of relevant key phrases for page/site: • widgets, grommets, gaskets, commercial parts … • Most search engines ignore now • Your Web page content should contain keywords and phrases • Keyword density

25. Metadata: Page Description • Description is important for search engines - Google uses as entry for search listing • Should be no more than 250 chars • Plain English • Work in keywords/phrases • Ideally, should be different for each page • Author - good idea to include

26. Exercise: Insert Metadata • In Dreamweaver: • Insert > HTML > Head Tags > • Keywords • Description • Meta - for other metadata, e.g., author: • Attribute: Name • Value: author • Content: [name of author] • Syntax: <meta name=“” content=“” />

27. Search Indexes vs. Directories • Search index: giant database of Web page that uses ‘spiders’ / ‘robots’ (searchbots) to automatically comb Web and store Web page info (using algorithms) • Info from Web pages • Google, Yahoo!, MSN • Search directory: manually categorized list of Web pages • Info about Web pages • Open Directory Project, Yahoo! Directory (pay for inclusion)

28. Popular Search Engines* • Google - 49.2% • Yahoo - 23.8% • MSN - 9.6% • AOL - 6.3% • Ask - 2.6% • Others - 8.5% * as of July 2006 Source: NetRatings for SearchEngineWatch.com

29. Important Search Providers • Google, Yahoo!, MSN, Ask, Open Directory Project • ODP - volunteer-run, feeds data to search engines • Other search engines draw data from other indexes (e.g., AOL uses Google data)

30. Search Ranking Criteria • Ultimately: relevance of content and user’s reliance on your information • Does your content contain key phrases that users are searching? • Keyword density • Do other sites link to your content • PageRank (Google) • Many other criteria (e.g., how long your site has been around)

31. Getting Your Site Listed • Search engines will typically find your site eventually • Can submit your site to index • E.g., Google: http://www.google.com/addurl/ • Create a Google sitemap • Don’t get banned • Advertise: Google AdWords, Yahoo Search Marketing • Get others to link to your site • Keep generating good content; rework existing content to improve keyword density, etc. • Be patient

32. Google Webmaster Tools • Vital tool if you care about search engine ranking (and Google in particular) • See how Google sees your site: • Crawl info - last indexed, any problems • Robots.txt validation (instructions for searchbot) • Site performance: • Top queries and ranking for various search terms • Index inclusion • Upload sitemap (XML format) • Specify preferred domain, other options

33. Google Analytics • Great, free tool for tracking visitors to your site • How to sign up: • Go to http://www.google.com/analytics/index.html • Click ‘Sign Up Now’ • Create a Google account (if you need to) • Gmail users already have Google account • Follow directions for creating Google Analytics account • Add Web Site Profile (site to be tracked) • Will need to add special <script> before closing </body> tag on EVERY page to be tracked • Confirm you have added code • Google will begin tracking in few minutes after confirming

34. Homework • Create print style sheet for your float layout • Work on your final project: • Make sure you can add hCard microformat • … and “skip navigation” links • Know how to add metadata (description, keywords, author) • Sign up for Google account (if you don’t have one already) • You need to sign up for Webmaster tools and Google Analytics for your final project site