Multi Environment Mobile Development

Why it is fun, hard, annoying and cool at the same time

Created by Mickaël Floc'hlay / @dirtyhenry

Designing for mobile

  • User Interface
  • User eXperience
  • Development
  • Content
  • Business Plan

Smartphones OS

Q3 2012 - Source: IDC via TechCrunch

Mobile Browsers

Mobile browsing: 13% of global browsing

March 2013 - Source: ArsTechnica

Mobile Browsers

Mobile browsing: 10% of global browsing

December 2012 - Source: ArsTechnica

Mobile Browsers

Mobile browsing: 10% of global browsing

October 2012 - Source: ArsTechnica

Tablets

25% of adults American own a tablet

44% of Android tablets are Kindle Fire tablets

iPad share was 81% in 2011

October 2012 - Source: ArsTechnica

Weird...

Tim Cook: when comparing the tablet market share (iPad 68%) with the tablet web traffic share (iPad 91%)

I don't know what these other tablets are doing

Apple Special Event - September 12, 2012

Weird...

TNW Magazine stopped publishing on Android after noticing a "80:1 ratio of iOS to Android downloads".

Marco Ament, commenting on this:

Installed base isn’t everything — if it was, we’d all be writing Windows apps.

Weird...

For every 1 iOS version we’ve sold, 5 were sold on Android. The Android version also costs $1 more, so we’re making more per transaction as well. (...) it’s a fact.

- Russell Ivanovic on shiftyjelly's blog

Supporting multiple screens

iOS Screens:

01/2007iPhone + 3G + 3GS480 × 320 px163 dpi
01/2010iPad + 2 + Mini1,024 × 768 px132/163 dpi
06/2010iPhone 4 + 4S960 × 640 px326 dpi
03/2010iPad 3 + 42,048 × 1536 px264 dpi
09/2012iPhone51136 × 640 px326 dpi

Supporting multiple screens

Android screens:

Source : developer.android.com

Supporting multiple screens

October 2012 - Source: developer.android.com

Supporting multiple OS versions

Source: developer.android.com

Solutions

  • Web: responsive design (HTML5/CSS3)
  • Apps: smart layout systems
  • Shitty code:
    
    if ([device isIpad]) {
        image.name = @"image~pad.png";
    } else if ([device isIphone5]) {
        image.name = @"image-568h~phone.png";
    } else {
        image.name = @"image~phone.png";
    }
    
                            

UX Design

Interesting but...

  • Some useless games
  • Some bad experiences

UX Design

Quick list of UX mobile brought

  • Bounce at the end of a scroll (Apple)
  • Pull to refresh (Loren Brichter)
  • Some UI from Clear and Path

Rob Foster:

I believe when properly done, a visceral app actually causes your body to release endorphins.

John Gruber:

I would call this designing for feel, or maybe even designing for affection.

Time for Questions

  • Web or App?
  • What framework?
  • Native or Multiplatform?

Tools for Webapps

Multiplatform Tools

Native Tools

Creating apps for both platforms is difficult; I have huge respect for the companies that nail it. Nailing it means not taking a reductionist approach but instead being intimately familiar with the platform so that you can build something that feels meant to be there.
Jack Groetzinger

Rule of Thumb

Technology+-
Web AppFull onlineOffline needs
Performance
Browser Fragmentation
Monetization
Multiplatform AppTests
Maintenance
Customization
Innovation TTM
Native AppFull Control
Performance
Tests
V1 TTM

Cf. Wikipedia for a maintained list of tools

Testing

  • Multiple screen sizes
  • + Multiple screen densities
  • + Multiple OS
  • + Multiple OS versions
  • =

Testing

but...

  • Good code practices
  • Unit tests
  • Continuous integration

A word on the server side

Better stuff than Java/MySQL is coming...

What content

A good story can be found here.

When users search from a mobile device, United automatically redirects links from Google to its mobile website—without checking to see if the content is available on mobile. If the content doesn’t exist on mobile, the user gets unceremoniously dumped on the homepage of the mobile website. Mobile redirects that break search—how is that ever a good user experience?

How To Make A Living From Mobile?

A good joke from the Oatmeal inspired Josh Lehman these motivation rules:

  1. Build an app experience that’s unique and doesn’t feel “easily replicated”
  2. Provide something the user sees as valuable to their daily life
  3. Package it such that it shows off its craftsmanship
  4. Find creative ways to profit off of a “free” version
  5. Quit complaining about money wasted on cups of coffee

Candidates for your RSS feed

What Now?

Go develop your apps!

THE END

#dirtyhenry

bootstragram.com

Sources on GitHub