This is an older presentation given in 2009. The goal was to advocate for the adoption of microformats to improve markup, SEO positioning, and modularize web development. The talk was first given at local user groups: Refresh Hampton Roads and the Web Usability and Standards User Group. Later, I gave the workshop to an internal audience: the UI Engineering team and, later, to a UI/UX Future Group

1. Microformats
 future-proof our Web sites
 prepare for Web 3.0
 improve SEO
 streamline Web development
 reduce costs, long-term
Prepared by Kelley Walker, 2009.02

2. In the beginning….

3. Location, location, locationX X XContent, Content, Content
• Words
• Images
• Sound
• Music
• Flash files
• Videos
Standards, standards,
standards
Increasingly:
• Dynamic
• Interactive with users
• Open to user control & manipulation

4. So, what are standards?
“(T)he web got off to a faster start than any
other medium. But its commercial success
preceded the development of industry
standards, throwing all of us into the
perilous position of creating products and
web sites that were continually made
obsolete by one proprietary browser or
device innovation after another."
- Jeffrey Zeldman

5. Browser wars
 Browser makers introduced their own
formats and tried to force everyone
else to conform to their standards.

6. Even if we’ve never heard of
Web standards, it is by their
bugs that we shall know them

7. Standards: an old problem
 Railroads developed without standards
Typical: 4' 8.5” gauge
 Carson-Colorado line: 3’ gauge
 Erie Railroad: 5’ gauge for bigger loads
 Maine: 2’-3’ gauge (use less wood for ties)

8. All industries need standards

9. Our current standards
WebWeb
3.03.0
SemanticSemantic
WebWeb

10. Semantic Web
 "… most information on the Web is designed for
human consumption, and … the structure of the data
is not evident to a robot browsing the web. … the
Semantic Web approach instead develops languages
for expressing information in a machine processable
form.“
--Tim Berners-Lee
The Web3.0 buzz started two years ago, getting a
boost from major companies like Microsoft, Google,
Yahoo. All of them increasingly embraced standards-
compliant, semantic-based Web design and
development

11. What is the semantic web?
 Semantic markup makes our data structured and our
content more meaningful
 Why does it matter. Consider this phrase:
 “A man with a bone.”
What meanings are conjured up by the phrase?

12. Man with a bone
Man eating fish

13. It’s not just semantics
• The WHO (the organization) or The
Who (Band) or who?
• Manhattan (city) or Manhattan (drink)
or Manhattan (Sunseeker model)?
• Lincoln (equipment manufacturer) or
Lincoln (president) or Lincoln (city)?

14. What does it mean?
How does it mean?
With Semantic Markup
It’s also called (X)HTML
(X)HTML gives structure and meaning to content
Sometimes, developers use the word “tags”
<img> image
<p> paragraph
<cite> citation
<h1> heading
<em> emphasis
<strong> strong emphasis
<ul> unordered list
<blockquote>quoted content

15.  interview transcript
 classified advertisement
 product listing (manufacturer’s showcase)
 product review
 product price or price range
 video
 phone #, hours, business location
 event listing
 floor plan
 slide show
 presentation
In HTML 4 there are about 50 elements to describe what our
content means. Maybe 50 sufficed in 1995, but it doesn't now,
especially if we want to get much more granular to describe page
content:

16.  In order to create more granularity to
the structure and meaning of pages,
we could rewrite (X)HTML

17. Instead of an entire
rewrite of (X)HTML,
address a specific
problem and create a
MICROformat to solve
that problem.
Microformat movement:

18. Microformats meet business needs

19. Content Standards

20. The purpose – so content can be read and
understood by people, but can also be retrieved
and extracted by machines for the purposes of
indexing, searching for, saving, cross-referencing
that information for people.
are designed for humans first, machines second
are a simple, open data format
extend already existing, agreed upon standards
development starts with POSH – Plain Old Semantic HTML
allow for publishing and sharing information in structured, meaningful
ways
“enable users to own, control, move and share their data on the
web.“ -- according to Emily Lewis, a microformat evangelist who’s
written Microformats Made Simple

