Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Going Mobile

Going Mobile

A high level overview of the available solutions for going your business mobile.

Stratos Pavlakis

January 15, 2014
Tweet

More Decks by Stratos Pavlakis

Other Decks in Programming

Transcript

  1. Going Mobile
    the well grounded mobile developer

    View Slide

  2. Newsroom
    Smartphone market drives 600% growth in mobile web usage
    eBay global mobile sales generated nearly $2 billion in 2010
    The average smartphone user visits up to 24 websites a day
    and the top 50% of websites only account for 40% of all mobile
    visits
    Mobile phones will overtake PCs as the most common web
    access devices worldwide by 2013
    PayPal is seeing up to $10 million in mobile payment
    volume per day

    View Slide

  3. 2013 shipments by Segment
    2012 2013 2014
    PC + Notebooks 341,273 303,100 281,568
    Ultramobile 9,787 18,598 39,896
    Tablet 120,203 184,431 263,229
    Mobile Phone 1,746,177 1,810,304 1,905,030
    2,217,440 2,316,433 2,489,723
    Source: Gartner (October 2013)

    View Slide

  4. 2013 shipments by OS
    2012 2013 2014
    Android 505,509 879,910 1,115,289
    Windows 346,468 331,559 363,803
    iOS/MacOS 212,875 271,949 338,106
    RIM 34,584 23,103 19,297
    Others 1,118,004 809,912 653,228
    2,217,440 2,316,433 2,489,723
    Source: Gartner (October 2013)

    View Slide

  5. Thinking Mobile

    View Slide

  6. ● about shrinking things
    ● about fitting things
    ● a movable desktop
    ● just another interface
    Mobile is not

    View Slide

  7. ● to focus on what truly matters
    ● to make sure that what stays on the screen is
    the most important set of features
    ● to emphasize content (over navigation)
    ● to know your business & customers
    ● about obtaining new abilities
    Mobile is

    View Slide

  8. View Slide

  9. Mobile Usage Patterns

    View Slide

  10. James Pearce
    “The fact that the user has a small screen in
    their hand is one thing - the fact that it is in
    their hand at all is another. The fact that the
    user may be walking, driving, or lounging is yet
    another. In fact, it’s quite likely that they really
    deserve different content and services
    altogether - or, at least, a differently prioritized
    version of the default desktop experience.”

    View Slide

  11. Luke Wroblewski
    “I like to imagine people as one eyeball and
    one thumb.”

    View Slide

  12. ● micro tasking (repetitive now)
    ● I am local (urgent now)
    ● I am bored (bored now)
    Mobile Behaviours

    View Slide

  13. Mobile Interaction Types
    Lookup/Find I need an answer to
    something now - frequently related to
    my current location in the world.
    Explore/Play I have some time to kill
    and just want a few idle time
    distractions.
    Check In/Status Something important
    to me, keeps changing or updating and
    I want to stay on top of it.
    Edit/Create I need to get something
    done now that can’t wait.
    urgent/local
    bored/local
    repeat/micro-tasking
    urgent/micro-tasking

    View Slide

  14. Mobile is about embracing
    constraints & new
    capabilities

    View Slide

  15. ● screen size
    ● low or unstable bandwidth
    ● battery life
    ● performance*
    ● different behaviour/actions?
    Constraints

    View Slide

  16. ● camera
    ● mic
    ● gps
    ● gyroscope
    ● accelerometer
    ● light awareness
    ● different behaviour/actions?
    New Capabilities

    View Slide

  17. show us the way

    View Slide

  18. Native
    vs
    Hybrid
    vs
    Web

    View Slide

  19. Native
    Specific to a given mobile platform, using the
    development tools and language that the
    respective platform supports

    View Slide

  20. ● Multi touch
    ● Fast graphics API
    ● Fluid animation
    ● Built-in components
    ● Ease of use
    ● Full Device Capabilities
    A Native App

    View Slide

  21. Hybrid
    Embed HTML5 apps inside a thin native
    container, combining the best & worst
    elements of native and HTML5

    View Slide

  22. ● runs inside a native container
    ● uses the device’s browser engine [WebView]
    but not the browser
    ● has access to device capabilities that are not
    accessible in Mobile Web applications through
    a web-to-native abstraction layer
    A Hybrid App

    View Slide

  23. Local Hybrid
    Package HTML and JavaScript
    code inside the mobile
    application binary, in a manner
    similar to the structure of a
    native application. In this
    scenario you use REST APIs to
    move data back and forth
    between the device and
    the cloud.

    View Slide

  24. Server Hybrid
    Implement the full web
    application on the server (with
    optional caching for better
    performance), simply using the
    container as a thin shell over the
    UIWebview.

    View Slide

  25. Sencha Touch
    Allows your web apps to look
    and feel like native apps.
    Beautiful user interface
    components and rich data
    management, all powered by
    the latest HTML5 and CSS3
    web standards. Keep them
    web-based or wrap them for
    distribution on mobile app
    stores.

    View Slide

  26. PhoneGap
    Allows your web apps to look
    and feel like native apps.
    Beautiful user interface
    components and rich data
    management, all powered by
    the latest HTML5 and CSS3
    web standards. Keep them
    web-based or wrap them for
    distribution on mobile app
    stores.

    View Slide

  27. Web
    Create sophisticated apps with HTML5 and
    JavaScript alone, while several limitations
    remain like secure offline storage and access to
    native device functionality

    View Slide

  28. Jason Grigsby
    “Web links don’t open apps, they go to web
    pages.”

    View Slide

  29. ● device optimized website (subdomain per
    device)
    ● responsive design
    ● responsive design + server side components
    (RESS)
    Web Strategies

    View Slide

  30. Device Optimized

    View Slide

  31. ● each desktop URL has an equivalent different
    mobile URL
    ● only send what a client needs
    ● optimized source order
    ● optimized URL structure
    ● relies on user agent redirects to device-specific
    code templates
    ● templates per device class
    ● high duplication of code
    the Strategy

    View Slide

  32. Example
    Basecamp

    View Slide

  33. Example
    Twitter

    View Slide

  34. Example
    Facebook

    View Slide

  35. Example
    Flow

    View Slide

  36. Responsive Design

    View Slide

  37. Ethan Marcotte
    “Rather than creating disconnected designs,
    each tailored to a particular device or browser,
    we should instead treat them as facets of the
    same experience. In short, we need to practice
    responsive web design.”

    View Slide

  38. You can benefit from serving one document up to multiple contexts or
    devices
    You want to support the largest growing market of Internet users
    You want the cleanest, fastest, and most maintainable code base
    You understand that experience can and should be subtly different across
    different browsers
    You require the design to look identical across all browsers, including IE 8
    and lower versions
    70 percent or more of the current or expected visitors to the site likely to use
    Internet Explorer 8 or lower versions
    When to Use

    View Slide

  39. ● A flexible, grid-based layout
    ● Flexible images and media
    ● CSS3 Media queries
    Ingredients

    View Slide

  40. Flexible Layout & Media

    View Slide

  41. 1. The browser is your new canvas
    2. DIY with “target / context = result”
    3. Fluid grid system (columnal, semantic,
    skeleton)
    4. Typography - percentages & custom fonts
    5. Images & Videos (max-width & different
    resolutions)
    6. Iframes (Youtube/Vimeo) need JS
    The Flexible Grid

    View Slide

  42. CSS3 Media Queries

    View Slide

  43. Viewport
    980px wide by default

    View Slide

  44. Viewport defacto


    View Slide

  45. Media Queries
    href="mobile.css" />
    @import url("phone.css") screen and (max-width:360px);
    @media screen and (max-width: 320px) {
    body {
    background-color: green;
    }
    }

    View Slide

  46. Queried Features
    width The width of the display area
    height The height of the display area
    device-width The width of the device’s rendering surface
    device-height The height of the device’s rendering surface
    orientation Accepts portrait or landscape values
    aspect-ratio Ratio of the display area’s width over its height. For
    example: on a desktop, you’d be able to query if the
    browser window is at a 16:9 aspect ratio
    device-aspect-ratio Ratio of the device’s rendering surface width over its height.
    For example: on a desktop, you’d be able to query if the
    screen is at a 16:9 aspect ratio

    View Slide

  47. Queried Features
    color The number of bits per color component of the device. For
    example, an 8-bit color device would successfully pass a
    query of (color: 8)
    color-index The number of entries in the color lookup table of the
    output device. For example, @media screen and (min-color-
    index: 256)
    monochrome Similar to color, the monochrome feature lets us test the
    number of bits per pixel in a monochrome device
    resolution Tests the density of the pixels in the device, such as screen
    and (resolution: 72dpi) or screen and (max-resolution:
    300dpi)
    scan For tv based browsing. progressive or scan
    grid Tests whether the device is a grid-based display, like feature
    phones with one fixed-width font

    View Slide

  48. Identifying Breakpoints

    View Slide

  49. Device Based
    320 pixels For small screen devices, like phones, held in portrait mode
    480 pixels For small screen devices, like phones, held in landscape mode
    or ultra phones
    600 pixels Smaller tables like Amazon Kindle
    768 pixels Tech-inch tables like iPad, iPad mini & Nexus
    1024 pixels iPad in landscape mode
    1200 pixels Widescreen displays, primarily laptop and desktop browsers

    View Slide

  50. Stephen Greig
    “Remove yourself from the device based
    breakpoints mindset. And get into the design
    based breakpoints mindset.”

    View Slide

  51. Stephen Greig
    “Pull your browser window out and see when
    the design starts to break – that’s your first
    breakpoint.”

    View Slide

  52. Build for the future

    View Slide

  53. CSS3 is your friend
    ● Custom Typography
    ● Hover state animations
    ● Multiple background images
    ● Rounded corners
    ● Text shadows
    ● Gradients
    ● Animations/Transitions

    View Slide

  54. CSS3 is your friend
    ● Economy on low bandwidth
    ● Progressive Enhancement

    View Slide

  55. the Strategy
    ● 1 hyperlink = great experience across devices
    ● content adapted on the browser
    ● single URL structure
    ● single source order
    ● flexible media
    performance challenge

    View Slide

  56. Example
    Treehouse

    View Slide

  57. Example
    Adioso

    View Slide

  58. Example
    Skroutz

    View Slide

  59. RESS
    Best of Both Worlds. Combine adaptive layouts
    with server side component (not full page)
    optimization

    View Slide

  60. the Strategy
    ● consistent URLs
    ● one set of basic HTML markup
    ● layout covered by flexible grids & media queries
    ● optimized media
    ● optimized source order
    ● optimized application design
    ● optimization happens on the server

    {{>header}}
    [...document content...]
    {{>footer}}

    header.html
    mobile_header.html
    footer.html
    mobile_footer.html

    View Slide

  61. HTML 5

    View Slide

  62. Why HTML 5?
    ● Lighter codebase with better W3C validated
    semantic markup => Smaller footprint on low
    bandwidth devices
    ● APIs to use the exciting new abilities of mobile
    devices

    View Slide

  63. Semantic Markup
    ● HTML5 outline algorithm
    ● Sectioning content
    ● Sectioning roots
    ● Text level semantics
    ● Don’t be lazy, use Basic ARIA (i.e. landmark
    roles)

    View Slide

  64. HTML 5 APIs
    WebStorage Recommendation
    Offline Cache Working Draft
    Geolocation Candidate Recommendation
    Device Orientation and Motion Working Draft
    File & FileReader Working Draft
    getUserMedia/Stream API Working Draft
    Canvas Candidate Recommendation
    Video/Audio Working Draft
    Page Visibility Recommendation
    Web Workers Candidate Recommendation

    View Slide

  65. Native HTML5 Hybrid
    Features
    Graphics Native APIs HTML, Canvas, SVG HTML, Canvas, SVG
    Performance Fast Slow Slow
    Native look and feel Native Emulated Emulated
    Distribution Appstore Web Appstore
    Device Access
    Camera Yes No Yes
    Notifications Yes No Yes
    Contacts, calendar Yes No Yes
    Offline storage Secure file storage Shared SQL Secure file system, shared SQL
    Geolocation Yes Yes Yes
    Gestures
    Swipe Yes Yes Yes
    Pinch, spread Yes No Yes
    Connectivity Online and offline Mostly online Online and offline
    Development skills ObjectiveC, Java HTML5, CSS, Javascript HTML5, CSS, Javascript
    Synopsis

    View Slide

  66. Ben Frain
    “Always be best to start a design thinking about
    the mobile/small screen experience and
    building up from there. Until then, it's likely
    you'll need to take existing desktop designs
    and retro-fit them to work responsively.”

    View Slide

  67. Mobile with Rails

    View Slide

  68. ● create a new mobile app :)
    ● RESS
    ○ add custom MIME type
    ○ add alternative views path
    ○ use Rails 4.1 action pack variants
    options@rails

    View Slide

  69. Custom MIME type
    ● before_filter
    ● request.user_agent =~ /Mobile|webOS/
    ● Mime::Type.register_alias "text/html", :mobile
    ● Separate Views
    views/projects/show.html.erb
    views/projects/show.phone.erb
    views/projects/show.tablet.erb
    *cannot share between types

    View Slide

  70. Alt view path
    ● before_filter
    ● request.user_agent =~ /Mobile|webOS/
    ● Separate directory i.e ‘phone_views’
    ● prepend_view_path Rails.root + 'app' +
    'mobile_views'
    views/projects/show.html.erb
    phone_views/projects/show.html.erb
    tablet_views/projects/show.html.erb

    View Slide

  71. Action Pack Variants
    ● before_filter
    ● request.variant = :tablet if request.user_agent
    =~ /iPad/
    views/projects/show.html.erb
    views/projects/show.html+tablet.erb
    views/projects/show.html+phone.erb

    View Slide

  72. Best Practices in UI

    View Slide

  73. ● Prioritize content over navigation
    ● Optimize for touch
    ● Make user input as easy as possible
    Three basic ideas

    View Slide

  74. Content over Navigation

    View Slide

  75. Content over navigation
    ● No need for multiple navigation bars
    ● Show navigation only when user needs it
    ● No back buttons needed
    ● Be careful with fixed toolbars
    ● Focus at one task at a time

    View Slide

  76. Show navigation when needed

    View Slide

  77. Fixed toolbar on top

    View Slide

  78. Focus on one task

    View Slide

  79. Optimize for Touch

    View Slide

  80. Optimize for touch
    ● Big tappable actions
    ● Destructive actions outside of user comfort
    zone
    ● Most reliable touch gestures: tap, drag, swipe
    ● Hover is obsolete, kill it with fire

    View Slide

  81. Apple HIG: 44x44 pts

    View Slide

  82. Microsoft
    9mm touch targets, 7mm minimum size
    2mm minimum spacing between actions

    View Slide

  83. User tap comfort zone
    (for right-handed users)

    View Slide

  84. Common Gestures
    tap, drag & swipe

    View Slide

  85. Luke Wroblewski
    “On-hover menus on the web have also become
    dumping grounds for actions not deemed
    important enough to be on the screen but still
    important enough to reveal on hover. ”

    View Slide

  86. ● Show info on screen
    if it’s important enough
    ● Show info on tap/swipe
    if it doesn’t introduce an extra step
    ● Show info on a separate screen
    if content is excessive
    ● Kill it with fire
    to simplify, you know?
    How to deal with hovers

    View Slide

  87. Facilitate User Input

    View Slide

  88. Luke Wroblewski
    “We need to stop assuming that users won't do
    something because they're on their mobile
    phones.”

    View Slide

  89. Forms & Limited Space
    ● No room for left- or right- aligned labels
    ● Top aligned labels are the way to go
    ● Even better: labels inside input fields
    ● Utilize the different input types (url, email etc)
    for even easier input

    View Slide

  90. Labels in Inputs
    ● Help text should never be a part of answer
    ● Styling should be distinguishable
    ● Keep in screen when user focus is on field

    View Slide

  91. Alternative Input Types
    ● Alternative keyboards make entering a
    URL/email address much easier
    ● Avoid multiple select menus (tap-intensive)
    ● Provide alternative controls (e.g. spinners)
    ● Use smart defaults

    View Slide

  92. Tools

    View Slide

  93. ● Besides enabling HTML5 structural elements for
    IE, it also provides the ability to conditionally
    load further polyfills, CSS files, and additional
    JavaScript files based on a number of feature
    tests.
    ● Makes it easy for you to write conditional
    JavaScript and CSS to handle each situation,
    whether a browser supports a feature or not
    Modernizr

    View Slide

  94. ● css3-mediaqueries.js
    ● respond.js
    ● matchMedia.js
    ● modernizr
    ● html5-shiv
    ● picturefill
    Polyfills

    View Slide

  95. Compass & Susy
    ● Replace Bootstrap bloat
    ● Only include the parts we need
    ● Lots of useful extensions available
    ● Susy makes creating flexible & fixed grids a
    (relative) breeze

    View Slide

  96. Icon Font (or SVG)
    ● No more sprite sheets
    ● Easier to update
    ● Flexible - one glyph, different states
    ● Browser support

    View Slide

  97. References

    View Slide

  98. Mobile First by Luke Wroblewski
    Responsive Web Design by Ethan Marcotte
    Responsive Web Design with HTML5 & CSS3 by
    Ben Frain
    Books

    View Slide

  99. ● http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#outline
    ● www.alistapart.com/articles/responsive-web-design/
    ● http://wiki.developerforce.com/page/Native,_HTML5,_or_Hybrid:
    _Understanding_Your_Mobile_Application_Development_Options
    ● https://developers.google.com/webmasters/smartphone-sites/details
    ● http://www.lukew.com/ff/entry.asp?1390
    ● http://www.lukew.com/ff/entry.asp?1392
    ● http://www.icenium.com/blog/icenium-team-blog/2012/06/14/what-is-a-hybrid-mobile-app-
    ● http://venturebeat.com/2013/11/20/html5-vs-native-vs-hybrid-mobile-apps-3500-developers-say-all-
    three-please/
    Web

    View Slide

  100. ● http://37signals.com/svn/posts/3257-backstage-basecamp-for-mobile
    ● http://www.theguardian.com/info/developer-blog/2013/oct/14/mobile-first-responsive-ie8
    ● http://alistapart.com/article/smartphone-browser-landscape
    ● http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
    ● http://yiibu.com/about/site/
    ● http://globalmoxie.com/blog/mobile-web-responsive-design.shtml
    ● http://www.lukew.com/ff/entry.asp?1071
    Web

    View Slide