designing for multiple screen sizes and aspect ratios on android

28
DESIGNING FOR ANDROID A WINNING STRATEGY

Upload: quark-studios

Post on 31-Aug-2014

252 views

Category:

Documents


3 download

DESCRIPTION

From our meetup presentation - http://www.meetup.com/Kansas-City-Mobile-App-Developers-Group/events/56754822/- Number of Android devices out there with different resolutions and pixel densities, screen sizes, and aspect ratios.- Understanding Android layouts- Writing adaptive layouts to handle any resolution, future proofing it as much as possible.

TRANSCRIPT

Page 1: Designing for Multiple Screen Sizes and Aspect Ratios on Android

DESIGNING FORANDROID

A WINNING STRATEGY

Page 2: Designing for Multiple Screen Sizes and Aspect Ratios on Android

A WINNING STRATEGY

KUNJANSHAH

PRESENTEDBY

ASHOKAMARAN

ORGANIZEDBY

DESIGNING FORANDROID

Page 3: Designing for Multiple Screen Sizes and Aspect Ratios on Android

DISCLAIMER

I ❤ ANDROID

[ REGARDLESS OF WHAT YOU SEE IN THE FOLLOWING SLIDES ]

Page 4: Designing for Multiple Screen Sizes and Aspect Ratios on Android

ANDROID LAYOUTS

ISSUES

MULTIPLESCREEN SIZES

MULTIPLEASPECT RATIOS

MULTIPLESCREEN DENSITIES

MULTIPLEANDROID VERSIONS

MULTIPLEDEVICES

Page 5: Designing for Multiple Screen Sizes and Aspect Ratios on Android

?

NUMBER OF ANDROID DEVICES

TAKE A WILD GUESS.

Page 6: Designing for Multiple Screen Sizes and Aspect Ratios on Android

NUMBER OF ANDROID DEVICES

NOT EVEN KIDDING.

1135

Page 7: Designing for Multiple Screen Sizes and Aspect Ratios on Android

PHYSICAL SCREEN SIZES

TOSHIBA HAS A 13” ANDROID TABLET. NO, REALLY.

2 TO 5.3 INCH FOR PHONES

7 TO 13 INCH FOR TABLETS

Page 8: Designing for Multiple Screen Sizes and Aspect Ratios on Android

SCREEN SIZES

SOME WON’T FIT IN YOUR HAND.

PHONES TABLETS

2.55 3.6 72.6 3.7 7.92.8 4 8

3 4.2 9.73.1 4.27 10.1

3.14 4.3 133.2 4.53.3 4.653.4 4.83.5 5.3

Page 9: Designing for Multiple Screen Sizes and Aspect Ratios on Android

SCREEN RESOLUTIONS

I PROBABLY MISSED SOME.

PHONES 480 X 800 800 X 600240 X 320 480 X 854 1024 X 600240 X 400 540 X 960 1024 X 768240 X 432 640 X 960 1280 X 720240 X 640 1280 X 800 1280 X 800320 X 480 1600 X 900340 X 480 TABLETS360 X 640 480 X 800480 X 640 480 X 854

Page 10: Designing for Multiple Screen Sizes and Aspect Ratios on Android

ASPECT RATIOS

STUFF WILL GET SQUASHED!

1.33 1.60 1.771.41 1.66 1.801.50 1.70 2.66

Page 11: Designing for Multiple Screen Sizes and Aspect Ratios on Android

ANDROID VERSIONS

OUR SUGARY OVERLORDS.

1.5 2.2 2.3.3 3.1 4.0.21.6 2.3 2.3.7 3.2 4.0.32.1 2.3.2 3.0 4.0

Page 12: Designing for Multiple Screen Sizes and Aspect Ratios on Android

SCREEN DENSITIES

NEXT UP: XXHDPI

LDPI MDPI HDPI XHDPI

Page 13: Designing for Multiple Screen Sizes and Aspect Ratios on Android

COPING

IT HELPS TO TALK TO YOUR PSYCHIATRIST AS WELL.

18SCREEN

SIZES

9ASPECT RATIOS

4SCREEN

DENSITIES

14ANDROID

VERSIONS

1135ANDROID DEVICES

Page 14: Designing for Multiple Screen Sizes and Aspect Ratios on Android

