Slide 1

Slide 1 text

Some rights reserved markup 11 to Take your

Slide 2

Slide 2 text

Web Designer Web Developer emilylewisdesign.com Author, Microformats Made Simple microformatsmadesimple.com Co-author, HTML5 Cookbook shop.oreilly.com/product/0636920016038.do Managing Editor, Web Standards Sherpa webstandardssherpa.com Co-host, CTRL+CLICK CAST ctrlclickcast.com Email: [email protected] Blog: ablognotlimited.com Twitter: @emilylewis

Slide 3

Slide 3 text

emilylewisdesign.com/TakeYourMarkupTo11

Slide 4

Slide 4 text

If you can ﬁgure out how to do something interesting or unique or noteworthy, people will ﬁnd you and pay you extra because you're not like everyone else ... you're different. - Seth Godin “ Source: http://youtu.be/JJj_WHCdLtQ?t=3m31s

Slide 5

Slide 5 text

Don’t Be Average

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

Web Storage Geolocation Ofﬂine Web Apps Transforms Transitions Multiple Backgrounds Gradients Rounded Corners SVG Canvas Native Media PHP Objective-C C++ Python Ruby Java JavaScript

Slide 8

Slide 8 text

Source: http://youtu.be/EbVKWCpNFhY

Slide 9

Slide 9 text

Source: http://youtu.be/EbVKWCpNFhY

Slide 10

Slide 10 text

Markup, One Louder • Semantics for machine readability • Accessible for all users • Development efﬁciencies • Syndication • SEO and ﬁndability • User experience enhancements • Solid foundation for advanced techniques

Slide 11

Slide 11 text

POSH Plain Old Semantic HTML

Slide 12

Slide 12 text

POSH • Markup that has meaning • Markup that describes the content itself, not the presentation • Elements used for their intended purpose* • Valid*

Slide 13

Slide 13 text

POSH Benefits • Web standards • Portability for devices • Common standard for teams • Easier troubleshooting & maintenance • More accessible • Leaner markup = lighter-weight pages

Slide 14

Slide 14 text

Not POSH ! ! ! Home Products Services About !

I need me some indented text!

Also Not POSH

Slide 15

Slide 15 text

POSH FTW

Home
Products
Services
About

I need me some indented text!

p:first-child {text-indent: 25px;} POSH & CSS

Slide 16

Slide 16 text

POSH Basics • Use

-

for headings & to deﬁne content outline • Use

for tabular data, not layout • List elements (

) for lists • Drop presentational elements (, , ) in favor of CSS • Semantic class and id naming

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

• Use the right technology for the job • Pave the cowpaths • Our Best Practices Are Killing Us stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/ • Understanding HTML5 Validation impressivewebs.com/understanding-html5-validation/ Flexibility vs. Pedantry

Slide 19

Slide 19 text

POSH Resources • Keep it Clean: Your Blog and Clean HTML webteacher.ws/2012/12/03/keep-it-clean-your-blog-and-clean-html/ • POSH - Plain Old Semantic HTML 456bereastreet.com/archive/200711/posh_plain_old_semantic_html/ • Meaningful Markup: POSH and Beyond msdn.microsoft.com/en-us/magazine/ff770012.aspx • The Beauty of Semantic Markup ablognotlimited.com/articles/tag/Beauty+of+Semantic+Markup+series/ • Our Pointless Pursuit of Semantic Value coding.smashingmagazine.com/2011/11/11/our-pointless-pursuit-of-semantic-value/ comment-page-1/

Slide 20

Slide 20 text

HTML5 5

Slide 21

Slide 21 text

HTML5 • Backwards and forward compatible • New and redeﬁned semantic elements • Obsolete presentational elements • Flexible and simpliﬁed syntax

Slide 22

Slide 22 text

Simplified DOCTYPE Before Now

Slide 23

Slide 23 text

Flexible Style • All coding styles are valid • Uppercase tag names • Optional quotes for attributes • Optional values for attributes • Optional closed empty elements

Slide 24

Slide 24 text

Block-level Links

Emily Lewis Design

Beauty Isn’t Skin Deep

Emily Lewis Design

Beauty Isn’t Skin Deep

Before Now

Slide 25

Slide 25 text

Semantic Structure • • • • • • • • ? HTML5 Sectioning Element Flowchart html5doctor.com/resources/#ﬂowchart

Slide 26

Slide 26 text

Site Layout

Slide 27

Slide 27 text

HTML5 Structure

Slide 28

Slide 28 text

Making the Move

The Law Office of Jimbob Smith

News
Services
Resources
About

Before

Slide 29

Slide 29 text

Making the Move

The Law Office of Jimbob Smith

News
Services
Resources
About

After

Slide 30

Slide 30 text

Making the Move

The Law Office of Jimbob Smith

News
Services
Resources
About

After

Slide 31

Slide 31 text

HTML5 Tips • Use as much or as little as you want • Be aware of browser limitations • display: block • document.createElement czonline.net/blog/2011/03/22/using-html5-semantic-elements-today/ • HTML5 Enabling Script remysharp.com/2009/01/07/html5-enabling-script/ • Working Draft, “living standard” • Experiment and educate

Slide 32

Slide 32 text

HTML5 Resources • HTML5 for Web Designers www.abookapart.com/products/html5-for-web-designers • HTML5 Doctor html5doctor.com • The Importance of HTML5 Sectioning Elements coding.smashingmagazine.com/2013/01/18/the-importance-of-sections/ • Further examples on using the main element iandevlin.com/blog/2013/02/html5/further-examples-on-using-the-main-element • The Truth About HTML5 truthabouthtml5.com

