Mobile 2.0: Design & Develop for the iPhone and Beyond

Mobile 2.0: Design & Develop for the iPhone and Beyond - Presentation Transcript

WHO AM I? Mobile Designer since 2000. Worked for the ﬁrst 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 Leaﬂets 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.

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-speciﬁc 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.

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 deﬁned as 2.5G, 2.75G, etc. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.

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.

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.

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.

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.

The Smart Phone Era GPRS, HSDPA, WI-FI The Mobile Platform becomes key Email a primary driver in sales A push for Push Notiﬁcations Very “gadgety” Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.

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.

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.

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.

Jargon Alert Mobile 1.0 The ﬁrst 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.

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.

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.

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.

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.

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

Jargon Alert ARPU Average Revenue Per User A term used to describe the ﬁnancial value of a program, application or service. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.

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.

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 deﬁned as 2.5G, 2.75G, etc. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.

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

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.

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.

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.

Licensed Java ME (or J2ME) is a speciﬁcation of a subset of the Java platform aimed at Java ME providing a certiﬁed 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

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.

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

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 speciﬁc operating system. Platforms Handsets Networks Operators Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.

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 speciﬁcations and run using a mobile web browser. Application Frameworks

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.

THE RAZR The epitomy of Mobile 1.0, and probably the most proliﬁc 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.

THE RAZR 3 .2 ave 6.2. V3: Openw The epitomy of Mobile 1.0, and probably the most proliﬁc 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.

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 proliﬁc 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.

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 proliﬁc 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.

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 proliﬁc 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.

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 proliﬁc 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.

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 proliﬁc 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.

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 proliﬁc 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.

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 proliﬁc 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.

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.

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.

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

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

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

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.

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.

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.

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.

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.

5 unique beneﬁts 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.

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.

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 proﬁle 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.

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.

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.

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.

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.

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

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.

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.

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.

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

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

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

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

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

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

“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

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

webkit features Supports all standard ﬂavors 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.

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 ﬁle 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.

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 ﬁrst mainstream Wi-Fi mobile platform. —Peter Oppenheimer, Apple CFO

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.

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 speciﬁcally for the iPhone/iPod Touch Rapid and iterative development Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.

NOTE: These are only screenshots. To view Leaﬂets in all its useful glory, visit getleaﬂets.com on your iPhone/iPod Touch. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.

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

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

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)

