Twitter hashtag:


#des4mo
The good news

 Good mobile web development only requires
  understanding of XHTML / CSS, and best practices in
  Web Sta...
On with the Semanticity…
Semantic Markup

 General definition:
    “The meaning of the element or property in relation to the
     content which ...
Enriched how?

 Markup structure enriches content through assigned:
      Intonation
      Pauses
      Rhythm, timing...
And Markup is..?

Text annotation describing how its content is to be structured, laid out, or
                           ...
Semantic vs…well, bad
Bad HTML

 PRESENTATIONAL:
      “this is red,”
  
      “this is Arial and is aligned center.”
  
     Inflexible, po...
Bad HTML

<center>
<font face=quot;arialquot; size=quot;4quot;>Acme Inc.</font>
<font color=quot;redquot; size=quot;1quot;...
Bad HTML

<table border=quot;1quot; cellspacing=quot;5quot; cellpadding=quot;5quot;>
<tr>
<td width=quot;10quot;><imgsrc=q...
Bad HTML

                   <table> != layout format

 PROBLEM: presentation embedded in markup
      Development more ...
Semantic HTML

 DESCRIPTIVE:
    Doesn’t insist what you (browsers, actually) should do
     with it; only says what it ...
Semantic HTML

  <ul class=quot;menuquot;>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  </ul>
Semantic HTML

<table>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td class=quot;productquot;>Jet Pack</td>
<td class...
Semantic HTML

                 <table> == tabular data

 CHALLENGE: even for tabular data, tables are not guaranteed
  t...
Semantic HTML

 <dl>
 <dt>Jet Pack</dt>
 <dd>$199</dd>
 <dt>Rope</dt>
 <dd>$19</dd>
 </dl>
Semantic HTML

 ABUSED: elements possess semantic meaning, but
  used incorrectly because of their default browser
  rend...
Think different: structurally

 Don’t think on how the content looks, it doesn’t
  matter… yet.

 Not yet a layout, only...
Variety found in…

       Devices

     XHTML Basic

     XHTML-MP

      CSS or no

       Colors

      Tables…
Let’s put that aside; more pressing concerns…
Constraints

 Connection speed

Bandwidth allotment

    Battery life

       CPU

     Memory
Consider…

 ASSUMPTIONS:
   users in a mobile context are more keen on the
    information they want to view now.
   br...
Consider…

 THEREFORE:
   Presentation is secondary
   Content and functionality are primary
We owe it to them.

Enable sites and its compelling content
       and features to reach them
      faster and still be co...
What’s the good news again?
The good news

 Good mobile web development only requires
  understanding of XHTML / CSS, and best practices
  in Web Sta...
The good news

Stick to these practices and the amount of worry
diminishes about testing across every possible
           ...
Semantics & the Mobile Web
Semantics & the Mobile Web
Semantics & the Mobile Web
Semantics & the Mobile Web
Semantics & the Mobile Web
Upcoming SlideShare
Loading in …5
×

Semantics & the Mobile Web

437 views
390 views

Published on

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
437
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Semantics & the Mobile Web

  1. 1. Twitter hashtag: #des4mo
  2. 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. 3. On with the Semanticity…
  4. 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. 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. 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. 7. Semantic vs…well, bad
  8. 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. 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. 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. 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. 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. 13. Semantic HTML <ul class=quot;menuquot;> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
  14. 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. 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. 16. Semantic HTML <dl> <dt>Jet Pack</dt> <dd>$199</dd> <dt>Rope</dt> <dd>$19</dd> </dl>
  17. 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. 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. 19. Variety found in… Devices XHTML Basic XHTML-MP CSS or no Colors Tables…
  20. 20. Let’s put that aside; more pressing concerns…
  21. 21. Constraints Connection speed Bandwidth allotment Battery life CPU Memory
  22. 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. 23. Consider…  THEREFORE:  Presentation is secondary  Content and functionality are primary
  24. 24. We owe it to them. Enable sites and its compelling content and features to reach them faster and still be compelling.
  25. 25. What’s the good news again?
  26. 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. 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

×