Web Design World 2007: iPhone Design and Development Workshop

Slide 1: iPhone and Mobile Development Workshop Brian Fling, Principal & Director of Strategy Garrett Murray, Senior Developer Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 3: Who is Brian? * Co-founder & Principal of Blue Flavor. * Mobile Designer since 2000. * 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, 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: Who is Garrett? * Senior Developer at Blue Flavor. * Web Developer since 1998. * Has worked with hundreds of clients including Pfizer Inc., Business Week Magazine and the United Nations Development Programme. * Created the OS X application xPad and the open-source Ruby on Rails weblog application SimpleLog. * Host of Maniacal Rage Podcast & TV. Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 5: Agenda 2:00 Part I—The Mobile Ecosystem Crash Course Understanding the mobile technology and landscape. 3:00 BREAK 3:15 Part II—Developing for Mobile An overview of the standards for publishing mobile sites. 4:15 BREAK 4:30 Part III—iPhone Nitty-Gritty Practical examples for iPhone development and design. Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 11: 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 12: 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 16: 20 Million England United States of America China European Union Population of the Earth Source:Wikipedia Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 17: Mobile Subscribers Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. Mobile Web Access Desktop Web Access Sources: GSM Association,T-Mobile, Credit Suisse, Pyramid Research Mobile Web of Today

Slide 18: by 2010 Mobile Web Subscribers Mobile Web of Tomorrow Source: Informa Telecoms & Media 2006 Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 19: 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 21: 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 22: 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 28: Smart Phones iPhone Feature Phones Basic Phones 1980 1990 2000 Mobile Evolution 2010 Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 29: 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 30: 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 31: 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 39: The 3Cs 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 42: 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 43: 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 44: 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 45: 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 47: 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 48: 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 54: 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 55: 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 56: Primary Directional Orientation Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. 1 1 Select Previous Link or Scroll Up 2 Select Next Link or Scroll Down 3 4 3 Back or Page Up 4 Forward or Page Down 2 Directional Orientation

Slide 58: Design Type Design Tool Delivery Complexity MSPs J2ME Rich Photoshop Any Very Many BREW Rich Photoshop Carrier Very Few Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. WML Text HTML Web Simple All XHTML-MP Web CSS Web Simple All Flash Lite Rich Flash TBD Semi Few XHTML Rich CSS Web Simple All Flavor Matrix

Slide 60: Mobile Design Tips * Be creative Devices have reached a point where you can be as creative as you want to be. * Remember the goals Put systems in place to regularly check against the goals. * Prototype Create quick examples of the design and interaction. * Test early and often Get opinions of others. Talking to one person is better than none. * Keep it simple Remember if it doesn’t solve a problem or fill a need, lose it. Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 63: Simple Complex Slower SSR Reformat Stylesheets Va l ue Mobile Specific Site Faster Context vs. Content Copyright © 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 65: The Device Detection Problem * 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.

Slide 66: Device Detection Solutions * WURFL http://wurfl.sourceforge.net/ A XML configuration file which contains information about device capabilities and features for a variety of mobile devices. * WALL http://wurfl.sourceforge.net/java/wall.php An abstraction library that adapts content to the target device. * PHP http://www.andymoore.info/php-to-detect-mobile-phones/ PHP script that detects and redirects mobile browsers. * “Reverse” Device Detection Use Javascript to detect desktop browsers. * Stylesheets Use the stylesheet media type to detect mobile browsers. Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 67: 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.

Slide 68: 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.

Slide 73: Agenda 2:00 Part I—The Mobile Ecosystem Crash Course Understanding the mobile technology and landscape. 3:00 BREAK 3:15 Part II—Developing for Mobile An overview of the standards for publishing mobile sites. 4:15 BREAK 4:30 Part III—iPhone Nitty-Gritty Practical examples for iPhone development and design. Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 77: 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.

Slide 78: 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.

