Internet mobile. Plan Le navigateur Opera Mini Principales caractéristiques Disponibilité sur les smartphones Caractéristiques techniques iPhone 4s iPad2.

Présentation au sujet: "Internet mobile. Plan Le navigateur Opera Mini Principales caractéristiques Disponibilité sur les smartphones Caractéristiques techniques iPhone 4s iPad2."— Transcription de la présentation:

1 Internet mobile

2 Plan Le navigateur Opera Mini Principales caractéristiques Disponibilité sur les smartphones Caractéristiques techniques iPhone 4s iPad2 Samsung Galaxy SII Les Equipements Internet 3G Les Equipements Wifi La conception pour les sites Web Mobile

3 Opera Mini Opera Mini est un navigateur web a destination des appareils mobiles comme les téléphones mobiles ou les PDA. Il fonctionne grâce à Java ME et est développé par Opera Software qui le met en téléchargement gratuitement. Il est basé sur une architecture client-serveur, ce qui le démarque des autres navigateurs concurrent. Avant d'être envoyées sur le téléphone mobile, les pages sont d'abord rendues sur un serveur proxy hébergé par Opera Software qui les adapte au format de l'écran, ce qui améliore la taille des transferts. Opera Mini est installé d'usine chez de nombreux opérateurs téléphoniques et fabricants. Opera Mini a été installé sur plus de 100 millions d'appareils.

4 Principales caractéristiques Contrairement à la majorité des navigateurs mobiles, Opera Mini (client) obtient ses pages web par l'intermédiaire de proxy hébergés par Opera Software. Ces proxy vont s'occuper de faire le rendu de la page, de l'adapter au format de l'écran et de redimensionner les images. La page est transmise au client dans un langage de balisage, le OBML (Opera Binary Markup Language). Cette approche de l'Internet mobile a de nombreux avantages : du fait que le client ne contient aucun moteur de rendu, il est très léger : 120 Kio. le rendu demande pas mal de ressources, et il sera donc plus rapide sur les serveurs d'Opera Software que sur l'appareil mobile. le client fonctionne de manière fluide, même sur de vieux appareils. Mais pose aussi certains problèmes : les animations GIF sont converties en images fixes. le Flash n'est pas pris en charge. le JavaScript est géré, mais il est nécessaire de recharger la page à chaque action. si les serveurs d'Opera Software sont surchargés ou indisponibles, la navigation est beaucoup plus lente.

5 Principales caractéristiques Deux modes de navigation sont disponibles: Navigation normale : le rendu est très proche de ce que l'on obtient sur un ordinateur, un premier niveau de zoom permet de voir la page dans son intégralité et un deuxième niveau de zoom permet de voir le texte dans une taille adaptée à la lecture. Les paragraphes sont redimensionnés à la largeur de l'écran, pour une lecture plus facile. Navigation mobile : la page est affichée en une seule colonne. Il est possible de ne pas activer les images ou de choisir entre 3 niveaux de qualité, pour encore faire baisser la taille des pages. Le navigateur propose le choix entre trois niveaux de taille pour le texte. La connexion entre le client est maintenue en permanence par des sockets, ce qui permet de synchroniser en temps réel le navigateur avec Opera Link et d'améliorer les temps de réponse, cependant, il est possible d'utiliser une connexion par le protocole HTTP dans le cas où l'opérateur n'accepte pas la connexion par socket, dans ce cas, l'affichage des pages est plus lent et la synchronisation ne se fait pas en temps réel.

6 Disponibilité sur les smartphones Bien que Opera Mini soit avant tout destiné aux téléphones classiques (compatible Java), il est présent sur de nombreux systèmes d'exploitations mobile notamment : Android BlackBerry iOS Symbian Windows Mobile

7 iPhone 4s / caractéristiques techniques

8

9

10

11

12

13 iPad2 / caractéristiques techniques

14

15

16

17

18 Samsung Galaxy SII / caractéristiques techniques

19

20

21 Les Equipements Internet 3G

22

23

24

25

26

27

28

29

30

31

32

33

34 Les Equipements WIFI

35

36

37 La conception pour les sites Web Mobile « Alors que les abonnements téléphoniques avec Smartphone devraient encore progresser de plus de 50%, la conception pour les navigateurs des mobiles et appareils tactiles a désormais atteint une part prépondérante. Le temps de la conception destinée uniquement aux écrans de bureau et de portables semble déjà loin. Les appareils nomades, des téléphones aux tablettes, ont pris leur place dans le marché et gagnent encore en popularité. En 2012, les ventes de tablettes devraient dépasser celles de PC et les ventes de smartphones écraser celles des téléphones classiques. A ceci sajoute le fait que les utilisateurs préfèrent largement utiliser un navigateur mobile sur leur appareil, plutôt que des applications dédiées qui doivent être dabord téléchargées et/ou achetées. Quest-ce que cela signifie? Cest le moment idéal pour être concepteur de sites Web … à condition de suivre les tendances des navigateurs mobiles. Jai dressé une liste des dix principes majeurs que nous devrions tous prendre en compte lorsque nous commençons à concevoir des sites Web pour mobile.

