Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Everything you always wanted to know about the mobile web _ _ But were afraid to ask * *Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Follow Along http://www.blueflavor.com/sxsw2007/Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Who am I?Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Who am I? * Co-founder & Principal of Blue Flavor.Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Who am I? * Co-founder & Principal of Blue Flavor. * Mobile Designer since 2000.Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. 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.Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. 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.Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. 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.Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. 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. Part 1 Why the Mobile Web?Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. 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. Just how big is the Mobile Web?Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. The Size of TexasCopyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. The Size of Texas 20,000,000Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. The Population of the EarthCopyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. The Population of the EarthCopyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. The Population of the EarthCopyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. The Population of the Earth Population of The United StatesCopyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. The Population of the Earth Population of The United States Population of ChinaCopyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Mobile Web of TodayCopyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Mobile Web of Today Mobile SubscribersCopyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Mobile Web of Today Mobile Subscribers Global Mobile Web AccessCopyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Mobile Web of Today Global Internet Users Mobile Subscribers Global Mobile Web AccessCopyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Mobile Web of TomorrowCopyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Mobile Web of Tomorrow Mobile Web Subscribers by 2010Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Mobile Web of Tomorrow Mobile Web Subscribers by 2010Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. How many users are there?Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. How many users are there? Mobile Web UsersCopyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. How many users are there? Mobile Web Users Global Internet UsersCopyright © 2007 Blue Flavor. 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 three years.Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Mobile has the potential to reach anybody through any medium.Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Events TV Billboard Radio Live Website Auditory Kinesthetic Visual Word of Mouth Print Ad Mobile Device IVR SMS IVR SMS WAP SMS QR Code SMS QR Code SMS SMS MMS SMS WAP SMSSMS Bluetooth Notify WAP WAP MMS Email Send to Friend WAP Site Notify Buy WAP Site WAP Site Send to Friend Join Buy Notify Notify Post MMS Send to Friend Notify Send to Friend Join Discuss Send to Friend Notify Down load load Vote Vote Notify Buy Send to Friend NotifyCopyright © 2007 Blue Flavor. 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 © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Prepare for a truly contextual web.Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. We are at the precipice of the next generation of the web.Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Part 2 Creating a Mobile Web StrategyCopyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. “Find a need and fill it.”Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Balancing Goals User Goals Business Goals Technical Goals Sweet SpotCopyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. The 3C’s of the Mobile WebCopyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. 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. Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. 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.Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. 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. Lose anything that doesn’t support the goals.Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Part 3 Mobile Information ArchitectureCopyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. A Bad Mobile IA Home About Us Company Overview Home Suite License Management Services Support Request News Sales Offices Executives Standard Suite Product Services Intranet Login Events Contact Form Press Releases Pro Suite Installation Support Services Office Hours Org Chart Whitepapers Consulting Services Contact Products Services Support News & Events Blog Contact Press ReleasesCopyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Keep it Simple * 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 popularityCopyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. A Good Mobile IA Home About Us Contact Us News & Events Products & Services Support Locations BlogCopyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Remember: Goals, Cost, Content & ContextCopyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. 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. Designing Clickstreams Home Latest Blog Posts Navigation Latest News Footer Products & Services Product & Services Overviews Support Footer Navigation News & Events News Items Events Footer Navigation Contact Locations Contact Form Phone Numbers Primary Address Footer Navigation Main Phone Main Address Blog Recent Posts Footer Navigation About Us Company Overview Executive Overview Footer Navigation Content Area Link to Page Page LegendCopyright © 2007 Blue Flavor. 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 © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Part 4 Mobile Web DesignCopyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Flavors of Mobile Design More Compatible Richer ExperienceCopyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Flavors of Mobile Design More Compatible Richer ExperienceCopyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Effort versus Reward Device UI App UI Gateway Design Content Design Time to complete task Goal Effort RewardCopyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Multiple Screens SizesCopyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Multiple Screens Sizes 128 pixels 160 pixelsCopyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Multiple Screens Sizes 176 pixels 220 pixels 128 pixels 160 pixelsCopyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Multiple Screens Sizes 320 pixels 240 pixels 176 pixels 220 pixels 128 pixels 160 pixelsCopyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Multiple Screens Sizes 240 pixels 320 pixels 320 pixels 240 pixels 176 pixels 220 pixels 128 pixels 160 pixelsCopyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Multiple Screens Sizes 320 pixels 320 pixels 240 pixels 320 pixels 320 pixels 240 pixels 176 pixels 220 pixels 128 pixels 160 pixelsCopyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Multiple Screens Sizes 320 pixels 320 pixels 240 pixels 320 pixels 320 pixels 240 pixels 176 pixels 220 pixels 128 pixels 160 pixels Recommended Max Size 200 x 250 pixelsCopyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Comparing Mobile Devices * Many devices are similar, but vary based on how they are provisioned. * Look only at mass market phones. * Do not design for smart phones or PDA’s. PDAs Smart Phones Feature Phones Phone, WAP, SMS Applications Keyboard, StylusCopyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Directional Orientation Primary Directional Orientation Select Previous Link or Scroll Up Select Next Link or Scroll Down Forward or Page Down Back or Page Up 12 3 4 1234Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Design Horizontally Header Footer Content Navigation NavigationCopyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. The canvas might not be as robust, but there is still a need for designers.Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Part 5 Understanding Mobile Web StandardsCopyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Jargon Alert XHTML-MP Extensible HyperText Markup Language: Mobile Profile A subset of XHTML Basic and HTML. Used as a primary markup language for the WAP 2.0 protocol.Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. XHTML-MPCopyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. XHTML-MP * XHTML Basic and XHTML-MP are virtually indistinguishableCopyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. XHTML-MP * XHTML Basic and XHTML-MP are virtually indistinguishable * XHTML-MP is the predominant language for the mobile web. Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. XHTML-MP * XHTML Basic and XHTML-MP are virtually indistinguishable * XHTML-MP is the predominant language for the mobile web. * It’s possible to use standard tools to create mobile web pages.Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. XHTML-MP * XHTML Basic and XHTML-MP are virtually indistinguishable * XHTML-MP is the predominant language for the mobile web. * It’s possible to use standard tools to create mobile web pages. * Since XHTML-MP is similar to XHTML, the transition to the mobile web need not be complicated to developers.Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. XHTML-MP * XHTML Basic and XHTML-MP are virtually indistinguishable * XHTML-MP is the predominant language for the mobile web. * It’s possible to use standard tools to create mobile web pages. * Since XHTML-MP is similar to XHTML, the transition to the mobile web need not be complicated to developers. * XHTML-MP is the default industry-supported language for mobile web development. Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. XHTML-MP * XHTML Basic and XHTML-MP are virtually indistinguishable * XHTML-MP is the predominant language for the mobile web. * It’s possible to use standard tools to create mobile web pages. * Since XHTML-MP is similar to XHTML, the transition to the mobile web need not be complicated to developers. * XHTML-MP is the default industry-supported language for mobile web development. * Unless a mobile service provider requires providing WML to support older devices, XHTML-MP is the only needed language in mobile web design.Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Example XHTML-MP Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. If you know XHTML. You know XHML-MP.Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Wireless CSSCopyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Wireless CSS * Wireless CSS supports most CSS attributes, but not all of them. Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Wireless CSS * Wireless CSS supports most CSS attributes, but not all of them. * More advanced styling techniques won’t likely work across multiple mobile browsers.Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Wireless CSS * Wireless CSS supports most CSS attributes, but not all of them. * More advanced styling techniques won’t likely work across multiple mobile browsers. * The best advice is to keep your CSS as simple as possible.Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Wireless CSS * Wireless CSS supports most CSS attributes, but not all of them. * More advanced styling techniques won’t likely work across multiple mobile browsers. * The best advice is to keep your CSS as simple as possible. * Try to use document styles versus styleCopyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Keep your code and styles simple and you will do fine on most mobile browsers.Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. W3C InitiativesCopyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. W3C Initiatives * Mobile Web Best Practices Goal: To advocate a variety of coding principles and publishing best practices to developers, publishers and mobile service providers.Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. W3C Initiatives * Mobile Web Best Practices Goal: To advocate a variety of coding principles and publishing best practices to developers, publishers and mobile service providers. * mobileOK Goal: To create machine-readable labels and a mobileOK trustmark to indicate that the mobile web site adheres to the Best Practices recommendations. Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. W3C Initiatives * Mobile Web Best Practices Goal: To advocate a variety of coding principles and publishing best practices to developers, publishers and mobile service providers. * mobileOK Goal: To create machine-readable labels and a mobileOK trustmark to indicate that the mobile web site adheres to the Best Practices recommendations. * Device Description Goal: To create a method of profiling and identifying device capabilities to ease adaptation.Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Jargon Alert One Web The principle of making the same information and services to users regardless of the device used. This is a very misunderstood, misused and commonly debated concept.Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Part 6 Getting started with XHTML-MPCopyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. With a few exceptions you already know how to code for mobile today.Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Correct Encoding & Doctype * Character Encoding Ensuring the use of the correct character encoding and doctype makes sure that the page renders as expected. * XHTML-MP Doctype The document type (doctype) tells the browser how the page needs to render, including the rules and how strictly to follow these rules. Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Use Well-formed Code * All elements should be closed, e.g.
. * All non-empty elements should be closed.

