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

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