Developing for Mobile Web

  • 1,893 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Thanks for sharing this wonderful slide, from where I can download it?
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
1,893
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
1
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 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
  • 2. Who has developed a website before?
  • 3. Why develop for mobile web?
  • 4. 6.8 billion people in the worldhttp://www.robert-alonso-photos.com/wp-content/uploads/2009/08/3ConeyIslandBeach.jpg
  • 5. 3.4 billion people with mobile devices Flickr: Batikart
  • 6. Mobile is the 7th Mass Media
  • 7. Print RecordingsRadio TelevisionCinema The Internet Mobile
  • 8. 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
  • 9. Unique Benefits
  • 10. First truly personal mass media Permanently carried First “always on” mass media Built-in payment channel Most accurate audience measurementhttp://www.flickr.com/photos/blogumentary/3947228410/sizes/o/in/faves-caseymckinnon/ Source: http://en.wikipedia.org/wiki/Seven_mass_media
  • 11. Desktop vs. Mobile Browsinghttp://www.motivationalmemo.com/wp-content/uploads/2010/06/change.jpg
  • 12. Mobile Users vs. Desktop Users Source: Morgan Stanley Research, http://gigaom.com/2010/04/12/mary-meeker-mobile-internet-will-soon-overtake-fixed-internet/
  • 13. 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
  • 14. What browsers should you develop for? Source: http://gs.statcounter.com/#mobile_browser-na-yearly-2009-2011-bar
  • 15. Mobile Grade Browsers A A browser that’s capable of, at minimum, utilizing media queries, support HTML5, WebKit Engine, CSS, JavaScript B A browser that’s capable of minimum CSS and JavaScript C A browser that is not capable of utilizing media queries. Watch out for complicated JS, CSS — they DON’T support them Source: JQuery Mobile, http://jquerymobile.com/gbs/
  • 16. 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
  • 17. Browser Engines‣ WebKit (BlackBerry 6.0, Android, iOS)‣ Presto (Opera Mini)‣ NetFront (Playstation)‣ Gecko (Camino, Firefox, SeaMonkey)‣ and more
  • 18. Go with WebKit‣ WebKit (BlackBerry 6.0, Android, iOS)‣ Presto (Opera Mini)‣ NetFront (Playstation)‣ Gecko (Camino, Firefox, SeaMonkey)‣ and more
  • 19. WebKit and HTML5‣ WebKit is not a browser, it’s an engine‣ Most A-Grade mobile browsers are based on WebKit and support HTML5
  • 20. HTML5‣ Why you want to make use of HTML5 features in your web app/site
  • 21. 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‣ Offline Storage via cache.manifest file <html manifest=”cache.manifest”> CACHE MANIFEST index.html css/basic.css images/logo.png images/footer.png‣ and...
  • 22. HTML5 - Location BasedServices‣ W3C Specification: http://dev.w3.org/geo/api/spec-source.html
  • 23. CBC Mobile Services More under cbc.ca/mobile/services
  • 24. 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.
  • 25. CBC Mobile Sites TOUCH RICH TEXT cbc.ca/m/touch cbc.ca/m/rich cbc.ca/m/text Device Touch Devices Mostly BB devices Feature Phones Browser A-Grade B/C-Grade C-Grade ‣Extended use of JavaScript ‣Simple CSS and JavaScript ‣ No images/photos and Ajax ‣Simple Media (Story images, ‣ Simple navigation, less links ‣WebKit based, CSS3, CSS Photo Galleries) ‣ No complicated JavaScript, simple Features sprites, conditional CSS ‣Use of resized story images CSS ‣Photo galleries and videos (prefix s_) ‣Use of resized story images (prefix t_)Site/Device
  • 26. Web App, Native App and Hybrid App‣ Why would you want to have a web app in addition to/ instead of a native app?
  • 27. 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‣ Offline 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. notificationExample: Google Gmail Hybrid Apps‣ Web app wrapped around native app‣ Access to native APIs Example: BlackBerry WebWorks, iOS/Android with webviews
  • 28. What do you have to do to enable your website for mobile?
  • 29. Mobile Information Architecture"If you design for mobile first, you can create agreementfirst on what matters most." — Luke Wroblewski, previous Chief Design Architect at Yahoo!
  • 30. 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
  • 31. 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 ...
  • 32. 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/6.0.0.135 Mobile Safari/ 534.1+ v v v
  • 33. Redirect to Mobile‣ Server-side ‣ Webserver: http.conf # Catch iPhone-users first RewriteCond %{HTTP_USER_AGENT} .*Mobile.*Safari RewriteRule ^[./](.*)$ http://www.cbc.ca/m/touch ‣ SSI <!--#if expr="$HTTP_USER_AGENT = /BlackBerry/" --> <meta http-equiv="refresh" content="0; url=www.cbc.ca/m/rich"> <!--#endif -->
  • 34. Redirect to Mobile‣ Edge Side Include <esi:eval src="mobileuseragents.esi" dca="none" /> <esi:choose> <esi:when test="$(HTTP_USER_AGENT) matches_i $(touch)" matchname="touchmatch"> $set_redirect(http://www.cbc.ca/m/touch/) </esi:when> <esi:when test="$(HTTP_USER_AGENT) matches_i $(rich)" matchname="richmatch"> $set_redirect(http://www.cbc.ca/m/rich/) </esi:when> <esi:otherwise> <esi:include src="index.html"/> </esi:otherwise> </esi:choose>‣ Client-side: JavaScript if (navigator.userAgent.indexOf("iPod") != -1 || navigator.userAgent.indexOf("iPhone") != -1){ window.location.href = “http://www.cbc.ca/m/touch”; }
  • 35. Redirect to Mobile‣ But don’t limit user to full site access
  • 36. Customizing for Devices/Platforms‣ Create the best user experience possible based on user’s platform/device‣ Know device/browser specific features and take advantage of them
  • 37. Customizing for Devices/OS‣ Using JavaScript to detect user agent and show content only based on that: if (navigator.userAgent.indexOf("iPod") != -1 || navigator.userAgent.indexOf("iPhone") != -1){ // do device specific stuff, e.g. show QT videos or show menu items }‣ Using Media Queries, e.g. calling an iPhone/Mobile stylesheet: <link media="only screen and (max-device-width: 480px)" href="mobile.css" type= "text/css" rel="stylesheet"> <link media="screen and (min-device-width: 481px)" href="other.css" type="text/css" rel="stylesheet"/>
  • 38. 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"/>
  • 39. Customizing for Devices/OS‣ Fallbacks ‣ CSS <!--#if expr="$HTTP_USER_AGENT = /BlackBerry/" --> <!--#if expr="$osversion != /4.2([^&]*)/" --> <div class="nocss">You dont have CSS enabled. To have a better experience, please turn on background images and CSS on your device.</div> <!--#endif --> <!--#endif --> ‣ JavaScript <noscript>To access the site with all its functionality, please enable JavaScript.</noscript>
  • 40. 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"/>
  • 41. Optimization‣ Reduce the page load / page weight as much as possible
  • 42. Optimization‣ Minimize HTTP requests‣ Put CSS at top of page‣ Put JavaScript scripts at bottom of page‣ Avoid images where possible and/or optimize images ‣ Use CSS3 features instead of images, i.e. border radius, gradient border-radius: 10px; /* gecko based browsers */ -moz-border-radius: 10px; background: -moz-linear-gradient(top, #55aaee, #003366); -webkit-border-radius: 10px; /* webkit based browsers */ background: -webkit-gradient(linear, left top, left bottom, from(#55aaee), to(#000000));
  • 43. 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 minified 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
  • 44. 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
  • 45. Things to Consider ‣ If you’re going to target C-grade browsers avoid CSS(3) and JavaScript where possible ‣ Don’t think only because your site looks good on iPhone, it will also look good on old BlackBerry browsers (< OS 5.0) ‣ Compatibility Mobile Table by Peter-Paul Koch (ppk): http://www.quirksmode.org/mobile/
  • 46. Mobile Compatibility Table Source: http://www.quirksmode.org/mobile/
  • 47. Mobile Tools & Frameworks‣ Frameworks: iUi, JQTouch, JQuery Mobile. Sencha ‣ Kitchen Sink: http://dev.sencha.com/deploy/touch /examples/kitchensink/
  • 48. Mobile Tools & Frameworks‣ WURLF: Wireless Universal Resource File ‣ Open Source project ‣ XML configuration file containing information about features and capabilities of many mobile devices (~14000) ‣ Website offers many optimization tools/apps “The main scope of the file 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.” (wurfl.sourceforge.net)
  • 49. WURLF XML <device id="blackberry9800_ver1" user_agent="Mozilla/5.0 (BlackBerry; U; BlackBerry 9800; en) AppleWebKit/534.1+‣ Example: (KHTML, like Gecko) Version/6.0.0.135 Mobile Safari/534.1+" fall_back="blackberry_generic_ver6" actual_device_root="true"> <group id="product_info"> BlackBerry Torch <capability name="pointing_method" value="touchscreen"/> <capability name="uaprof" value="http://www.blackberry.net/go/mobile/profiles/uaprof/9800_edge/6.0.0.rdf"/> <capability name="model_name" value="BlackBerry 9800"/> <capability name="uaprof2" value="http://www.blackberry.net/go/mobile/profiles/uaprof/9800_umts/6.0.0.rdf"/> <capability name="brand_name" value="RIM"/> <capability name="marketing_name" value="Torch"/> <capability name="release_date" value="2010_august"/> </group> <group id="wml_ui"> <capability name="table_support" value="true"/> </group> <device id="blackberry9800_ver1" user_agent="Mozilla/5.0 (BlackBe <!-- ... --> (KHTML, like Gecko) Version/6.0.0.135 Mobile Safari/534.1+" fall_b <group id="display"> actual_device_root="true"> <capability name="physical_screen_height" value="70"/> <group id="product_info"> <capability name="columns" value="36"/> <capability name="dual_orientation" value="true"/> <capability name="pointing_method" value="touchscreen"/> <capability name="physical_screen_width" value="50"/> <capability name="uaprof" value="http://www.blackberry.net/g <capability name="max_image_width" value="360"/> <capability name="rows" value="32"/> <capability name="model_name" value="BlackBerry 9800"/> <capability name="resolution_width" value="360"/> <capability name="uaprof2" value="http://www.blackberry.net/ <capability name="resolution_height" value="480"/> <capability name="max_image_height" value="400"/> </group> <capability name="brand_name" value="RIM"/> <group id="image_format"> <capability name="marketing_name" value="Torch"/> <capability name="jpg" value="true"/> <capability name="release_date" value="2010_august"/> <capability name="gif" value="true"/> </group> <capability name="bmp" value="true"/> <capability name="wbmp" value="true"/> <group id="wml_ui"> <capability name="png" value="true"/> <capability name="table_support" value="true"/> <capability name="colors" value="65536"/> <capability name="tiff" value="true"/> </group> </group> <group id="storage"> <!-- ... --> <capability name="max_deck_size" value="32768"/> <group id="display"> </group> <group id="streaming"> <capability name="physical_screen_height" value="70"/> <capability name="columns" value="36"/> <capability name="streaming_vcodec_h263_0" value="10"/> <capability name="streaming_vcodec_h264_bp" value="1"/> <capability name="dual_orientation" value="true"/> <capability name="streaming_vcodec_mpeg4_sp" value="0"/> </group> <capability name="physical_screen_width" value="50"/> <!-- ... ---> <group id="sound_format"> <capability name="max_image_width" value="360"/> <capability name="rows" value="32"/> <capability name="wav" value="true"/> <capability name="sp_midi" value="true"/> <capability name="resolution_width" value="360"/> <capability name="amr" value="true"/> <capability name="resolution_height" value="480"/> <capability name="midi_monophonic" value="true"/> </group> <group id="bearer"> <capability name="max_image_height" value="400"/> </group> <capability name="wifi" value="true"/> <capability name="max_data_rate" value="384"/> </group> <group id="image_format"> <!-- ... ---> <capability name="jpg" value="true"/> </device> <capability name="gif" value="true"/>
  • 50. What should your development environment look like?
  • 51. 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)
  • 52. 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