Slide 33

Slide 33 text

Microformats More Meaning With

Slide 34

Slide 34 text

Microformats • HTML design patterns for describing common content like: • People, organizations and places • Events • Hyperlinks • Blog posts • Reviews

Slide 35

Slide 35 text

Microformats Benefits • Semantics for machine readability • More meaningful search results & better ﬁndability

Slide 36

Slide 36 text

Microformats Benefits • Semantics for machine readability • More meaningful search results & better ﬁndability • User experience enhancements • Encourages consistency and standards • Minimal development effort • No need for software or special technologies • Enables sharing and re-use of your web content elsewhere

Slide 37

Slide 37 text

hCard

Emily Lewis

Emily Lewis Design
Albuquerque, NM abbr> 87107
[email protected]

Before

Slide 38

Slide 38 text

hCard

Emily Lewis

Emily Lewis Design
Albuquerque , NM abbr> 87107
[email protected]

After

Slide 39

Slide 39 text

hCard

Emily Lewis

Emily Lewis Design
Albuquerque , NM abbr> 87107
[email protected]

After

Slide 40

Slide 40 text

Downloadable vcard • H2VX Contacts Conversion Service h2vx.com/vcf/ • Operator add-on for Firefox addons.mozilla.org/en-US/ﬁrefox/addon/operator/ • Tails Export add-on for Firefox addons.mozilla.org/en-US/ﬁrefox/addon/tails-export/ • Microformats extension for Chrome chrome.google.com/extensions/detail/oalbifknmclbnmjlljdemhjjlkmppjjl • SafariMicroformats plugin for Safari zappatic.net/projects/safarimicroformats

Slide 41

Slide 41 text

Microformats Resources • microformats.org • microformats2 microformats.org/wiki/microformats2 • microformats2 & HTML5 - The Evolution of Web Data tantek.com/presentations/2013/04/microformats2/ • Extending HTML5 - Microformats html5doctor.com/microformats/ • Getting Semantic With Microformats ablognotlimited.com/articles/tag/Getting+Semantic+series/

Slide 42

Slide 42 text

Microdata HTML5 Likes Machine Readability Too

Slide 43

Slide 43 text

Microdata

Emily Lewis: Web Designer; Albuquerque, NM87107

Before

Slide 44

Slide 44 text

Microdata

Emily Lewis dt>: Web Designer; Albuquerque, NM 87106

After

Slide 45

Slide 45 text

Should you use microdata? • Availability and quality of parsers, tools, resources • More complex than microformats • schema.org • Supported by major search engines • Narrow vocabularies

Slide 46

Slide 46 text

Microdata Resources • Schema-org, microformats and more science please fberriman.com/2011/12/01/schema-org-microformats-and-more-science-please/ • Future-Ready Content alistapart.com/article/future-ready-content • Extending HTML5 - Microdata html5doctor.com/microdata/ • Microformats, HTML5 and Microdata ablognotlimited.com/articles/microformats-html5-microdata

Slide 47

Slide 47 text

ARIA Landmarks Accessible Rich Internet Applications

Slide 48

Slide 48 text

ARIA • Set of guidelines from WAI for accessible, rich internet applications • Includes Landmark Roles to indicate document structure and aid navigation • Attribute Selectors FTW! msdn.microsoft.com/en-us/magazine/gg619394.aspx

Slide 49

Slide 49 text

Landmark Roles • role="banner" • role="navigation" • role="main" • role="search" • role="form" • role="complementary" • role="contentinfo" • role="application"

Slide 50

Slide 50 text

Landmark Roles • role="banner" • role="navigation" • role="main" • role="search" • role="form" • role="complementary" • role="contentinfo" • role="application"

Slide 51

Slide 51 text

Landmark Roles • role="banner" • role="navigation" • role="main" • role="search" • role="form" • role="complementary" • role="contentinfo" • role="application" overlap with overlap overlap overlap with

Slide 52

Slide 52 text

Adding Roles

The Law Office of Jimbob Smith

News
Services
Resources
About

XHTML

Slide 53

Slide 53 text

Adding Roles

The Law Office of Jimbob Smith

News
Services
Resources
About

HTML5

Slide 54

Slide 54 text

Adding Roles

The Law Office of Jimbob Smith

News
Services
Resources
About

HTML5

Slide 55

Slide 55 text

ARIA Resources • ARIA Gone Wild slideshare.net/jared_w_smith/aria-gone-wild • Using WAI-ARIA Landmarks – 2013 blog.paciellogroup.com/2013/02/using-wai-aria-landmarks-2013/ • Using WAI-ARIA in HTML w3.org/TR/2013/WD-aria-in-html-20130214/ • Web Accessibility & WAI-ARIA Primer msdn.microsoft.com/en-us/magazine/ff743762.aspx

Slide 56

Slide 56 text

Going to 11 • Use what works for you, your projects and your clients • Stay up-to-date on changes • Love your craft • Question and be ﬂexible • Experiment, test and decide for yourself

Slide 57

Slide 57 text

Quality is never an accident. It is always the result of intelligent effort. - John Ruskin “ ”

Slide 58

Slide 58 text

Questions? [email protected] @emilylewis emilylewisdesign.com/TakeYourMarkupTo11/