Mobile 2.0: Design & Develop for the iPhone and Beyond
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • it's helpful.
    Are you sure you want to
    Your message goes here
  • Mobile market is looking for a fresh energy with launch of iOS6.
    Let us peak through a quick review of iOS6 features:
    http://www.slideshare.net/SojoSolutions/features-ofios6
    Are you sure you want to
    Your message goes here
  • One of the best and most complete presentation about mobile technology I ever seen....
    Are you sure you want to
    Your message goes here
  • Great presentation very enlightening. If I made this comment three years ago I would had said back then 'mobile will be an indispensable part of human lives' and three years after my comment is 'indeed mobile is an indispensable tool of humans'. The future has arrived.

    http://www.zerostylus.com/
    Are you sure you want to
    Your message goes here
  • Awesome presentation, Brian.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
108,052
On Slideshare
105,524
From Embeds
2,528
Number of Embeds
101

Actions

Shares
Downloads
10,991
Comments
30
Likes
489

Embeds 2,528

http://www.presentacionesnegocio.com 216
http://www.mobileinc.co.uk 208
http://moblearn21.blogspot.com.br 203
http://moblearn21.blogspot.com 200
http://en.oreilly.com 196
http://ilearn.swin.edu.au 194
http://3g4g.blogspot.com 122
http://www.web2expo.com 119
http://www.slideshare.net 116
http://www.scoop.it 102
http://masterclass.md 80
http://paper.li 68
http://www.zchao.com 59
http://www.jwphill3.com 54
http://www.spikechan.com 48
http://moblearn21.blogspot.pt 47
http://localhost 45
http://jwphill3.com 43
http://blog.websourcing.fr 35
http://faz.my 31
http://www.felgner.ch 27
http://www.stopp.se 25
http://blackboard.swinburne.edu.au 23
http://flinglog.com 20
http://mywebcollection.blogspot.com 19
http://wiki.projectgroup.it 12
http://www.comopresentar.es 10
http://blog.slideshare.net 10
http://wordpress.alittleb.it 8
http://caseydeanna.wordpress.com 8
http://agencyrepublic 7
http://us-w1.rockmelt.com 7
http://www.innocept.dk 6
http://moblearn21.blogspot.tw 6
http://abjkk.posterous.com 6
http://kuurort.com 6
http://swinilearn.blackboard.com 6
http://judewa.com 5
http://178.175.142.34 5
http://mobiledesign.comyr.com 5
http://blog.3g4g.co.uk 5
http://feeds.feedburner.com 4
http://pmomale-mn1 4
http://eyeonlearning.blogspot.com 4
https://crazyparrot.speakerfile.com 4
http://berlinblase.de 4
http://e1portal.ef.com 4
http://tumblingupwind.com 4
http://schepnetx.posterous.com 3
http://moblearn21.blogspot.co.uk 3

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Mobile 2.0 Design & Develop for the iPhone and Beyond by Brian Fling Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 2. WILLKOMMEN! BIENVENUE! WELCOME! BENVENUTO! BIENVENIDO! Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 3. WHO AM I? Mobile Designer since 2000. Worked for the first MVNO in North America. Has worked directly with all Tier 1 carriers in North America and most of Tier 2. Helped brands like Rolling Stone, Napster & ESPN with mobile web strategy & design. Runs mobiledesign.org, one of the largest communities of mobile designers. Co-creator of Leaflets for the iPhone. Author of the dotMobi Mobile Web Developers Guide. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 4. WHO ARE YOU? How many of you are developers? How many of you are designers? How many of you are entrepreneurs? How many of you have created a mobile site for any mobile platform? How many of you own an iPhone (2.5G or 3G)? How many have created iPhone-specific sites? How many of you shouldn’t be here because you’re actually chefs? Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 5. Part One WHY MOBILE IS UTTERLY HORRIBLE AND WHY YOU SHOULD RUN AWAY Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 6. A Brief HISTORY of MO B I L E Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 7. IN THE BEGINNING... Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 8. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 9. Perceptions haven’t much changed since. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 10. It is up to us to change how people use mobile technology Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 11. Brick Era 1970 1980 1990 Mobile Evolution 2000 2010 Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 12. Jargon Alert G as in 2G, 2.5G and 3G. The generations of mobile networks. O cially there are only 1G, 2G & 3G, but several midpoints have been defined as 2.5G, 2.75G, etc. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 13. Brick Era Portable! Fits in a Briefcase Sparse cellular network Voice calls only Costs more per call than a pay phone Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 14. Brick Era Candy Bar Era 1970 1980 1990 Mobile Evolution 2000 2010 Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 15. The Candybar Era GSM, CDMA, TDMA, iDEN More cellular towers Less power needed, much smaller Better voice quality Added SMS Still just a phone Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 16. Brick Era Candy Bar Era Feature Phone Era 1970 1980 1990 Mobile Evolution 2000 2010 Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 17. The Feature Phone Era GPRS, HSCSD, WiDEN Data-capable devices Addition of Mobile Web Camera phones & MMS Mass adoption as airtime rates lower Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 18. Brick Era Candy Bar Era Smart Phone Era Feature Phone Era 1970 1980 1990 Mobile Evolution 2000 2010 Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 19. The Smart Phone Era GPRS, HSDPA, WI-FI The Mobile Platform becomes key Email a primary driver in sales A push for Push Notifications Very “gadgety” Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 20. Brick Era Touch Era Candy Bar Era Smart Phone Era Feature Phone Era 1970 1980 1990 Mobile Evolution 2000 2010 Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 21. “ Change occurs because there is a gap between what is and what should be. ” — Craig McCaw Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 22. the mythical “Future-Phone” Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 23. come. The iPhone is the shape of things to Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 24. The Touch Era GPRS, HSPDA, EVDO, Wi-Fi A focus on haptic interfaces Accelerometers GPS/Location-based Subscriber-centered design Rich interfaces A media platform “It’s about the web” Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 25. Gartner’s PREDICTIONS for 2009 Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 26. Gartner’s Predictions 1. Established Vendors Consolidate and New Players Join the Fray 2. Device Vendors Build Out Ecosystems 3. Device Makers Remove Complexity for Users 4. Mobile Devices Become Lifestyle Statements 5. High-End Device Platforms Become “Field- Refreshable” Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 27. These are not predictions. It’s happening. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 28. The MOBILE ECOSYSTEM Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 29. Jargon Alert Mobile 1.0 The first two generations of browsers and hardware used to view the web on mobile devices. Design and development for these devices was highly di cult due to the constraints of the technology. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 30. IT IS ROUGH... We have to deal with a lot of junk! ARPU, depending on application goals Operators (Vodafone, T-Mobile, AT&T, et al) Di erent languages (Java, C++, BREW) Poor support for web standards (CSS, XHTML, JS) The “Deck” Handsets (about a bajillion of them) Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 31. Layers of Mobile Services Applications The mobile ecosystem Application Frameworks has many layers. Operating Systems Each with their own Platforms complexities and obstacles. Handsets Networks Operators Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 32. Layers of Mobile Services Applications A mobile network operator (MNO) also known as... Application Frameworks • a wireless service provider Operating Systems • a wireless carrier Platforms • a mobile phone operator Handsets • a cellular company ...is a telephone company that Networks provides services for mobile Operators Operators phone subscribers. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 33. Jargon Alert Mobile Service Provider A broad term to describe the mobile network provider that provides subscribers wireless access to voice and data services. Also known as a mobile network operator, or MNO in the telecommunications industry, though usually referred to as carriers in North America and operators elsewhere in the world. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 34. Rank Company Primary Markets Network Subscribers* 1 China Mobile China (including Hong Kong) GSM, GPRS, EDGE 337.9 mil GSM, GPRS, EDGE, 2 Vodafone Europe, Australia, New Zealand, Africa UMTS, HSDPA 206 mil GSM, GPRS, EDGE, 3 Telefonica Europe, Latin America UMTS, HSDPA 154.8 mil Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. 4 China Unicom China GSM, GPRS, CDMA 153.1 mil GSM, GPRS, EDGE, 5 America Movil Mexico, Latin America UMTS, CDMA 137.2 mil GSM, GPRS, EDGE, 6 T-Mobile Europe, USA UMTS, HSDPA 111.8 mil GSM, GPRS, EDGE, 7 MTS Russia UMTS 74.67 mil GSM, GPRS, EDGE, 8 Orange Europe, Netherlands, Africa UMTS, HSDPA 73.2 mil GSM, GPRS, EDGE, 9 Telenor Netherlands, Eastern Europe UMTS 68 mil GSM, GPRS, EDGE, 10 AT&T USA UMTS, HSDPA 63.7 mil * Proportionate subscribers in millions as of June 2007. Sources: Companies Annual Reports Top Network Operators
  • 35. Jargon Alert ARPU Average Revenue Per User A term used to describe the financial value of a program, application or service. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 36. Layers of Mobile Services Applications Mobile networks communicate through electromagnetic radio Application Frameworks waves with a cell site base station, the antennas of which Operating Systems are usually mounted on a Platforms tower, pole or building. They are often referred to by Handsets their generation and/or Networks Networks standard. Operators Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 37. Jargon Alert G as in 2G, 2.5G and 3G. The generations of mobile networks. O cially there are only 1G, 2G & 3G, but several midpoints have been defined as 2.5G, 2.75G, etc. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 38. 2G Second generation of mobile phone standards and technology Speeds GSM Global System for Mobile communications 12.2 kbits/s GPRS General Packet Radio Service max 60 kbits/s EDGE Enhanced Data rates for GSM Evolution 59.2 kbits/s HSCSD High-Speed Circuit-Switched Data 57.6 kbits/s Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. 3G Third generation of mobile phone standards and technology Speeds W-CDMA Wideband Code Division Multiple Access 14.4 Mbits/s UMTS Universal Mobile Telecommunications System 3.6 Mbits/s UMTS-TDD Time Division Duplexing 16 Mbits/s TD-CDMA Time Divided Code Division Multiple Access 16 Mbits/s HSPA High-Speed Packet Access 14.4 Mbits/s HSDPA High-Speed Downlink Packet Access 14.4 Mbits/s HSUPA High-Speed Uplink Packet Access 5.76 Mbit/s GSM Mobile Networks
  • 39. Other Network Technologies CDMA & EVDO iDEN & WiDEN WiMAX Worldwide Interoperability for Microwave Access, is a telecommunications technology aimed at providing wireless data over long distances in a variety of ways, from point-to-point links to full mobile cellular type access. WiMAX allows a user, for example, to browse the Internet on a laptop computer without physically connecting the laptop to a router or switch port via an ethernet port. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 40. Layers of Mobile Services Applications Application Frameworks A mobile handset or “mobile Operating Systems phone” is a long-range, portable electronic device Platforms used for mobile Handsets Handsets communication. Networks Operators Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 41. Handsets! Copyright 2008 Garrett Murray <info@garrettmurray.net> Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 42. Other Applications Smart Phones Phone, Web, SMS Feature Phones Comparing Mobile Devices Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 43. Layers of Mobile Services Applications Application Frameworks Operating Systems The core mobile development platform in which all software Platforms Platforms is written. Handsets Networks Operators Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 44. Licensed Java ME (or J2ME) is a specification of a subset of the Java platform aimed at Java ME providing a certified collection of Java APIs for the development of software for small, resource-constrained devices such as cell phones, PDAs and set-top boxes. BREW is an application development platform created by Qualcomm for mobile BREW phones. It is air-interface independent, i.e. it can support GSM/GPRS, UMTS, and CDMA Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. Windows Mobile is a compact operating system combined with a suite of basic Windows Mobile applications for mobile devices based on the Microsoft Win32 API Proprietary Palm C/C++ based BlackBerry Java-based Danger’s Hiptop Java-based Apple’s iPhone Objective-C Open Source Android Java-based Mobile Platforms
  • 45. Layers of Mobile Services Applications Application Frameworks Operating systems are common in Smart Phones, but Operating Systems Operating Systems rare in Feature phones. Platforms Handsets Networks Operators Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 46. Symbian OS is a open-source operating system, designed for mobile Symbian devices, with associated libraries, user interface frameworks and reference implementations of common tools. Windows Windows Mobile is a compact operating system combined with a suite of Mobile 6 basic applications for mobile devices based on the Microsoft Win32 API Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. Used by Palm’s TREO line of mobile phones, though gradually being Palm OS replaced by Windows Mobile. Increasingly used in mobile phones. The new RAZR uses Linux as its Linux Operating System. OS X Used by Apple’s iPhone and iPod Touch. Android Used by Android Phones and can be customized by Operators. Mobile Operating Systems
  • 47. Layers of Mobile Services Applications A software framework that is Application Frameworks Application Frameworks used to implement the standard structure of an Operating Systems application for a specific operating system. Platforms Handsets Networks Operators Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 48. Applications written in the Java ME framework can often be deployed Java across the majority of Java-based devices. Applications written in the BREW framework can often be deployed BREW across the majority of BREW-based devices. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. Applications written using the Flash Lite 2.0 and Action Script 2.0 Flash Lite frameworks can run using the Flash Lite Player. Windows Applications written using the Win32 API can be deployed across the Mobile 6 majority of Windows Mobile-based devices. Applications written using the iPhone version of the Cocoa can be Cocoa Touch deployed on iPhone’s and iPod Touches. Web Applications can be deployed across the majority of devices that Web support the WAP 2.0 specifications and run using a mobile web browser. Application Frameworks
  • 49. Layers of Mobile Services Mobile applications often are Applications Applications designed to serve a particular function or purpose. Application Frameworks Example applications may Operating Systems include Games, Web Browser, Camera or Media Player. Platforms Handsets Networks Operators Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 50. THE RAZR The epitomy of Mobile 1.0, and probably the most prolific device. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 51. THE RAZR The epitomy of Mobile 1.0, and probably the most prolific device. Also, the perfect example of handset madness™ to the extreme! Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 52. THE RAZR 3 .2 ave 6.2. V3: Openw The epitomy of Mobile 1.0, and probably the most prolific device. Also, the perfect example of handset madness™ to the extreme! Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 53. THE RAZR 3 .2 ave 6.2. V3: Openw The epitomy of V3c/i/r: O penwave 6 .2.3.4.c.1.10 Mobile 1.0, and 9 probably the most prolific device. Also, the perfect example of handset madness™ to the extreme! Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 54. THE RAZR 3 .2 ave 6.2. V3: Openw The epitomy of penwave 6 V3c/i/r: O .2.3.4.c.1.10 Mobile 1.0, and 9 probably the most V3m/V9m: Teleca-Obigo 4.0 prolific device. Also, the perfect example of handset madness™ to the extreme! Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 55. THE RAZR 3 .2 ave 6.2. V3: Openw The epitomy of penwave 6 V3c/i/r: O .2.3.4.c.1.10 Mobile 1.0, and 9 probably the most V3m/V9m: Teleca-Obigo 4.0 prolific edevice. 6 .2.3.1 . c.1.1 12 v enwa Also, V3x: the perfect Op example of handset madness™ to the extreme! Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 56. THE RAZR V3m: Open wave 6.2.3.1 .c.1.115 3 .2 ave 6.2. V3: Openw The epitomy of penwave 6 V3c/i/r: O .2.3.4.c.1.10 Mobile 1.0, and 9 probably the most V3m/V9m: Teleca-Obigo 4.0 prolific edevice. 6 .2.3.1 . c.1.1 12 v enwa Also, V3x: the perfect Op example of handset madness™ to the extreme! Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 57. THE RAZR V3m: Open wave 6.2.3.1 .c.1.115 3 .2 ave 6.2. V3: Openw The epitomy of penwave 6 V3c/i/r: O .2.3.4.c.1.10 Mobile 1.0, and 9 probably the most V3m/V9m: Teleca-Obigo 4.0 prolific edevice. 6 .2.3.1 . c.1.1 12 v enwa the perfect Also, V3x: Op example of handset R) 6.80.53madness™ to the (9 pera 8.0 V3xxi: O extreme! Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 58. THE RAZR V3m: Open wave 6.2.3.1 .c.1.115 3 .2 ave 6.2. V3: Openw The epitomy of penwave 6 V3c/i/r: O .2.3.4.c.1.10 Mobile 1.0, and 9 probably the most V3m/V9m: Teleca-Obigo 4.0 prolific edevice. 6 .2.3.1 . c.1.1 12 v enwa Also, pera 8perfect3 V3 V: OO the x 8: p .5 (08.B7.2 R) example of handset R) 6.80.53madness™ to the (9 pera 8.0 V3xxi: O extreme! Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 59. THE RAZR V3m: Open wave 6.2.3.1 .c.1.115 3 .2 ave 6.2. V3: Openw The epitomy of V3c/i/r: O Mobile 1.0, andF 9 This isn’t even HALF O penwave 6 .2.3.4.c.1.10 V3m/V9m: Teleca-Obigo 4.0 ELS! probably the most THE MOD device.2 prolific e 6.2.3. 1.c.1 .11 v enwa Also, pera 8perfect3 V3 V: OO the x 8: p .5 (08.B7.2 R) example of handset R) 6.80.53madness™ to the (9 pera 8.0 V3xxi: O extreme! Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 60. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. Photo copyright Jeremy Plemon
  • 61. Layers of Mobile Network-based services are Services Services often available at the Application, Framework, or Applications OS level to enhance the relevance of information. Application Frameworks Example services may include Operating Systems The Internet, Messaging or Location. Platforms Handsets Networks Operators Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 62. All of these layers must be passed through before you get to the content. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 63. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 64. Why the MOBILE WEB? Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 65. Size, Depth, Breadth Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 66. why the MOBILE WEB? Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 67. Population of the Earth Source: Wikipedia Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 68. 20 Million Population of the Earth Source: Wikipedia Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 69. 20 Million United Kingdom (50m) Population of the Earth Source: Wikipedia Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 70. 20 Million United Kingdom (50m) United States of America (303m) Population of the Earth Source: Wikipedia Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 71. 20 Million United Kingdom (50m) United States of America (303m) European Union (495m) Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. Source: Wikipedia Population of the Earth
  • 72. 20 Million United Kingdom (50m) United States of America (303m) European Union (495m) Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. China (1.3 billion) Source: Wikipedia Population of the Earth
  • 73. Mobile Web of Today Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 74. Mobile Web of Today Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 75. Mobile Web of Today Mobile Users (2.9b) Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 76. Mobile Web of Today Mobile Web Access (1.3b) Mobile Users (2.9b) Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 77. Mobile Users (2.9b) Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. Mobile Web Access (1.3b) Desktop Web Access (1.1b) Sources: GSM Association, T-Mobile, Credit Suisse, Pyramid Research Mobile Web of Today
  • 78. Mobile Web of Tomorrow Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 79. 2010 Mobile Web of Tomorrow Mobile Web Subscribers by Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 80. 2010 50% of the planet! Mobile Web of Tomorrow Mobile Web Subscribers by Source: Informa Telecoms & Media 2006 Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 81. The mobile web is the most cost-e ective way to reach HALF THE PLANET. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 82. We are at the precipice of the next generation of THE WEB. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 83. BUT... Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 84. BUT... Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 85. MOBILE WEB of Today Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 86. MARKUP Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 87. Largely relies on table-based designs, though no one admits it. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 88. STYLESHEETS Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 89. Limited CSS support. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 90. Virtually no “cascade.” Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 91. JAVASCRIPT Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 92. No Javascript. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 93. Use of “WEB STANDARDS” Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 94. Web Standards techniques and principles don’t apply. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 95. BUT... Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 96. Part Two WHY MOBILE IS GOING TO CHANGE EVERYTHING WE KNOW TO BE TRUE Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 97. 6 Months Ago... Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 98. MOBILE as a MEDIUM Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 99. Tomi Ahonen 3G Strategy Consultant Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 100. 7 th MASS MEDIA Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 101. 7 th MASS MEDIA Printing Press Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 102. 7 th MASS MEDIA Printing Press Recordings Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 103. 7 th MASS MEDIA Printing Press Recordings Cinema Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 104. 7 th MASS MEDIA Printing Press Recordings Cinema Radio Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 105. 7 th MASS MEDIA Printing Press Recordings Cinema Radio Television Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 106. 7 th MASS MEDIA Printing Press Recordings Cinema Radio Television The Internet Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 107. 7 th MASS MEDIA Printing Press Recordings Cinema Radio Television The Internet Mobile Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 108. Benefit #1 FIRST TRULY PERSONAL MASS MEDIA Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 109. Benefit #2 FIRST ALWAYS ON MASS MEDIA Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 110. Benefit #3 FIRST ALWAYS CARRIED MASS MEDIA Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 111. Benefit #4 ONLY MASS MEDIA WITH A BUILT IN PAYMENT Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 112. Benefit #5 POINT OF THOUGHT Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 113. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 114. Mobile is the only mass media that can do EVERYTHING the previous six can do. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 115. PLUS Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 116. Mobile has the potential to reach anybody through ANY MEDIUM. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 117. Jargon Alert LBS Location-based Services The ability for a mobile device to provide information that is relevant to it’s physical location via a Global Positioning System (GPS). Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 118. GPS Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 119. GPS TRIANGULATION Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 120. Prepare for a truly CONTEXTUAL WEB. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 121. Mobile will REVOLUTIONIZE the way we gather and interact with information in the NEXT TWO YEARS. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 122. DESIGNING for CONTEXT Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 123. The 3 C’s of the Mobile Web Cost Content Context If you don't Issues like What does your develop your navigation, image website add to the mobile website sizes, page weight users mobility? responsibly, the and scripts all How do you add user could get need to be value to the their stuck with a big considered when physical context? bill in order to thinking about What is the view your content. your website on context in which mobile devices. they will use your site? On a bus or train? Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 124. The 3 C’s of the Mobile Web Cost Content Context If you don't Issues like What does your develop your navigation, image website add to the mobile website sizes, page weight users mobility? responsibly, the and scripts all How do you add user could get need to be value to the their stuck with a big considered when physical context? bill in order to thinking about What is the view your content. your website on context in which mobile devices. they will use your site? On a bus or train? Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 125. The 3 C’s of the Mobile Web Cost Content Context If you don't Issues like What does your develop your navigation, image website add to the mobile website sizes, page weight users mobility? responsibly, the and scripts all How do you add user could get need to be value to the their stuck with a big considered when physical context? bill in order to thinking about What is the view your content. your website on context in which mobile devices. they will use your site? On a bus or train? Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 126. Jargon Alert Context The circumstances that form the setting for an event, statement, or idea, and in terms of which it can be fully understood and assessed. Considered together with the surroundings or circumstances. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 127. Tip #1 ADDRESS THE INHERENT BENEFITS OF THE MEDIA. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 128. 7 th MASS MEDIA Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 129. 5 unique benefits First truly personal mass media e.g. We don’t share our phones with our spouses First always-on mass media Information is always available 24/7, even when idle First always-carried mass media 7 out of 10 people sleep with their phones within reach Only mass media with a built-in payment channel Universal click-to-buy—twice as many people have phones than credit cards O ers point of thought Ability to create of consume content whenever the mood strikes Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 130. Tip #2 LOOK AT YOUR CONTENT IN MULTIPLE FACETS OF DISTRIBUTION. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 131. Join Down Notify load Vote Vote Down load Notify WAP Discuss IVR SMS Buy SMS IVR Notify Send to Friend WAP Bluetooth Radio TV Send to Friend Notify SMS SMS Live Billboard Send to Buy Friend WAP ry Vi to MMS su di al Au Join WAP Site QR Code Word of Print Ad Mouth SMS Notify Kinesthetic Notify SMS WAP Mobile Events Buy Device Send to Friend QR Code Website MMS Join Notify SMS SMS Email WAP Site MMS WAP Site SMS Send to Friend Send to Friend Notify Notify Post WAP Site Send to Friend Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 132. Join Down Notify load Vote Vote Down load Notify WAP Discuss IVR SMS Buy SMS IVR Notify Send to Friend WAP Bluetooth Radio TV Send to Friend Notify SMS SMS Live Billboard Send to Buy Friend WAP ry Vi to MMS su di al Au Join WAP Site QR Code Word of Print Ad Mouth SMS Notify Kinesthetic Notify SMS WAP Mobile Events Buy Device Send to Friend QR Code Website MMS Join Notify SMS SMS Email WAP Site MMS WAP Site SMS Send to Friend Send to Friend Notify Notify Post WAP Site Send to Friend Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 133. Join Down Notify load Vote Vote Down load Notify WAP Discuss IVR SMS Buy SMS IVR Notify Send to Friend WAP Bluetooth Radio TV Send to Friend Notify SMS SMS Live Billboard Send to Buy Friend WAP ry Vi to MMS su di al Au Join WAP Site QR Code Word of Print Ad Mouth SMS Notify Kinesthetic Notify SMS WAP Mobile Events Buy Device Send to Friend QR Code Website MMS Join Notify SMS SMS Email WAP Site MMS WAP Site SMS Send to Friend Send to Friend Notify Notify Post WAP Site Send to Friend Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 134. Join Down Notify load Vote Vote Down load Notify WAP Discuss IVR SMS Buy SMS IVR Notify Send to Friend WAP Bluetooth Radio TV Send to Friend Notify SMS SMS Live Billboard Send to Buy Friend WAP ry Vi to MMS su di al Au Join WAP Site QR Code Word of Print Ad Mouth SMS Notify Kinesthetic Notify SMS WAP Mobile Events Buy Device Send to Friend QR Code Website MMS Join Notify SMS SMS Email WAP Site MMS WAP Site SMS Send to Friend Send to Friend Notify Notify Post WAP Site Send to Friend Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 135. Tip #3 CREATE SOLUTIONS BASED ON GOALS. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 136. My Dad Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 137. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 138. Find a need & fill it. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 139. Tip #4 BALANCE THE CONSTRAINTS OF THE TECHNOLOGY. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 140. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 141. Balancing Goals Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 142. Bu sin ess Go als Balancing Goals Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 143. Bu sin ess Go als User Goals Balancing Goals Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 144. Bu sin ess Go als User Goals Te ch Balancing Goals nic al oa G ls Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 145. Bu sin ess Go Spot als Sweet User Goals Te ch Balancing Goals nic al oa G ls Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 146. Start with a goal and REVERSE ENGINEER IT. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 147. Tip #5 REMEMBER PHYSICAL CONTEXT. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 148. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 149. 1990 Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 150. Who are they? What are they doing? Where are they? Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 151. Tip #6 ADAPT CONTENT FOR MULTIPLE CONTEXTS. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 152. Jargon Alert Adaptation The process of dynamically optimizing content to the restrictions of the requesting device. The adaptation model relies on the mobile device’s user agent profile to tell the server to deliver markup or images based on the browser, screen size and device capabilities. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 153. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 154. Jargon Alert Adaptation The process of dynamically optimizing content to the restrictions of the requesting device. The adaptation model relies on the mobile device’s user agent profile to tell the server to deliver markup or images based on the browser, screen size and device capabilities. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 155. Jargon Alert Adaptation The process of dynamically optimizing content to the restrictions of the requesting device. The adaptation model relies on the mobile device’s user agent profile to tell the server to deliver markup or images based on the browser, screen size and device capabilities. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 156. Adapt for MULTIPLE CONTEXTS Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 157. Join Down Notify load Vote Vote Down load Notify WAP Discuss IVR SMS Buy SMS IVR Notify Send to Friend WAP Bluetooth Radio TV Send to Friend Notify SMS SMS Live Billboard Send to Buy Friend WAP ry Vi to MMS su di al Au Join WAP Site QR Code Word of Print Ad Mouth SMS Notify Kinesthetic Notify SMS WAP Mobile Events Buy Device Send to Friend QR Code Website MMS Join Notify SMS SMS Email WAP Site MMS WAP Site SMS Send to Friend Send to Friend Notify Notify Post WAP Site Send to Friend Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 158. Part Three THE FUTURE IS HERE. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 159. MOBILE 2.0 Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 160. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 161. Web 1.0 Web 2.0 Proprietary Standards Walled Gardens Web Services First to market Web as a Platform Brand-centered User-centered Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 162. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 163. 10 Things I Learned at Mobile 2.0 #1 Mobile 2.0 = The web The mobile web browser is the next killer app Mobile Web Applications are the future AJAX is the next frontier Rich Interactions kill battery life The Mobile User Experience Sucks Mobile Widgets are the next big thing The Carrier is the new “C” word We are creators not consumers Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 164. 10 Things I Learned at Mobile 2.0 #1 Mobile 2.0 = The web The mobile web browser is the next killer app Mobile Web Applications are the future AJAX is the next frontier Rich Interactions kill battery life The Mobile User Experience Sucks Mobile Widgets are the next big thing The Carrier is the new “C” word We are creators not consumers Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 165. Jargon Alert Mobile 2.0 The convergence of mobile services and web services. The promise of Mobile 2.0 is to add portability, ubiquitous connectivity and location-based services to enhance information and services found on the web. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 166. Mobile Evolutions Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 167. sensoring biometrics transactions lifestreaming Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. recommendation image recognition augmented reality mobile connected games location-based social media retail proximity media consumption Hot Trends
  • 168. Mobile 1.0 Mobile 2.0 Proprietary Standards Walled Gardens Web Services First to market Web as a Platform Brand-centered User-centered Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 169. Brick Era Touch Era Candy Bar Era Smart Phone Era Feature Phone Era 1970 1980 1990 Mobile Evolution 2000 2010 Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 170. “ Change occurs because there is a gap between what is and what should be. ” — Craig McCaw Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 171. the mythical “Future-Phone” Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 172. We are at the precipice of the next generation of THE WEB. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 173. Two companies in particular are making that happen... Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 174. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 175. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 176. but lets not forget... Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 177. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 178. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 179. A Confession Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 180. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 181. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 182. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 183. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 184. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 185. 2,680 Mobile Web Apps! Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 186. 500 new mobile web apps in the last 2 months! Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 187. Over 1,000 new mobile web apps in the last 6 months! Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 188. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 189. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 190. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 191. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 192. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 193. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 194. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 195. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 196. Q4 2007 Q1 2008 Q2 2008 Q3 2008 Q4 2008 Q1 2009 Q2 2009 Q3 2009 Mobile 2.0 Market Penetration Forecast Q4 2009 Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 197. Q4 2007 Q1 2008 Q2 2008 Q3 2008 Q4 2008 Q1 2009 Q2 2009 Q3 2009 Mobile 2.0 Market Penetration Forecast Q4 2009 Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 198. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. The iPhone Q4 2007 Q1 2008 Q2 2008 Q3 2008 Q4 2008 Q1 2009 Q2 2009 Q3 2009 Q4 2009 Mobile 2.0 Market Penetration Forecast
  • 199. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. The iPhone Q4 2007 Q1 2008 Q2 2008 Q3 2008 Q4 2008 Q1 2009 Q2 2009 Q3 2009 Q4 2009 Mobile 2.0 Market Penetration Forecast
  • 200. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. The iPhone iPhone Clones Q4 2007 Q1 2008 Q2 2008 Q3 2008 Q4 2008 Q1 2009 Q2 2009 Q3 2009 Q4 2009 Mobile 2.0 Market Penetration Forecast
  • 201. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. The iPhone iPhone Clones Q4 2007 Q1 2008 Q2 2008 Q3 2008 Q4 2008 Q1 2009 Q2 2009 Q3 2009 Q4 2009 Mobile 2.0 Market Penetration Forecast
  • 202. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. The iPhone iPhone Clones Q4 2007 Q1 2008 Q2 2008 Q3 2008 Q4 2008 Q1 2009 Q2 2009 Q3 2009 Q4 2009 Mobile 2.0 Market Penetration Forecast
  • 203. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. The iPhone iPhone iPhone Clones 3G Q4 2007 Q1 2008 Q2 2008 Q3 2008 Q4 2008 Q1 2009 Q2 2009 Q3 2009 Q4 2009 Mobile 2.0 Market Penetration Forecast
  • 204. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. The iPhone iPhone iPhone Clones 3G Q4 2007 Q1 2008 Q2 2008 Q3 2008 Q4 2008 Q1 2009 Q2 2009 Q3 2009 Q4 2009 Mobile 2.0 Market Penetration Forecast
  • 205. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. The iPhone iPhone The G1 iPhone Clones 3G Q4 2007 Q1 2008 Q2 2008 Q3 2008 Q4 2008 Q1 2009 Q2 2009 Q3 2009 Q4 2009 Mobile 2.0 Market Penetration Forecast
  • 206. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. The iPhone iPhone The G1 iPhone Clones 3G Q4 2007 Q1 2008 Q2 2008 Q3 2008 Q4 2008 Q1 2009 Q2 2009 Q3 2009 Q4 2009 Mobile 2.0 Market Penetration Forecast
  • 207. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. 2nd Gen Android The iPhone iPhone The G1 iPhone Clones 3G Q4 2007 Q1 2008 Q2 2008 Q3 2008 Q4 2008 Q1 2009 Q2 2009 Q3 2009 Q4 2009 Mobile 2.0 Market Penetration Forecast
  • 208. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. 2nd Gen Android The iPhone iPhone The G1 iPhone Clones 3G Q4 2007 Q1 2008 Q2 2008 Q3 2008 Q4 2008 Q1 2009 Q2 2009 Q3 2009 Q4 2009 Mobile 2.0 Market Penetration Forecast
  • 209. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. Other 2nd Gen Android The iPhone iPhone The G1 iPhone Clones 3G Q4 2007 Q1 2008 Q2 2008 Q3 2008 Q4 2008 Q1 2009 Q2 2009 Q3 2009 Q4 2009 Mobile 2.0 Market Penetration Forecast
  • 210. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. Other 2nd Gen Android The iPhone iPhone The G1 iPhone Clones 3G Q4 2007 Q1 2008 Q2 2008 Q3 2008 Q4 2008 Q1 2009 Q2 2009 Q3 2009 Q4 2009 Mobile 2.0 Market Penetration Forecast
  • 211. “D-Day” Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. Other 2nd Gen Android The iPhone iPhone The G1 iPhone Clones 3G Q4 2007 Q1 2008 Q2 2008 Q3 2008 Q4 2008 Q1 2009 Q2 2009 Q3 2009 Q4 2009 Mobile 2.0 Market Penetration Forecast
  • 212. “D-Day” Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. Other 2nd Gen Android The iPhone iPhone The G1 iPhone Clones 3G Q4 2007 Q1 2008 Q2 2008 Q3 2008 Q4 2008 Q1 2009 Q2 2009 Q3 2009 Q4 2009 Mobile 2.0 Market Penetration Forecast
  • 213. 10% “D-Day” Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. Other 2nd Gen Android The iPhone iPhone The G1 iPhone Clones 3G Q4 2007 Q1 2008 Q2 2008 Q3 2008 Q4 2008 Q1 2009 Q2 2009 Q3 2009 Q4 2009 Mobile 2.0 Market Penetration Forecast
  • 214. The App Store Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 215. 10 Million Downloads and Counting! Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 216. over 4,000 Native Apps Available Today! Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 217. 1,000 new apps in one week! Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 218. getleaflets.com Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 219. come. the iPhone is the shape of things to Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 220. When we talk about iPhone, we’re really talking about WEBKIT Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 221. webkit features Supports all standard flavors of XHTML Supports CSS 1, 2 and a good deal of CSS 3 Javascript, including AJAX and advanced scripting Replaceable fonts This means complex layouts, styling and interaction... Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 222. limitations 10MB download limit Javascript execution time limit of 5 seconds for each top-level item No Flash No Java No mouse-over, hover, tooltip mouse events No file downloads or uploads! Slower processor, so intensive scripting can be laggy or choppy Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 223. Nokia N95 Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 224. Android Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 225. Look Familiar? Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 226. The G1 Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 227. iPod Touch Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 228. The iPod touch is an “entirely new type of iPod,” one that Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. Apple sees moving the iPod beyond its roots as a mere media player, becoming “the first mainstream Wi-Fi mobile platform. —Peter Oppenheimer, Apple CFO
  • 229. iPod Touch iPhone Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 230. iPod Touch 22 million* *cumulative iPods iPhone Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 231. iPod Touch 22 million* *cumulative iPods iPhone 2 million Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 232. iPod Touch 22 million* *cumulative iPods ? iPhone 2 million Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 233. Over 140 million iPods sold in less than six years. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 234. CONTEXT is KEY IT REALLY IS. I SWEAR. YOU’LL THANK ME LATER, HOPEFULLY. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 235. TIMING is EVERYTHING Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 236. The Speed Reality Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 237. EDGE 0 50 Max Speed 100 EDGE 150 Actual Average 200 Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 238. EDGE 0 50 Max Speed 100 EDGE 150 Actual Average 200 Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 239. EDGE 0 50 Max Speed 100 EDGE 150 Actual Average 200 Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 240. 3G 0 3.75 Max Speed 7.50 3G (HSDPA) 11.25 Actual Average 15.00 Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 241. 3G 0 3.75 Max Speed 7.50 3G (HSDPA) 11.25 Actual Average 15.00 Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 242. 3G 0 3.75 Max Speed 7.50 3G (HSDPA) 11.25 Actual Average 15.00 Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 243. WI-FI 0 15 Max Speed 30 45 Wi-Fi via Broadband Actual Average 60 Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 244. WI-FI 0 15 Max Speed 30 45 Wi-Fi via Broadband Actual Average 60 Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 245. WI-FI 0 15 Max Speed 30 45 Wi-Fi via Broadband Actual Average 60 Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 246. EDGE 3G WI-FI 0 1.25 2.50 Actual Average 3.75 Speeds, compared 5.00 Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 247. EDGE 3G WI-FI 0 1.25 2.50 Actual Average 3.75 Speeds, compared 5.00 Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 248. EDGE 3G WI-FI 0 1.25 2.50 Actual Average 3.75 Speeds, compared 5.00 Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 249. EDGE 3G WI-FI 0 1.25 2.50 Actual Average 3.75 Speeds, compared 5.00 Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 250. EDGE 3G WI-FI 0 1.25 2.50 Actual Average 25% as fast 3.75 Speeds, compared 5.00 Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 251. EDGE 3G WI-FI 0 1.25 2.50 3% as fast Actual Average 25% as fast 3.75 Speeds, compared 5.00 Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 252. A 300kb file: EDGE, 3G & Wi-Fi Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 253. Even though we have Wi-Fi, we can’t always rely on it. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 254. Photo copyright Peter Dean The Screen Reality Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 255. 128 pixels 176 pixels 320 pixels 320 pixels 240 pixels 160 pixels Screens Sizes! 220 pixels 240 pixels 320 pixels 320 pixels Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 256. Desktop-sized Nytimes.com Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 257. iPhone-sized nytimes.com Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 258. iPhone-sized nytimes.com Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 259. nytimes.com on Android phone Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 260. Context! Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 261. What’s important here? Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 262. What’s important here? Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 263. What’s important here? Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 264. What’s important here? Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 265. What’s important here? Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 266. mobile nytimes.com Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 267. getleaflets.com Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 268. WHY MAKE LEAFLETS? We wanted to showcase the merger of Web 2.0 with Mobile 2.0 The use of web standards and semantics in mobile Designing for the mobile context Mobile web best practices Designing specifically for the iPhone/iPod Touch Rapid and iterative development Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 269. DEMO Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 270. NOTE: These are only screenshots. To view Leaflets in all its useful glory, visit getleaflets.com on your iPhone/iPod Touch. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 271. Home Screen Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 272. • Home Screen Simple, iPhone-esque Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 273. • • network Home Screen Loading indicator for Simple, iPhone-esque images in case of slow Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 274. • • network Home Screen Loading indicator for Simple, iPhone-esque images in case of slow Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 275. Home Screen • Simple, iPhone-esque • Loading indicator for Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. images in case of slow network • Users know how to use it right away because it uses metaphors they’re used to
  • 276. Search Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 277. • Search where possible Send users to mobile versions of search results Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 278. Search • Send users to mobile versions of search results Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. where possible • Give users as many search options in one screen without having to reload
  • 279. Search • Send users to mobile versions of search results Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. where possible • Give users as many search options in one screen without having to reload
  • 280. Search • Send users to mobile versions of search results Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. where possible • Give users as many search options in one screen without having to reload • More than just simple search (dictionary, shopping, et cetera)
  • 281. Feeds Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 282. • Feeds Simple feed reader (the first for the iPhone, BTW) Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 283. Feeds • Simple feed reader (the first for the iPhone, BTW) Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. • Subscribe, unsubscribe, but don’t bother with read status
  • 284. Feeds • Simple feed reader (the first for the iPhone, BTW) Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. • Subscribe, unsubscribe, but don’t bother with read status • Allow users to change from two-column to single-column for readability
  • 285. Feeds • Simple feed reader (the first for the iPhone, BTW) Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. • Subscribe, unsubscribe, but don’t bother with read status • Allow users to change from two-column to single-column for readability
  • 286. Feeds • Simple feed reader (the first for the iPhone, BTW) Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. • Subscribe, unsubscribe, but don’t bother with read status • Allow users to change from two-column to single-column for readability • Read full articles, link to websites
  • 287. Feeds • Simple feed reader (the first for the iPhone, BTW) Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. • Subscribe, unsubscribe, but don’t bother with read status • Allow users to change from two-column to single-column for readability • Read full articles, link to websites
  • 288. Newsvine Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 289. • faster Newsvine Most of the Newsvine content but it loads much Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 290. Newsvine • Most of the Newsvine content but it loads much Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. faster • Works much like Feeds, allows for single column view, full text reading, et cetera
  • 291. App List Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 292. • App List sites we liked collecting neat iPhone Our version of “the deck,” Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 293. App List • Our version of “the deck,” collecting neat iPhone Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. sites we liked • Users can mark apps as “favorites” to access them easily in the future
  • 294. App List • Our version of “the deck,” collecting neat iPhone Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. sites we liked • Users can mark apps as “favorites” to access them easily in the future
  • 295. App List • Our version of “the deck,” collecting neat iPhone Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. sites we liked • Users can mark apps as “favorites” to access them easily in the future • Users can rate apps and comment on them
  • 296. App List • Our version of “the deck,” collecting neat iPhone Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. sites we liked • Users can mark apps as “favorites” to access them easily in the future • Users can rate apps and comment on them
  • 297. App List • Our version of “the deck,” collecting neat iPhone Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. sites we liked • Users can mark apps as “favorites” to access them easily in the future • Users can rate apps and comment on them
  • 298. Upcoming Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 299. • details Upcoming events, including all View your Upcoming Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 300. • details Upcoming events, including all View your Upcoming Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 301. • • details as well Upcoming events, including all View your Upcoming View your friends’ events Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 302. • • details as well Upcoming events, including all View your Upcoming View your friends’ events Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 303. Flickr Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 304. • Flickr your latest photos and your friends’ latest photos See your latest comments, Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 305. • Flickr your latest photos and your friends’ latest photos See your latest comments, Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 306. Flickr • See your latest comments, your latest photos and Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. your friends’ latest photos • Much faster than the full site, but provides a much nicer experience than the default mobile Flickr site
  • 307. Flickr • See your latest comments, your latest photos and Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. your friends’ latest photos • Much faster than the full site, but provides a much nicer experience than the default mobile Flickr site
  • 308. Baseball Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 309. • batters Baseball Nearly real-time updates for scores, base positions, Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 310. Baseball • Nearly real-time updates for scores, base positions, Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. batters • Shows scores for the day’s finished games
  • 311. Baseball • Nearly real-time updates for scores, base positions, Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. batters • Shows scores for the day’s finished games
  • 312. Baseball • Nearly real-time updates for scores, base positions, Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. batters • Shows scores for the day’s finished games • Shows upcoming games
  • 313. Baseball • Nearly real-time updates for scores, base positions, Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. batters • Shows scores for the day’s finished games • Shows upcoming games
  • 314. Baseball • Nearly real-time updates for scores, base positions, Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. batters • Shows scores for the day’s finished games • Shows upcoming games • Also provides baseball news
  • 315. New York Times Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 316. New York Times • All the same content, less than a tenth of the Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. loading time of nytimes.com • Styled to look more like NY Times’ own site
  • 317. SUCCESSFUL EXPERIMENT Entire application built between WWDC and the iPhone launch (~3 weeks) TechCrunch called it a “must-have iPhone app” 105,000 hits the first week 12,000 unique users the first week 7,000 recurring users per week Average of 22 pages viewed per visit Virtually no drop o in tra c in the last year Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 318. TAKEAWAYS While we designed it for the iPhone, Leaflets could work on any capable mobile browser Standards, standards, standards Design for context Optimize for bandwidth Test, then test some more Javascript is crucial to the user experience CSS3 is ideal for mobile development Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 319. Part Four HOW TO BUILD A COOL MOBILE APP IN LESS THAN A WEEK Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 320. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 321. HTML, CSS & JS THE CAUSE OF AND SOLUTION TO ALL OF LIFE’S PROBLEMS Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 322. Home Screen • Simple, iPhone-esque • Loading indicator for Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. images in case of slow network • Users know how to use it right away because it uses metaphors they’re used to
  • 323. <div id=quot;appsquot;> <ul> <li id=quot;navSearchquot;><a href=quot;/search/quot;>Search</a></li> <li id=quot;navRSSquot;><a href=quot;/feeds/quot;>Feeds</a></li> <li id=quot;navNewsvinequot;><a href=quot;/newsvinequot;>Newsvine</a></li> <li id=quot;navLinksquot;><a href=quot;/applist/quot;>App List</a></li> <li id=quot;navEventsquot;><a href=quot;/upcoming/quot;>Upcoming</a></li> Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. <li id=quot;navFlickrquot;><a href=quot;/flickr/quot;>Flickr</a></li> <li id=quot;navDeliciousquot;><a href=quot;/delicious/quot;>del.icio.us</a></li> <li id=quot;navBaseballquot;><a href=quot;/scores/quot;>Baseball</a></li> <li id=quot;navNYTquot;><a href=quot;/nyt/quot;>NY Times</a></li> <?php if ($_user): ?> <li id=quot;navSettingsquot;><a href=quot;/user/settings.phpquot;>Settings</a></li> <?php endif; ?> </ul> <div id=quot;loading_statusquot;> <img id=quot;loaderquot; src=quot;/media/images/loader.gifquot; border=quot;0quot; alt=quot;quot; /> ¬ <span id=quot;ltextquot;>Loading icons...</span> </div> </div> Home Icon XHTML
  • 324. #apps li { float: left; width: 56px; height: 56px; border: 1px hidden #666; text-align: center; margin: 7px 10px 20px; background: #666 url(/media/images/button_glare.png) no-repeat; -webkit-box-shadow: 0px 1px 3px black; -webkit-border-radius: 10px; } Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. #apps li a { text-decoration: none; color: #999; display: block; padding-top: 60px; font-weight: bold; font-size: 0.8em; } li#navNewsvine { background: url(/media/images/button_glare.png) no-repeat, ¬ url(/media/images/home_newsvine_low.png) no-repeat; background-color: #005422; } Home Icon CSS
  • 325. Layer your CSS where possible to save bandwidth. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 326. controls.css Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 327. newsvine.css Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 328. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 329. + 3 Kilobytes Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 330. + + 320 bytes 3 Kilobytes Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 331. + + + 320 bytes 3 Kilobytes -webkit-border-radius: 10px; Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 332. + + + 320 bytes 3 Kilobytes -webkit-border-radius: 10px; Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 333. Build your own mini- framework. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 334. Core layout Your CSS Links and colors Base Typography Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 335. Core layout Base Typography Links and colors Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. Navigation Headlines Common buttons Image Handling Form controls Lists Your CSS
  • 336. Core layout Base Typography Links and colors Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. Navigation Headlines Common buttons Image Handling Form controls Lists Nav Bar Your CSS
  • 337. Core layout Base Typography Links and colors Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. Navigation Headlines Common buttons Image Handling Form controls Lists Nav Bar Buttons Your CSS
  • 338. Core layout Base Typography Links and colors Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. Navigation Headlines Common buttons Image Handling Form controls Lists Nav Bar Buttons Inputs Your CSS
  • 339. Core layout Base Typography Links and colors Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. Navigation Headlines Common buttons Image Handling Form controls Lists Nav Bar Buttons Inputs Photos Your CSS
  • 340. Core layout Base Typography Links and colors Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. Navigation Headlines Common buttons Image Handling Form controls Lists Nav Bar Buttons Inputs Photos ULs for News Your CSS
  • 341. Core layout Links and colors Base Typography Your CSS, stacked Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 342. Core layout Navigation Form controls Links and colors Base Typography Common buttons Your CSS, stacked Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 343. Core layout Base Typography Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. Links and colors Navigation Common buttons Form controls Photos Buttons ULs for News Your CSS, stacked
  • 344. Only use what you need. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 345. SAVE SPACE Use ob_start(quot;ob_gzhandlerquot;) for PHP content Remove whitespace from HTML and CSS Refactor Javascript code to be more e cient and then remove unnecessary brackets and semi-colons Compress images or use CSS where possible Cache data on the server for fastest possible server-side load times Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 346. CSS TRANSFORMS Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 347. CSS TRANSFORMS Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 348. Step 1: <div id=quot;cardquot; class=quot;cardquot; onclick=quot;flip(event)quot;> <div id=quot;frontquot; class=quot;front facequot;> <p> <br> </p> </div> <div id=quot;backquot; class=quot;back facequot;> <p> <br> </p> </div> Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. </div> Simple Code
  • 349. Step 1: <div id=quot;cardquot; class=quot;cardquot; onclick=quot;flip(event)quot;> <div id=quot;frontquot; class=quot;front facequot;> <p> <br> </p> </div> <div id=quot;backquot; class=quot;back facequot;> <p> <br> </p> </div> Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. </div> Step 2: function flip (event) { var element = event.currentTarget; /* Toggle the setting of the classname attribute */ element.className = (element.className == 'card') ? ¬ 'card flipped' : 'card'; } Simple Code
  • 350. Step 1: <div id=quot;cardquot; class=quot;cardquot; onclick=quot;flip(event)quot;> <div id=quot;frontquot; class=quot;front facequot;> <p> <br> </p> </div> <div id=quot;backquot; class=quot;back facequot;> <p> <br> </p> </div> Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. </div> Step 2: function flip (event) { var element = event.currentTarget; /* Toggle the setting of the classname attribute */ element.className = (element.className == 'card') ? ¬ 'card flipped' : 'card'; } Step 3: .card.flipped { -webkit-transform: rotateY(180deg); } Simple Code
  • 351. DEMOS Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 352. JAVASCRIPT PROBLEMS (AND SOLUTIONS?) Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 353. function gradient(id, start, end, ms) { var speed = Math.round(ms/100); var timer = 0; if (start > end) { for (i = start; i >= end; i--) { setTimeout(quot;set_opacity(quot; + i + quot;,'quot; + id + quot;')quot;, (timer * speed)); Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. timer++; } } else { for (i = start; i <= end; i++) { setTimeout(quot;set_opacity(quot; + i + quot;,'quot; + id + quot;')quot;, (timer * speed)); timer++; } } } function set_opacity(opacity, id) { var object = document.getElementById(id).style; object.opacity = (opacity/100); } Potential Chokeville
  • 354. } #fader { -webkit-transition: opacity 1s ease-out; Potential Smoothness Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 355. OBJECTIVELY SPEAKING SproutCore In use by Apple, used primarily for non-mobile web applications, utilizes Ruby; available at sproutcore.com Cappuccino (aka Objective-J) Developed by 280north, attempts to recreate Objective-C (namely Cocoa) in Javascript; available at cappuccino.org Fundamentally di erent ways to build web applications Closer to native application building Possibility of porting applications to the desktop Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 356. import <Foundation/CPObject.j> import <Foundation/CPURLRequest.j> import <Foundation/CPJSONPConnection.j> import <AppKit/CPSlider.j> import <AppKit/CPToolbar.j> import <AppKit/CPToolbarItem.j> import <AppKit/CPCollectionView.j> Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. var SliderToolbarItemIdentifier = quot;SliderToolbarItemIdentifierquot;, AddToolbarItemIdentifier = quot;AddToolbarItemIdentifierquot;, RemoveToolbarItemIdentifier = quot;RemoveToolbarItemIdentifierquot;; @implementation AppController : CPObject { CPURLConnection tagConnection; CPString lastIdentifier; CPDictionary photosets; CPWindow theWindow; CPCollectionView listCollectionView; CPCollectionView photosCollectionView; } - (void)applicationDidFinishLaunching:(CPNotification)aNotification { .... Cappuccino Example
  • 357. MULTI-TOUCH TWO FINGER SWIPES, THREE FINGER SALUTES, SHAKING FISTS... Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 358. EXPOSED iPhone OS 2.0+ exposes several multi-touch events to Javascript Utilize native-like behavior in your apps Combined with CSS Transforms you can make powerful animations and interactions with a small amount of code Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 359. DEMOS Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 360. EASY APPS GET TO WORK ALREADY, WILL YOU? WE NEED GROCERIES! Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 361. THE QUICKEST WAYS Use RSS Nearly all sites provide RSS feeds for their primary data and you can grab it, skin it and use it Re-style your existing site to simplify Send iPhone users an iPhone-specific stylesheet that hides unnecessary content and restyles your site to fit the iPhone aesthetic Build a bare-bones version of your current site Start fresh and only focus on contextually-relevant sections of your site Use Dashcode For very simple sites, you might be able to whip up a quickie Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 362. RSS is great! Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 363. THE BENEFITS Very easy to cache The feeds are text and have publish dates so you can quickly check them only when necessary You’ve probably already got the RSS feeds ready Nearly all publishing platforms create RSS automatically and it’s usually trivial to create additional feeds Easy to grab updates Very easy to re-style since it’s XML You’ve got a bunch of typed data ready to be wrangled Gives the impression of a full suite of data With only the NY Times RSS feed, you can create an app Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 364. Step 1: <?php define('MAGPIE_CACHE_DIR', 'rss_cache'); require_once('magpierss/rss_fetch.inc'); $rss = fetch_rss('http://www.nytimes.com/services/xml/ ¬ Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. rss/nyt/HomePage.xml'); ?> Magpie RSS
  • 365. Step 1: <?php define('MAGPIE_CACHE_DIR', 'rss_cache'); require_once('magpierss/rss_fetch.inc'); $rss = fetch_rss('http://www.nytimes.com/services/xml/ ¬ Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. rss/nyt/HomePage.xml'); ?> Step 2: <?php foreach ($rss->items as $item): ?> <h2><?= $item['title']; ?></h2> <span><?= $item['description']; ?></span> <?php endforeach; ?> Magpie RSS
  • 366. MAGPIE RULES! Automatically caches content You can tweak how long content is cached for, where, all that good stu Easy to install Drag two folders into your app and include a file Does all the work for you Give it a URL and that’s pretty much it Free! Zero cost to get it up and running, zero maintenance cost other than hosting Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 367. SECRET: We use Magpie for a majority of Leaflets. It’s the core technology. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 368. SECRET: You can too. Just send me some money when you’re filthy rich. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 369. iUI AND OTHERS LIKE IT... Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 370. FEATURES iPhone interface look and feel in a web app Native-looking controls, backgrounds, layout Simple to implement In some cases, doesn’t require much more than adding the kit to your project and changing a few lines of code Handles orientation changes Can handle o -site links as well, with the same animations and feel Low overhead Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 371. DISADVANTAGES Most iUI sites tend to look the same If you’ve seen one, you’ve seen them all Potential usability issues While iUI makes an e ort not to break things, depending on implementation the experience can su er Should your app look like it was made by Apple? Especially when iUI uses the most generic parts of the iPhone interface... Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 372. MOBILE WEB APPS vs. N AT I V E A P P S Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 373. But are mobile applications a good idea? Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 374. When to make a Native App? If you want to charge for it. If you want to create a game. If you want to use location. If you want to use the camera. If you want to use the accelerometer. If you want to access the filesystem. If you user is likely to be o ine. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 375. Web App iPhone App Uses Web Standards Takes advantage of Easy to deploy and iPhone features update Loads Wicked Fast Support all Mobile 2.0 Need to know Objective- devices C Can have a Web App in Works only with iPhone two weeks or less. and iPod Touch Web Apps can be added Must deploy over Apple’s to the Desktop iPhone store (or deck) Must have an Internet connection Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 376. Jargon Alert Deck Refers to the web presence maintained by a carrier. When you access the web from a mobile device, the first page you see is often referred to as the carrier deck. But is commonly used to refer to all mobile web sites. Origins: Hypercard development Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 377. Top-Deck = Increased Views Lower Deck = Oblivion Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 378. Jargon Alert Deck Placement The term used to describe where a third-party vendor WAP site, or application will appear on the Carrier Deck. Default order on content on most Carrier Decks is determined by sales. New items often have temporary “Top-Deck Placement” Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 379. Building a great mobile user experience is hard. Go easy on yourself by starting simple. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 380. Build Web Apps first. iPhone Apps second. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 381. Build Web Apps first. iPhone Apps second. (if at all) Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 382. But... Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 383. Phone Gap Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 384. DEMO Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 385. GETTING USERS to your IPHONE SITE Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 386. DEVICE DETECTION Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 387. Jargon Alert Device Detection The method of routing mobile devices to appropriate mobile specfic sites using the mobile browsers user agent string. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 388. Routing Methods Educate the user to manually enter a mobile URL such as a folder or sub-domain. e.g. domain.com/mobile or m.domain.com. Detect the mobile device automatically and redirect the user to a location. In this case, the user simply enters domain.com. Use the mobile specific .mobi top-level domain. Here the user enters domain.mobi. A SMS query that returns a URL called WAP Push. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 389. Simple Device Detection Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 390. Publish only one mobile specific site, designed for the lowest supported browser, routing all mobile browsers to it. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 391. Advanced Device Detection Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 392. Route to the best possible mobile specific site based on the user agent of the requesting device. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 393. At this point we are basically talking about Adaptation. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 394. Mobile Stylesheets Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 395. Code XHTML pages with the mobile context in mind and use the media type attribute to render a mobile stylesheet to mobile devices. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 396. Example Mobile Stylesheet Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 397. Example Mobile Stylesheet Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 398. <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Transitional//ENquot; quot;http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtdquot;> <html xmlns=quot;http://www.w3.org/1999/xhtmlquot; xml:lang=quot;enquot; lang=quot;enquot;> <head> <title>Mobile 2.0</title> <meta http-equiv=quot;Content-Languagequot; content=quot;en-usquot; /> <meta http-equiv=quot;Content-typequot; content=quot;text/html; charset=utf-8quot; /> <link href=quot;assets/styles/screen.cssquot; rel=quot;stylesheetquot; type=quot;text/cssquot; media=quot;screenquot; /> <link href=quot;assets/styles/mobile.cssquot; rel=quot;stylesheetquot; type=quot;text/cssquot; media=quot;handheldquot; /> </head> <body> Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. <div id=quot;containerquot;> <div id=quot;headerquot;> <h1>Mobile 2.0 Conference</h1> <div id=quot;locquot;>San Francisco, November 6, 2006</div> <div id=quot;sponsquot;>Presented by Mobile Monday London and San Francisco</div> <ol> <li><a href=quot;#speakersquot; accesskey=quot;1quot;>Speakers</a></li> <li><a href=quot;#schedulequot; accesskey=quot;2quot;>Schedule</a></li> <li><a href=quot;#locationquot; accesskey=quot;3quot;>Location</a></li> <li><a href=quot;#registerquot; accesskey=quot;4quot;>Register</a></li> </ol> </div> <div id=quot;promoquot;><a href=quot;#registerquot; title=quot;Register Now, Only $45quot;></a></div> <div id=quot;contentquot;> <div id=quot;speakersquot;> <h2>Speakers</h2> <h3>Confirmed speakers and panel participants</h3> <p>The mobile2.0 conference brings together experts and thought leaders from all aspects of mobile application development and web technologies.</p> <div id=quot;speakers2quot;> <ul> Mobile 2.0 Code
  • 399. <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Transitional//ENquot; quot;http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtdquot;> <html xmlns=quot;http://www.w3.org/1999/xhtmlquot; xml:lang=quot;enquot; lang=quot;enquot;> <head> <title>Mobile 2.0</title> <meta http-equiv=quot;Content-Languagequot; content=quot;en-usquot; /> <meta http-equiv=quot;Content-typequot; content=quot;text/html; charset=utf-8quot; /> <link href=quot;assets/styles/screen.cssquot; rel=quot;stylesheetquot; type=quot;text/cssquot; media=quot;screenquot; /> <link href=quot;assets/styles/mobile.cssquot; rel=quot;stylesheetquot; type=quot;text/cssquot; media=quot;handheldquot; /> </head> <body> Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. <div id=quot;containerquot;> <div id=quot;headerquot;> <h1>Mobile 2.0 Conference</h1> <div id=quot;locquot;>San Francisco, November 6, 2006</div> <div id=quot;sponsquot;>Presented by Mobile Monday London and San Francisco</div> <ol> <li><a href=quot;#speakersquot; accesskey=quot;1quot;>Speakers</a></li> <li><a href=quot;#schedulequot; accesskey=quot;2quot;>Schedule</a></li> <li><a href=quot;#locationquot; accesskey=quot;3quot;>Location</a></li> <li><a href=quot;#registerquot; accesskey=quot;4quot;>Register</a></li> </ol> </div> <div id=quot;promoquot;><a href=quot;#registerquot; title=quot;Register Now, Only $45quot;></a></div> <div id=quot;contentquot;> <div id=quot;speakersquot;> <h2>Speakers</h2> <h3>Confirmed speakers and panel participants</h3> <p>The mobile2.0 conference brings together experts and thought leaders from all aspects of mobile application development and web technologies.</p> <div id=quot;speakers2quot;> <ul> Mobile 2.0 Code
  • 400. <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Transitional//ENquot; quot;http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtdquot;> <html xmlns=quot;http://www.w3.org/1999/xhtmlquot; xml:lang=quot;enquot; lang=quot;enquot;> <head> <title>Mobile 2.0</title> <meta http-equiv=quot;Content-Languagequot; content=quot;en-usquot; /> <meta http-equiv=quot;Content-typequot; content=quot;text/html; charset=utf-8quot; /> <link href=quot;assets/styles/screen.cssquot; rel=quot;stylesheetquot; type=quot;text/cssquot; media=quot;screenquot; /> <link href=quot;assets/styles/mobile.cssquot; rel=quot;stylesheetquot; type=quot;text/cssquot; media=quot;handheldquot; /> </head> <body> Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. <div id=quot;containerquot;> <div id=quot;headerquot;> <h1>Mobile 2.0 Conference</h1> <div id=quot;locquot;>San Francisco, November 6, 2006</div> <div id=quot;sponsquot;>Presented by Mobile Monday London and San Francisco</div> <ol> <li><a href=quot;#speakersquot; accesskey=quot;1quot;>Speakers</a></li> <li><a href=quot;#schedulequot; accesskey=quot;2quot;>Schedule</a></li> <li><a href=quot;#locationquot; accesskey=quot;3quot;>Location</a></li> <li><a href=quot;#registerquot; accesskey=quot;4quot;>Register</a></li> </ol> </div> <div id=quot;promoquot;><a href=quot;#registerquot; title=quot;Register Now, Only $45quot;></a></div> <div id=quot;contentquot;> <div id=quot;speakersquot;> <h2>Speakers</h2> <h3>Confirmed speakers and panel participants</h3> <p>The mobile2.0 conference brings together experts and thought leaders from all aspects of mobile application development and web technologies.</p> <div id=quot;speakers2quot;> <ul> Mobile 2.0 Code
  • 401. <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Transitional//ENquot; quot;http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtdquot;> <html xmlns=quot;http://www.w3.org/1999/xhtmlquot; xml:lang=quot;enquot; lang=quot;enquot;> <head> <title>Mobile 2.0</title> <meta http-equiv=quot;Content-Languagequot; content=quot;en-usquot; /> <meta http-equiv=quot;Content-typequot; content=quot;text/html; charset=utf-8quot; /> <link href=quot;assets/styles/screen.cssquot; rel=quot;stylesheetquot; type=quot;text/cssquot; media=quot;screenquot; /> <link href=quot;assets/styles/mobile.cssquot; rel=quot;stylesheetquot; type=quot;text/cssquot; media=quot;handheldquot; /> </head> <body> Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. <div id=quot;containerquot;> <div id=quot;headerquot;> <h1>Mobile 2.0 Conference</h1> <div id=quot;locquot;>San Francisco, November 6, 2006</div> <div id=quot;sponsquot;>Presented by Mobile Monday London and San Francisco</div> <ol> <li><a href=quot;#speakersquot; accesskey=quot;1quot;>Speakers</a></li> <li><a href=quot;#schedulequot; accesskey=quot;2quot;>Schedule</a></li> <li><a href=quot;#locationquot; accesskey=quot;3quot;>Location</a></li> <li><a href=quot;#registerquot; accesskey=quot;4quot;>Register</a></li> </ol> </div> <div id=quot;promoquot;><a href=quot;#registerquot; title=quot;Register Now, Only $45quot;></a></div> <div id=quot;contentquot;> <div id=quot;speakersquot;> <h2>Speakers</h2> <h3>Confirmed speakers and panel participants</h3> <p>The mobile2.0 conference brings together experts and thought leaders from all aspects of mobile application development and web technologies.</p> <div id=quot;speakers2quot;> <ul> Mobile 2.0 Code
  • 402. <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Transitional//ENquot; quot;http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtdquot;> <html xmlns=quot;http://www.w3.org/1999/xhtmlquot; xml:lang=quot;enquot; lang=quot;enquot;> <head> <title>Mobile 2.0</title> <meta http-equiv=quot;Content-Languagequot; content=quot;en-usquot; /> <meta http-equiv=quot;Content-typequot; content=quot;text/html; charset=utf-8quot; /> <link href=quot;assets/styles/screen.cssquot; rel=quot;stylesheetquot; type=quot;text/cssquot; media=quot;screenquot; /> <link href=quot;assets/styles/mobile.cssquot; rel=quot;stylesheetquot; type=quot;text/cssquot; media=quot;handheldquot; /> </head> <body> Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. <div id=quot;containerquot;> <div id=quot;headerquot;> <h1>Mobile 2.0 Conference</h1> <div id=quot;locquot;>San Francisco, November 6, 2006</div> <div id=quot;sponsquot;>Presented by Mobile Monday London and San Francisco</div> <ol> <li><a href=quot;#speakersquot; accesskey=quot;1quot;>Speakers</a></li> <li><a href=quot;#schedulequot; accesskey=quot;2quot;>Schedule</a></li> <li><a href=quot;#locationquot; accesskey=quot;3quot;>Location</a></li> <li><a href=quot;#registerquot; accesskey=quot;4quot;>Register</a></li> </ol> </div> <div id=quot;promoquot;><a href=quot;#registerquot; title=quot;Register Now, Only $45quot;></a></div> <div id=quot;contentquot;> <div id=quot;speakersquot;> <h2>Speakers</h2> <h3>Confirmed speakers and panel participants</h3> <p>The mobile2.0 conference brings together experts and thought leaders from all aspects of mobile application development and web technologies.</p> <div id=quot;speakers2quot;> <ul> Mobile 2.0 Code
  • 403. <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Transitional//ENquot; quot;http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtdquot;> <html xmlns=quot;http://www.w3.org/1999/xhtmlquot; xml:lang=quot;enquot; lang=quot;enquot;> <head> <title>Mobile 2.0</title> <meta http-equiv=quot;Content-Languagequot; content=quot;en-usquot; /> <meta http-equiv=quot;Content-typequot; content=quot;text/html; charset=utf-8quot; /> <link href=quot;assets/styles/screen.cssquot; rel=quot;stylesheetquot; type=quot;text/cssquot; media=quot;screenquot; /> <link href=quot;assets/styles/mobile.cssquot; rel=quot;stylesheetquot; type=quot;text/cssquot; media=quot;handheldquot; /> </head> <body> Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. <div id=quot;containerquot;> <div id=quot;headerquot;> <h1>Mobile 2.0 Conference</h1> <div id=quot;locquot;>San Francisco, November 6, 2006</div> <div id=quot;sponsquot;>Presented by Mobile Monday London and San Francisco</div> <ol> <li><a href=quot;#speakersquot; accesskey=quot;1quot;>Speakers</a></li> <li><a href=quot;#schedulequot; accesskey=quot;2quot;>Schedule</a></li> <li><a href=quot;#locationquot; accesskey=quot;3quot;>Location</a></li> <li><a href=quot;#registerquot; accesskey=quot;4quot;>Register</a></li> </ol> </div> <div id=quot;promoquot;><a href=quot;#registerquot; title=quot;Register Now, Only $45quot;></a></div> <div id=quot;contentquot;> <div id=quot;speakersquot;> <h2>Speakers</h2> <h3>Confirmed speakers and panel participants</h3> <p>The mobile2.0 conference brings together experts and thought leaders from all aspects of mobile application development and web technologies.</p> <div id=quot;speakers2quot;> <ul> Mobile 2.0 Code
  • 404. <!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Transitional//ENquot; quot;http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtdquot;> <html xmlns=quot;http://www.w3.org/1999/xhtmlquot; xml:lang=quot;enquot; lang=quot;enquot;> <head> <title>Mobile 2.0</title> <meta http-equiv=quot;Content-Languagequot; content=quot;en-usquot; /> <meta http-equiv=quot;Content-typequot; content=quot;text/html; charset=utf-8quot; /> <link href=quot;assets/styles/screen.cssquot; rel=quot;stylesheetquot; type=quot;text/cssquot; media=quot;screenquot; /> <link href=quot;assets/styles/mobile.cssquot; rel=quot;stylesheetquot; type=quot;text/cssquot; media=quot;handheldquot; /> </head> <body> Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. <div id=quot;containerquot;> <div id=quot;headerquot;> <h1>Mobile 2.0 Conference</h1> <div id=quot;locquot;>San Francisco, November 6, 2006</div> <div id=quot;sponsquot;>Presented by Mobile Monday London and San Francisco</div> <ol> <li><a href=quot;#speakersquot; accesskey=quot;1quot;>Speakers</a></li> <li><a href=quot;#schedulequot; accesskey=quot;2quot;>Schedule</a></li> <li><a href=quot;#locationquot; accesskey=quot;3quot;>Location</a></li> <li><a href=quot;#registerquot; accesskey=quot;4quot;>Register</a></li> </ol> </div> <div id=quot;promoquot;><a href=quot;#registerquot; title=quot;Register Now, Only $45quot;></a></div> <div id=quot;contentquot;> <div id=quot;speakersquot;> <h2>Speakers</h2> <h3>Confirmed speakers and panel participants</h3> <p>The mobile2.0 conference brings together experts and thought leaders from all aspects of mobile application development and web technologies.</p> <div id=quot;speakers2quot;> <ul> Mobile 2.0 Code
  • 405. No Device Detection Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 406. Rely on an alternate domain or subdirectory forcing the user to manually enter or navigate to the mobile specific site. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 407. DEVICE DETECTION We used a simple Javascript redirect: if (navigator.userAgent.match(/iPhone/i)) { window.location.replace('http://app.getleaflets.com'); } Or you can use other methods of detection: PHP (http://andymoore.info/php-to-detect-mobile-phones) URLs (e.g. m.site.com, site.com/m, site.mobi) Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 408. The Device Detection Dilemma in Mobile 2.0 Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 409. USING MEDIA QUERIES Calling an iPhone stylesheet: <link media=quot;only screen and (max-device-width: 480px)quot; ¬ href=quot;iphone.cssquot; type= quot;text/cssquot; rel=quot;stylesheetquot;> To specify a stylesheet for everything else: <link media=quot;screen and (min-device-width: 481px)quot; ¬ href=quot;other.cssquot; type=quot;text/cssquot; rel=quot;stylesheetquot;/> Do not use: <link media=quot;handheldquot;... At least, not for the iPhone—it doesn’t support handheld stylesheets. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 410. OTHER STUFFS THINGS TO CONSIDER, PONDER OR IGNORE. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 411. What about Ads? Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 412. AD NETWORKS House ads Link from one section to another to drive tra c to content a user might not realize they want (especially content relevant... what if a user sees a movie listing and then you can give them more content about the movie?) Google AdSense AdMob JumpTap Greystripe AppLoop Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 413. Can you justify the costs of Mobile? Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 414. DON’T LIMIT It might be hard to justify an iPhone-only app for your site, but that doesn’t mean you can’t create a mobile site that looks nice and works well Make an e ort to write standards-based code that will be backwards compatible If you’re going to target other browsers, avoid CSS 3 and Javascript where possible XHTML-MP and Mobile CSS are very modern and very powerful, don’t rule them out Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 415. EXAMPLES Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 416. RESOURCES Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 417. Mobile Web Developers Guide Part I: Creating Simple Mobile Sites Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. BRIAN FLING with Ronan Cremin, Jo Rabin and D. Keith Robinson http://mobiforge.com
  • 418. http://mobiledesign.org Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 419. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 420. DANKE! MERCI! THANK YOU! GRAZIE! GRACIAS! Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 421. Q&A If I don’t know the answer, I’ll lie. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.
  • 422. The End Brian Fling brian@flingmedia.com tel. +1 206 201-1875 mob. +1 206 351-6060 website: flingmedia.com blog: flinglog.com twitter: twitter.com/fling Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.