Web Mobile

Pierre-Andr Gungo

guenego@uhp-nancy.fr

Sommaire
Perspectives Contexte Langages Dtection de mobile Meilleures pratiques Tests

Pierre-Andr Gungo

guenego@uhp-nancy.fr

Perspectives
80% de la population mondiale couverte par un rseau mobile 3,3 milliards d'abonns (fin 2007), +50% de la population mondiale, 2e pntration aprs le transistor 1 milliard d'ordinateurs personnels en usage utilisant l'accs Internet 1,2 milliard d'utilisateurs d'internet fixe 800 millions de tlviseurs avec le web mobile, le nombre d'internautes passe de 1,2 4,5 milliard !
Pierre-Andr Gungo 3 guenego@uhp-nancy.fr

Perspectives
Taux de pntration de tlphone capable de se connecter au web (2004)
Japon 79% Reste de lAsie 54% Europe 47% Amerique du nord 37% Brsil 37% Monde 49%

Pourcentage d'internautes accdant au Web par le mobile par rapport au nombre d'abonns en tlphonie portable (2006) :
Allemagne : 34 % Italie : 34% France : 28 % Espagne : 26 % Royaume-Uni : 24 % tats-Unis : 19 %
4 guenego@uhp-nancy.fr

Pierre-Andr Gungo

Perspectives

http://www.w3.org/2007/02/mwibp-webinar-fr/mwibp-webinar-fr-slides#(7)

Pierre-Andr Gungo

guenego@uhp-nancy.fr

Mobile Devices
Many devices are
similar, the differences are in how they are provisioned to a carrier. Look only at mass market phones Do not design for smart phones or PDAs
Feature Phones
Phone, WAP, SMS

Smart Phones
Applications

PDAs
Keyboard, Stylus

Copyright 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

network speeds

cost of data

new services

adoption

2005 2006 2007

Copyright 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Outlook
2008 2009

1G

2G

2.5G

3G

The 2G/3G Transition

Copyright 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

GPRS, HSCSD, WiDEN Data-capable devices Addition of Mobile Web Camera phones & MMS Mass adoption in U.S. as airtime rates lower

1G

2G

2.5G

3G

3rd Generation

Copyright 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

W-CDMA, HSDPA, EVDO In the early stages today Broadband Speeds Add-on features like LBS and media players Slow uptake

Contexte
petit cran ; entre de contenu limite ; prix et vitesse de l'accs au rseau ; grande diversit d'appareils et de navigateurs. beaucoup plus personnel ; toujours allum et toujours connect ; toujours disponible en cas de besoin ; moins cher ; beaucoup plus rpandu.

Pierre-Andr Gungo

guenego@uhp-nancy.fr

Contexte: Les 3 C du Web mobile...

Cots / Contenus / Contexte Cots : Il est trs important de dvelopper ses applications pour le Web mobile de manire responsable... car chaque kilooctets de tlchargement compte. Contenus : Plus encore que sur le Web traditionnel, les problmatiques lies la navigation, la taille des images et le poids des pages doivent tre considres. Contexte : Comment les contenus offerts aident-ils les internautes mobiles? Viennent-ils supporter leur ralit du moment? Dans quel contexte utiliseront-ils ces contenus (avion, train, etc.)? (web contextuel, utilisateur en mode "urgence")

Pierre-Andr Gungo

guenego@uhp-nancy.fr

More Compatible

Copyright 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Flavors of Mobile Design

Richer Experience

WML XHTML-MP

Copyright 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Flavors of Mobile Design

Applications

Design Type Design Tool

Delivery

Complexity

MSPs

J2ME BREW WML XHTML-MP Flash Lite

Rich

Photoshop

Any

Very

Many
Copyright 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Rich

Photoshop

Carrier

Very

Few

Text

HTML

Web

Simple

All

Web

CSS

Web

Simple

All

Rich

Flash

TBD

Semi

Few

Flavor Matrix

Langages: Historique

http://en.wikipedia.org/wiki/Image:Mobile_Web_Standards_Evolution_Vector.svg

Pierre-Andr Gungo

guenego@uhp-nancy.fr

Langages

http://ready.mobi/images/xhtml_graph2.gif Pierre-Andr Gungo 9 guenego@uhp-nancy.fr

Langages

http://www.w3.org/2005/Talks/0414-sb-mwi/slide4-0.html

Pierre-Andr Gungo

10

guenego@uhp-nancy.fr

Langages: WML
<?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <head> <meta http-equiv="Cache-Control" content="no-cache"/> </head> <card id="p1" title="Page1"> <p>Page1</p> <p><a href="p2.php?a=1&amp;b=2">Page2</a></p> </card> </wml> taille max : 1,4ko (avec images) !!! caractres spciaux:
" : &quot; ' : &apos; & : &amp; < : &lt; > : &qt; espace inscable : &nbsp; $ : $$

