mobile front end development
DESCRIPTION
PresenationTRANSCRIPT
![Page 1: Mobile front end development](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54c782564a795934358b45ca/html5/thumbnails/1.jpg)
MiKE Innovation Presentation, December 3, 2011
Mobile Design: Front End Design & Development
Open Discussion
![Page 2: Mobile front end development](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54c782564a795934358b45ca/html5/thumbnails/2.jpg)
Mike MassieUser Interface / Interaction Designer
Been working in mobile technology for a decade
Currently: Working on a project called Marco. Creator of airrand.com & the Smart Alarm for the iPhone
Previously: Lead designer for ÜberTwitter
[email protected]@mmassie
![Page 3: Mobile front end development](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54c782564a795934358b45ca/html5/thumbnails/3.jpg)
+Why Design For Mobile+ Mobile Usage
- By 2013 the web access by mobile will surpass desktop
- Moars Law - AT&T traffic has grown 50x in 3 years
- Singularity Authors tech innovation curve
+ Luke Wroblewski Mobile First guidelines- Growth = Opportunity- Constraints = Focus- Capabilities = Innovation
![Page 4: Mobile front end development](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54c782564a795934358b45ca/html5/thumbnails/4.jpg)
+ Design Considerations
+ Application - Native
- Hybrid - HTML+javascript to a native container app
- Web
![Page 5: Mobile front end development](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54c782564a795934358b45ca/html5/thumbnails/5.jpg)
+ Design Consideration+ Benefits of going native
- Better performance/responsiveness- Fluid animations- Notifications- People go to App Stores/Marketplaces to find apps- Background running (ex: Geofencing)
![Page 6: Mobile front end development](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54c782564a795934358b45ca/html5/thumbnails/6.jpg)
+Path 2.0 for iPhone & Android:
- Why native is still winning... for now.
- Attention to detailall the way to the Sign up screens
![Page 7: Mobile front end development](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54c782564a795934358b45ca/html5/thumbnails/7.jpg)
+ Design Consideration+ Benefits of going HTML
- Single Development Platform- Supports all modern browsers- No App Store (this can benefit & hurt, but shells can solve this)
+ Webkit is offering more native functionality- Offline Application cache- Local desktop icon- Touch- Gesture- GPS- Accelerometer
- Real-time updates (No App Store to squash bugs)
![Page 8: Mobile front end development](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54c782564a795934358b45ca/html5/thumbnails/8.jpg)
+ Design Considerations - HTML- Buttons have various states in both environments, but Hover is dead in the touch world.- Adding descriptions to your links, if you ignored the handicapped users in the past, will come back to haunt you - All people are asking Siri to read things to them!- Avoid Pop-ups and New Windows
![Page 9: Mobile front end development](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54c782564a795934358b45ca/html5/thumbnails/9.jpg)
+ Design Considerations - Platform (OS)- iOS+ Android
- Amazon- Facebook
- Blackberry- Windows Phone 7
![Page 10: Mobile front end development](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54c782564a795934358b45ca/html5/thumbnails/10.jpg)
*Android RelativeLayout is your friend!
+ Design Considerations - The Canvas+ Size pieces of glass + resolution
- iPhone, iPod Touch (320 x 480)
- Android Devices- iPad (768 x 1024)
- Android Tablets- CSS
AndroidiOS
![Page 11: Mobile front end development](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54c782564a795934358b45ca/html5/thumbnails/11.jpg)
Fingertip Sized Targets:The ideal hit area for an iPhone is
44px
![Page 12: Mobile front end development](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54c782564a795934358b45ca/html5/thumbnails/12.jpg)
Native v Custom Design
![Page 13: Mobile front end development](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54c782564a795934358b45ca/html5/thumbnails/13.jpg)
My Über Design Challenge:
To maximize smaller screen sizes, the
navigation bar can be hidden on
trackball/pad interfaces by scrolling left,
offering more room for the user to view
content.
In response to feedback from Philippines
(major BB flip phone region) an
alternative bar style UI was created to
accommodate lack of space. Although
the Bubble (shown left) style offered a
UI that had a more polished feel, the bar
design offered more room for data
within smaller screen sizes and
resolutions.
![Page 14: Mobile front end development](https://reader034.vdocuments.mx/reader034/viewer/2022051110/54c782564a795934358b45ca/html5/thumbnails/14.jpg)
References:
http://www.slideshare.net/webexpo/luke-wroblewski-mobile-first
Siri Clip - http://www.quirksmode.org/blog/archives/2011/11/a_quick_siri_no.html
iPhone GUI PSD - http://www.teehanlax.com/blog/ios-5-gui-psd-iphone-4s/
iOS Icon Template - http://blog.cocoia.com/2010/iphone-4-icon-psd-file/
[email protected]@mmassie