Developing for Mobile Web

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?

6.8 billion people in the world

http://www.robert-alonso-photos.com/wp-content/uploads/2009/08/3ConeyIslandBeach.jpg

3.4 billion people with mobile devices

Flickr: Batikart

Print Recordings

Radio Television

Cinema The Internet

Mobile

Print Recordings

Radio Television

Cinema The Internet

Mobile

Mobile 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 measurement

http://www.ﬂickr.com/photos/blogumentary/3947228410/sizes/o/in/faves-caseymckinnon/ Source: http://en.wikipedia.org/wiki/Seven_mass_media

Desktop vs. Mobile Browsing
http://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

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/

Device vs. Browser

Feature 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...

HTML5 - Location Based
Services
‣ W3C Speciﬁcation: http://dev.w3.org/geo/api/spec-source.html

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.

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 (preﬁx s_)
‣Use of resized story images
(preﬁx t_)

Site/Device

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ﬁcation

Example: 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!


‣ 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


Guidelines for Mobile URLs:
Make it easy for user to type in your mobile site URL
‣ m.cbc.ca
‣ touch.facebook.com
‣ mobile.twitter.com

and enable auto redirection ...

Redirect to Mobile
‣ Decide on user agent strings

Mozilla/5.0 (webOS/1.0; U; en-US) Mozilla/5.0 (BlackBerry; U; SAMSUNG-D900E/D900EXAIC1
AppleWebKit/525.27.1 (KHTML, like BlackBerry 9800; en) AppleWebKit/ NetFront/3.5 Profile/MIDP-2.0
Gecko) Version/1.0 Safari/ 534.1+ (KHTML, like Gecko) Configuration/CLDC-1.1
525.27.1 Pre/1.0 Version/6.0.0.135 Mobile Safari/
534.1+

v v v

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

<meta http-equiv="refresh" content="0; url=www.cbc.ca/m/rich">

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”;
}

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

‣ 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"/>

‣ BlackBerry users get extra information presented

<div class="wspromo">
<a href="/m/rich/websignal.html"
title=”Subscribe to WebSignal Alert”>
Get CBC's Websignal Alert</a>
</div>


‣ iOS: Disable automatic phone number detection

<meta name = "format-detection" content ="telephone=no"/>

‣ Fallbacks

‣ CSS

<div class="nocss">You don't have CSS enabled. To have a better experience,
please turn on background images and CSS on your device.</div>



‣ JavaScript
<noscript>To access the site with all its functionality, please enable JavaScript.</noscript>

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

‣ 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));

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 Firebug's 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

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/

Mobile Compatibility Table

Source: http://www.quirksmode.org/mobile/

Mobile Tools & Frameworks

‣ Frameworks: iUi,
JQTouch, JQuery Mobile. Sencha
‣ Kitchen Sink:
http://dev.sencha.com/deploy/touch
/examples/kitchensink/

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)

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"/>

What should your development
environment look like?

Setting up your dev
environment
‣ 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

Developing for Mobile Web

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Developing for Mobile Web

Semelhante a Developing for Mobile Web (20)

Mais de Barbara Bermes

Mais de Barbara Bermes (9)

Último

Último (20)

Developing for Mobile Web