Why You Should Make Mobile Your Career

Slide 1

Slide 1 text

Mobile is the Future: Why you should make it your career. Jason Grigsby @grigs • [email protected] cloudfour.com • mobileportand.com http://www.ﬂickr.com/photos/jphilipson/2100627902/

Slide 2

Slide 2 text

Got email from this guy... http://www.ﬂickr.com/photos/corbett3000/2327165138/in/set-72157604094629546/

Slide 3

Slide 3 text

Mobile is Disruptive Technology http://www.ﬂickr.com/photos/talkephotography/4523849236/ Creative Commons BY-NC-SA 2.0

Slide 4

Slide 4 text

10 20 30 40 50 60 Q1 Q3 Q5 Q7 Q9 Q11 Q13 Q15 Q17 Q19 Quarters Since Launch Subscribers (MM) iPhone + iTouch NTT docomo i-mode AOL Netscape iPhone + iTouch vs. NTT docomo i-mode vs. AOL vs. Netscape Users First 20 Quarters Since Launch Note: *AOL subscribers data not available before CQ3:94; Netscape users limited to US only. Morgan Stanley Research estimates ~39MM netbooks have shipped in first eight quarters since launch (10/07). Source: Company Reports , Morgan Stanley Research. Mobile Internet Outpaces Desktop Internet Adoption iPhone + iTouch Users = 8x AOL Users 9 Quarters After Launch Desktop Internet AOL* v 2.0 Launched 9/94 Mobile Internet NTT docomo i-mode Launched 6/99 Mobile Internet iPhone + iTouch Launched 6/07 ~57MM ~25MM ~7MM Desktop Internet Netscape* Launched 12/94 ~11MM 26 Source: http://www.morganstanley.com/institutional/techresearch/mobile_internet_report122009.html

Slide 5

Slide 5 text

http://www.opera.com/smw/ 20 000 000 40 000 000 60 000 000 80 000 000 100 000 000 2006 2007 2008 2009 2010 Total page views (Opera Mini) Data transfer (Opera Mini) Last month we had 52 billion page views. That is Reddit, times 52. Last month Opera Mini transferred 804 million megabytes of data. That is approx. 10 times the amount of data found in the online collection of the U.S. Library of Congress. January 2011: 90.368.678 + 15 million using Opera Mobile Unique Opera Mini users Graphic: Tom Byermoen // Opera Software Opera Mini is available for more than 3000 different mobile phone models

Slide 6

Slide 6 text

5.2 Billion Mobile phone for nearly everyone on the planet. Flickr photo by Pingnews: http://www.ﬂickr.com/photos/pingnews/370061022/

Slide 7

Slide 7 text

Technology Cycles - Wealth Creation / Destruction New Companies Often Win Big in New Cycles While Incumbents Often Falter Mainframe Computing 1960s Personal Computing 1980s Desktop Internet Computing 1990s Mobile Internet Computing 2000s Mini Computing 1970s New Winners New Winners New Winners New Winners Note: Winners from 1950s to 1980s based on Fortune 500 rankings (revenue-based), desktop Internet winners based on wealth created from 1995 to respective peak market capitalizations. Source: FactSet, Fortune, Morgan Stanley Research. Microsoft Cisco Intel Apple Oracle EMC Dell Compaq Google AOL eBay Yahoo! Yahoo! Japan Amazon.com Tencent Alibaba Baidu Rakuten Digital Equipment Data General HP Prime Computervision Wang Labs IBM NCR Control Data Sperry Honeywell Burroughs 16 Source: http://www.morganstanley.com/institutional/techresearch/mobile_internet_report122009.html

Slide 8

Slide 8 text

Mobile’s Eight Unique Abilities http://www.ﬂickr.com/photos/pedestriantype/4789244416/

Slide 9

Slide 9 text

http://www.ﬂickr.com/photos/fchouse/2829381653/ 1. PERSONAL 63% do not share phone

Slide 10

Slide 10 text

2. PERMANENTLY CARRIED ~50% of US admit to sleeping with phone http://www.ﬂickr.com/photos/kk/3615287378/

Slide 11

Slide 11 text

3. ALWAYS ON http://www.ﬂickr.com/photos/gilderic/3517477267/

Slide 12

Slide 12 text