type MINE
header("Content-Type: text/vnd.wap.wml");

Pierre-Andr Gungo

11

guenego@uhp-nancy.fr

Langage: XHTML-MP
W3C: XHTML Basic conu pour les appareils faible capacits tels que tlphones, PDAs, pagers, montres volues ne contient pas tout ce qui pourra tre difficile supporter : CSS, frames, scripts WAP Forum: XHTML Mobile Profile = XHTML Basic + <i>, <b>, <small>, <big>, <hr>. + CSS simplifi (WCSS / WAP CSS) <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Page1</title> </head> <body> <p>Page1</p> <p><a href="p2.php?a=1&b=2">Page2</a></p> </body> </html>

Pierre-Andr Gungo

12

guenego@uhp-nancy.fr

Dtection de mobile

http://www.w3.org/2005/Talks/0414-sb-mwi/slide3-0.html

Pierre-Andr Gungo

13

guenego@uhp-nancy.fr

Dtection de mobile

http://www.w3.org/2007/02/mwibp-webinar-fr/mwibp-webinar-fr-slides#(11)

Pierre-Andr Gungo

14

guenego@uhp-nancy.fr

Dtection de mobile
Accept: application/vnd.wap.xhtml+xml, application/xhtml+xml, text/vnd.wap.wml Accept: */* User-Agent: Mozilla/4.0 (compatible; MSIE 4.01; Windows CE; PPC; 240x320) User-Agent: OPWV-SDK UP.Browser/7.0.2.3.119 (GUI) MMP/2.0 Push/PO X-Wap-Profile: "http://devgate2.openwave.com/uaprof/OPWVSDK70 .xml" x-wap-profile: "http://www.htcmms.com.tw/gen/strk1.0.xml"
Pierre-Andr Gungo 15 guenego@uhp-nancy.fr

Dtection de mobile
+300 appareils +30 navigateurs taille cran, langages supports caractristiques/mobile
http://www.mobilemultimedia.be http://fonespecs.com/ http://www.pacamobilecenter.com WURFL

Pierre-Andr Gungo

16

guenego@uhp-nancy.fr

Dtection de mobile
4 solutions
site unique rduit avec un navigateur comme opera mini site sans les lments superflus utiliser une feuille de style "handheld" site mobile spcifique

Pierre-Andr Gungo

17

guenego@uhp-nancy.fr

Mobile Web Options

Small Screen Rendering (SSR) Programatically Reformat
Rely on browsers like Opera Mini or Blazer to reformat. Programatically strip HTML of superfluous elements . Define an alternate mobile stylesheet on your tableless code. Create an unique site specific to mobile users.

Use handheld Stylesheets Create a Mobile Specific Site

Copyright 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

SSR Reformat Stylesheets

Copyright 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Mobile Web Options

Mobile Specific

Complex

Simple Slower

SSR

Stylesheets
Reformat
Va lu e

Mobile Specific Site

Faster

Copyright 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Context vs. Content

Copyright 2008 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Many Flavors of Handsets

128 pixels

Copyright 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Multiple Screens Sizes

160 pixels

128 pixels

176 pixels

160 pixels
220 pixels

Copyright 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Multiple Screens Sizes

128 pixels

176 pixels

320 pixels

160 pixels
220 pixels
240 pixels

Copyright 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Multiple Screens Sizes

128 pixels

176 pixels

320 pixels

240 pixels

160 pixels
220 pixels
240 pixels 320 pixels

Copyright 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Multiple Screens Sizes

128 pixels

176 pixels

320 pixels

320 pixels
240 pixels

160 pixels
220 pixels
240 pixels 320 pixels

Copyright 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Multiple Screens Sizes

320 pixels

128 pixels

176 pixels

320 pixels

320 pixels
240 pixels

160 pixels
220 pixels
240 pixels 320 pixels

Copyright 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Multiple Screens Sizes

Recommended Max Size 200 x 250 pixels
320 pixels

Copyright 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Tipped

InfoCamp Seattle 2007

Very typical non-optimized UI

highly optimized UI

Dtection de mobile

http://www.informanews.net/scripts/test-202-3-internet-mobile.html

Pierre-Andr Gungo

18

guenego@uhp-nancy.fr

Meilleures pratiques
Dix commandements du w3c
Il n'y a qu'un Web En respectant les standards, tu coderas Les difficults connues tu viteras Les limites des mobiles tu respecteras La navigation tu optimiseras Les graphiques et les couleurs tu vrifieras La parcimonie tu utiliseras Du rseau tu n'abuseras pas L'utilisateur tu guideras la mobilit tu penseras
Pierre-Andr Gungo 19 guenego@uhp-nancy.fr

Meilleures pratiques
Principes gnraux 60 Meilleures pratiques qui peuvent tre catgorises selon les ides suivantes :
Concevez vos pages pour Un seul Web (One Web) ; Basez-vous sur les standards du Web ; Pas de frames, de mise en page tabulaire, de GIF d'espacement ; Ne vous appuyez pas exclusivement sur les cookies, les scripts, les effets visuels ; Optimisez la navigation ; Vrifiez les images et les couleurs ; Plus c'est petit, mieux c'est ; Utilisez le rseau bon escient ; Aidez et guidez l'entre de texte de l'utilisateur ; Pensez aux utilisateurs en situation de mobilit.
Pierre-Andr Gungo 20 guenego@uhp-nancy.fr

Meilleures pratiques
En pratique
XHTML Basic 1.1 accessibilit (petit cran, pas de souris) <link rel="stylesheet" media="handheld" /> limiter les accs rseaux connatre lutilisateur Envoyez les images dans une rsolution adapte la taille de l'cran Utilisez le cache du navigateur Utilisez les cookies sans se reposer dessus Utilisez les raccourcis accesskey Champs texte numerique (input {-wap-input-format: "5N"})
21 guenego@uhp-nancy.fr

Pierre-Andr Gungo

Meilleures pratiques

http://www.w3.org/2007/02/mwibp-webinar-fr/mwibp-webinar-fr-slides#(13)

Pierre-Andr Gungo

22

guenego@uhp-nancy.fr

Primary Directional Orientation

1 3 4

1 2 3 4

Select Previous Link or Scroll Up Select Next Link or Scroll Down Back or Page Up Forward or Page Down

Directional Orientation

Copyright 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Copyright 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Rolling Stone Clickstream

Header

Navigation

Content

Navigation

Footer

Copyright 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Design Horizontally

Copyright 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Example Mobile Stylesheet

Copyright 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Example Mobile Stylesheet

<!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>
Copyright 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

<body> <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

<!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>
Copyright 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

<body> <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

<!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>
Copyright 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

<body> <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

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 popularity

Copyright 2007 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Problems 200+ devices 30+ web browsers Carrier controlled ecosystem Limited input or output No Standards People dont get it

Solutions Focus on 5
Copyright 2006 Blue Flavor. All trademarks and copyrights remain the property of their respective owners.

Focus on 5 Understand & Embrace Understand Goals Anticipate Actions False Look, Listen & Learn

The Problems

Tests
validateurs
http://validator.w3.org/mobile/ http://validator.w3.org/ http://ready.mobi/

Emulateurs (en ligne et hors ligne)

http://www.operamini.com/demo/ Emulateur nokia Openwave

Tests sur tlphone rel : le plus possible, conseill 5 varis

Pierre-Andr Gungo 23 guenego@uhp-nancy.fr

Liens
Tutoriaux
http://dev.mobi/files/training/index.htm http://dev.mobi/ http://developershome.com/ http://mobilewebbook.com/ http://www.littlespringsdesign.com/ http://www.passani.it/gap/ http://mr.dev.mobi/ http://developer.apple.com/iphone/ http://www.w3.org/TR/mobile-bp/ http://www.w3.org/2007/02/mwbp_flip_cards.pdf http://www.webconforme.com/conferences/2007/03/intracom/webmobile-intracom2007.pdf http://blueflavor.com/static/presentations/ http://www.w3.org/2007/Talks/11-parisweb/ http://www.dailymotion.com/video/x4lzho_bonnes-pratiques-du-web-mobile_tech http://www.w3.org/2006/11/webcast/ http://www.w3schools.com/wap/ http://magali.contensin.free.fr/html/wap/cours_wap.html http://www.developershome.com/wap/wml/ http://forum.alsacreations.com/topic-27-30837-1-Sujet-Unique-Ressources-emulateurs-url-de-test-articles.html http://developer.openwave.com/dvl/support/documentation/guides_and_references/index.htm http://www.thinkvitamin.com/features/css/coding-for-the-mobile-web http://pc.dev.mobi/files/dotMobi%20Mobile%20Web%20Developers%20Guide.pdf http://www.thewirelessfaq.com/what_is_the_difference_between_xhtml_mp_xhtml_basic_wml_imode_and_hdml

Meilleures Pratiques du Web Mobile

Confrences

WML

Autres

Pierre-Andr Gungo

24

guenego@uhp-nancy.fr