Example Text

Example Text

* All elements must be closed in the reverse order. Example Text * The alt attribute should be used for all images. * Text should appear within a block level element and not directly in the body.

Example Text

* Inline elements should always nest with block level elements.

Example Text

* All attributes should appear within quotes.

---

* All elements and attributes should use lowercase.

Example Text

---

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Avoid Tables for Layout * Layout tables become a big problem when viewed in multiple mobile browsers. Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Place Navigation in the Content Body * Given the vertical orientation of the mobile page, we show only navigation that’s relevant to the page. Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Use accesskeys in the Primary Navigation * The primary navigation should include an assigned accesskey that corresponds to a numbered keypad whenever possible.

News

Our Products

Our Customers

About Us

Contact Us

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Use Ordered Lists for Navigation * Using ordered lists for navigation rather than unordered lists will indicate to the use the associated accesskey.

1. News
2. Our Products
3. Our Customers
4. About Us
5. Contact Us

Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Use Document Styles, Not External Styles * Linking to an external file requires most mobile browsers to first load the XHTML-MP document, and then load the external stylesheet. * When using external stylesheets the user may experience a brief “flash” of unstyled text before the stylesheet has a chance to load. Instead, insert styles into the of a document.Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Linking Phone Numbers * One of the benefits of the mobile web is that its users primarily view it on a phone, allowing the user to quickly and easily make phone calls. +1 206 545-0210Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Forms can be Tricky * Entering data into a mobile web site is often a difficult and time-consuming process. * To avoid wasting the user’s time and causing frustration, use few or no forms. * However, when using forms, keep the needed information as little as possible.Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Part 7 Mobile PublishingCopyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Context vs. Content Mobile Specific Site Stylesheets Reformat SSR Complex Simple Slower Faster ValueCopyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Context vs. Content Mobile Specific Site Stylesheets Reformat SSR Complex Simple Slower Faster ValueCopyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Supporting Devices & BrowsersCopyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Supporting Devices & Browsers * Over 500 devices being sold each year.Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Supporting Devices & Browsers * Over 500 devices being sold each year. * Over 50 mobile browsers to contend with.Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Supporting Devices & Browsers * Over 500 devices being sold each year. * Over 50 mobile browsers to contend with. * Crowding stems from mobile service provider provisioning.Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Supporting Devices & Browsers * Over 500 devices being sold each year. * Over 50 mobile browsers to contend with. * Crowding stems from mobile service provider provisioning. * Mobile service provider linked sites must support all provisioned devices and browsers. Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Supporting Devices & Browsers * Over 500 devices being sold each year. * Over 50 mobile browsers to contend with. * Crowding stems from mobile service provider provisioning. * Mobile service provider linked sites must support all provisioned devices and browsers. * Adopts standards has been around for much longer in mobile. Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Supporting Devices & Browsers * Over 500 devices being sold each year. * Over 50 mobile browsers to contend with. * Crowding stems from mobile service provider provisioning. * Mobile service provider linked sites must support all provisioned devices and browsers. * Adopts standards has been around for much longer in mobile. * Older or poorly designed devices don’t require support.Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Focus on Five.Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Publishing MethodsCopyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Publishing Methods * Educate the user to manually enter a mobile URL such as a folder or sub-domain. e.g. domain.com/mobile or mobile.domain.com.Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Publishing Methods * Educate the user to manually enter a mobile URL such as a folder or sub-domain. e.g. domain.com/mobile or mobile.domain.com. * Detect the mobile device automatically and redirect the user to a location. In this case, the user simply enters domain.com.Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Publishing Methods * Educate the user to manually enter a mobile URL such as a folder or sub-domain. e.g. domain.com/mobile or mobile.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.Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Publishing Methods * Educate the user to manually enter a mobile URL such as a folder or sub-domain. e.g. domain.com/mobile or mobile.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 © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. The Device Detection DilemmaCopyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. The Device Detection Dilemma * Simple Device Detection Publish only one mobile specific site, designed for the lowest supported browser, routing all mobile browsers to it.Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. The Device Detection Dilemma * Simple Device Detection Publish only one mobile specific site, designed for the lowest supported browser, routing all mobile browsers to it. * Advanced Device Detection Programmatically render the best possible mobile specific site to the requesting device.Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. The Device Detection Dilemma * Simple Device Detection Publish only one mobile specific site, designed for the lowest supported browser, routing all mobile browsers to it. * Advanced Device Detection Programmatically render the best possible mobile specific site to the requesting device. * Mobile Stylesheets Code XHTML pages with the mobile context in mind and use the media type attribute to render a mobile stylesheet to mobile devices.Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. The Device Detection Dilemma * Simple Device Detection Publish only one mobile specific site, designed for the lowest supported browser, routing all mobile browsers to it. * Advanced Device Detection Programmatically render the best possible mobile specific site to the requesting device. * Mobile Stylesheets Code XHTML pages with the mobile context in mind and use the media type attribute to render a mobile stylesheet to mobile devices. * No device detection Rely on an alternate domain or subdirectory forcing the user to manually enter or navigate to the mobile specific site.Copyright © 2007 Blue Flavor. 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 profile to tell the server to deliver markup or images based on the browser, screen size and device capabilities.Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. TestingCopyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Testing * Desktop Testing Testing from a normal desktop browser is a great way to start.Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Testing * Desktop Testing Testing from a normal desktop browser is a great way to start. * Browser Tools Browsers like Opera and Firefox have tools specific to mobile testing.Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Testing * Desktop Testing Testing from a normal desktop browser is a great way to start. * Browser Tools Browsers like Opera and Firefox have tools specific to mobile testing. * Emulators Allows for desktop verification without loading on to a device.Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Testing * Desktop Testing Testing from a normal desktop browser is a great way to start. * Browser Tools Browsers like Opera and Firefox have tools specific to mobile testing. * Emulators Allows for desktop verification without loading on to a device. * Device Testing Test as many as you can, but focus on five good mainstream devices.Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Testing * Desktop Testing Testing from a normal desktop browser is a great way to start. * Browser Tools Browsers like Opera and Firefox have tools specific to mobile testing. * Emulators Allows for desktop verification without loading on to a device. * Device Testing Test as many as you can, but focus on five good mainstream devices. * Usability Testing Test early and often with as many users as you can.Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. ResourcesCopyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. .mobi Developers Guide http://dev.mobi Mobile Web Developers Guide Part I: Creating Simple Mobile Sites BRIAN FLING with Ronan Cremin, Jo Rabin and D. Keith RobinsonCopyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. .mobi Mobile Ready Report http://mr.dev.mobiCopyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Mobile Design http://www.mobiledesign.orgCopyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Thank you.Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Brian Fling Co-founder & Director of Strategy, Blue Flavor brian@blueflavor.com tel. +1 206 545-0210 mob. +1 206 351-6060 http://www.blueflavor.com/sxsw2007/