4. BUILT-IN PAYMENT CHANNEL

Slide 13

Slide 13 text

5. CREATIVE IMPULSE http://www.ﬂickr.com/photos/d_a_v_i_d_m_/246298437/

Slide 14

Slide 14 text

http://www.ﬂickr.com/photos/memotions/259656126/ 6. ACCURATE MEASUREMENT

Slide 15

Slide 15 text

http://www.ﬂickr.com/photos/mythoto/1234638761/ 7. SOCIAL CONTEXT

Slide 16

Slide 16 text

8. AUGMENTED REALITY http://issuu.com/mkparsley/docs/ikea

Slide 17

Slide 17 text

Mobile is the most borg-like technology we’ve ever seen

Slide 18

Slide 18 text

Inspiring http://www.ﬂickr.com/photos/asphericlens/5661878892/

Slide 19

Slide 19 text

http://www.ﬂickr.com/photos/76074333@N00/317952268/ | http://futuristmovie.com Creative Commons BY-NC-SA 2.0

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

ME NEED IPHONE APP. http://www.ﬂickr.com/photos/corbett3000/2327165138/in/set-72157604094629546/

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

Find a single report that doesn’t show exponential growth for mobile web. CHALLENGE:

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

3% 2% 12% 18% 22% 43% Android Symbian iPhone Blackberry Bada Windows/Others Q2 2011 Smartphone Market Share (Gartner) Phones currently shipping WebKit in blue (97%). WebKit & HTML5: Dominant Mobile Platform By contrast, 10 smartphone operating systems.

Slide 34

Slide 34 text

Email Gallery Free Email Templates Email Marketing Companies Submit Advertise Here Advertise Here Column Type of Email Type of Business Color POPULARITY RESET Hyundai USA Newsletter 3 Alertful Newsletter 2 Divine Chocolate Newsletter 2 Does your company send email to customers? http://www.email-gallery.com

Slide 35

Slide 35 text

Does your company participate in social media? http://www.ﬂickr.com/photos/intersectionconsulting/5177773774/

Slide 36

Slide 36 text

Links don’t open apps http://www.ﬂickr.com/photos/mattimattila/4001221570/

Slide 37

Slide 37 text

http://www.ﬂickr.com/photos/silipo/378476114/ 21% of Google’s largest advertisers have mobile web sites. Only Why?

Slide 38

Slide 38 text

Mobile web is hard to get right. http://www.ﬂickr.com/photos/vegaseddie/2668299674/

Slide 39

Slide 39 text

Upcoming Zombie Apocalypse of Devices

Slide 40

Slide 40 text

More devices every day

Slide 41

Slide 41 text

Short Run Problem is Mobile Phones

Slide 42

Slide 42 text

Content & Services Car sketch: http://www.ﬂickr.com/photos/cloppy/5081768461/ Long Run Problem

Slide 43

Slide 43 text

How do you deliver the right HTML, CSS and JavaScript to browsers?

Slide 44

Slide 44 text

Technique #1 Responsive Web Design

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

Three Main Pieces to Responsive Web Design Fluid Grids Flexible Images Media Queries

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

Demo

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

Original Resized K Saved % Saved Holmes 34.7K 8.1K 26.6K 76.6% Watson 39.0K 8.4K 30.6K 78.4% Mycroft 30.5K 6.7K 23.8K 78.0% Moriarty 43.4K 8.2K 35.2K 81.1% Adler 26.0K 6.6K 19.4K 74.6% Winter 34.7K 7.8K 26.9K 77.5% Total 208.3K 45.8K 162.5K 78.0% Media Queries Hide Problems

Slide 52

Slide 52 text

Technique #2 Mobile First Responsive Web Design

Slide 53

Slide 53 text

Mobile First Responsive Web Design Promises to Solve These Problems

Slide 54

Slide 54 text

http://www.ﬂickr.com/photos/wscullin/3770015203 ﬁrst load...

Slide 55

Slide 55 text

http://www.ﬂickr.com/photos/wscullin/3770015203 initial request 1 Hmm, Huston - we have a problem... ...no idea what we can deliver to this client... HTML JavaScript stylesheets images Flash video fonts

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

