Web Directions South 2007: Mobile Design and Development Workshop

Slide 1: Mobile Web Design & Development everything you need to know about creating sites for the mobile web from start to finish Brian Fling, Principal & Director of Strategy, Blue Flavor Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 3: Who am I? * Co-founder & Principal of Blue Flavor. * Mobile Designer since 2000. * Have 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. * Run mobiledesign.org, the largest network of mobile designers. * Author of dotMobi Developers Guide. Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 4: Agenda 09:00 Part One—The Mobile Ecosystem Understanding the mobile technology and landscape. 10:30 Morning Tea 11:00 Part Two—Designing for Context Designing for how people use information outside the web browser. 12:30 Lunch 1:30 Part Three—Mobile Web Development What you need to know to develop for mobile devices. 3:00 Afternoon Tea 3:30 Part Four—Mobile 2.0 The future of mobile in the post iPhone age. 5:00 End Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 9: Jargon Alert Mobile Portable personal communication devices able to connect voice calls or data requests wirelessly. Not to be confused with “cellular” or “cell.” Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 10: Jargon Alert Mobile Web The collective term for websites designed for viewing on a mobile device. Websites are published and accessed via the Internet just like a regular desktop website. Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 12: Understanding and patience of the Mobile Ecosystem is one of the most crucial skills of the Mobile Web. Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 14: Some Obstacles of Mobile Hundred of devices Dozens of mobile web browsers Operator controlled Limited input or output Limited guidelines or resources “No Standards” People don’t “get it” The list goes on.... Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 15: Layers of Mobile Services Applications The mobile ecosystem Application Frameworks has many layers. Operating Systems Each with their own Platforms complexities and Handsets obstacles. Networks Operators Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 16: 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 Networks that provides services for Operators Operators mobile phone subscribers. Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 17: 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 © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 18: Rank Company Primary Markets Network Subscribers* 1 China Mobile China (including Hong Kong) GSM, GPRS, EDGE 337.9 mil Europe, Australia, New Zealand, GSM, GPRS, EDGE, 2 Vodafone 206 mil Africa UMTS, HSDPA GSM, GPRS, EDGE, 3 Telefonica Europe, Latin America 154.8 mil UMTS, HSDPA Copyright © 2007 Blue Flavor. 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 137.2 mil UMTS, CDMA GSM, GPRS, EDGE, 6 T-Mobile Europe, USA 111.8 mil UMTS, HSDPA GSM, GPRS, EDGE, 7 MTS Russia 74.67 mil UMTS GSM, GPRS, EDGE, 8 Orange Europe, Netherlands, Africa 73.2 mil UMTS, HSDPA GSM, GPRS, EDGE, 9 Telenor Netherlands, Eastern Europe 68 mil UMTS GSM, GPRS, EDGE, 10 AT&T USA 63.7 mil UMTS, HSDPA * Proportionate subscribers in millions as of June 2007. Sources: Companies Annual Reports Top Network Operators

Slide 19: Jargon Alert MVNO Mobile Virtual Network Operator A branded wireless provider that does not own or operate a wireless network. Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 20: Jargon Alert ARPU Average Revenue Per User A term used to describe the financial value of a program, application or service. Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 21: Layers of Mobile Services Applications Mobile networks communicate through Application Frameworks electromagnetic radio waves Operating Systems with a cell site base station, the antennas of which are Platforms usually mounted on a tower, pole or building. Handsets They are often referred to by Networks Networks their generation and/or Operators standard. Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 22: Jargon Alert G as in 2G, 2.5G and 3G. The generations of mobile networks. Officially there are only 1G, 2G & 3G, but several midpoints have been defined as 2.5G, 2.75G, etc. Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 23: 1G 2G 2.5G 3G Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. •Over time cellular networks have evolved •Unfortunately unlike other technology, Mobile moves slowly, but why? •Physical Infrastructure •Subsidization & Consumer Adoption Network Generations

Slide 24: 1G 2G 2.5G •Portable! 1st Generation •Voice calls only than a pay phone Fits in a Briefcase •Costs more per call 3G Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 25: 1G 2G 2.5G 3G •GSM, CDMA, TDMA, iDEN Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. •Less power needed, much smaller •Better voice quality •Added SMS •Still just a phone 2nd Generation

Slide 26: 1G 2G 2.5G 3G •GPRS, HSCSD, WiDEN Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. •Data-capable devices •Addition of Mobile Web •Camera phones & MMS •Mass adoption as airtime rates lower The 2G/3G Transition

Slide 27: 1G 2G 2.5G 3G •W-CDMA, HSDPA, EVDO Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. •In the early stages today •“Broadband” Speeds •Add-on features like LBS and media players •Slow uptake 3rd Generation

Slide 28: 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 © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 29: 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 © 2007 Blue Flavor. 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

