going mobile - an intro to developing web apps for mobile devices
Post on 18-Oct-2014
2.980 views
DESCRIPTION
Internal training sessions at Workable for mobile development of web applicationsTRANSCRIPT
Going Mobile
the well grounded mobile developer
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
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)
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)
Thinking Mobile
● about shrinking things
● about fitting things
● a movable desktop
● just another interface
Mobile is not
● 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
Mobile Usage Patterns
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.”
Luke Wroblewski
“I like to imagine people as one eyeball and one thumb.”
● micro tasking (repetitive now)
● I am local (urgent now)
● I am bored (bored now)
Mobile Behaviours
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
Mobile is about embracing constraints & new
capabilities
● screen size
● low or unstable bandwidth
● battery life
● performance*
● different behaviour/actions?
Constraints
● camera
● mic
● gps
● gyroscope
● accelerometer
● light awareness
● different behaviour/actions?
New Capabilities
show us the way
Nativevs
Hybridvs
Web
Native
Specific to a given mobile platform, using the development tools and language that the
respective platform supports
● Multi touch
● Fast graphics API
● Fluid animation
● Built-in components
● Ease of use
● Full Device Capabilities
A Native App
Hybrid
Embed HTML5 apps inside a thin native container, combining the best & worst
elements of native and HTML5
● 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
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.
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.
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.
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.
Web
Create sophisticated apps with HTML5 and JavaScript alone, while several limitations
remain like secure offline storage and access to native device functionality
Jason Grigsby
“Web links don’t open apps, they go to web pages.”
● device optimized website (subdomain per device)
● responsive design
● responsive design + server side components (RESS)
Web Strategies
Device Optimized
● 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
Example Basecamp
Example Twitter
Example Facebook
Example Flow
Responsive Design
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.”
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
● A flexible, grid-based layout
● Flexible images and media
● CSS3 Media queries
Ingredients
Flexible Layout & Media
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
CSS3 Media Queries
Viewport
980px wide by default
Viewport defacto
<meta name="viewport" content="width=320" />
<meta name="viewport" content="initial-scale=1.0,
width=device-width" />
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;
}
}
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
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
Identifying Breakpoints
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
Stephen Greig
“Remove yourself from the device based breakpoints mindset. And get into the design based breakpoints mindset.”
Stephen Greig
“Pull your browser window out and see when the design starts to break – that’s your first breakpoint.”
Build for the future
CSS3 is your friend
● Custom Typography
● Hover state animations
● Multiple background images
● Rounded corners
● Text shadows
● Gradients
● Animations/Transitions
CSS3 is your friend
● Economy on low bandwidth
● Progressive Enhancement
the Strategy
● 1 hyperlink = great experience across devices
● content adapted on the browser
● single URL structure
● single source order
● flexible media
performance challenge
Example Treehouse
Example Adioso
Example Skroutz
RESS
Best of Both Worlds. Combine adaptive layouts with server side component (not full page)
optimization
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
HTML 5
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
Semantic Markup
● HTML5 outline algorithm● Sectioning content● Sectioning roots● Text level semantics● Don’t be lazy, use Basic ARIA (i.e. landmark
roles)
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
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
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.”
Mobile with Rails
● create a new mobile app :)● RESS
○ add custom MIME type○ add alternative views path○ use Rails 4.1 action pack variants
options@rails
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
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
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
Tools
● 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
● css3-mediaqueries.js
● respond.js
● matchMedia.js
● modernizr
● html5-shiv
● picturefill
Polyfills
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
Icon Font (or SVG)
● No more sprite sheets
● Easier to update
● Flexible - one glyph, different states
● Browser support
References
Mobile First by Luke Wroblewski
Responsive Web Design by Ethan Marcotte
Responsive Web Design with HTML5 & CSS3 by Ben Frain
Books
● 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
● 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