Presentation at Design for Mobile 2009 Conference

2. Twitter hashtag:
#des4mo

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

4. On with the Semanticity…

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

6. Enriched how?
 Markup structure enriches content through assigned:
 Intonation
 Pauses
 Rhythm, timing
 Punctuation
 facial expressions and body language
…. very likely half your message.


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

8. Semantic vs…well, bad

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

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

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

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

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

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

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

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

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

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

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

23. Variety found in…
Devices
XHTML Basic
XHTML-MP
CSS or no
Colors
Tables…

24. Let’s put that aside; more pressing concerns…

25. Constraints
Connection speed
Bandwidth allotment
Battery life
CPU
Memory

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

27. Consider…
 THEREFORE:
 Presentation is secondary
 Content and functionality are primary

28. We owe it to them.
Enable sites and its compelling content
and features to reach them
faster and still be compelling.

29. What’s the good news again?

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

31. The good news
Stick to these practices and the amount of worry
diminishes about testing across every possible
rendering.
Design and Develop with confidence