Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Sites internet mobiles

560 views

Published on

Etat de l'art des sites internet mobiles

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Sites internet mobiles

  1. 1. Etat de l’art des sites Internet mobile Thomas Brault
  2. 2. Les résolutions d’écrans <ul><li>Résolutions différentes selon les mobiles. </li></ul><ul><li>Résolutions correct pour consulter Internet depuis son site mobile: </li></ul><ul><ul><li>176x220 </li></ul></ul><ul><ul><li>320x240 </li></ul></ul><ul><ul><li>Soit un ratio de 1/3 </li></ul></ul>
  3. 3. Technologie <ul><li>Les sites mobiles sont composés principalement d’HTML et CSS </li></ul><ul><li>JavaScript déconseillé afin de ne pas ralentir les appareil souvent limite en fréquence de processeur </li></ul><ul><li>Navigateurs: Internet explorer mobile, Opera mobile, NetFront </li></ul>
  4. 4. Analyse de l’existant <ul><li>http://m.youtube.com/ </li></ul><ul><li>Contenu largement allégé </li></ul><ul><li>Informations principales mises en avant </li></ul><ul><li>Format des vignettes : 40x30px </li></ul><ul><li>Menu vertical en bas de page </li></ul><ul><li>On peut regretter la présence de la pagination uniquement en bas de la page ainsi que l’impossibilité de modifier le nombre de vidéos par page </li></ul>
  5. 5. Analyse de l’existant <ul><li>Page de consultation de vidéo simple, avec le contenu principal : description de vidéo, vote, catégorie, et lien de visionnage </li></ul><ul><li>Les numéros devant les items de menus permettes des accès direct, avec le clavier numérique du téléphone </li></ul>
  6. 6. Analyse de l’existant <ul><li>http://iphone.facebook.com/ </li></ul><ul><li>Menu de navigation à l’horizontal </li></ul><ul><li>Trois niveaux de navigations, dont un principal </li></ul><ul><li>Des boutons large (adapté pour l’iPhone, qui est tactile) </li></ul><ul><li>Interface graphique plus travaillée </li></ul>
  7. 7. Analyse de l’existant <ul><li>http://m.netvibes.com/ </li></ul><ul><li>Trois niveaux de navigation contextuel: </li></ul><ul><ul><li>Navigation du haut permet de naviguer entre les TAB ou entre les articles </li></ul></ul><ul><ul><li>Navigation du bas permet de sélectionner une TAB </li></ul></ul><ul><ul><li>Le contenu central permet d’acceder aux articles </li></ul></ul>
  8. 8. Analyse de l’existant <ul><li>http://m.flickr.com/ </li></ul><ul><li>Affichage simple du menu sur la Home </li></ul><ul><li>Accès direct aux rubriques via pavé numérique </li></ul><ul><li>Affichage du contenu principal simplifié </li></ul><ul><li>Interactivité possible : envoi de commentaire et de photo </li></ul>
  9. 9. Conclusion <ul><li>Interfaces pauvres graphiquement </li></ul><ul><li>Navigation et contenus prennent une place différentes </li></ul><ul><li>La totalité de l’espace écran est usité </li></ul><ul><li>Un adaptation de sites très riches de contenus en espace très restreint bien pensé et mis à l’œuvre: </li></ul><ul><ul><li>On ne manque d’aucune informations </li></ul></ul><ul><ul><li>La quasi-totalité des rubriques sont retranscrites </li></ul></ul><ul><ul><li>L’interactivité est aussi présente : </li></ul></ul><ul><ul><ul><li>Upload de fichier </li></ul></ul></ul><ul><ul><ul><li>Envoi de commentaire </li></ul></ul></ul><ul><ul><ul><li>Notation d’article </li></ul></ul></ul>

×