Head to the session to learn how to adapt standard iOS design patterns to Android, snap your UI to a strong grid system, think of Android design as responsive design, use the right icons and extend this knowledge to mobile web apps. iOS is often the platform of choice when it comes to creating mobile applications, and for good reason. However, this has led us into a design monoculture where skeuomorphism and the Apple Human Interface Guidelines have become the 'angry dictators'. In this current state of affairs, it's easy to overlook the mass of Android users who expect and deserve a different user experience - one where copy-pasting an iOS design to the Android platform simply won't do. Herve will take you through the bare essentials of porting an iOS design to Android while ensuring the whole process is less painful, less costly and simply better all round.

1. ome Quick Tips
S
for porting your iOS designs to
ANDROID
FOM/FOWA London 2012

2. I’m a Mac fanboy

3. love
ROBOTS

4. Hello I’m
Hervé Mischler
@Dstroii

5. I’m not going to talk about
Eclipse

9. Android Users
desserve a different experience

17. Vertical
Rythm

18. 44 48

21. 8 4
16
48 8 Button 16
16
8 4

22. 48
48
48
48
48
48
16 48
16
48
48
48
48
16 16

23. 48

24. 40

25. 56

26. How to prepare your
ASSETS

27. btn_default.9.png

28. btn_default_pressed.9.png

29. btn_default_focused.9.png

30. btn_default_disabled.9.png

31. btn_default_disabled_focused.9.png

34. Drawable-ldpi 0.75x
Drawable-mdpi 1x
Drawable-hdpi 1.5x
Drawable-xhdpi 2x

35. Think
Responsive Design

37. Use the right
Font

39. Helvetica Bold
Max 20pts The quick brown fox jumps over the lazy dog e.g.: Navigation Bar / Cell Text Label
18pts The quick brown fox jumps over the lazy dog e.g.: Detail Disclosure Button
17pts The quick brown fox jumps over the lazy dog e.g.: Cell Text Label
12pts The quick brown fox jumps over the lazy dog e.g.: Button Item
Min 9pts The quick brown fox jumps over the lazy dog e.g.: Tab Bar Item
Helvetica regular
Max 17pts The quick brown fox jumps over the lazy dog e.g.: Label
15pts The quick brown fox jumps over the lazy dog e.g.: Rounded Rectangle Button
14pts The quick brown fox jumps over the lazy dog e.g.: Text View / Cell Subtitle
Min 12pts The quick brown fox jumps over the lazy dog e.g.: Table View Item

40. Roboto
Text Size Micro 12sp
Text Size Small 14sp
Text Size Medium 18sp
Text Size Large 22sp

42. Roboto.ttf
http://developer.android.com/design/downloads/

45. Test Early
Test Often

46. http://www.zambetti.com/projects/liveview/

47. http://code.google.com/p/android-ui-utils/

48. Extend your

51. https://build.phonegap.com

52. Adapt your
CSS
TO THE PLATFORM

53. http://sass-lang.com/

54. /* =====================================
IOS
=====================================*/
$fontfamily: helvetica, sans-serif;
$fontmini: 0.75em; //12px
$fontsmall: 0.875em; //14px
$fontmedium: 1.0625em; //17px
$fontlarge: 1.25em; //20px
$baseline: 1em; //16px
$baseheight: 2.75em; //44px
$navwidth: 20em; //320px

55. /* =====================================
Android
=====================================*/
$fontfamily: "roboto","droid-sans", sans-serif;
$fontmini: 0.75em; //12px
$fontsmall: 0.875em; //14px
$fontmedium: 1.125em; //18px
$fontlarge: 1.375em; //22px
$baseline: 1em; //16px
$baseheight: 3em; //48px
$navwidth: 20em; //320px

56. In
Adobe Edge Inspect
Preview & inspect web designs on devices.
http://html.adobe.com/edge/inspect/

59. Make Your Own

62. http://speakerdeck.com/u/dstroii