21. Widespread use
 According to
Yahoo! SearchMonkey, there
are 1,450,000,000 web pages
that publish hCard and
36,200,000 pages marked up
with hCalendar

22. Mapquest

23. Sites using hCalendar
Mapquest
Yahoo! Upcoming Events Calendar
Eventful
Meetup.com
Classic Car Events
World Cup Kickoff

24.  Refresh Hampton Roads
Monthly Meeting
posted on November 1, 2009
Date: November 3, 2009
18:00 - 20:00 EST
This meeting is public.
Filed under:
 Business
 Technology
 Design
 Usability
 Web Standards

25. f
<div class = "vevent">
<h5 class = "summary"> Refresh Hampton Roads Monthly
Meeting</h5>
<div>posted on
<abbr class = "dtstamp" title=“20091101T1300Z">November 1,
2009 </abbr>
</div>
<div>Date:
<abbr class = "dtstart" title=“20001103T180000Z">November 3,
2009,
18:00 EST</abbr> -
<abbr class = "dtend" title = “20001103T190000Z">20:00 EST
</abbr>
</div>
<div>This meeting is <strong class = "class">public</strong>.</div>
<div>Filed under:</div>
<ul>
<li class="category">Business</li>
<li class="category">Technology</li>
<li class="category">Design</li>
<li class="category">Usability</li>
<li class="category">Web Standards</li>
</ul>
</div>

26. Microformats
 are designed for humans first,
machines second
 extend already existing, agreed
upon standards
 allow for publishing and sharing
information in structured, meaningful
ways
 use a simple, open data format
 The promise of Web 3.0: transform a
web site into a read only API

27. A read only API?
 Publish our sites once with (X)HTML
 Using the hooks provided by microformats, the
content can be converted into other formats: XML,
RSS, Atom, JSON

There’s no need to create and maintain separate
data files for machine data or exchange (e.g., feeds)
We can work with third parties with the microformat
standard as our lingua franca. Existing conversion
tools transform it into their preferred data.
 Optimus - http://microformatique.com/optimus/

28. Google: Rich Snippets
Custom Search:

30. What we’re already doing
 The link rel=“nofollow” microformat
 Our blog already uses the most widely
and successfully implemented
microformat, hAtom, which is for
marking up blog content. hAtom is
built into all blogging software:
Wordpress, Blogger, Livejournal,
Textpattern, Movable Type, etc.

31. Already widely implemented
Rel (relationship) tags make the
content more meaningful:
rel = “tag”
 By adding rel = "tag" to a hyperlink, this
indicates that the destination of that hyperlink is
an author-designated "tag" (or keyword/subject)
for the destination page.
 Other link relationships:
rel = “home”
rel = “license”

32. Implementation: Boattrader Blog
At the Florida boat show, Sea Ray introduced
its new line of pleasure boats, Bon Voyage and
Del Mar.
 <a href=
http://www.boattrader.com/browse/make/sea-ray
rel=“tag”>Sea Ray</a>
 <a href=
http://www.boattrader.com/browse/pleasure-boats
” rel=“tag”>pleasure boats</a>

33. Geolocation
 We’ve discussed used the geolocation
metatag information
 We can also wrap geolocation
microformats around dealer
information on dealer gallery pages,
ad listing detail pages, search results,
and dealer search results pages
 ForRent has already implemented
hCard and geolocation

34. AP and hNews
 developed by Associated Press
and Media Standards Trust
Perfect for our articles/news page

35. hListing
listing action: sell | rent | trade | meet | announce | offer | wanted | event | service
Lister: using hCard microformat: (full name || email || url || telephone)
Dtlisted: date listed
Dtexpired: date expired
Price:
Item Info: optional uses: fn || url || photo || geo || adr | // Uses hCard microformat
if it’s for person or business
Summary: summary of the item listed.
Description: description of item listed.
Item tags: keywords or phrases describing the item being offered, using rel-tag
microformat.
Permalink: permanent link to the listing (is not intended to expire).

