Your SlideShare is downloading. ×
Semantics & the Mobile Web
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Semantics & the Mobile Web


Published on

Presentation at Design for Mobile 2009 Conference

Presentation at Design for Mobile 2009 Conference

Published in: Technology, Design

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Twitter hashtag: #des4mo
  • 2. The good news  Good mobile web development only requires understanding of XHTML / CSS, and best practices in Web Standards-based design as they’ve been highlighted in the last handful of years  Mobile web sites are easier than ever before to build. …not as good..?  Easier said than done.
  • 3. On with the Semanticity…
  • 4. Semantic Markup  General definition:  “The meaning of the element or property in relation to the content which it describes”  Mine:  “Content in context”  or… “XHTML elements used correctly.”  Specifically:  XHTML has structure-creating elements and attributes that enrich content.
  • 5. Enriched how?  Markup structure enriches content through assigned:  Intonation  Pauses  Rhythm, timing  Punctuation  facial expressions and body language …. very likely half your message. 
  • 6. And Markup is..? Text annotation describing how its content is to be structured, laid out, or formatted. In our case, HTML: Hypertext Markup Language <tag attribute=quot;valuequot;>Loremipsum.</tag>
  • 7. Semantic vs…well, bad
  • 8. Bad HTML  PRESENTATIONAL: “this is red,”  “this is Arial and is aligned center.”   Inflexible, poor longevity, little reuse.  Worst offenders are tools that hide markup from author.  DELIBERATE:  were created specifically for presentation  elements have no semantic meaning  Elements: <center>, <font>, <frame>, <iframe>  Attributes: align, face and size, width, height
  • 9. Bad HTML <center> <font face=quot;arialquot; size=quot;4quot;>Acme Inc.</font> <font color=quot;redquot; size=quot;1quot;>Pseudo-reliable products</font> </center>  PRESENTATIONAL with DELIBERATE elements
  • 10. Bad HTML <table border=quot;1quot; cellspacing=quot;5quot; cellpadding=quot;5quot;> <tr> <td width=quot;10quot;><imgsrc=quot;bullet.gifquot; /></td> <td width=quot;150quot;>Item 1</td> </tr> <tr> <td width=quot;10quot;><imgsrc=quot;bullet.gifquot; /></td> <td width=quot;150quot;>Item 2</td> </tr> <tr> <td width=quot;10quot;><imgsrc=quot;bullet.gifquot; /></td> <td width=quot;150quot;>Item 3</td> </tr> </table>
  • 11. Bad HTML <table> != layout format  PROBLEM: presentation embedded in markup  Development more difficult Cumbersome and difficult to support – let alone maintain   Restricts adaptability. Not optimum for repurposing for multiple devices.  Increased file size  AT BEST, using tables for layout will result in poor performance and rendering results out of left field.  SOLUTION: flexibility and lower document size achieved through CSS-based layout. Separate the layers.
  • 12. Semantic HTML  DESCRIPTIVE:  Doesn’t insist what you (browsers, actually) should do with it; only says what it is.  Open-ended, large-scale publishing enabled.  Flexible and reusable. <h1>Acme Inc.</h1> <p>Pseudo-reliable products</p>  Expresses on behalf of the document’s content.
  • 13. Semantic HTML <ul class=quot;menuquot;> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
  • 14. Semantic HTML <table> <tr> <th>Product</th> <th>Price</th> </tr> <tr> <td class=quot;productquot;>Jet Pack</td> <td class=quot;pricequot;>$199</td> </tr> <tr> <td class=quot;productquot;>Rope</td> <td class=quot;pricequot;>$19</td> </tr> </table>
  • 15. Semantic HTML <table> == tabular data  CHALLENGE: even for tabular data, tables are not guaranteed to work well or render accurately on some mobile browsers, especially with smaller screens.  ACCEPTABLE ALTERNATE: Definition lists, <dl>, can be used to express relationships between data values.
  • 16. Semantic HTML <dl> <dt>Jet Pack</dt> <dd>$199</dd> <dt>Rope</dt> <dd>$19</dd> </dl>
  • 17. Semantic HTML  ABUSED: elements possess semantic meaning, but used incorrectly because of their default browser rendering. <blockquote>Loremipsum dolor sit</blockquote>  <blockquote> != indent this  <h1> != big and bold  <table> != let’s create some visual columns
  • 18. Think different: structurally  Don’t think on how the content looks, it doesn’t matter… yet.  Not yet a layout, only a structure of content blocks with related meaning.  Describe your content by assigning the most precise HTML building block.  Once structurally sound, it’s ready to be told how to appear. Bring in your style layer.
  • 19. Variety found in… Devices XHTML Basic XHTML-MP CSS or no Colors Tables…
  • 20. Let’s put that aside; more pressing concerns…
  • 21. Constraints Connection speed Bandwidth allotment Battery life CPU Memory
  • 22. Consider…  ASSUMPTIONS:  users in a mobile context are more keen on the information they want to view now.  browsing behavior more likely to be Information-seeking.  expect an unobstructed view through well-structured content.
  • 23. Consider…  THEREFORE:  Presentation is secondary  Content and functionality are primary
  • 24. We owe it to them. Enable sites and its compelling content and features to reach them faster and still be compelling.
  • 25. What’s the good news again?
  • 26. The good news  Good mobile web development only requires understanding of XHTML / CSS, and best practices in Web Standards-based as they’ve been highlighted in the last handful of years  Mobile web sites are easier than every before to build.  And let me add: 5+ years worth of knowledge and resources everywhere at your disposal begging to help you.
  • 27. The good news Stick to these practices and the amount of worry diminishes about testing across every possible rendering. Design and Develop with confidence