= Letting go of “pixel-perfect” layouts and instead designing our content to adapt to different (browser or device) environments Responsive Design is also a state of mind Fluid Grid Layouts CSS Media Queries Fluid Images/Media A State of Mind + + + Responsive Web Design!

Slide 58

Slide 58 text

Technique #3 Device Detection

Slide 59

Slide 59 text

How Device Detection Works

Slide 60

Slide 60 text

Device Classes

Slide 61

Slide 61 text

URLs Should Go to Content, Not Mobile Home

Slide 62

Slide 62 text

Should the iPad Get Your Mobile Site?

Slide 63

Slide 63 text

http://www.ﬂickr.com/photos/brunauto/5062644167/ Our vision of mobile context is often wrong.

Slide 64

Slide 64 text

80% during misc downtime 76% while waiting in lines 62% while watching TV 69% for point of sale research http://www.ﬂickr.com/photos/missmeng/5327470961

Slide 65

Slide 65 text

TMI: 39% use phone on the toilet.

Slide 66

Slide 66 text

http://www.ﬂickr.com/photos/77799978@N00/5351372848/ ese problems lead many to believe separate sites are evil.

Slide 67

Slide 67 text

“Browser sniffing is a stupid, error-prone and reviled practice, ‘backed’ by a decade of failures.” http://www.ﬂickr.com/photos/doug88888/4550561194/

Slide 68

Slide 68 text

http://www.ﬂickr.com/photos/arguez/2247369944/ But this isn’t religion.

Slide 69

Slide 69 text

ese are simply tools. http://www.ﬂickr.com/photos/bre/552152780/

Slide 70

Slide 70 text

25 of 30 sites in Alexa Top 30 use device detection Other ve don’t oﬀer mobile sites!

Slide 71

Slide 71 text

Advantages and Disadvantages of Each Technique

Slide 72

Slide 72 text

Responsive Web Design • Relatively easy to implement without changing infrastructure. • If your pages are already using css layouts, you may only need to modify css and add mediaqueries. • Web pages look like they designed for mobile. Beneﬁts • Mobile pages typically end up bloated. Desktop size images are downloaded and mobile browser is forced to resize. • Does nothing to address extra javascript not needed for mobile. • If your desktop pages have elements that mobile phones do not understand, it will still get downloaded resulting in odd experiences. Disadvantages

Slide 73

Slide 73 text

Mobile First Responsive Web Design • Supports a wider range of devices. • Helps you focus on what really matters on pages. • Correct sized assets and optimized content for each device. • Same markup and content. No need for separate sites. • Many believe this is the future of web development and design. Beneﬁts • IMG tag issues are not solved. Race conditions on browser loading exist. • Can you really have the same HTML for feature phone and GoogleTV? • Difﬁcult to progressively enhance from XHTML-MP to HTML5. So you’re probably cutting off phones without realizing it. • Experimental and new. Few sites are doing this. Disadvantages

Slide 74

Slide 74 text

Device Detection • Mobile web developers have been using it for years which means it is well-known. • Widely used by large organizations. • Ability to deﬁne device classes and deliver different content and functionality for each. Beneﬁts • Requires signing up for an arms race of keeping up with the user agent strings of devices. With all of these new devices coming out, it will be challenging to keep up. • The open source device databases can’t be used for commercial sites which means you have to pay someone for the database or sign up for a service. Recurring cost. • The databases can have incorrect information in them or the device may mask its real identity. Disadvantages

Slide 75

Slide 75 text

Hybrid approaches • There is an emerging school of thought that uses device detection and combines it with data from client-side feature detection. • This resolves the first load problem because the device detection gives the information you need to deliver the first page, but it also verifies the information by running javascript and setting a cookie with answers to key questions. This allows the device data to improve. • It also also the developers to add tacit knowledge to the mix to override device data when the developers know better. A good example of tacit knowledge is the fact that blackberry 5 supports a lot of javascript, but is so slow that it doesn’t make sense to use it even though it passes client js tests. • Even within device classes, responsive web design makes sense.

Slide 76

Slide 76 text

Backend Infrastructure

Slide 77

Slide 77 text

http://www.ﬂickr.com/photos/silipo/378476114/ 21% of Google’s largest advertisers have mobile web sites. Only Why?

Slide 78

Slide 78 text

