Web 201: Three Devices, One App!
Developing for Tablet, All Touch and
Physical Keyboard form factors
JAM29
Bryan Tafel
Mar...
Agenda
The importance of cross-device targeting
BlackBerry devices, multiple screens
BlackBerry 10 and the future of multi...
Cross-device targeting
Why?
3
Cross-device targeting
One code, less maintenance
Same app, different devices, better outreach
Improved UX
 Users access ...
BlackBerry today
Current devices in market
5
Current Devices
6
Q10
720x720
328 PPI
Z10
768x1280
355 PPI
PlayBook
1024x600
169 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: sc...
13
Stack/Flexible Layout
#container{
width:100%;
height:100%;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-...
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...
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...
Make sure that segments don't use too much space.
Rethink background images.
21
Best practices
Optimizing Layouts
Don't create landscape-only views and features for
smartphones with a 1:1 aspect ratio.
 Landscape mode is not supported ...
Take care with custom UI components
Maintain consistency.
23
Best practices
Portrait and landscape
Three devices, one App!
Demo time
24
Make sure that the most important information is visible.
Optimize screen real estate.
25
Best practices
focusing on conte...
Make UI components semi-transparent if they overlap
with content such as pictures.
Consider how camera sensors and media f...
Adapt the height of each view.
If you cannot optimize, re-organize.
27
Best practices
optimizing split-screen views
Adapt your color scheme.
Consider removing subtle patterns and textures.
28
Best practices
optimizing battery life and red...
THANK YOU
JAM29
Bryan Tafel
Mariano Carrizo
May 14-16, 2013
Upcoming SlideShare
Loading in …5
×

BlackBerry JAM 29: Web 201 - Three devices, one app!

650 views

Published on

BlackBerry JAM Americas 2013, May 15th, Orlando, Florida.

A deep dive into techniques and tips for building HTML applications that fit the entire BlackBerry device ecosystems. Performance optimizations, UI considerations and UX to keep the user as in native environment.

Session shared with Bryan Tafel, BlackBerry developer evangelist in LATAM.

Session recording available:
http://active.mediasite.com/mediasite/Play/1e549e1b-0d13-4ce2-b164-f07bae94996c

Published in: Technology
  • Be the first to comment

  • Be the first to like this

BlackBerry JAM 29: Web 201 - Three devices, one app!

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

×