38 1. Utiliser un balisage sémantique Nous savons tous quil faut toujours chercher à séparer le contenu de la forme. Mais dans la conception Web pour mobile, il faut aller plus loin. Le balisage sémantique doit être utilisé correctement pour donner une vraie signification aux balises, sans propriétés supplémentaires de mise en forme de type CSS ou JavaScript. Le balisage sémantique crée une meilleure segmentation entre la mise en forme et le contenu. Il offre une meilleure accessibilité, moins de code (i.e. taille de fichier réduite) et permet également à tout type déquipement de mieux interpréter les informations de votre site Web. De plus, si le navigateur ne charge pas les images, le JavaScript ou les feuilles de style, votre site saffichera toujours proprement et sera compris correctement par les visiteurs.

39 2. Définir clairement votre message Dédiez votre site Web mobile à un nombre limité de tâches. Et surtout des tâches qui renforcent toutes les objectifs principaux de votre site. Puisque vous avez 80% de place en moins, vous avez 80% de tâches à mettre de côté. De toute manière, les utilisateurs mobiles ne seront pas physiquement en mesure daccéder ou daccomplir beaucoup de tâches à partir dun écran de cette taille. Par exemple sur un grand écran, il peut être facile pour vos utilisateurs dafficher vos derniers produits, consulter leur panier, remplir un simple formulaire de contact, vérifier les dernières entrées RSS et afficher vos six derniers tweets. Mais sur un petit écran de Smartphone, tout cela nest pas possible, à moins de tout réduire et de les obliger à regarder avec une loupe. Une taille décran limitée ne signifie pas que vous devez supprimer des fonctionnalités, mais vous aurez besoin de simplifier les fonctionnalités et leur nombre pour quelles tiennent sur un écran.

40 2. Définir clairement votre message Recommandations Au lieu de penser à votre site Web mobile sous forme de pages, pensez-le en termes de « vues », décrans. Chaque vue ne doit proposer quune à trois tâches, objectifs ou éléments. Simplifier les écrans des utilisateurs vous permettra non seulement de créer une meilleure expérience mobile, mais cela pourra également vous aider à définir ou à vous focaliser sur les objectifs principaux de votre site Web.

41 3. Eviter le rembourrage Ne cherchez pas à combler les espaces vides, il ny a pas despace en trop, même sur un appareil mobile. Et comme ils nont pas tous la même puissance ni le même débit de connexion, soyez vigilant sur le poids de votre site. Trop dimages, de texte, de code et de choses inutiles vont non seulement encombrer lécran, mais augmenter aussi le temps de chargement. Le temps de chargement est essentiel pour les appareils mobiles, car les utilisateurs ne sont généralement pas assis devant leur ordinateur lorsquils consultent votre site en version mobile. Voici un exemple : un utilisateur surveille larrivée dun transfert dargent sur le site mobile de sa banque. Il a besoin de finaliser un achat et éviter de se retrouver à découvert. Il na pas particulièrement envie dattendre même pour afficher une gentille image daccueil.

42 3. Eviter le rembourrage Recommandations Nutilisez pas dimages inutiles et optimisez celles nécessaires Débarrassez-vous de ces longs paragraphes de marketing et de remplissage faits de listes à puces. Réduisez le code trop lourd en utilisant un balisage sémantique et minimisez les feuilles de style et les fichiers attachés.

43 4. Ne pas utiliser détat Hover Les appareils tactiles ne gèrent pas le survol [de doigt], alors ne cherchez pas à le permettre. La conception pour le tactile nest pas simple, car il ny a pas de souris pour explorer la page et repérer au survol les actions possibles. Vous devez être plus créatif en indiquant graphiquement à lutilisateur quun élément particulier peut être appuyé, déplacé ou manipulé dune certaine façon… avec toutes ces possibilité dinteraction, nul besoin de garder vos principes dinteraction de « vieux navigateur » pour les utiliser avec une nouvelle technologie.

44 4. Ne pas utiliser détat Hover Recommandations Pour indiquer des liens utilisez des boutons et non du texte souligné. Les flèches sur les boutons et les listes indiquent laccès à plus de détails. Créez des textures telles que les dégradés et/ou les lignes en relief pour inciter à appuyer. Utilisez des icônes CLAIRES et FAMILIERES. Ne créez pas de nouvelles icônes pour des actions standards du style ajouter, modifier, ou retour.

45 5. Grand, Simple, avec une typo claire Si vous ne souhaitez pas que vos utilisateurs se retrouvent à plisser les yeux et aient des maux de tête quand ils utilisent votre site, utilisez une police plus grande. Votre hauteur habituelle de typo pour une lecture confortable est peut-être denviron 14px pour un grand écran, mais sur un téléphone mobile cest le double. Du coup, de gros caractères sur un petit écran signifient moins de place pour linformation (ce qui nest pas plus mal pour lutilisateur).

