This document discusses best practices for developing hybrid mobile apps across platforms. It emphasizes using density independent pixels (DP) to support varying screen densities, providing splash screens and navigation optimized for each platform. While tools like Intel's App Framework aim to build truly cross-platform apps, the document argues that building native versions for each platform is ultimately easier since it avoids challenges of differing interaction patterns and screen usages across Android and iOS. Examples of successfully cross-platform apps are provided.

1. UX & Hybrid App
The challenge of going mobile

2. First Up!Why?

3. Cars

4. Bad experiences !
They stick with you! Get to your nerves

5. Good experiences !
They stick with you too

6. Happy Customers, HappyYou


7. Face the Challenge

9. Interactions , Interactions

10. Android
Touch Double touchSwipe or drag Long press
drag
Long press
developer.android.com

11. Android
Double touch
drag
Pinch close
Pinch Open
developer.android.com

12. iOS

13. iOS
Patentlyapple

15. quojs.tapquo.com

16. Notifications
http://plugins.cordova.io/#/package/de.appplant.cordova.plugin.local-notification

17. Measurements
That’s a cool Icon you designed with a graphic tool. ( think 1 cell= 10px).
How you seen it on your pc

18. Measurements
Suppose your pc has a depth of 160px per inch which we call 160DPI Screen. Dpi= Dot per inch. Androids are
usually have more DPI(260-640DPI). Your icon -
~160 DPI (Feels ok  ) ~240 DPI ( Bit small but ok ) ~ 640DPI (Aw!can’t see it :o )

19. Possible Solutions?
• Vector!!! Maybe!! But How smartphones will understand what to show ?
• The web works with pixels but phones cant work with this thing only because
of large pixel density.
• We need density independent unit for that purpose.
• DP = DIP = Density Independent Pixel. ( Used for all type of graphics)
• SP = SIP = Scale Independent Pixel. ( Used for fonts )

20. Measurements
• 2:3:6:8 Scaling Ratio
• MDPI= 1x (~160 DPI)
• HDPI=1.5x(~240DPI)
• XHDPI= 2x(~320DPI)
• XXHDPI= 3x(~480DPI)
• XXXHDPI=4x(~640DPI)
• Example:
• 48*48px(~160DPI)
• 72*72px(~240DPI)
• 96*96px(~320DPI)
• 144*144px(~480DPI)
• 192*192px(~640DPI)

21. Icons
• They are like doors.
• Start Big, If possible vector.
• Common names are easy to implement
• Optimize with Optipng/pngcrush
• http://docs.phonegap.com/en/3.5.0/config_ref_images.md.html

22. Other things that makes difference
• Splashscreen.
• Actionbar/Toolbar.
• Navigation way.
• Using the best possible screen realestate

23. Will build one app and build it to all platform

24. Bad idea !/Way more to think off/
too much Challenge

25. Building Native things =>
easy. Less to think about

26. Tools
I don’t recommend this one
Intel's App Framework

27. Some apps to look onto
• Flipboard ( they made it cross platform )
• Instagram
• Health
• BBC
• Exfm
• Rormix
• Fruitsalad
• twist
• IGN Dominate

28. Ahmad Firoz
Visual Designer & Student
ahmadfiroz@outlook.com
ahmadfiroz.com