Building Webs Better
Building Better Webs and Web Applications Organically
David Eldridge
Please feel free to use this document however you would like. Attribution is appreciated.
Introduction
• Shawnee County Webmaster– Support ASP.NET developers for specialized apps.
– Maintain www.snco.us with HTML, CSS, JavaScript and legacy ASP
• A Federal Webmaster (KSARNG/OSS)– Began learning standards/accessibility
• Fed: Standards or Die!
– Good beginning
– I always use them
[ 2 ]Please feel free to use this document however you would like. Attribution is appreciated.
Overview
• Introduction
• Accessibility
• SEO, Semantics, Separation and Standards
• Performance Considerations
• Return on Investment (ROI)
• Questions and Housekeeping
[ 3 ]Please feel free to use this document however you would like. Attribution is appreciated.
Inseparability
• SEO, semantics, access/accessibility, etc. are like yarn on a sweater:
– Carefully interwoven
– Indiscernibly separate
• Separating these topics can be difficultDon’t do it: they work together well
[ 4 ]Please feel free to use this document however you would like. Attribution is appreciated.
Accessibility:Some Assumptions
• Bad Word.
• Very Expensive.
• Low ROI.
[ 5 ]Please feel free to use this document however you would like. Attribution is appreciated.
Access:Not Just Accessibility
What it’s not
• Protection(against those with disabilities)
What it is
• UA-appropriate
• Flexible
• Free
– Like speech
– Like beer
[ 6 ]Please feel free to use this document however you would like. Attribution is appreciated.
Access:for People
• Screen
• Paper
• Screen readers
• Mobile/handheld/phone/PDA
• Non-standard devices
• DOM—etc.
[ 7 ]Please feel free to use this document however you would like. Attribution is appreciated.
Access:for Machines
• Educational/Industrial Data mining
• Search Engines
• [Spam bots, too: sorry ]
• DOM—etc.
[ 8 ]Please feel free to use this document however you would like. Attribution is appreciated.
Access:Document Object Model
• Ad hoc API
– Three simple examples:
• Web Clips—Safari 3+
• Web Slices—IE8 (product site)– Requires some add’l coding
• “FireClips”—FF3 (video|add-on)
– Other capabilities available and coming
[ 9 ]Please feel free to use this document however you would like. Attribution is appreciated.
Access:DOM—Extensibility
• It can be traversed, styled, destroyed, created, and appended to dynamically
– JavaScript
– Style: CSS/XSLT
– Server-side code:
• PHP and Ruby (on Rails) among others support this
• In the future in Visual Studio?Don’t be surprised, but don’t hold your breath.
[ 10 ]Please feel free to use this document however you would like. Attribution is appreciated.
Access:User Interface
• Offer users early access to the whole page:
– e.g. “Go directly to content, or navigation.”
• Hide it from screen and print devices, etc.
• Offer it to mobile, non-standard devices, etc.
• JavaScript is not everywhere. Consider your audience.
[ 11 ]Please feel free to use this document however you would like. Attribution is appreciated.
SEO, Semantics and Standards
• Standards are BAD! Err…?
– Help dumb people (like designers) to excel
– Avoid Hard Knocks University
– Level the playing field
[ 12 ]Please feel free to use this document however you would like. Attribution is appreciated.
SEO, Semantics and StandardsContinued
• W3C, WHATWG, Ecma Int’l, WaSP, etc.
– Recognize trends
– Codify standards
– Educate and Inform Educators (mostly WaSP)
– Empower developers
– Guide browser makers…
[ 13 ]Please feel free to use this document however you would like. Attribution is appreciated.
SEO, Semantics and StandardsBrowser Changes
• FF, Safari implementing Canvas and SVG
• IE8, FF, Safari implementing <audio> and <video> elements (good and bad):
– IE8/MS: MS formats
– Safari/Apple: QuickTime formats
– Firefox/Mozilla: Ogg formats
[ 14 ]Please feel free to use this document however you would like. Attribution is appreciated.
SEO, Semantics and StandardsStandards ‘Decouple’ Documents
• Encourage document-level separation of
– Markup/Content ([X]HTML)
– Style (CSS/XSLT)
– Behavior (JavaScript)
[ 15 ]Please feel free to use this document however you would like. Attribution is appreciated.
SEO, Semantics and Standards
• Standards save work
– <video>/<audio> v. non-standard <embed>
– border-radius v. rounded corner JS/CSS/HTML mess
– :hover v. old bloated hover image effect
– CSS font declarations v. non-semantic <font> tag
[ 16 ]Please feel free to use this document however you would like. Attribution is appreciated.
SEO, Semantics and Standards
• Standards add previously unrealized functionality
– Microsoft’s XHR (XML HTTP Request):Now Ajax (or AJAX if you insist)
– Microsoft’s JPEG XR (HD Photo, previously Windows Media Photo): Better compression for even larger image files, both lossy and lossless
[ 17 ]Please feel free to use this document however you would like. Attribution is appreciated.
Organic SEOHow Standards and SEO Relate
• Semantic tagging informs content
– Good: head>title, h1, span.phone-number
– Poor: font, small, big, b, i, blink
• Metadata fills in the gaps with keywords, authorship, date and other information
– Dublin Core metadata is a good framework
[ 18 ]Please feel free to use this document however you would like. Attribution is appreciated.
Organic SEOContinued
• Consider:
– <title>Banking Security • BankTwo</title>…<h1>Security Procedures</h1>
• Or:
– <title>BankTwo</title>…<span style="font-size:16px;color:#333333;font-family:georgia;display:block;">Security</span>
[ 19 ]Please feel free to use this document however you would like. Attribution is appreciated.
SemanticsInforming Data
• Framework for categorization and the DOM:
– h1-h6, dl, dt, dd, ol, ul, li, dfn, abbr, p, address
• Classes (and IDs) further augment good semantics
– abbr.acronym, ol.contents, span.phone-work-voice, span.name-last, ul.ingredients, ol.instructions, div#content, div#footer-legal
[ 20 ]Please feel free to use this document however you would like. Attribution is appreciated.
SemanticsInforming Data
• Semantics help us and machines cull data:
– Widgets: clips, slices etc.
– Microformats like hCard, hCalendar, hAtom and hReview
• Google now uses RDFa/hReview and hCard
– You don’t need to pioneer these technologies
• Google took years to jump on microformats
• Firefox didn’t get over 20% market in a day
• But folks are using these now
• All 3 big browsers use Web Slices/Clips
[ 21 ]Please feel free to use this document however you would like. Attribution is appreciated.
Brass Tacks:Get out of Line: Use the DOM
• Standards make using JavaScript, DOM scripting and Ajax easier and better
– It eases maintenance
• Less inline code
– It keeps code legible…
• Again, less incline code
[ 22 ]Please feel free to use this document however you would like. Attribution is appreciated.
Brass Tacks:Get out of Line: Use the DOM
– It extends easily
• Classes, ID’s and the DOM make good hooks for JS and style
• At best, they require a script tag
• More often they will also need more classes, ids and/or elements.
– It fails well
• Users don’t miss it when it’s gone(Everything still works)
[ 23 ]Please feel free to use this document however you would like. Attribution is appreciated.
Brass Tacks:JavaScript and Accessibility
• Some users and UAs don’t see JavaScript fire:
– Screen readers
• Audibly indicating DOM-scripting and Ajax changes through screen readers is a booger.
• Some UAs neglect it; others handle it poorly.
– Those behind corporate firewalls
– Some mobile UAs
– Others with JS disabled (purposefully or not)
[ 24 ]Please feel free to use this document however you would like. Attribution is appreciated.
SemanticsCost and Value
• Building sloppy code is cheap
• Maintaining it isn’t: I know.
• Inline style (and event handlers) create larger files, and make clean-up tedious
• Semantics offer ad hoc documentation
[ 25 ]Please feel free to use this document however you would like. Attribution is appreciated.
SemanticsWhy Not?
• Learning curve?– Yes.
• Code Bloat?– No…
Consider another simple example.
[ 26 ]Please feel free to use this document however you would like. Attribution is appreciated.
SemanticsWhy Not?
• HTML3 and earlier– <table style="color:#555;background-color:#eee;border:1px #333;vertical-align:bottom; "…>…<tr><td style="text-align:right;font-family:consolas,'andalemono',mono;">785.555.1212</td></tr></table>
[ 27 ]Please feel free to use this document however you would like. Attribution is appreciated.
SemanticsWhy Not?
• HTML4, HTML5, XTHML– <table class="phone-chart"…>…<tr><td class="phone-work-fax">785.555.1212</td></tr></table>
[ 28 ]Please feel free to use this document however you would like. Attribution is appreciated.
Brass Tacks
• Some practical implementation examples and ideas.
[ 29 ]Please feel free to use this document however you would like. Attribution is appreciated.
Brass Tacks:Character Encoding
• Right after the head, even before <title>:
– make sure the title and all after are properly encoded
• It’s important for good data and security…
– For display
• You don’t want to see that.
– For good capture and security:
• especially with intérñatiönal users
[ 31 ]Please feel free to use this document however you would like. Attribution is appreciated.
Brass Tacks:Character Encoding
• Unless you have particular needs use UTF-8
– <!DOCTYPE HTML…><html lang="en-US"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello, World</title>
[ 32 ]Please feel free to use this document however you would like. Attribution is appreciated.
Brass Tacks:JavaScript Bottlenecks
• HTTP/1.1 allows multiple persistent connections.
• Modern browsers load multiple resources (text, image, audio, etc.) at once:
– Without manipulation, UAs don’t allow over two scripts to pull in at once.
• When able, load scripts last (i.e. before </body>), or use the onload event handler (or similar device) to build your script request dynamically at full load.
[ 33 ]Please feel free to use this document however you would like. Attribution is appreciated.
Brass Tacks:CSS Bottlenecks
• Make CSS external (usu. automatic in VS)
– But if not, avoid using the @import command in <style> tags, as it causes problems with concurrent downloading in some browsers
• Place it as soon after the title as possible:
– <!doctype…>…<title>I am a title</title><link rel="stylesheet"/>
[ 34 ]Please feel free to use this document however you would like. Attribution is appreciated.
Brass Tacks:More JS Considerations
• Be aware of VS controls that generate non-standard mark-up:
– e.g. ListBox, DropDownList, AdRotator and more.
• As our DBA always reminds us, never trust the client (device).
[ 35 ]Please feel free to use this document however you would like. Attribution is appreciated.
Brass Tacks:More JS Considerations
• The JS pseudo-protocol is not a protocol…
• If you use it or inline event handlers with href="#", the event will not fire in somecases, leaving users bewildered.
[ 36 ]Please feel free to use this document however you would like. Attribution is appreciated.
Conclusion:ROI
• Ease of extension
• Value of data: content is more informed
• Natural/Accidental/Organic SEO
• Faster page loads/decreased server load
• Greater user access/cullability
[ 37 ]Please feel free to use this document however you would like. Attribution is appreciated.
Conclusion:Last Things
• I won’t be there to blame when your app fails– And, they’ll laugh at you for listening to a designer
• Standards are usually optimal: but not always
• Standards change: so don’t follow blindly
• If they don’t help now, they may help later
• Make your boss happy: the food will follow
[ 38 ]Please feel free to use this document however you would like. Attribution is appreciated.
Questions?
• No?
• Good.
[ 39 ]Please feel free to use this document however you would like. Attribution is appreciated.
Questions?
[ 40 ]Please feel free to use this document however you would like. Attribution is appreciated.
Contact
• Please send any more questions to
– 785.783.4755
– Google+ j.mp/rgum
• For this presentation visit goo.gl/PmoDw
[ 42 ]Please feel free to use this document however you would like. Attribution is appreciated.
Top Related