1 / 27

Web pour le mobile (introduction)

Web pour le mobile (introduction). Appareils mobiles. Les limitations des appareils mobiles La taille des écrans La puissance de processeurs La taille de la mémoire embarquée La lenteur de la connexion → Un site Web pour mobiles doit être léger !

abiba
Download Presentation

Web pour le mobile (introduction)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web pourle mobile(introduction)

  2. Appareils mobiles Les limitations des appareils mobiles • La taille des écrans • La puissance de processeurs • La taille de la mémoire embarquée • La lenteur de la connexion → Un site Web pour mobiles doit être léger ! Les « plus » des appareils mobiles • La géolocalisation • Le scrolling

  3. La diversité des supports Navigateurs Téléphones Tablettes … … … Autres 3

  4. Résolutions source : www.graphism.fr (Geoffrey Dorne) 4

  5. Mobilité et vitesse Vitesse de chargement • Le réseau est plus lent que sur un support fixe ! → Pas d’images inutiles → Des images compressées au maximum → Pas/moins de publicités Vitesse de lecture • L’internaute mobile est pressé ! → Navigation simplifiée → Pas de longs blocs de texte (plutôt des listes à puces) 5

  6. Site Web ou application ? Développement et maintenanceréduits Visibilitégrâce aux plateformes de téléchargement Standards existants ou en cours de développement Adaptation au supportpar exemple, accès aux boutons Androïd Liberté de création pas de plateforme de téléchargementqui filtre arbitrairement Intégration au supporttéléchargement facile, icône à portée de doigt Développement et maintenance coûteux si on vise plusieurs plateformes Adaptation au supportet à leurs différentes technologies Modèle économiqueune appli payante reverse 30 % aux app stores Sécuritépas de plateforme qui vérifie les sites Dépendance on est à la merci des changements décidés par Google, Apple & C° Performancesaccès par un navigateur avec des limitations en mémoire et en cache 6

  7. Site Web ou application ? 7

  8. Site Web ou application ? Un support = une page Web Un seul site qui s’adapte Expérience optimisée en fonction du média Modifier le style de sa page classique en fonction du support Conception adaptative « Responsive Web Design » On perd beaucoup des avantages cités précédemment !Sans profiter plus des avantages des applications… Cacher des images Débuter par la version mobile Progresser vers les versions plus grandes Cacher du texte Désactiver le scroll horizontal Des scripts de redirection pourtous les langages : http://detectmobilebrowsers.com/ Utiliser les « media queries » Agrandir boutons et liens 8

  9. Media Queries(CSS3)

  10. Syntaxe Déclaration <html> <head><metaname="viewport" content="width=device-width" /> <linkrel="stylesheet" media="screen and (max-width:640px)" type="text/css" href="style-screen.css"/><linkrel="stylesheet" media="print" type="text/css" href="style-print.css" /><linkrel="stylesheet" media="handheld" type="text/css" href="style-mobile.css" /> </head> Pour éviter le redimensionnement automatique par le smartphone On peut spécifier les contraintes ici ou dans le CSS Syntaxe • Opérateurs : "and", "only", "not" et "," (ou) • Exemple : "screen and (min-width: 200px) and (max-width: 640px)" 10

  11. Types de médias La majorité des navigateurs sur smartphonesse considèrent comme « screen » 11

  12. Critères * À utiliser avec les préfixes -min et -max 12

  13. Bonnes pratiques

  14. Mise en page Utiliser une mise en page simple Pas de <div> imbriqués non nécessaires Utiliser des unités de mesures relatives (%, em, ex) Pas d’appel à des styles en ligne Utiliser les bornes min- et max- Pas de positionnements absolus Respecter les normes Pas de flash (non compatible sur de nombreux supports) 14

  15. Colonnes Sur PC Sur mobile Navigation Navigation Menus Menus Contenu Pub Pub News Pub Contenulié Contenu Liens @media screen and (max-width:768px) { * { width: 100%; margin: 0; padding: 0;} } Pub CSS News Contenu lié 15 Liens

  16. Contenu Sur PC Sur mobile Navigation Navigation Menus Menus Contenu Pub Pub News Pub Contenulié Contenu Liens <div id="pub" class="not-mobile"> </div> HTML Pub @media screen and (max-width:768px) { .not-mobile: { display: none; } } CSS News Contenu lié 16 Liens

  17. Divers /* Césures, mots longs, passages à la ligne */ @media screen and (max-width:768px) { *: { word-wrap: break-word; -webkit-hyphens: auto; /* Safari/Chrome */ -moz-hyphens: auto; /* Firefox, other Gecko */ hyphens: auto; /* Opera/IE 8+ */ } } CSS /* Message personnalisé */ @media screen and (max-width:768px) { body:before { content: "Version mobile"; display: block; } } CSS 17

  18. Divers /* Pour empêcher les débordements * (width + padding + border = taille totale) */ @media screen and (max-width:768px) { *: { -webkit-box-sizing: border-box; /* Safari/Chrome */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } } CSS 18

  19. Frameworks (librairies) pour mobile

  20. Frameworks pour mobile • Choisissez-les basés sur HTML5 ! • jQuery Mobile • SenchaTouch (2) • Dojo • The M Project • DHTMLX Touch • Mobilize.js • Et d’autres spécifiques pour les jeux, les graphiques, les animations, etc.

  21. Touch EventsGérer les événements tactiles en javascript

  22. Types d’événements Javascript /* Pour récupérer un événement touch et ses coordonnées */ elem.addEventListener(‘touchstart’, callTouchStart, false); functioncallTouchStart(e) { var touchPoint = e.touches.item(0); var x = touchPoint.screenX; var y = touchPoint.screenY; … } 22

  23. L’interface TouchEvent /* Tester si la touche alt est enfoncée au moment de l’événement */ functioncallTouchStart(e) { if (e.altKey) { … } } Javascript 23

  24. L’interface TouchList Javascript /* Pour parcourir la liste des points de contact */ elem.addEventListener(‘touchstart’, callTouchStart, false); functioncallTouchStart(e) { for (var i = 0 ; i < e.touches.length ; i++) { var touchPoint = e.touches.item(i); … } 24

  25. L’interface Touch 25

  26. Pour en savoir plus

  27. Pour en savoir plus • Mobile Web Application Best Practices (W3C) : http://www.w3.org/TR/mwapp • Et un résumé : • http://www.w3.org/2007/02/mwbp_flip_cards • HTML5 pour le mobile : • http://www.html5rocks.com/en/mobile • Les standards du web mobile : • http://www.w3.org/standards/webdesign/mobilweb • Les applications hors ligne : • http://www.w3.org/TR/2008/NOTE-offlinewebapps-20080530/ 27

More Related