46 5. Grand, Simple, avec une typo claire Recommandations Supprimez les informations et les paragraphes non-pertinents de votre site mobile. Choisissez des textes clairs, des termes et des phrases simples. Évitez les sauts de ligne à foison surtout pour les phrases et paragraphes courts, reformulez les phrases au besoin. Pensez à utiliser un bouton «Plus informations» permettant à lutilisateur daccéder à un autre écran qui ne contienne que ces informations complémentaires.

47 6. Le contenu peut être de la navigation Lune des choses les plus cool sur les appareils tactiles, cest que le contenu soit de la navigation. Lutilisateur peut interagir directement avec lécran, il na pas besoin dautres outils que ses doigts. Tout ce qui est sur lécran peut être touché, poussé ou déplacé. Il nest pas nécessaire dutiliser des barres de défilement, car lécran sen charge. Recommandations Une liste de menus peut être utilisée pour passer à dautres sous-menus ou bien vers dautres écrans. Pensez à votre site mobile comme une galerie de contenus pour géant et soyez créatif sur la manière dont les utilisateurs se déplacent dans cette galerie. Des images signifiantes et moyens daccès à ce contenu (Neon Trees)Neon Trees

48 7. Maîtriser votre palette Les téléphones mobiles affichent tout en plus petit et rétréci par rapport à un écran de PC ou de portable. Les gens sont souvent plus près de leur écran de mobile quand ils le regardent. Afin de ne pas les agacer plus quil ne faut, baissez plutôt lintensité des couleurs. Recommandations Evitez les couleurs flashies et fluos (à moins que ce ne soit pour mettre en évidence). Evitez lutilisation excessive de couleurs et de thèmes de couleurs. Se limiter à un thème de couleurs est plus agréable pour les yeux Noubliez pas les contrastes. Les contrastes de couleur font bien sur écran de mobile tant que ce nest pas écrasant. Un nombre de couleurs réduit et les contrastes forts, la navigation parait efficace (G-Shock)G-Shock

49 8. Utiliser des libellés clairs Utilisez toujours, encore et encore, des libellés clairs et efficaces. Ne jouez pas avec des effets de style obscures et peu conventionnels. Utilisez le vocabulaire le plus courant, celui que nous connaissons et préférons tous, comme Nom dutilisateur et Mot de passe. Evitez de vous la jouer avec des Surnom et Code secret, à moins bien sûr que cela ne se réfère à une communauté particulière dinternautes où ce type de vocabulaire est courant. Un autre point à prendre en compte est le pré-remplissage des champs avec les libellés dedans. Cest triplement pratique sur mobile : identification de linformation attendue, indication des champs remplis ou non, et gain de place sur lécran. Lagencement des informations est familier (formulaire didentification & liste cliquable dévénement), les champs de saisie contiennent les libellés (Untappd)Untappd

50 9. Donner des Feedbacks Les navigateurs pour mobiles ne sont pas de simples afficheurs statiques. Ils peuvent gérer le JavaScript comme tout navigateur Web, alors autant en faire profiter vos utilisateurs. Pensez à informer lutilisateur sous forme de feedbacks dynamiques. Quand une page se charge, montrez-leur quelle se charge avec une animation sympa et qui tourne ou avec une barre de progression du plus bel effet. Lorsquun utilisateur est en train de remplir un formulaire, précisez-lui quil a oublié un champ obligatoire tout de suite. Après quil lait transmis, affichez une boite de dialogue qui le remercie et linforme de ce qui va se passer ensuite. Recommandations Quand un utilisateur appuie à un endroit, changez laspect visuel pour confirmer laction dappui. Utilisez des effets danimation JavaScript de type Jquery ou Scriptaclulous pour créer des feedbacks dynamiques. Affichez des animations de chargements pour les images qui sont encore en cours de chargement. Nutilisez pas despaces vides en attendant que les images se chargent.

51 10. Préserver de lespace vide La plupart des téléphones mobiles seront bientôt tous tactiles mais les doigts resteront toujours plus gros que les souris, alors laissez de lespace vide. Faites que tous les éléments appuyables disposent de suffisamment de place tout autour pour être cliqués par un gros doigt. Vous ne voulez certainement pas que lutilisateur clique sur un lien plutôt quun autre. Les menus sont hauts et larges pour faciliter la sélection (Charles Luck)Charles Luck Recommandations Utilisez des boutons, des objets, des icônes pour les liens plutôt que des textes soulignés. Ajoutez un maximum de marges intérieures (i.e. padding) dans les zones de contenu afin de bien les distinguer. Des hauteurs de lignes plus grandes rendent les textes plus faciles à lire sur les écrans plus petits.