35. <link rel="stylesheet" href="handheld.css"
media="only screen and (max-device-width:480px)"/>
@import url(handheld.css) only screen and (max-device-
width:480px);
@media only screen and (max-device-width:480px) {...}
37. @import url(”antiscreen.css") handheld, only screen and (max-device-width:480px);
skin.css
screen.css handheld.css
@import url("screen.css”)
antiscreen.cs
s
@import url("handheld.css") handheld, only screen and (max-device-width:480px);
38. CSS Behavior
PC Browsers
Handheld.css
OpenWave, Nokia lite-web, Netfront, Motorola
Handheld.css + screen.css
Palm’s Blazer, Nokia S40 (before 6th ed)
Screen.css w/ media queries
iPhone’s Safari, Android, Opera Mobile, Opera
Mini, BlackBerry, WebOS
Screen.css no media queries
Symbian S60, Internet Explorer
Screen.cs
s
✔
✔
✔
✔
Handheld.css
✔
✔
✔
53. 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?
67. ✔ 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
68. × 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
1st SmartPhone
The IBM Simon Personal Communicator was an advanced cellular telephone for its time, created by a joint venture between IBM and BellSouth. Simon was first shown as a product concept in 1992[1] at COMDEX, in Las Vegas, Nevada. Launched in 1993[2] it combined the features of a mobile phone, a pager, a PDA, and a fax machine. After some delays it was sold by BellSouth in 1994 in 190 U.S. cities in 15 states and was originally priced at $899.[3]
IBM Simon in charging station
Besides a mobile phone, the major applications were a calendar, address book, world clock, calculator, note pad, e-mail, and games. It had no physical buttons to dial with. Instead customers used a touch-screen to select phone numbers with a finger or create facsimiles and memos with an optional stylus. Text was entered with either a unique on-screen "predictive" keyboard or QWERTY keyboard. The Simon had an optional PCMCIA memory card.
The Simon smartphone appeared in the movie The Net.
Nowadays nearly 15% of all mobile devices are already smartphones (this roughly represents a target population of nearly 600 million people).
In the meantime an incredible variety of models and formats has been growing (and it doesn’t seem to stop!).
There are literally hundreds of various device models sold around the world every year, which makes screen sizes far from being standard.
