Semantics & the Mobile Web

France RupertFranceRupert@gmail.com

Twitter: @SurferRoop

Twitter hashtag:

#des4mo

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.

On with the Semanticity…

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.

Enriched how?

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

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="value">Lorem ipsum.</tag>

Semantic vs…well, bad

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

Bad HTML

PRESENTATIONAL with DELIBERATE elements

<center><font face="arial" size="4">Acme Inc.</font><font color="red" size="1">Pseudo-reliable products</font>

</center>

Bad HTML

<table border="1" cellspacing="5" cellpadding="5"><tr>

<td width="10"><img src="bullet.gif" /></td><td width="150">Item 1</td>

</tr><tr>

<td width="10"><img src="bullet.gif" /></td><td width="150">Item 2</td>

</tr><tr>

<td width="10"><img src="bullet.gif" /></td><td width="150">Item 3</td>

</tr></table>

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.

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.

Expresses on behalf of the document’s content.

<h1>Acme Inc.</h1><p>Pseudo-reliable products</p>

Semantic HTML

<ul class="menu"><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="product">Jet Pack</td><td class="price">$199</td>

</tr><tr>

<td class="product">Rope</td><td class="price">$19</td>

</tr></table>

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.

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

<blockquote> != indent this <h1> != big and bold <table> != let’s create some visual columns

<blockquote>Lorem ipsum dolor sit</blockquote>

So what to do?

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.

Why..?

The spot we’re in…

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. browsing behavior more likely to be

Information-seeking. expect an unobstructed view through well-

structured content.

Consider…

THEREFORE: Presentation is secondary Content and functionality are primary

We owe it to them.

Enable sites and its compelling contentand features to reach them

faster and still be compelling.

What’s the good news again?

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.

The good news

Stick to these practices and the amount of worry diminishes about testing across every

possible rendering.

Design and Develop with confidence

– thank you

France RupertFranceRupert@gmail.com

Twitter: @SurferRoop