Semantics & the Mobile Web
Dec 18, 2014
Presentation at Design for Mobile 2009 Conference
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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
Related Documents
