Download
1 / 51
510 likes | 653 Views
Internet mobile . 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. Opera Mini.
E N D
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
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 .
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 (OperaBinaryMarkupLanguage). • 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 .
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.
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
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 s’ajoute 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 d’abord téléchargées et/ou achetées. • Qu’est-ce que cela signifie? C’est le moment idéal pour être concepteur de sites Web … à condition de suivre les tendances des navigateurs mobiles. J’ai dressé une liste des dix principes majeurs que nous devrions tous prendre en compte lorsque nous commençons à concevoir des sites Web pour mobile.
1. Utiliser un balisage sémantique • Nous savons tous qu’il 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 s’affichera toujours proprement et sera compris correctement par les visiteurs.
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 d’accéder ou d’accomplir beaucoup de tâches à partir d’un écran de cette taille. • Par exemple sur un grand écran, il peut être facile pour vos utilisateurs d’afficher 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 n’est 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 qu’elles tiennent sur un écran.
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 qu’une à 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.
3. Eviter le rembourrage • Ne cherchez pas à combler les espaces vides, il n’y a pas d’espace en trop, même sur un appareil mobile. Et comme ils n’ont pas tous la même puissance ni le même débit de connexion, soyez vigilant sur le poids de votre site. Trop d’images, 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 lorsqu’ils consultent votre site en version mobile. Voici un exemple : un utilisateur surveille l’arrivée d’un transfert d’argent sur le site mobile de sa banque. Il a besoin de finaliser un achat et éviter de se retrouver à découvert. Il n’a pas particulièrement envie d’attendre même pour afficher une gentille image d’accueil.
3. Eviter le rembourrage • Recommandations • N’utilisez pas d’images 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.
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 n’est pas simple, car il n’y 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 à l’utilisateur qu’un élément particulier peut être appuyé, déplacé ou manipulé d’une certaine façon… avec toutes ces possibilité d’interaction, nul besoin de garder vos principes d’interaction de « vieux navigateur » pour les utiliser avec une nouvelle technologie.
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 l’accè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’.
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 d’environ 14px pour un grand écran, mais sur un téléphone mobile c’est le double. Du coup, de gros caractères sur un petit écran signifient moins de place pour l’information (ce qui n’est pas plus mal pour l’utilisateur).
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 à l’utilisateur d’accéder à un autre écran qui ne contienne que ces informations complémentaires.
6. Le contenu peut être de la navigation • L’une des choses les plus cool sur les appareils tactiles, c’est que le contenu soit de la navigation. L’utilisateur peut interagir directement avec l’écran, il n’a pas besoin d’autres outils que ses doigts. Tout ce qui est sur l’écran peut être touché, poussé ou déplacé. Il n’est pas nécessaire d’utiliser des barres de défilement, car l’écran s’en charge. Des images signifiantes et moyens d’accès à ce contenu (NeonTrees) • Recommandations • Une liste de menus peut être utilisée pour passer à d’autres sous-menus ou bien vers d’autres é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.
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 qu’il ne faut, baissez plutôt l’intensité des couleurs. Un nombre de couleurs réduit et les contrastes forts, la navigation parait efficace (G-Shock) • Recommandations • Evitez les couleurs flashies et fluos (à moins que ce ne soit pour mettre en évidence). • Evitez l’utilisation excessive de couleurs et de thèmes de couleurs. • Se limiter à un thème de couleurs est plus agréable pour les yeux • N’oubliez pas les contrastes. Les contrastes de couleur font bien sur écran de mobile tant que ce n’est pas écrasant .
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 d’utilisateur’ 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 d’internautes où ce type de vocabulaire est courant. • Un autre point à prendre en compte est le pré-remplissage des champs avec les libellés dedans. C’est triplement pratique sur mobile : identification de l’information attendue, indication des champs remplis ou non, et gain de place sur l’écran . L’agencement des informations est familier (formulaire d’identification & liste cliquable d’événement), les champs de saisie contiennent les libellés (Untappd)
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 l’utilisateur sous forme de feedbacks dynamiques. Quand une page se charge, montrez-leur qu’elle se charge avec une animation sympa et qui tourne ou avec une barre de progression du plus bel effet. Lorsqu’un utilisateur est en train de remplir un formulaire, précisez-lui qu’il a oublié un champ obligatoire tout de suite. Après qu’il l’ait transmis, affichez une boite de dialogue qui le remercie et l’informe de ce qui va se passer ensuite. • Recommandations • Quand un utilisateur appuie à un endroit, changez l’aspect visuel pour confirmer l’action d’appui. • Utilisez des effets d’animation 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. N’utilisez pas d’espaces vides en attendant que les images se chargent.
