solutions for a_world _of_countless_devices

Installed base Q2

2012 2011 2010

Android 41% 27% 9%

Symbian 25% 35% 49%

iOS 19% 16% 11%

BlackBerry 10% 12% 14%

bada 2% 1% -

Windows Phone 1% 1% -

Other 3% 8% 17%

Source: Tomi Ahonen

Viewports

Viewports

Viewports

Viewports

Meta viewport

<meta name=”viewport” content=”width=device-width”>

@media all and (max-width: 600px) {

.sidebar {

float: none;

}

}

Media queries

Meta viewport + media queries

= repsonsive web design

<meta name=”viewport” content=”width=device-width”>@media all and (max-width: 600px) {

.sidebar {

float: none;

}

}

Responsive Web Design

Interaction modes

No hover

No hover• There is no hover on touchscreen devices

No hover• There is no hover on touchscreen devices

• No way of saying “I might be interested in this element, but I’m not sure yet.”

No hover• There is no hover on touchscreen devices

• No way of saying “I might be interested in this element, but I’m not sure yet.”

• It’s technically very hard: finger above the screen has to be detected

No hover• There is no hover on touchscreen devices

• No way of saying “I might be interested in this element, but I’m not sure yet.”

• It’s technically very hard: finger above the screen has to be detected

• Sony recently announced the Xperia Sola, which seems to do this trick

No hover• There is no hover on touchscreen devices

• No way of saying “I might be interested in this element, but I’m not sure yet.”

• It’s technically very hard: finger above the screen has to be detected

• Sony recently announced the Xperia Sola, which seems to do this trick

• But even then your finger obscures the screen