Slide 30: 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 © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 31: Layers of Mobile Services Applications Application Frameworks Operating Systems A mobile handset or “mobile Platforms phone” is a long-range, portable electronic device Handsets Handsets used for mobile Networks communication. Operators Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 33: PDAs Keyboard, Stylus Applications Smart Phones Phone, Web, SMS Feature Phones Comparing Mobile Devices Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 34: Layers of Mobile Services Applications Application Frameworks Operating Systems The core mobile development platform in which all Platforms Platforms software is written. Handsets Networks Operators Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 35: Licensed Java ME (previously known as Java 2 Platform, Micro Edition or J2ME) is a specification of a subset of the Java platform aimed at providing a certified collection Java ME 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 © 2007 Blue Flavor. 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 RIM’s BlackBerry Java-based Danger’s Hiptop Java-based Apple’s iPhone Objective-C Mobile Platforms

Slide 36: Layers of Mobile Services Applications Application Frameworks Operating systems are common in Smart Phones, Operating Systems Operating Systems but rare in Feature phones. Platforms Handsets Networks Operators Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 37: Symbian OS is a proprietary operating system, designed for mobile devices, with Symbian associated libraries, user interface frameworks and reference implementations of common tools. Windows Mobile is a compact operating system combined with a suite of basic Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Windows Mobile 6 applications for mobile devices based on the Microsoft Win32 API Used by Palm’s TREO line of mobile phones, though gradually being replaced by Palm OS Windows Mobile. Increasingly used in mobile phones. Motorola announced the next RAZR will use Linux Linux as its Operating System. Mac OS X Used by Apple’s iPhone. Mobile Operating Systems

Slide 38: Layers of Mobile Services A software framework that is Applications used to implement the standard structure of an Application Frameworks Application Frameworks application for a specific Operating Systems operating system. Platforms Handsets Networks Operators Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 39: Applications written in the Java ME framework can often be deployed across the Java majority of Java-based devices. Applications written in the BREW framework can often be deployed across the Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. BREW majority of BREW-based devices. Applications written using the Flash Lite 2.0 and Action Script 2.0 frameworks can Flash Lite run using the Flash Lite Player. Applications written using the Win32 API can be deployed across the majority of Windows Mobile 6 Windows Mobile-based devices. Web Applications can be deployed across the majority of devices that support the Web WAP 2.0 specifications and run using a mobile web browser. Application Frameworks

Slide 40: Layers of Mobile Mobile applications often are Services designed to serve a particular function or purpose. Applications Applications Example applications may Application Frameworks include Games, Web Browser, Camera or Media Operating Systems Player. Platforms Handsets Networks Operators Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 41: 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 Operating Systems include The Internet, Messaging or Location. Platforms Handsets Networks Operators Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 49: Population of The United States Population of China The Population of the Earth Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 50: Mobile Web of Today Global Internet Users Global Mobile Web Access Mobile Subscribers Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 53: Mobile will revolutionize the way we gather and interact with information in the next three years. Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 55: 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 Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. 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

Slide 56: 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 © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 66: The 3C’s of the Mobile Web * Cost If you don't develop your mobile website responsibly, the user could get stuck with a big bill in order to view your content. * Content Issues like navigation, image sizes, page weight and scripts all need to be considered when thinking about your website on mobile devices. * Context What does your website add to the users mobility? How do you add value to the their physical context? What is the context in which they will use your site? On a bus or train? Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 69: Home About Us Company Press Executives Org Chart Overview Releases Products Standard Home Suite Pro Suite Whitepapers Suite Services Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. License Installation Product Consulting Management Support Services Services Services Services Support Support Intranet Office Hours Contact Request Login News & Events Press News Events Releases Blog Contact Contact Sales Offices Form A Bad Mobile IA

Slide 70: Information Architecture * Your IA will be the foundation of your product. Think long-term, not what it is, but what will it become. The more complex the IA, the actions and effort is required from the user. * Keep it simple. Remember your goals. Find the tasks that maps to goals. * Good trigger labels are crucial in mobile. They should be short, descriptive and meet user expectations. Never be clever. Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 71: 5 Tips for Mobile IA * Limit categories to 5 * Limit links to 10 * No more than 5 levels deep * At least one content item per category * Prioritize links by activity or popularity Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 72: Home Blog Events News & Services About Us Contact Us Products & Support Locations A Good Mobile IA Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 74: Jargon Alert Clickstream Used to refer to the series of clicks, or path, the user takes to reach a destination in an informational space. Often used to describe user behavior gathered from server logs, but also can be used in early planning, as in “creating the optimal clickstream.” Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 75: Products & Services Support About Us Product & Services Overviews Company Home Overview Navigation Navigation Footer Executive Overview Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Navigation Latest News Footer Latest Blog Posts Main Phone Blog Main Address News & Events Footer Contact Events Recent Posts Locations Phone Legend Numbers News Items Primary Navigation Page Address Footer Navigation Contact Form Content Area Footer Navigation Link to Page Footer Designing Clickstreams

Slide 81: Effort Reward UI Device Time to complete task UI App Design Gateway Effort versus Reward Design Content Goal Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 82: 128 pixels 176 pixels 320 pixels 320 pixels 240 pixels 160 pixels 220 pixels 240 pixels 320 pixels 320 pixels 200 x 250 pixels Multiple Screens Sizes Recommended Max Size Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 83: Comparing Mobile Devices * Many devices are similar, but vary based Feature Phones on how they are Phone, WAP, SMS provisioned. * Look only at mass market phones. * Do not design for smart phones or PDA’s. Smart

Slideshare.net (beta)