Going Mobile - Speaker Deck

Slide 1

Slide 1 text

Going Mobile the well grounded mobile developer

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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)

Slide 4

Slide 4 text

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)

Slide 5

Slide 5 text

Thinking Mobile

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

● 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

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Mobile Usage Patterns

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Mobile is about embracing constraints & new capabilities

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

show us the way

Slide 18

Slide 18 text

Native vs Hybrid vs Web

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

● 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

Slide 23

Slide 23 text

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.

Slide 24

Slide 24 text

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.

Slide 25

Slide 25 text

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.

Slide 26

Slide 26 text

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.

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Device Optimized

Slide 31

Slide 31 text

● 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

Slide 32

Slide 32 text

Example Basecamp

Slide 33

Slide 33 text

Example Twitter

Slide 34

Slide 34 text

Example Facebook

Slide 35

Slide 35 text

Example Flow

Slide 36

Slide 36 text

Responsive Design

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Flexible Layout & Media

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

CSS3 Media Queries

Slide 43

Slide 43 text

Viewport 980px wide by default

Slide 44

Slide 44 text

Viewport defacto

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

Identifying Breakpoints

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

Build for the future

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

Example Treehouse

Slide 57

Slide 57 text

Example Adioso

Slide 58

Slide 58 text

Example Skroutz

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

HTML 5

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

Mobile with Rails

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

Best Practices in UI

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

Content over Navigation

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

Show navigation when needed

Slide 77

Slide 77 text

Fixed toolbar on top

Slide 78

Slide 78 text

Focus on one task

Slide 79

Slide 79 text

Optimize for Touch

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

Apple HIG: 44x44 pts

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

User tap comfort zone (for right-handed users)

Slide 84

Slide 84 text

Common Gestures tap, drag & swipe

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

● 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

Slide 87

Slide 87 text

Facilitate User Input

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

Tools

Slide 93

Slide 93 text

● 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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

References

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

● 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

Slide 100

Slide 100 text

● 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