Building Webs Better

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

Inseparability
• SEO, semantics, access/accessibility, etc. are
like yarn on a sweater:
– Carefully interwoven
– Indiscernibly separate
• Separating these topics can be difficult
Don’t do it: they work together well

Accessibility:
Some Assumptions
• Bad Word.
• Very Expensive.
• Low ROI.

Access:
Not Just Accessibility
What it’s not
• Protection
(against those with
disabilities)
What it is
• UA-appropriate
• Flexible
• Free
– Like speech
– Like beer

Access:
for People
• Screen
• Paper
• Screen readers
• Mobile/handheld/phone/PDA
• Non-standard devices
• DOM—etc.

Access:
for Machines
• Educational/Industrial Data mining
• Search Engines
• [Spam bots, too: sorry ]
• DOM—etc.

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

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.

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.

SEO, Semantics and Standards
• Standards are BAD! Err…?
– Help dumb people (like designers) to excel
– Avoid Hard Knocks University
– Level the playing field

Continued
• W3C, WHATWG, Ecma Int’l, WaSP, etc.
– Recognize trends
– Codify standards
– Educate and Inform Educators (mostly WaSP)
– Empower developers
– Guide browser makers…

Browser 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 

Standards ‘Decouple’ Documents
• Encourage document-level separation of
– Markup/Content ([X]HTML)
– Style (CSS/XSLT)
– Behavior (JavaScript)

• 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

• 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

Organic SEO
How 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

Organic SEO
Continued
• 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>

Semantics
Informing 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

Semantics
Informing 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

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

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)

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)

Semantics
Cost 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

Semantics
Why Not?
• Learning curve?
– Yes.
• Code Bloat?
– No…
Consider another simple example.

Semantics
Why 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,'andale
mono',mono;">785.555.1212</td></tr></
table>

Semantics
Why Not?
• HTML4, HTML5, XTHML
– <table class="phone-chart"…>…<tr><td
class="phone-work-
fax">785.555.1212</td></tr></table>

Brass Tacks
• Some practical implementation examples
and ideas.

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

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>

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.

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"/>

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).

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 some
cases, leaving users bewildered.

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

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

Questions?
• No?
• Good.

Questions?

Contact
• Please send any more questions to
– david@wd2.us
– 785.783.4755
– Google+ j.mp/rgum
• For this presentation visit goo.gl/PmoDw

Building Webs Better

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Building Webs Better (20)

Recently uploaded (20)

Building Webs Better