Overview ‣ The Power and Future of Mobile ‣ Mobile Browsers and Engines (WebKit/HTML5) ‣ CBC Mobile Services (Apps/Sites) ‣ Web Apps, Native Apps and Hybrid Apps ‣ Mobile Web Information Architecture ‣ Enabling Your Site for Mobile Web ‣ Optimization / Best Practices / (Debugging) Tools ‣ Links/Literature Resources
Who has developed a website before?
Why develop for mobile web?
6.8 billion people in the worldhttp://www.robert-alonso-photos.com/wp-content/uploads/2009/08/3ConeyIslandBeach.jpg
3.4 billion people with mobile devices Flickr: Batikart
Mobile is the 7th Mass Media
Print RecordingsRadio TelevisionCinema The Internet Mobile
Print Recordings Radio Television Cinema The Internet MobileMobile is the only mass media that can do everything the previous six can do Source: http://en.wikipedia.org/wiki/Seven_mass_media
First truly personal mass media Permanently carried First “always on” mass media Built-in payment channel Most accurate audience measurementhttp://www.ﬂickr.com/photos/blogumentary/3947228410/sizes/o/in/faves-caseymckinnon/ Source: http://en.wikipedia.org/wiki/Seven_mass_media
Desktop vs. Mobile Browsinghttp://www.motivationalmemo.com/wp-content/uploads/2010/06/change.jpg
Mobile Users vs. Desktop Users Source: Morgan Stanley Research, http://gigaom.com/2010/04/12/mary-meeker-mobile-internet-will-soon-overtake-ﬁxed-internet/
Enough Reasons to go mobile? ...but what mobile platform should you target?Let’s look at mobile browsers and engines http://bunkadefresh.com/wp-content/uploads/2010/07/evophones2.jpg
What browsers should you develop for? Source: http://gs.statcounter.com/#mobile_browser-na-yearly-2009-2011-bar
Device vs. BrowserFeature Phones Smart Phones Touch Phones FlipPhone, e.g. Samsung e.g. most BlackBerry’s before Torch (i.e. Bold, Curve) e.g. Google Nexus, BB Torch, iPhone C B A A http://gizmodo.com/5090988/mobile-browser-battlemodo-which-phones-deliver-the-real-web
Browser Engines‣ WebKit (BlackBerry 6.0, Android, iOS)‣ Presto (Opera Mini)‣ NetFront (Playstation)‣ Gecko (Camino, Firefox, SeaMonkey)‣ and more
Go with WebKit‣ WebKit (BlackBerry 6.0, Android, iOS)‣ Presto (Opera Mini)‣ NetFront (Playstation)‣ Gecko (Camino, Firefox, SeaMonkey)‣ and more
WebKit and HTML5‣ WebKit is not a browser, it’s an engine‣ Most A-Grade mobile browsers are based on WebKit and support HTML5
HTML5‣ Why you want to make use of HTML5 features in your web app/site
HTML5 Rocks!‣ Easy Markup / new semantic elements <video src="movie.mp4" controls="controls"> your browser does not support the video tag </video>‣ New, smarter form controls, i.e. placeholder, date, number, url <input type="email" placeholder="Enter your email address"/> <input type=”date”/> <input type="number" min="1" value="4" name="2" size="2"/> <input type=”url”/>‣ Client-Side database, SQLite‣ Ofﬂine Storage via cache.manifest ﬁle <html manifest=”cache.manifest”> CACHE MANIFEST index.html css/basic.css images/logo.png images/footer.png‣ and...
CBC Mobile Services More under cbc.ca/mobile/services
CBC Mobile Site Strategy‣ To cover A, B and C grade mobile browsers by creating three main mobile sites that encompass the different features and limitations of those browsers.
Web App, Native App and Hybrid App‣ Why would you want to have a web app in addition to/ instead of a native app?
Web vs. Native vs. Hybrid Apps Web Apps Native Apps‣ Easy distribution/installation ‣ Possible complicated distribution trough app‣ Native Look & Feel stores, fees/charges‣ Works on all platforms ‣ Strict UI Guidelines‣ Single click using HTML5,Ajax ‣ Easy attention through app store‣ Ofﬂine Storage ‣ Platform-dependent‣ No advertisement restrictions ‣ New app for each platform (knowledge of‣ Fast development time, any web developer language, Objective-C, Java etc) can create web app ‣ Full Access to native APIs, features, i.e.‣ BUT Cannot access all native features, i.e camera, calendar, address book, push compass, camera etc. notiﬁcationExample: Google Gmail Hybrid Apps‣ Web app wrapped around native app‣ Access to native APIs Example: BlackBerry WebWorks, iOS/Android with webviews
What do you have to do to enable your website for mobile?
Mobile Information Architecture"If you design for mobile ﬁrst, you can create agreementﬁrst on what matters most." — Luke Wroblewski, previous Chief Design Architect at Yahoo!
Mobile Information Architecture ‣ Touch phones: big buttons, most of the real-estate should be clickable ‣ Smart phones: track ball, avoid too many links as user has to scroll down, use easy navigation items, i.e. anchors
Mobile Information ArchitectureGuidelines for Mobile URLs:Make it easy for user to type in your mobile site URL ‣ m.cbc.ca ‣ touch.facebook.com ‣ mobile.twitter.comand enable auto redirection ...
Redirect to Mobile ‣ Decide on user agent stringsMozilla/5.0 (webOS/1.0; U; en-US) Mozilla/5.0 (BlackBerry; U; SAMSUNG-D900E/D900EXAIC1AppleWebKit/525.27.1 (KHTML, like BlackBerry 9800; en) AppleWebKit/ NetFront/3.5 Profile/MIDP-2.0Gecko) Version/1.0 Safari/ 534.1+ (KHTML, like Gecko) Configuration/CLDC-1.1525.27.1 Pre/1.0 Version/220.127.116.11 Mobile Safari/ 534.1+ v v v
Redirect to Mobile‣ But don’t limit user to full site access
Customizing for Devices/Platforms‣ Create the best user experience possible based on user’s platform/device‣ Know device/browser speciﬁc features and take advantage of them
Customizing for Devices/OS‣ BlackBerry users get extra information presented <!--#if expr="$HTTP_USER_AGENT = /BlackBerry/" --> <div class="wspromo"> <a href="/m/rich/websignal.html" title=”Subscribe to WebSignal Alert”> Get CBCs Websignal Alert</a> </div> <!--#endif -->‣ iOS: Disable automatic phone number detection <meta name = "format-detection" content ="telephone=no"/>
Make it a Web App‣ iPhone: Full screen without browser bar <meta name="apple-mobile-web-app-capable" content="yes" /> <meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />‣ iPhone: Add to Home Screen Box‣ iPhone: Home Screen Icon <link rel="apple-touch-icon" href="img/cbc-touch-icon.png"/>
Optimization‣ Reduce the page load / page weight as much as possible
Optimization‣ Use image sprites‣ Image optimization via Smush.it‣ Consider mobile image resizer solutions: Resizing images for all major device widths via device detection‣ Don’t scale images in HTML‣ Use miniﬁed scripts, i.e. js, css (YSlow)‣ Reduce number of DOM Element //avoid var divArr = document.getElementByClassName(“story-images”); //The number of DOM elements is easy to test, just type in Firebugs console: document.getElementsByTagName(*).length‣ Read more under http://developer.yahoo.com/performance/rules.html
CBC Full-site vs. CBC mobile sites cbcnews.ca cbc.ca/m/touch/news cbc.ca/m/rich/news (including Canada Votes) (including Canada Votes) 837.5 K 72.1 K 28.9 K cbc.ca/m/text/news >> HTTP Requests - 8, Total Weight: 4.2K
Mobile Compatibility Table Source: http://www.quirksmode.org/mobile/
Mobile Tools & Frameworks‣ WURLF: Wireless Universal Resource File ‣ Open Source project ‣ XML conﬁguration ﬁle containing information about features and capabilities of many mobile devices (~14000) ‣ Website offers many optimization tools/apps “The main scope of the ﬁle is to collect as much information as we can about all the existing mobile devices that access WAP pages so that developers will be able to build better applications and better services for the users.” (wurﬂ.sourceforge.net)
What should your development environment look like?
Setting up your devenvironment‣ Eclipse or any other choice of text editor‣ Webserver / Apache‣ Firefox/Firebug for Debugging ‣ Web Development PlugIn ‣ YSlow integrated into Firebug ‣ User agent Switcher‣ Emulators/Simulators (Watch out!) ‣ Available for Palm Pre, iPhone (Mac only), Android, BlackBerry Simulator (PC only)
Links/Literature‣ O’Reilly, Brian Fling: Mobile Design and Development‣ Mobile First: http://www.youtube.com/watch?v=NjE_Or4VIlU‣ Device Atlas: http://deviceatlas.com/‣ W3C mobileOK Checker: http://validator.w3.org/mobile/‣ W3C Mobile Best Practices: http://www.w3.org/TR/mobile-bp/‣ Design Principles for the Mobile Web: http://articles.sitepoint.com/article/ designing-for-mobile-web‣ Safari Web Apps: http://developer.apple.com‣ Nokia Mobile Design Patterns: http://wiki.forum.nokia.com/index.php/ Category:Mobile_Design_Patterns