http://www.ﬂickr.com/photos/nickwheeleroz/2391631937/in/photostream/ BIGGEST CHALLENGE FOR MOBILE WEB: Many Sites are Chaos Behind the Scenes

Slide 79

Slide 79 text

http://www.ﬂickr.com/photos/ionan/103646126/ Multiple Systems Taped Together

Slide 80

Slide 80 text

Native Developers Start from a Clean Slate http://www.ﬂickr.com/photos/salendron/5569020488/

Slide 81

Slide 81 text

Content & Services Car sketch: http://www.ﬂickr.com/photos/cloppy/5081768461/ HTML HTML HTML HTML HTML HTML HTML HTML NATIVE NATIVE NATIVE

Slide 82

Slide 82 text

Features of New Platforms Integrated image resizing Video conversion and resizing Separation of content from markup so content can be used in native apps Prioritization of content based on context Full-featured APIs Synchronization New Ways to Enable Content Editors http://www.ﬂickr.com/photos/expressmonorail/3046970004/sizes/l/

Slide 83

Slide 83 text

No content

Slide 84

Slide 84 text

http://blog.programmableweb.com/2009/10/13/cope-create-once-publish-everywhere/

Slide 85

Slide 85 text

http://blog.programmableweb.com/2009/11/11/content-portability-building-an-api-is-not-enough/

Slide 86

Slide 86 text

No content

Slide 87

Slide 87 text

No content

Slide 88

Slide 88 text

Desktop Web Server Internet example.com/products/[productID] Desktop or Mobile Desktop Web Page Desktop Redirect Mobile m.example.com/ products/[productID] Cloud Four Mobile Web Server Device Class Template A Device Class Template B Device Class Template C Device Class Template D Internet Web Services APIs One Possible Bridging Solution Mobile Web Server w/ RWD Platform Internet APIs Necessary to Support App Development

Slide 89

Slide 89 text

No matter how you approach it, we have a lot of infrastructure to build http://www.ﬂickr.com/photos/wwworks/2942950081/

Slide 90

Slide 90 text

thank you. http://www.ﬂickr.com/photos/24311566@N07/4697623122/

Slide 91

Slide 91 text

http://www.ﬂickr.com/ photos/troyholden/ 5544097948/

Slide 92

Slide 92 text

No content

Slide 93

Slide 93 text

No content

Slide 94

Slide 94 text

We’re building the future right now http://www.ﬂickr.com/photos/insightimaging/3545443883/

Slide 95

Slide 95 text

Not easy, but this is where the opportunities are. http://www.ﬂickr.com/photos/donnagrayson/195244498/in/photostream/

Slide 96

Slide 96 text

http://www.ﬂickr.com/photos/eole/3215868087/

Slide 97

Slide 97 text

Let’s get to work.

Slide 98

Slide 98 text

No content

Slide 99

Slide 99 text

One of our goals: Establish the Portland area as a mobile mecca.

Slide 100

Slide 100 text

Mobile is one of the few industries growing in this economy.

Slide 101

Slide 101 text

Most companies are ﬂoundering when it comes to mobile strategy.

Slide 102

Slide 102 text

No content

Slide 103

Slide 103 text

No content

Slide 104

Slide 104 text

"There just aren't that many people who have experience with mobile software, and there's a desire for people who know how to make that work." — Steve Fredrick, general partner at private equity ﬁrm Grotech Ventures in Vienna, Va., and founder of job site StartUpHire.

Slide 105

Slide 105 text

Survey says over 20% of businesses hired substantially more mobile this year. Of those w/ mobile 57% plan to boost such hires in next twelve months. Most common salary range: $75,001 to $100,000

Slide 106

Slide 106 text

There aren’t enough mobile developers, and that’s just the tip of the iceberg.

Slide 107

Slide 107 text

Most web designers don’t know how to build true mobile web sites.

Slide 108

Slide 108 text

It’s uncharted territory. It’s new. It’s fun. Easy to make a name for yourself.

Slide 109

Slide 109 text

It is one of the best opportunities for you.

Slide 110

Slide 110 text

Mobile Future Slides: slideshare.net/grigs | @grigs | cloudfour.com | mobileportland.com M obile Portland 4th M onday, 6pm Learn mobile. Build stuff. Set yourself apart.