Buildling Better Webs

1,825 views
1,677 views

Published on

A brief outline of some best practices for building webs.

Published in: Technology, Design
1 Comment
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
1,825
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
18
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Buildling Better Webs

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

×