36. hCard
Adds structure and meaning to contact information.
Business card-like information is automatically
extracted and imported into users’ address books. It
can be made available to third party apps.
 Technorati's Contacts Feeds Service
 Operator Plug-in for Firefox
 Tails Export Plug-in for Firefox
 Oomph Microformats Toolkit

37. Blogging platforms and social
media are using XFN
 (X)HTML Friends Network - a set of relationship
defining links to other people’s web pages
Relationship Friend | Acquaintance | Contact
Physical Met
Professional Co-worker | Colleague
Geographical Co-resident | Neighbor
Family Child | Parent | Sibling | Spouse | Kin
Romantic Muse | Crush | Date | Sweetheart
Identity Me

38. For Developers: First, you
start with content
Miz Thang
Drama for Divas Unlimited
http://www.mizthang.com
Atlanta, GA 30301
miz.thang@mizthang.com
What is the basic structure and meaning:

39. POSHify
You work from the content, out, add valid and semantic markup:
<dl>
<dt>Miss Thang</dt>
<dd>
<ul>
<li>
<a href="http://www.mizthang.com">
Drama for Divas Unlimited
</a>
</li>
<li>Atlanta, GA 30301</li>
<li>
<a href="mailto:mizthang@mizthang.com">
mizthang@mizthang.com
</a>
</li>
</ul>
</dd>
</dl>

40. vCardize
<dl class=“vcard”>
<dt class=“fn”>Miss Thang</dt>
<dd>
<ul>
<li>
<a class = “url” href="http://www.mizthang.com">
Drama for Divas Unlimited
</a>
</li>
<li class=“adr”><span class=“locality”>Atlanta</span>, <abrr class=“region”
title=“Georgia”>GA</abbr> <span class=“postal-code”>30301</span></li>
<li>
<a class=“email” href="mailto:mizthang@mizthang.com">
mizthang@mizthang.com
</a>
</li>
</ul>
</dd>
</dl>

41. The Benefits
 Improved SEO; better search results; may
even be able to use microformat hooks to
improve our search
 Encouraging standards and consistency
reduces development time
 Simple format – no steep learning curve
 No need for special technologies
 Makes data accessible; enables sharing
and re-use of structured data
 Does not duplicate effort (RSS feeds
duplicate existing (X)HTML displays)
 Enhances user experience

42. Who Benefits
 Managers: streamlined dev process; SEO
improvements; happier developers 
 Designers: simple to learn; not daunting
technology; styling is easy using existing
CSS
 Developers: less time deciding what to
name classes or how to mark up content.
Can spend more time writing styles
 Content authors: makes content more
meaningful
 Users: enhances UX; improves search;
plugins and third party apps built to make
organizing data easier

44. Resources
 The Microformats Wiki, www.microformats.org
 Microformatique – microformat blog @ http://microformatique.com/
 @microformats on Twitter -- http://twitter.com/microformats
 @microformateers on Twitter – http://twitter.com/microformateers
 Microformats Role Play –
 http://visitmix.com/Articles/Microformats-Role-Play
 Getting Semantic with Microformats –
http://ajaxian.com/archives/getting-semantic-with-microformats-series-by-emily-lewis
 Update on Rich Snippets
--
http://googlewebmastercentral.blogspot.com/2009/10/help-us-make-web-better-updat
 Webpatterns -- naming conventions and patterns for the Web:
http://www.webpatterns.org/
 Semantic Class Names (several articles and resources)
-- http://microformats.org/wiki/semantic-class-names
 Microformat Transformer -- http://microformatique.com/optimus/
 Web 3.0 -- http://webr3.org/blog/featured/preparing-yourself-for-web-3-0-lod-
and-2010/
 Microformat University --
http://www.virtualhosting.com/blog/2008/microformats-university-100-
articles-and-resources/
 Microformats: Empowering Your Markup for Web 2.0 - John Allsopp
 Microformats Made Simple by Emily Lewis