Tip #4
keep it simple
- What are mobile visitors looking for?
- What information do they want/need?
- Do mobile visitors have time/interest in all of my tedious sidebar content?
- With a barebones stylesheet, which elements are clearly superfluous?
- Which navigational elements are absolutely necessary? Which are redundant?
- Are there entire regions of my page that would be better off not displayed?
Display only the essential no leftpane or right pane
.leftpane, .rightpane {
display: none;
}
Tip #5
top navigation (vertical)
.mi, .mi .txt {display:block !important; text-align:left; margin:0 !important;}
Tip #6
control image width
#content img {max-width: 250px;}
or
img {max-width: 250px;}
Tip #7
slim headings
h1, h2, h3, h4, h5, h6 {font-weight: normal;}
Tip #8
links
Highlight links
a:link, a:visited {
text-decoration: underline;
color: #0000CC;
}
a:hover, a:active {
text-decoration: underline;
color: #660066;
}
Use the tel: de facto standard
Call us!
Avoid target=_blank
Tip #9
forms
Minimum input
Do not use tables for layout
Use definition lists (dl, dt, dd)
Tip #10
Other do’s and don’ts
keep URIs of site entry points short
www.example.org/example.html accept example.org/example
careful with color contrasts
use (minimum) web standards
XHTML 1.0 / HTML 4.01 / XHTML-MP, CSS 2.1, DOM 1, ECMAScript 3
always specify a doctype
use standard media types
Static: JPEG, GIF, PNG / Dynamic: 3GP, AVI, WMV, MP4
do not use the following tags
× frames
× tables for layout
× nested tables
× image maps
× graphics for spacing
× horizontal scrolling
× do not rely on plug-ins, DHTML behaviors, embedded objects or script
W3C Best Practices
http://www.w3.org/TR/mobile-bp/summar