quick tips for porting your ios designs to android
DESCRIPTION
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.TRANSCRIPT
![Page 1: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/1.jpg)
Some !uic" #i$%for porting your iOS designs to
ANDROID!"#/!"$% &ondon 2012
![Page 2: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/2.jpg)
!’m a Mac fanboy
![Page 3: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/3.jpg)
loveROBOTS
![Page 4: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/4.jpg)
!ello "’m Hervé Mischler
@Dstroii
![Page 5: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/5.jpg)
Ecli!seI’m not going to talk about
![Page 6: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/6.jpg)
![Page 7: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/7.jpg)
![Page 8: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/8.jpg)
![Page 9: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/9.jpg)
Android !sersdesserve a different experience
![Page 10: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/10.jpg)
![Page 11: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/11.jpg)
![Page 12: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/12.jpg)
![Page 13: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/13.jpg)
![Page 14: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/14.jpg)
![Page 15: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/15.jpg)
![Page 16: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/16.jpg)
![Page 17: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/17.jpg)
Vertical Rythm
![Page 18: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/18.jpg)
44 48
![Page 19: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/19.jpg)
![Page 20: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/20.jpg)
![Page 21: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/21.jpg)
16 4 8
8
8 48
4
16 16
Button
![Page 22: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/22.jpg)
48 48 48 48 48 48 48 48 48 48 48
16 16
16 16
![Page 23: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/23.jpg)
48
![Page 24: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/24.jpg)
40
![Page 25: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/25.jpg)
56
![Page 26: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/26.jpg)
How to prepare yourASSETS
![Page 27: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/27.jpg)
btn_default.9.png
![Page 28: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/28.jpg)
btn_default_pressed.9.png
![Page 29: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/29.jpg)
btn_default_focused.9.png
![Page 30: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/30.jpg)
btn_default_disabled.9.png
![Page 31: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/31.jpg)
btn_default_disabled_focused.9.png
![Page 32: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/32.jpg)
![Page 33: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/33.jpg)
![Page 34: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/34.jpg)
Drawable-ldpi
Drawable-mdpi
Drawable-hdpi
Drawable-xhdpi
0.75x
1x
1.5x
2x
![Page 35: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/35.jpg)
Think Responsive Desi!n
![Page 36: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/36.jpg)
�)8++4�)54¿-;8':/549�'<'/2'(2+�,853�+3;2':58�91/49�/4�:.+��4*85/*���
![Page 37: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/37.jpg)
!se the "ight
Font
![Page 38: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/38.jpg)
![Page 39: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/39.jpg)
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
e.g.: Navigation Bar / Cell Text Label
e.g.: Detail Disclosure Button
e.g.: Cell Text Label
e.g.: Button Item
e.g.: Tab Bar Item
e.g.: Label
e.g.: Rounded Rectangle Button
e.g.: Text View / Cell Subtitle
e.g.: Table View Item
20pts
18pts
17pts
12pts
9pts
Max
Min
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
17pts
15pts
14pts
12pts
Max
Min
Helvetica Bold
Helvetica regular
![Page 40: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/40.jpg)
Text Size Micro
Roboto12sp
Text Size Small 14sp
Text Size Medium 18sp
Text Size Large 22sp
![Page 41: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/41.jpg)
![Page 42: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/42.jpg)
Roboto.ttf
http://developer.android.com/design/downloads/
![Page 43: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/43.jpg)
![Page 44: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/44.jpg)
![Page 45: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/45.jpg)
Test Earl!Test Often
![Page 46: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/46.jpg)
http://www.zambetti.com/projects/liveview/
![Page 47: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/47.jpg)
http://code.google.com/p/android-ui-utils/
![Page 48: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/48.jpg)
Extend you!
![Page 49: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/49.jpg)
![Page 50: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/50.jpg)
![Page 51: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/51.jpg)
https://build.phonegap.com
![Page 52: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/52.jpg)
Adapt !ou" CSS
TO THE PLATFORM
![Page 53: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/53.jpg)
http://sass-lang.com/
![Page 54: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/54.jpg)
/* ===================================== 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
![Page 55: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/55.jpg)
/* ===================================== 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
![Page 56: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/56.jpg)
http://html.adobe.com/edge/inspect/
Adobe Edge InspectPreview & inspect web designs on devices.
In
![Page 57: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/57.jpg)
![Page 58: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/58.jpg)
![Page 59: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/59.jpg)
Make Your Own
![Page 60: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/60.jpg)
.::6GTT===J35@/22'J58-T+4I��T¿8+,5>59T
![Page 61: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/61.jpg)
![Page 62: Quick tips for porting your iOS designs to Android](https://reader038.vdocuments.mx/reader038/viewer/2022103111/54b558274a795992298b47f4/html5/thumbnails/62.jpg)
http://speakerdeck.com/u/dstroii