BlackBerry JAM 29: Web 201 - Three devices, one app!
-
Upload
mariano-carrizo -
Category
Technology
-
view
481 -
download
0
description
Transcript of BlackBerry JAM 29: Web 201 - Three devices, one app!
![Page 1: BlackBerry JAM 29: Web 201 - Three devices, one app!](https://reader035.fdocuments.net/reader035/viewer/2022070317/5561ef39d8b42aa5068b5680/html5/thumbnails/1.jpg)
Web 201: Three Devices, One App! Developing for Tablet, All Touch and Physical Keyboard form factorsJAM29
Bryan Tafel
Mariano Carrizo
May 14-16, 2013
![Page 2: BlackBerry JAM 29: Web 201 - Three devices, one app!](https://reader035.fdocuments.net/reader035/viewer/2022070317/5561ef39d8b42aa5068b5680/html5/thumbnails/2.jpg)
Agenda
The importance of cross-device targeting BlackBerry devices, multiple screens BlackBerry 10 and the future of multiple resolutions Three devices, one App!
Responsive UI design Multi-layout detection CSS-media-queries Viewport meta tag Responsive images
Best practices Demo time
2
![Page 3: BlackBerry JAM 29: Web 201 - Three devices, one app!](https://reader035.fdocuments.net/reader035/viewer/2022070317/5561ef39d8b42aa5068b5680/html5/thumbnails/3.jpg)
Cross-device targeting
Why?
3
![Page 4: BlackBerry JAM 29: Web 201 - Three devices, one app!](https://reader035.fdocuments.net/reader035/viewer/2022070317/5561ef39d8b42aa5068b5680/html5/thumbnails/4.jpg)
Cross-device targeting
One code, less maintenance Same app, different devices, better outreach Improved UX
Users access the same app/site from different screens Ready to expand
Adaptable UI for a merged desktop and mobile device experience
4
![Page 5: BlackBerry JAM 29: Web 201 - Three devices, one app!](https://reader035.fdocuments.net/reader035/viewer/2022070317/5561ef39d8b42aa5068b5680/html5/thumbnails/5.jpg)
BlackBerry today
Current devices in market
5
![Page 6: BlackBerry JAM 29: Web 201 - Three devices, one app!](https://reader035.fdocuments.net/reader035/viewer/2022070317/5561ef39d8b42aa5068b5680/html5/thumbnails/6.jpg)
Current Devices
6
Q10720x720328 PPI
Z10768x1280355 PPI
PlayBook1024x600169 PPI
![Page 7: BlackBerry JAM 29: Web 201 - Three devices, one app!](https://reader035.fdocuments.net/reader035/viewer/2022070317/5561ef39d8b42aa5068b5680/html5/thumbnails/7.jpg)
BlackBerry 10 plans
Screen resolutions
7
![Page 8: BlackBerry JAM 29: Web 201 - Three devices, one app!](https://reader035.fdocuments.net/reader035/viewer/2022070317/5561ef39d8b42aa5068b5680/html5/thumbnails/8.jpg)
Full touch devices: 1280 x 720 (16:9) Keyboard devices: 720 x720 (1:1)
BlackBerry 10 Resolutions
8
![Page 9: BlackBerry JAM 29: Web 201 - Three devices, one app!](https://reader035.fdocuments.net/reader035/viewer/2022070317/5561ef39d8b42aa5068b5680/html5/thumbnails/9.jpg)
BlackBerry 10 Resolutions
9
![Page 10: BlackBerry JAM 29: Web 201 - Three devices, one app!](https://reader035.fdocuments.net/reader035/viewer/2022070317/5561ef39d8b42aa5068b5680/html5/thumbnails/10.jpg)
Three devices, one App!
Responsive UI design
10
![Page 11: BlackBerry JAM 29: Web 201 - Three devices, one app!](https://reader035.fdocuments.net/reader035/viewer/2022070317/5561ef39d8b42aa5068b5680/html5/thumbnails/11.jpg)
Responsive UI Design
Multi-layout detection CSS-media-queries Viewport meta tag Responsive images
11
![Page 12: BlackBerry JAM 29: Web 201 - Three devices, one app!](https://reader035.fdocuments.net/reader035/viewer/2022070317/5561ef39d8b42aa5068b5680/html5/thumbnails/12.jpg)
12
Absolute Layout
header,content,footer{position: absolute;
}
content{top:120px;bottom:120px;width:100%;overflow: scroll;-webkit-overflow-scrolling:
touch;}
![Page 13: BlackBerry JAM 29: Web 201 - Three devices, one app!](https://reader035.fdocuments.net/reader035/viewer/2022070317/5561ef39d8b42aa5068b5680/html5/thumbnails/13.jpg)
13
Stack/Flexible Layout
#container{width:100%;height:100%;display: -webkit-box;-webkit-box-orient: vertical;-webkit-box-align: stretch;
}
#content{-webkit-box-flex: 1;width:100%;overflow: scroll;-webkit-overflow-scrolling: touch;
}
![Page 14: BlackBerry JAM 29: Web 201 - Three devices, one app!](https://reader035.fdocuments.net/reader035/viewer/2022070317/5561ef39d8b42aa5068b5680/html5/thumbnails/14.jpg)
CSS-media-queries
14
@media all and (orientation:landscape) and (width:1280px){
header, footer {height:90px;
}}
![Page 15: BlackBerry JAM 29: Web 201 - Three devices, one app!](https://reader035.fdocuments.net/reader035/viewer/2022070317/5561ef39d8b42aa5068b5680/html5/thumbnails/15.jpg)
Viewport meta tag
15
<meta name="viewport" content="width=device-width; initial-scale=1.0; user-scalable=no;">
![Page 16: BlackBerry JAM 29: Web 201 - Three devices, one app!](https://reader035.fdocuments.net/reader035/viewer/2022070317/5561ef39d8b42aa5068b5680/html5/thumbnails/16.jpg)
Responsive images
The JavaScript Way The Cookie Way The CSS3 Way
16
![Page 17: BlackBerry JAM 29: Web 201 - Three devices, one app!](https://reader035.fdocuments.net/reader035/viewer/2022070317/5561ef39d8b42aa5068b5680/html5/thumbnails/17.jpg)
Image formats
17
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"></svg>
![Page 18: BlackBerry JAM 29: Web 201 - Three devices, one app!](https://reader035.fdocuments.net/reader035/viewer/2022070317/5561ef39d8b42aa5068b5680/html5/thumbnails/18.jpg)
Frameworks
18
SimpleGrid
![Page 19: BlackBerry JAM 29: Web 201 - Three devices, one app!](https://reader035.fdocuments.net/reader035/viewer/2022070317/5561ef39d8b42aa5068b5680/html5/thumbnails/19.jpg)
Best practices
Demo time
19
![Page 20: BlackBerry JAM 29: Web 201 - Three devices, one app!](https://reader035.fdocuments.net/reader035/viewer/2022070317/5561ef39d8b42aa5068b5680/html5/thumbnails/20.jpg)
Make sure that layouts scale across devices.
Pay attention to background bitmaps and assets that use the full screen width.
20
Best practicesOptimizing Layouts
![Page 21: BlackBerry JAM 29: Web 201 - Three devices, one app!](https://reader035.fdocuments.net/reader035/viewer/2022070317/5561ef39d8b42aa5068b5680/html5/thumbnails/21.jpg)
Make sure that segments don't use too much space. Rethink background images.
21
Best practicesOptimizing Layouts
![Page 22: BlackBerry JAM 29: Web 201 - Three devices, one app!](https://reader035.fdocuments.net/reader035/viewer/2022070317/5561ef39d8b42aa5068b5680/html5/thumbnails/22.jpg)
Don't create landscape-only views and features for smartphones with a 1:1 aspect ratio. Landscape mode is not supported on smartphones with a square
aspect ratio.
22
Best practicesOptimizing Layouts
![Page 23: BlackBerry JAM 29: Web 201 - Three devices, one app!](https://reader035.fdocuments.net/reader035/viewer/2022070317/5561ef39d8b42aa5068b5680/html5/thumbnails/23.jpg)
Take care with custom UI components Maintain consistency.
23
Best practicesPortrait and landscape
![Page 24: BlackBerry JAM 29: Web 201 - Three devices, one app!](https://reader035.fdocuments.net/reader035/viewer/2022070317/5561ef39d8b42aa5068b5680/html5/thumbnails/24.jpg)
Three devices, one App!
Demo time
24
![Page 25: BlackBerry JAM 29: Web 201 - Three devices, one app!](https://reader035.fdocuments.net/reader035/viewer/2022070317/5561ef39d8b42aa5068b5680/html5/thumbnails/25.jpg)
Make sure that the most important information is visible. Optimize screen real estate.
25
Best practicesfocusing on content and primary tasks
![Page 26: BlackBerry JAM 29: Web 201 - Three devices, one app!](https://reader035.fdocuments.net/reader035/viewer/2022070317/5561ef39d8b42aa5068b5680/html5/thumbnails/26.jpg)
Make UI components semi-transparent if they overlap with content such as pictures.
Consider how camera sensors and media formats use a different aspect ratio.
26
Best practicesfocusing on content and primary tasks
![Page 27: BlackBerry JAM 29: Web 201 - Three devices, one app!](https://reader035.fdocuments.net/reader035/viewer/2022070317/5561ef39d8b42aa5068b5680/html5/thumbnails/27.jpg)
Adapt the height of each view. If you cannot optimize, re-organize.
27
Best practicesoptimizing split-screen views
![Page 28: BlackBerry JAM 29: Web 201 - Three devices, one app!](https://reader035.fdocuments.net/reader035/viewer/2022070317/5561ef39d8b42aa5068b5680/html5/thumbnails/28.jpg)
Adapt your color scheme. Consider removing subtle patterns and textures.
28
Best practicesoptimizing battery life and reducing screen burn-in
![Page 29: BlackBerry JAM 29: Web 201 - Three devices, one app!](https://reader035.fdocuments.net/reader035/viewer/2022070317/5561ef39d8b42aa5068b5680/html5/thumbnails/29.jpg)
THANK YOU
JAM29
Bryan Tafel
Mariano Carrizo
May 14-16, 2013