Slide 80: <? <?xmlversion=”1.0” encoding="UTF-8"?> ?> xml version="1.0" encoding=”UTF-8” <!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN" <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN” "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> “http://www.wapforum.org/DTD/xhtml-mobile10.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> xmlns="http://www.w3.org/1999/xhtml"> <html <head> <title>Hello World!</title> Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. <title>Hello World!</title> <meta http-equiv=”content-type” content=”application/vnd. <meta http-equiv="content-type" content="application/vnd.wap.xhtml+xml"/> wap.xhtml+xml” /> </head> </head> <body> <body> <div id="intro"> <div id=”intro”> <h1>Hello<h1>Hello World!</h1> World!</h1> </div> </div> <div id="content"> <div id=”content”> <p>This is a simplea XHTML-MP Page</p> <p>This is simple XHTML-MP Page</p> </div> </div> </body> </body> </html> </html> Example XHTML-MP

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

Slide 82: body { body { border-top: 10px solid #439213; border-top: 10px solid #439213; font: 10px Arial, Helvetica, sans-serif; font: 10px Arial, Helvetica, sans-serif; vertical-align: top; padding: 0 8px; padding: 0 8px; margin: 0px; margin: 0px; } } Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners. p { p { margin: 10px 0; margin: 10px 0; } } a { a { color: #439213; color: #439213; } } img { img { vertical-align: middle; vertical-align: middle; } } Example Wireless CSS

Slide 86: Correct Encoding & Doctype * Character Encoding Ensuring the use of the correct character encoding and doctype makes sure that the page renders as expected. <?xml version=”1.0” encoding=”UTF-8” ?> * 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. <!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.wapforum.org/DTD/xhtml- mobile10.dtd”> Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 87: Use Well-formed Code * All elements should be closed, e.g. <br />. * All non-empty elements should be closed. <p>Example Text</p><p>Example Text</p> * All elements must be closed in the reverse order. <em><strong>Example Text</strong></em> * The alt attribute should be used for all images. <img src=”image.png” alt=”Image Description” /> Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 88: Use Well-formed Code (con’t) * Text should appear within a block level element and not directly in the body. <body><p>Example Text</p></body> * Inline elements should always nest with block level elements. <h2><em>Example Text</em></h2> * All attributes should appear within quotes. <hr noshade=”true”/> * All elements and attributes should use lowercase. <p class=”sm”>Example Text <span>is nice</span></p> Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 89: Avoid Tables for Layout * Layout tables become a big problem when viewed in multiple mobile browsers. <body> <div id=”header”>  </div> <div id=”content”>  </div> <div id=”footer”>  </div> </body> Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 90: Place Navigation in the Content Body * Given the vertical orientation of the mobile page, we show only navigation that’s relevant to the page. <div id=”content”> <ol> <li><a href=”news.html”>News</a><li> <li><a href=”products.html”>Our Products</a></li> <li><a href=”customers.html”>Our Customers</a></li> <li><a href=”about.html”>About Us</a></li> <li><a href=”contact.html”>Contact Us</a></li> </ol> </div> Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 91: Use accesskeys in the Primary Navigation * The primary navigation should include an assigned accesskey that corresponds to a numbered keypad whenever possible. <li><a href=”news.html” accesskey=”1”>News</a></li> <li><a href=”products.html” accesskey=”2”>Our Products</a></li> <li><a href=”customers.html” accesskey=”3”>Our Customers</a></li> <li><a href=”about.html” accesskey=”4”>About Us</a></li> <li><a href=”contact.html” accesskey=”5”>Contact Us</a></li> Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 92: Use Ordered Lists for Navigation * Using ordered lists for navigation rather than unordered lists will indicate to the use the associated accesskey. <ol> <li><a href=”news.html” accesskey=”1”>News</a></li> <li><a href=”products.html” accesskey=”2”>Our Products</a></li> <li><a href=”customers.html” accesskey=”3”>Our Customers</a></li> <li><a href=”about.html” accesskey=”4”>About Us</a></li> <li><a href=”contact.html” accesskey=”5”>Contact Us</a></li> </ol> Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

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

Slide 94: 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. <a href=”tel:+012065450210”>+1 206 545-0210</a> Copyright © 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Slide 95: 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.

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

Slide 100: <!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"

Slideshare.net (beta)