Your SlideShare is downloading. ×
Mobile front end development
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mobile front end development

2,737
views

Published on

Presenation

Presenation

Published in: Technology, News & Politics

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,737
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
25
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Let's get development decisions up front, so I can unapologetically bounce between web/native topics in the presentation - Mobile web browsers have a major benefit over web design on the desktop, and that is mobile devices have a higher turnover, in result peoples browsers stay more current and up to date to leverage the most current guidelines - HMTL5 can handle multi-touch (10 finger), in browser 3) Presentation at last weeks MobileProcessing conference had FireFox connecting to a PS3 controller.
  • Hover was a tragic loss... Twitter had a javascript mouse over that was chalked full of detail
  • Know your developer. Designers and developers both having varying amounts of knowledge into each others verticals - don't assume all devs can parse a PSD 
  • Transcript

    • 1. MiKE Innovation Presentation, December 3, 2011 Mobile Design: Front End Design & Development Open Discussion
    • 2. Mike Massie User 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 www.michaelmassie.com [email_address] om @mmassie
    • 3. +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
    • 4.
      • + Design Considerations
      • + Application
              • - Native
      • - Hybrid - HTML+javascript to a native container app
        • - Web
    • 5.
      • + 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)
    • 6. +Path 2.0 for iPhone & Android: - Why native is still winning... for now. - Attention to detail all the way to the Sign up screens
    • 7.
      • + 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)
    • 8.
      • + 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
    • 9. + Design Considerations - Platform (OS) - iOS + Android - Amazon - Facebook - Blackberry - Windows Phone 7
    • 10. *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 Android iOS
    • 11. Fingertip Sized Targets: The ideal hit area for an iPhone is 44px
    • 12. Native v Custom Design
    • 13. 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.
    • 14.
      • 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/
      www.michaelmassie.com [email_address] om @mmassie