going mobile - an intro to developing web apps for mobile devices

80
Going Mobile the well grounded mobile developer

Post on 18-Oct-2014

2.980 views

Category:

Technology


3 download

DESCRIPTION

Internal training sessions at Workable for mobile development of web applications

TRANSCRIPT

Page 1: Going mobile - an intro to developing web apps for mobile devices

Going Mobile

the well grounded mobile developer

Page 2: Going mobile - an intro to developing web apps for mobile devices

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

Page 3: Going mobile - an intro to developing web apps for mobile devices

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)

Page 4: Going mobile - an intro to developing web apps for mobile devices

2013 shipments by OS2012 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)

Page 5: Going mobile - an intro to developing web apps for mobile devices

Thinking Mobile

Page 6: Going mobile - an intro to developing web apps for mobile devices

● about shrinking things

● about fitting things

● a movable desktop

● just another interface

Mobile is not

Page 7: Going mobile - an intro to developing web apps for mobile devices

● 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

Page 8: Going mobile - an intro to developing web apps for mobile devices
Page 9: Going mobile - an intro to developing web apps for mobile devices

Mobile Usage Patterns

Page 10: Going mobile - an intro to developing web apps for mobile devices

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.”

Page 11: Going mobile - an intro to developing web apps for mobile devices

Luke Wroblewski

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

Page 12: Going mobile - an intro to developing web apps for mobile devices

● micro tasking (repetitive now)

● I am local (urgent now)

● I am bored (bored now)

Mobile Behaviours

Page 13: Going mobile - an intro to developing web apps for mobile devices

Mobile Interaction TypesLookup/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

Page 14: Going mobile - an intro to developing web apps for mobile devices

Mobile is about embracing constraints & new

capabilities

Page 15: Going mobile - an intro to developing web apps for mobile devices

● screen size

● low or unstable bandwidth

● battery life

● performance*

● different behaviour/actions?

Constraints

Page 16: Going mobile - an intro to developing web apps for mobile devices

● camera

● mic

● gps

● gyroscope

● accelerometer

● light awareness

● different behaviour/actions?

New Capabilities

Page 17: Going mobile - an intro to developing web apps for mobile devices

show us the way

Page 18: Going mobile - an intro to developing web apps for mobile devices

Nativevs

Hybridvs

Web

Page 19: Going mobile - an intro to developing web apps for mobile devices

Native

Specific to a given mobile platform, using the development tools and language that the

respective platform supports

Page 20: Going mobile - an intro to developing web apps for mobile devices

● Multi touch

● Fast graphics API

● Fluid animation

● Built-in components

● Ease of use

● Full Device Capabilities

A Native App

Page 21: Going mobile - an intro to developing web apps for mobile devices

Hybrid

Embed HTML5 apps inside a thin native container, combining the best & worst

elements of native and HTML5

Page 22: Going mobile - an intro to developing web apps for mobile devices

● 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

Page 23: Going mobile - an intro to developing web apps for mobile devices

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.

Page 24: Going mobile - an intro to developing web apps for mobile devices

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.

Page 25: Going mobile - an intro to developing web apps for mobile devices

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.

Page 26: Going mobile - an intro to developing web apps for mobile devices

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.

Page 27: Going mobile - an intro to developing web apps for mobile devices

Web

Create sophisticated apps with HTML5 and JavaScript alone, while several limitations

remain like secure offline storage and access to native device functionality

Page 28: Going mobile - an intro to developing web apps for mobile devices

Jason Grigsby

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

Page 29: Going mobile - an intro to developing web apps for mobile devices

● device optimized website (subdomain per device)

● responsive design

● responsive design + server side components (RESS)

Web Strategies

Page 30: Going mobile - an intro to developing web apps for mobile devices

Device Optimized

Page 31: Going mobile - an intro to developing web apps for mobile devices

● 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

Page 32: Going mobile - an intro to developing web apps for mobile devices

Example Basecamp

Page 33: Going mobile - an intro to developing web apps for mobile devices

Example Twitter

Page 34: Going mobile - an intro to developing web apps for mobile devices

Example Facebook

Page 35: Going mobile - an intro to developing web apps for mobile devices

Example Flow

Page 36: Going mobile - an intro to developing web apps for mobile devices

Responsive Design

Page 37: Going mobile - an intro to developing web apps for mobile devices

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.”

Page 38: Going mobile - an intro to developing web apps for mobile devices

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

Page 39: Going mobile - an intro to developing web apps for mobile devices

● A flexible, grid-based layout

● Flexible images and media

● CSS3 Media queries

Ingredients

Page 40: Going mobile - an intro to developing web apps for mobile devices

Flexible Layout & Media

Page 41: Going mobile - an intro to developing web apps for mobile devices

1. The browser is your new canvas2. DIY with “target / context = result”3. Fluid grid system (columnal, semantic,

skeleton)4. Typography - percentages & custom fonts5. Images & Videos (max-width & different

resolutions)6. Iframes (Youtube/Vimeo) need JS

The Flexible Grid