Feeds • Simple feed reader (the ﬁrst 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

Feeds • Simple feed reader (the ﬁrst 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

Feeds • Simple feed reader (the ﬁrst 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

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

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

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

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

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

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 ﬁnished games

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 ﬁnished games • Shows upcoming games

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 ﬁnished games • Shows upcoming games • Also provides baseball news

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

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 ﬁrst week 12,000 unique users the ﬁrst 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.

TAKEAWAYS While we designed it for the iPhone, Leaﬂets 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.

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

<div id=\"apps\"> <ul> <li id=\"navSearch\"><a href=\"/search/\">Search</a></li> <li id=\"navRSS\"><a href=\"/feeds/\">Feeds</a></li> <li id=\"navNewsvine\"><a href=\"/newsvine\">Newsvine</a></li> <li id=\"navLinks\"><a href=\"/applist/\">App List</a></li> <li id=\"navEvents\"><a href=\"/upcoming/\">Upcoming</a></li> Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. <li id=\"navFlickr\"><a href=\"/flickr/\">Flickr</a></li> <li id=\"navDelicious\"><a href=\"/delicious/\">del.icio.us</a></li> <li id=\"navBaseball\"><a href=\"/scores/\">Baseball</a></li> <li id=\"navNYT\"><a href=\"/nyt/\">NY Times</a></li> <?php if ($_user): ?> <li id=\"navSettings\"><a href=\"/user/settings.php\">Settings</a></li> <?php endif; ?> </ul> <div id=\"loading_status\"> <img id=\"loader\" src=\"/media/images/loader.gif\" border=\"0\" alt=\"\" /> ¬ <span id=\"ltext\">Loading icons...</span> </div> </div> Home Icon XHTML

#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

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

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

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

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

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

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

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.

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

SAVE SPACE Use ob_start(\"ob_gzhandler\") 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.

Step 1: <div id=\"card\" class=\"card\" onclick=\"flip(event)\"> <div id=\"front\" class=\"front face\"> <p> <br> </p> </div> <div id=\"back\" class=\"back face\"> <p> <br> </p> </div> Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. </div> Simple Code

Step 1: <div id=\"card\" class=\"card\" onclick=\"flip(event)\"> <div id=\"front\" class=\"front face\"> <p> <br> </p> </div> <div id=\"back\" class=\"back face\"> <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

Step 1: <div id=\"card\" class=\"card\" onclick=\"flip(event)\"> <div id=\"front\" class=\"front face\"> <p> <br> </p> </div> <div id=\"back\" class=\"back face\"> <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

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.

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 = \"SliderToolbarItemIdentifier\", AddToolbarItemIdentifier = \"AddToolbarItemIdentifier\", RemoveToolbarItemIdentifier = \"RemoveToolbarItemIdentifier\"; @implementation AppController : CPObject { CPURLConnection tagConnection; CPString lastIdentifier; CPDictionary photosets; CPWindow theWindow; CPCollectionView listCollectionView; CPCollectionView photosCollectionView; } - (void)applicationDidFinishLaunching:(CPNotification)aNotification { .... Cappuccino Example

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.

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-speciﬁc stylesheet that hides unnecessary content and restyles your site to ﬁt 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.

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.

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

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

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 ﬁle 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.

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.

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.

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 ﬁlesystem. If you user is likely to be o ine. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.

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.

Jargon Alert Deck Refers to the web presence maintained by a carrier. When you access the web from a mobile device, the ﬁrst 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.

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.

Jargon Alert Device Detection The method of routing mobile devices to appropriate mobile specﬁc sites using the mobile browsers user agent string. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.

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 speciﬁc .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.

Publish only one mobile speciﬁc 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.

Route to the best possible mobile speciﬁc 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.

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.

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd\"> <html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\" lang=\"en\"> <head> <title>Mobile 2.0</title> <meta http-equiv=\"Content-Language\" content=\"en-us\" /> <meta http-equiv=\"Content-type\" content=\"text/html; charset=utf-8\" /> <link href=\"assets/styles/screen.css\" rel=\"stylesheet\" type=\"text/css\" media=\"screen\" /> <link href=\"assets/styles/mobile.css\" rel=\"stylesheet\" type=\"text/css\" media=\"handheld\" /> </head> <body> Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners. <div id=\"container\"> <div id=\"header\"> <h1>Mobile 2.0 Conference</h1> <div id=\"loc\">San Francisco, November 6, 2006</div> <div id=\"spons\">Presented by Mobile Monday London and San Francisco</div> <ol> <li><a href=\"#speakers\" accesskey=\"1\">Speakers</a></li> <li><a href=\"#schedule\" accesskey=\"2\">Schedule</a></li> <li><a href=\"#location\" accesskey=\"3\">Location</a></li> <li><a href=\"#register\" accesskey=\"4\">Register</a></li> </ol> </div> <div id=\"promo\"><a href=\"#register\" title=\"Register Now, Only $45\"></a></div> <div id=\"content\"> <div id=\"speakers\"> <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=\"speakers2\"> <ul> Mobile 2.0 Code

Rely on an alternate domain or subdirectory forcing the user to manually enter or navigate to the mobile speciﬁc site. Copyright © 2008 Brian Fling. All trademarks and copyrights remain the property of their respective owners.

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.

USING MEDIA QUERIES Calling an iPhone stylesheet: <link media=\"only screen and (max-device-width: 480px)\" ¬ href=\"iphone.css\" type= \"text/css\" rel=\"stylesheet\"> To specify a stylesheet for everything else: <link media=\"screen and (min-device-width: 481px)\" ¬ href=\"other.css\" type=\"text/css\" rel=\"stylesheet\"/> Do not use: <link media=\"handheld\"... 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.

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.

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.

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

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.