Solutions for a_world _of_countless_devices
-
Upload
uiepreviews -
Category
Design
-
view
102 -
download
0
description
Transcript of Solutions for a_world _of_countless_devices
![Page 1: Solutions for a_world _of_countless_devices](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c8162d4a7959f55d8b46bf/html5/thumbnails/1.jpg)
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
![Page 2: Solutions for a_world _of_countless_devices](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c8162d4a7959f55d8b46bf/html5/thumbnails/2.jpg)
Viewports
![Page 3: Solutions for a_world _of_countless_devices](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c8162d4a7959f55d8b46bf/html5/thumbnails/3.jpg)
Viewports
![Page 4: Solutions for a_world _of_countless_devices](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c8162d4a7959f55d8b46bf/html5/thumbnails/4.jpg)
Viewports
![Page 5: Solutions for a_world _of_countless_devices](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c8162d4a7959f55d8b46bf/html5/thumbnails/5.jpg)
Viewports
![Page 6: Solutions for a_world _of_countless_devices](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c8162d4a7959f55d8b46bf/html5/thumbnails/6.jpg)
Meta viewport
<meta name=”viewport” content=”width=device-width”>
![Page 7: Solutions for a_world _of_countless_devices](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c8162d4a7959f55d8b46bf/html5/thumbnails/7.jpg)
@media all and (max-width: 600px) {
.sidebar {
float: none;
}
}
Media queries
![Page 8: Solutions for a_world _of_countless_devices](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c8162d4a7959f55d8b46bf/html5/thumbnails/8.jpg)
Meta viewport + media queries
= repsonsive web design
![Page 9: Solutions for a_world _of_countless_devices](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c8162d4a7959f55d8b46bf/html5/thumbnails/9.jpg)
<meta name=”viewport” content=”width=device-width”>@media all and (max-width: 600px) {
.sidebar {
float: none;
}
}
Responsive Web Design
![Page 10: Solutions for a_world _of_countless_devices](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c8162d4a7959f55d8b46bf/html5/thumbnails/10.jpg)
![Page 11: Solutions for a_world _of_countless_devices](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c8162d4a7959f55d8b46bf/html5/thumbnails/11.jpg)
![Page 12: Solutions for a_world _of_countless_devices](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c8162d4a7959f55d8b46bf/html5/thumbnails/12.jpg)
![Page 13: Solutions for a_world _of_countless_devices](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c8162d4a7959f55d8b46bf/html5/thumbnails/13.jpg)
Interaction modes
![Page 14: Solutions for a_world _of_countless_devices](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c8162d4a7959f55d8b46bf/html5/thumbnails/14.jpg)
No hover
![Page 15: Solutions for a_world _of_countless_devices](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c8162d4a7959f55d8b46bf/html5/thumbnails/15.jpg)
No hover• There is no hover on touchscreen devices
![Page 16: Solutions for a_world _of_countless_devices](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c8162d4a7959f55d8b46bf/html5/thumbnails/16.jpg)
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.”
![Page 17: Solutions for a_world _of_countless_devices](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c8162d4a7959f55d8b46bf/html5/thumbnails/17.jpg)
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
![Page 18: Solutions for a_world _of_countless_devices](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c8162d4a7959f55d8b46bf/html5/thumbnails/18.jpg)
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
![Page 19: Solutions for a_world _of_countless_devices](https://reader034.fdocuments.net/reader034/viewer/2022051819/54c8162d4a7959f55d8b46bf/html5/thumbnails/19.jpg)
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