Page 42: Going mobile - an intro to developing web apps for mobile devices

CSS3 Media Queries

Page 43: Going mobile - an intro to developing web apps for mobile devices

Viewport

980px wide by default

Page 44: Going mobile - an intro to developing web apps for mobile devices

Viewport defacto

<meta name="viewport" content="width=320" />

<meta name="viewport" content="initial-scale=1.0,

width=device-width" />

Page 45: Going mobile - an intro to developing web apps for mobile devices

Media Queries

<link rel="stylesheet" media="screen (min-width: 320px)"

href="mobile.css" />

@import url("phone.css") screen and (max-width:360px);

@media screen and (max-width: 320px) {

body {

background-color: green;

}

}

Page 46: Going mobile - an intro to developing web apps for mobile devices

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

Page 47: Going mobile - an intro to developing web apps for mobile devices

Queried Featurescolor 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

Page 48: Going mobile - an intro to developing web apps for mobile devices

Identifying Breakpoints

Page 49: Going mobile - an intro to developing web apps for mobile devices

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

Page 50: Going mobile - an intro to developing web apps for mobile devices

Stephen Greig

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

Page 51: Going mobile - an intro to developing web apps for mobile devices

Stephen Greig

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

Page 52: Going mobile - an intro to developing web apps for mobile devices

Build for the future

Page 53: Going mobile - an intro to developing web apps for mobile devices

CSS3 is your friend

● Custom Typography

● Hover state animations

● Multiple background images

● Rounded corners

● Text shadows

● Gradients

● Animations/Transitions

Page 54: Going mobile - an intro to developing web apps for mobile devices

CSS3 is your friend

● Economy on low bandwidth

● Progressive Enhancement

Page 55: Going mobile - an intro to developing web apps for mobile devices

the Strategy

● 1 hyperlink = great experience across devices

● content adapted on the browser

● single URL structure

● single source order

● flexible media

performance challenge

Page 56: Going mobile - an intro to developing web apps for mobile devices

Example Treehouse

Page 57: Going mobile - an intro to developing web apps for mobile devices

Example Adioso

Page 58: Going mobile - an intro to developing web apps for mobile devices

Example Skroutz

Page 59: Going mobile - an intro to developing web apps for mobile devices

RESS

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

optimization

Page 60: Going mobile - an intro to developing web apps for mobile devices

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

<body>{{>header}}

[...document content...]

{{>footer}}</body>

header.htmlmobile_header.htmlfooter.htmlmobile_footer.html

Page 61: Going mobile - an intro to developing web apps for mobile devices

HTML 5

Page 62: Going mobile - an intro to developing web apps for mobile devices

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

Page 63: Going mobile - an intro to developing web apps for mobile devices

Semantic Markup

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

roles)

Page 64: Going mobile - an intro to developing web apps for mobile devices

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

Page 65: Going mobile - an intro to developing web apps for mobile devices

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

Page 66: Going mobile - an intro to developing web apps for mobile devices

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.”

Page 67: Going mobile - an intro to developing web apps for mobile devices

Mobile with Rails

Page 68: Going mobile - an intro to developing web apps for mobile devices

● create a new mobile app :)● RESS

○ add custom MIME type○ add alternative views path○ use Rails 4.1 action pack variants

options@rails

Page 69: Going mobile - an intro to developing web apps for mobile devices

Custom MIME type

● before_filter● request.user_agent =~ /Mobile|webOS/● Mime::Type.register_alias "text/html", :mobile● Separate Views

views/projects/show.html.erbviews/projects/show.phone.erbviews/projects/show.tablet.erb

*cannot share between types

Page 70: Going mobile - an intro to developing web apps for mobile devices

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.erbphone_views/projects/show.html.erbtablet_views/projects/show.html.erb

Page 71: Going mobile - an intro to developing web apps for mobile devices

Action Pack Variants

● before_filter● request.variant = :tablet if request.user_agent

=~ /iPad/

views/projects/show.html.erbviews/projects/show.html+tablet.erbviews/projects/show.html+phone.erb

Page 72: Going mobile - an intro to developing web apps for mobile devices

Tools

Page 73: Going mobile - an intro to developing web apps for mobile devices

● 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

Page 74: Going mobile - an intro to developing web apps for mobile devices

● css3-mediaqueries.js

● respond.js

● matchMedia.js

● modernizr

● html5-shiv

● picturefill

Polyfills

Page 75: Going mobile - an intro to developing web apps for mobile devices

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

Page 76: Going mobile - an intro to developing web apps for mobile devices

Icon Font (or SVG)

● No more sprite sheets

● Easier to update

● Flexible - one glyph, different states

● Browser support

Page 77: Going mobile - an intro to developing web apps for mobile devices

References

Page 78: Going mobile - an intro to developing web apps for mobile devices

Mobile First by Luke Wroblewski

Responsive Web Design by Ethan Marcotte

Responsive Web Design with HTML5 & CSS3 by Ben Frain

Books

Page 79: Going mobile - an intro to developing web apps for mobile devices

● 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