Web 201: Three Devices, One App! Developing for Tablet, All Touch and Physical Keyboard form factorsJAM29
Bryan Tafel
Mariano Carrizo
May 14-16, 2013
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
Cross-device targeting
Why?
3
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
BlackBerry today
Current devices in market
5
Current Devices
6
Q10720x720328 PPI
Z10768x1280355 PPI
PlayBook1024x600169 PPI
BlackBerry 10 plans
Screen resolutions
7
Full touch devices: 1280 x 720 (16:9) Keyboard devices: 720 x720 (1:1)
BlackBerry 10 Resolutions
8
BlackBerry 10 Resolutions
9
Three devices, one App!
Responsive UI design
10
Responsive UI Design
Multi-layout detection CSS-media-queries Viewport meta tag Responsive images
11
12
Absolute Layout
header,content,footer{position: absolute;
}
content{top:120px;bottom:120px;width:100%;overflow: scroll;-webkit-overflow-scrolling:
touch;}
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;
}
CSS-media-queries
14
@media all and (orientation:landscape) and (width:1280px){
header, footer {height:90px;
}}
Viewport meta tag
15
<meta name="viewport" content="width=device-width; initial-scale=1.0; user-scalable=no;">
Responsive images
The JavaScript Way The Cookie Way The CSS3 Way
16
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>
Frameworks
18
SimpleGrid
Best practices
Demo time
19
Make sure that layouts scale across devices.
Pay attention to background bitmaps and assets that use the full screen width.
20
Best practicesOptimizing Layouts
Make sure that segments don't use too much space. Rethink background images.
21
Best practicesOptimizing Layouts
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
Take care with custom UI components Maintain consistency.
23
Best practicesPortrait and landscape
Three devices, one App!
Demo time
24
Make sure that the most important information is visible. Optimize screen real estate.
25
Best practicesfocusing on content and primary tasks
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
Adapt the height of each view. If you cannot optimize, re-organize.
27
Best practicesoptimizing split-screen views
Adapt your color scheme. Consider removing subtle patterns and textures.
28
Best practicesoptimizing battery life and reducing screen burn-in
THANK YOU
JAM29
Bryan Tafel
Mariano Carrizo
May 14-16, 2013