1

2

3N

WRITE LAYOUT

TESTDEVICE N

TESTDEVICE 1

BUILDAPK

N+1

TESTDEVICE N+1

HOW TO WIN

RE

Page 15: Designing for Multiple Screen Sizes and Aspect Ratios on Android

LETS GO WIN !SMART DESIGN SMART XML SMART IGNORING

STRATEGIES

Design XML that will work on wide variety of Android devices, various techniques follow.

Ignore old Android versions,. Ignore devices that have less market share. Smartly ignore devices based on business needs and app focus.

Design your UI/UX in a way that will translate to multiple layouts. Design like the web, responsive.

Page 16: Designing for Multiple Screen Sizes and Aspect Ratios on Android

UI widgets on Android have different colors, gradients and backgrounds on different versions, and manufacturers.

UI CONSIDERATIONS

SMART DESIGN

WYSIWYDG

4”2.3

4”4.0

3.7”2.0

4.3”2.3.4

ASOP

ASOP

ASOP

HTC

Page 17: Designing for Multiple Screen Sizes and Aspect Ratios on Android

UI widgets on Android have different colors, gradients and backgrounds on different versions, and manufacturers.

MULTIPLE RESOURCES

SMART DESIGN

HIRE MORE PHOTOSHOP MONKEYS.

Page 18: Designing for Multiple Screen Sizes and Aspect Ratios on Android

WRITE IT LIKE HTML

SMART XML

WYSIWYDG

Page 19: Designing for Multiple Screen Sizes and Aspect Ratios on Android

BACK TO 1999

SMART XML

YOU DON’T NEED A TIME MACHINE.

Page 20: Designing for Multiple Screen Sizes and Aspect Ratios on Android

IT STILL WORKS!

OKAY-ISH.

Page 21: Designing for Multiple Screen Sizes and Aspect Ratios on Android

SMART IGNORING

IGNORANCE IS BLISS.

IGNORE DEVICES WITH LOW MARKET SHARE.

IGNORE OLDER ANDROID VERSIONS WITH LOW MARKET SHARE.

IGNORE ANDROID VERSIONS RUSHED TO MARKET.

Page 22: Designing for Multiple Screen Sizes and Aspect Ratios on Android

1.5 1.6 2.1 2.2 2.3-2 2.3.3-7 3.0 3.1 3.2 4.0/4.0.2 4.0.3

2.40.52.210.1

63.2

0.5

23.1

60.70.3

SMART IGNORING

IGNORANCE IS BLISS.

Page 23: Designing for Multiple Screen Sizes and Aspect Ratios on Android

SMART IGNORING

(YOU DON’T WANT CRAPPY PICTURES TAKEN BY YOUR APP ANYWAYS.)

IGNORE DEVICES/ANDROID VERSIONS OUTSIDE YOUR APP FOCUS.

AN APP WITH FOCUS ON PICTURES CAN IGNORE DEVICES WITH

CRAPPY CAMERAS.

Page 24: Designing for Multiple Screen Sizes and Aspect Ratios on Android

IF ALL ELSE FAILS...

YOU DON’T WANT TO BE HERE.

WRITE SEPARATE LAYOUT XML FILES FOR SPECIFIC DEVICES.

USE SVG FOR GRAPHICS ASSETS.

DONT CARE MODE.

Page 25: Designing for Multiple Screen Sizes and Aspect Ratios on Android

FACEBOOKWWW.FACEBOOK.COM/QUARKSTUDIOS

TWITTERWWW.TWITTER.COM/QUARKSTUDIOS

GET IN TOUCH WITH US

WWWQUARK STUDIOSWWW.QUARKSTUDIOS.COM

WWW JMA ITWWW.JMAIT.COM

Page 26: Designing for Multiple Screen Sizes and Aspect Ratios on Android

THANK YOUFOR YOUR ATTENTION.

WWW.QUARKSTUDIOS.COM

QUARK STUDIOS & JMA-IT

Page 27: Designing for Multiple Screen Sizes and Aspect Ratios on Android
Page 28: Designing for Multiple Screen Sizes and Aspect Ratios on Android

SECURING APPSFOR THE GOVERNMENT & ENTERPRISE

RSVP TODAY!

NEXT...