Dominique Hazaël-Massieux <dom@w3.org>
W3C Mobile Web Initiative
http://www.w3.org/2009/Talks/mwi-cambridge/session3.html
Cambridge, 14 October 2009
Supported by MobiWeb2.0, funded by European Union's FP7.
Beethoven's page (tinyurl.com/2ypphd
)
redesigned Beethoven's page (tinyurl.com/yq7z9m
)
Avoid:
<table>
style='width:400px'
style='position:absolute'
instead
In practice:
position
, display
, float
Applying to Beethoven's page
#container {
width:100px;
}
#sidebar {
width: 200px;
float: left;
}
#content {
margin-left: 242px;
}
→ resulting page (tinyurl.com/cjqk3h
)
Long navigation bar at the top:
instead
accesskeys
[but…]Applying to Beethoven's page
<a href="/home" accesskey="0">Lyric Repository's Home>/a>
→ resulting page (tinyurl.com/cgg786
)
Take care with
In practice:
alt
attributewidth
and height
in the markupApplying to Beethoven's page
#header {
background-image:url("beethoven-background.jpg");
}
<img src="beethoven-Aipeic6G.jpg"
alt="Portrait of Beethoven in 1820, by Joseph Karl Stieler"
width="120" height="150" />
<img src='music.gif' alt='' width='22' height='22' />
→ resulting page (tinyurl.com/yzbqfv2
)
Content adaptation on the server or on the client
On the client: CSS Media Types
<link rel="stylesheet" media="handheld" href="mobile.css" />
<link rel="stylesheet" media="screen" href="computer.css" />
Applicable also as:
<style type='text/css' media="handheld">
and inside a style sheet with:
@media handheld { /* mobile-specific rules */ }
On the client: CSS Media Types
<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="mobile.css" />
<link rel="stylesheet" media="screen and (min-device-width: 481px)" href="computer.css" />
Applying to Beethoven's page
@media screen {
#header {
background-image:url("beethoven-background.jpg");
}
}
@media screen {
#content {
float: left;
width: 550px;
}
}
→resulting page (tinyurl.com/yq7z9m
)