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

Why You Should Make Mobile Your Career

Jason Grigsby
November 09, 2011

Why You Should Make Mobile Your Career

Presented to PSU Web Development class.

Jason Grigsby

November 09, 2011
Tweet

More Decks by Jason Grigsby

Other Decks in Technology

Transcript

  1. Mobile is the Future: Why you should make it your

    career. Jason Grigsby @grigs • [email protected] cloudfour.com • mobileportand.com http://www.flickr.com/photos/jphilipson/2100627902/
  2. 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
  3. 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
  4. 5.2 Billion Mobile phone for nearly everyone on the planet.

    Flickr photo by Pingnews: http://www.flickr.com/photos/pingnews/370061022/
  5. 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
  6. 2. PERMANENTLY CARRIED ~50% of US admit to sleeping with

    phone http://www.flickr.com/photos/kk/3615287378/
  7. 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.
  8. 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
  9. 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
  10. http://www.flickr.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
  11. = 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!
  12. 80% during misc downtime 76% while waiting in lines 62%

    while watching TV 69% for point of sale research http://www.flickr.com/photos/missmeng/5327470961
  13. “Browser sniffing is a stupid, error-prone and reviled practice, ‘backed’

    by a decade of failures.” http://www.flickr.com/photos/doug88888/4550561194/
  14. 25 of 30 sites in Alexa Top 30 use device

    detection Other ve don’t offer mobile sites!
  15. 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. Benefits • 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
  16. 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. Benefits • IMG tag issues are not solved. Race conditions on browser loading exist. • Can you really have the same HTML for feature phone and GoogleTV? • Difficult 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
  17. Device Detection • Mobile web developers have been using it

    for years which means it is well-known. • Widely used by large organizations. • Ability to define device classes and deliver different content and functionality for each. Benefits • 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
  18. 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.
  19. 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.flickr.com/photos/expressmonorail/3046970004/sizes/l/
  20. 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
  21. No matter how you approach it, we have a lot

    of infrastructure to build http://www.flickr.com/photos/wwworks/2942950081/
  22. "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 firm Grotech Ventures in Vienna, Va., and founder of job site StartUpHire.
  23. 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
  24. 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.