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

320
views

Published on

Presentation at Design for Mobile 2009 Conference

Presentation at Design for Mobile 2009 Conference

Published in: Technology, Design

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
320
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×