Lionel Tardy - L Ecole Multimédia - juin 2012 mercredi 27 juin 12

Transcription

1

2 Lionel Tardy : consultant multimédia. Je développe des applications client léger web et mobile Je participe à l élaboration de stratégies numériques en agence J enseigne les langages As3 et Java (à l école multimédia notamment)

3 MOBILE L INTERNET DÉCLOISONNÉ [ UBIMÉDIA * ] * Ubimedia, ou l informatique omniprésente, est un terme inventé par Adam Greenfield, Every[ware]. Ce terme décrit une informatique qui envahit notre quotidien justifiée par une simplification des tâches effectuées par les individus.

4 La vague des écrans connectés à Internet, smartphones, tablettes, télévisions et objets du quotidien, ouvre de nouveaux défis éditoriaux et techniques, c'est une immense opportunité pour les métiers liés aux services en ligne. C'est aussi l'occasion de repenser les interfaces applicatives, de reconsidérer les utilisateurs et de se concentrer sur leurs expériences. Une expérience utilisateur maîtrisée est aujourd'hui la clef du succès d'une application informatique et un espace d'innovation quasi-vierge.

5 Evolution technologique au cœur du multi écran. Nouveaux usages (média liquide), Social & Casual. Web mobile, repenser l approche éditoriale et ergonomique. Mise en forme et mise en œuvre. Perspectives, acteurs et luttes d influence. Nouvelle base de déploiement.

6 Evolution technologique au cœur du multi écran.

7 Evolution technologique au cœur du multi écran Convergence Point d étape : - 7 milliards d'habitants dans le monde en milliards de téléphones dont plus d 1,2 milliard de Smartphones (56% dans les nations développées). - PLUS de 2h/jrs sont passées par les américains sur leurs téléphones. - 63,6 millions de tablettes vendues en 2011 ( 70 % ios 17 % Android ) - PLUS de terminaux mobiles en 2014 que de PC (source Gartner) Les supports et les technologies de diffusions de l'information en réseau évoluent. Adapter les contenus aux nouveaux usages induits est urgents.

8 Evolution technologique au cœur du multi écran Convergence Point d étape : - Pc, Tablettes, SmartTv, ereader, tél mobiles, - Android, ios, Windows Phone, HTML 5, - Publication numérique, vidéos, richmedia, richapp Le numérique n a plus de limite, l interactivité est omniprésente, la révolution du multi-écran est en marche. Comment penser, objectiver, créer et diffuser des contenus et des applications pour tous les terminaux et leurs usages?

9 Evolution technologique au cœur du multi écran Convergence De la TV noir & blanc à la TV connectée

10 Evolution technologique au cœur du multi écran Convergence Du desktop aux tablettes

11 Evolution technologique au cœur du multi écran Convergence Du téléphone aux netphones 2000 (wap) (1g) (dual core) 2012 (quad core & 4g)

12 Evolution technologique au cœur du multi écran Convergence

13 Evolution technologique au cœur du multi écran Convergence Nous sommes entrés dans l'ère post-pc (Steve Jobs) - L ordinateur tel qu'il est connu depuis 30 ans à vécu. - Ses successeurs, des appareils à grand écran tactile, fin, léger, puissant, réactif, ultra communicant et à l'autonomie élevée. (Mariage de l'informatique traditionnelle et de la téléphonie évoluée.) ET le fil à la patte ( pas toujours d usb, synchro ) est de moins en moins fort (Cloud Computing - Android - icloud).

14 Evolution technologique au cœur du multi écran Croissance Smartphone, tablette, data

15 Evolution technologique au cœur du multi écran Croissance Smartphone, tablette, data Ventes mondiales en millions estimation nov. 2010

16 Evolution technologique au cœur du multi écran Croissance Smartphone, tablette, data Evolution des ventes mondiales de smartphone en millions (2010 vs. 2011)

17 Evolution technologique au cœur du multi écran Croissance Smartphone, tablette, data Nombre d abonnés mobile 3G au 4e trimestre 2011

18 Evolution technologique au cœur du multi écran Croissance Smartphone, tablette, data L utilisation des ordinateurs personnels à domicile a baissé de 20 % entre 2008 et 2010 aux États-Unis

19 Evolution technologique au cœur du multi écran Croissance Smartphone, tablette, data - Le trafic des sites Web mobiles a augmenté de 600 % en 2010 après avoir triplé entre 2009 et Un demi-milliard de personnes ont accédé à l Internet mobile en 2009, et les utilisateurs réguliers atteignent le milliard fin 2011

20 Evolution technologique au cœur du multi écran Croissance Smartphone, tablette, data Evolution du trafic de données mobiles d AT&T entre 2006 et 2009

21 Evolution technologique au cœur du multi écran Croissance Smartphone, tablette, data Proportion de pages web vues à partir d appareils mobiles (mai 2012)

22 Evolution technologique au cœur du multi écran Croissance Smartphone, tablette, data Coût par Mo Vs. trafic mensuel de données par utilisateur de smartphone

23 Evolution technologique au cœur du multi écran Croissance Smartphone, tablette, data - Paypal relève jusqu à 10 millions de dollars de transactions par jour sur son application mobile (juin 2011). - En 2010, les ventes mondiales sur ebay mobile ont généré près de deux milliards de dollars (techcrunch janv. 2011). - Les recherches mobiles sur Google ont augmenté de 400 % en 2010 (Google janv. 2011).

24 Evolution technologique au cœur du multi écran Contraintes Taille des écrans L étalon du design Web est la résolution de pixels Avec ses px. (iphone 1) = 80 % d espace en moins (poney Shetland) Et Android : Jusqu à 1280 x 720 px. (4,7 in.) ou 2048 x 1536 px. (9,5in.)

25 Evolution technologique au cœur du multi écran Contraintes Taille des écrans Occuper l espace, garder l essentiel App. Web mobile Web

26 Evolution technologique au cœur du multi écran Contraintes Taille des écrans Occuper l espace, garder l essentiel Web Web mobile

27 Evolution technologique au cœur du multi écran Contraintes Performances Utilisation des appareils mobiles à peu près partout (oui, là aussi!) : - réseaux pas toujours au rendez vous - quand ils le sont, la couverture peut coûter cher (en fonction du forfait) - peut être instable et rendre l attente longue et frustrante. ==> Concevoir pour cette réalité. Pour améliorer les performances, envoyer moins de données, utiliser les meilleurs serveurs disponibles.

28 Evolution technologique au cœur du multi écran Contraintes Performances - Utiliser des sprites (pour grouper plusieurs images dans un seul fichier) - Regrouper et minifier les fichiers CSS et JavaScript. - Éviter de charger des librairies JavaScript trop lourdes - Limiter l utilisation de systèmes de grille en CSS (moins fluide, calcul!) - Utiliser des en-têtes HTTP appropriés (enregistrer les fichiers dans le cache) - Exploiter quand vous le pouvez les capacités des navigateurs modernes, comme Canvas en HTML Utiliser des propriétés CSS3 pour arrondir les angles, ajouter des dégradés et des ombres (réduit le nombre d images)

29 Evolution technologique au cœur du multi écran Contraintes Performances Des études sur le long terme menées par Google indiquent qu un ralentissement des performances a un effet durable, réduisant l activité des gens pendant cinq semaines, même une fois le problème résolu. Les performances sont donc tout aussi importantes sur les ordinateurs de bureau. (outils d analyse Google)

30 Evolution technologique au cœur du multi écran Contraintes Performances Des études sur le long terme menées par Google indiquent qu un ralentissement des performances a un effet durable, réduisant l activité des gens pendant cinq semaines, même une fois le problème résolu. Les performances sont donc tout aussi importantes sur les ordinateurs de bureau. (outils d analyse Google)

31 Nouveaux usages (média liquide - média gazeux) Social & Casual

32 Nouveaux usages (média liquide/gazeux), Social & Casual Usages Du bureau au salon De par son prix et son encombrement l informatique a tout d abord été utilisé dans un cadre professionnel. Au milieu des années 90 elle rentre dans les foyers. La généralisation de la connexion ADSL lui confère une augmentation des ses champs d utilisation. Les années 2000 verront la croissante progression des ventes d ordinateurs portables.

33 Nouveaux usages (média liquide/gazeux), Social & Casual Usages Du salon au métro Essor de la téléphonie mobile : arrivée de la 3G (après le Edge) puis 3G+ et bientôt 4G (LTE) marque un tournant avec l arrivée de l iphone 1 et des premières offres data mobile illimitées l iphone 3G, par sa puissance et son ergonomie marque l année 1 de l internet mobile.

34 Nouveaux usages (média liquide/gazeux), Social & Casual Usages Du métro au canapé Même si ses détracteurs le qualifie d iphone géant, l ipad, utilisant le même paradigme d interface que son petit frère l iphone, est la première tablette tactile à rencontrer un large publique marque les premiers pas de l Internet canapé ( en France) : 1,5 million vendu en France.

35 Nouveaux usages (média liquide/gazeux), Social & Casual Usages Du canapé au canapé Annoncée lors des différents grands salons professionnels, mal lancée en 2011 par Sony et Google aux Etats Unis, la télévision connectée devrait être l une des grandes (r)évolutions de nos salons dès 2012 et dans les prochaines années.

36 Nouveaux usages (média liquide/gazeux), Social & Casual Usages Du bureau au dodo? Où utilisons nous nos terminaux multimédia? Diversités des formats, puissance du cloud, autonomie, la garantie d une connexion H24. Disponible à tout moment, métaphore des médias gazeux par le Cloud.

37 Nouveaux usages (média liquide/gazeux), Social & Casual Usages Lieu Une enquête de 2010 s intéressant aux lieux où nous utilisons nos smartphones

38 Nouveaux usages (média liquide/gazeux), Social & Casual Usages Lieu Ce qui révèle : - 84 % les utilisent à la maison ; - 80 % les utilisent à diverses heures creuses de la journée ; - 74 % les utilisent dans les files d attente ou en patientant pour un rendez-vous ; - 69 % les utilisent en faisant leurs courses ; - 64 % les utilisent au travail ; - 62 % les utilisent en regardant la télévision (une autre étude parle de 84 %) ; - 47 % les utilisent dans les transports.... et tout ça avant l arrivée en masse des tablettes

39 Nouveaux usages (média liquide/gazeux), Social & Casual Usages Heures Nous pouvons techniquement utiliser l ordinateur à n importe quelle heure, mais chaque type d appareil est utilisé à des moments spécifiques de la journée Heure à laquelle les gens lisent les articles sauvegardés sur leur ordinateur

40 Nouveaux usages (média liquide/gazeux), Social & Casual Usages Heures - 6 h (réveil - petit-déjeuner), - 9 h (trajet du matin et début de la journée de travail), h (fin de la journée de travail et trajet retour) h (canapé, télé, coucher). Heure à laquelle les gens lisent les articles sauvegardés sur leur iphone

41 Nouveaux usages (média liquide/gazeux), Social & Casual Usages Heures Léger pic le matin, constante au cours de la journée, le gros des lectures sur ipad se fait le soir. Bienvenue à l Internet de canapé. Heure à laquelle les gens lisent les articles sauvegardés sur leur ipad

42 Nouveaux usages (média liquide/gazeux), Social & Casual Usages Heures Heure à laquelle les gens lisent les articles sur un PC selon qu ils soient équipés d ipad ou non

43 Nouveaux usages (média liquide/gazeux), Social & Casual Usages Heures Dans certains cas, ce n est qu une question de proximité (Quel est l appareil le plus proche) Mais bien souvent, c est parce que certains appareils sont mieux adaptés à une tâche spécifique. Superposition des courbes des ordinateurs de bureau et des iphones

44 Nouveaux usages (média liquide/gazeux), Social & Casual Usages Métaphore des médias liquides (passe sans friction - facile - contenu d'un media à l'autre)

45 Nouveaux usages (média liquide/gazeux), Social & Casual Casual game

46 Nouveaux usages (média liquide/gazeux), Social & Casual Serious game Star Bank, sur la mécanique de Sim City Utilisateurs non Gamer, entre 30 et 60 ans. Approche ergonomique simplifiée, accessibilité instantanée.

47 Nouveaux usages (média liquide/gazeux), Social & Casual MultiCanal GNARKS demarre sur Canal+.fr puis facebook puis ios puis Android

48 Nouveaux usages (média liquide/gazeux), Social & Casual Nouvelles expériences Nouvelle relation entre le contenu et sa consultation Google Art Project

49 Web mobile, repenser l approche éditoriale & ergonomique

50 Web mobile, repenser l approche éditoriale et ergonomique Passer à l ère Mobile Il est clair que les appareils mobiles ouvrent de nouvelles perspectives très excitantes. Habitué à créer des designs Web pour les ordinateurs, comment faire la transition vers la conception d expériences Web mobiles? Vos outils, expériences et compétences seront toujours utiles, mais il vous faudra probablement commencer à revoir votre façon de penser l organisation, les actions, la saisie et la mise en page sur les appareils mobiles.

51 Web mobile, repenser l approche éditoriale et ergonomique Comportements Aligner ce que font particulièrement bien les appareils mobiles sur les besoins de vos clients. Josh Clask recense 3 types d utilisation [micro taches, environnement local, passer le temps]. L usage des mobiles combine généralement deux types d interaction : Consultation/Recherche (infos urgentes, local) : j ai besoin d une réponse а ma question maintenant souvent liée а l endroit où je me trouve. Explorer/Jouer (passer le temps, local) : j ai du temps а tuer et je veux juste me distraire un peu. Vérification/Statut (tâche répétitive, microtasking) : un contenu qui m intéresse n arrête pas de changer ou d être mis а jour et je veux rester au courant. Editer/Créer (changement urgent/microtasking) : je dois faire quelque chose qui ne peut pas attendre.

52 Web mobile, repenser l approche éditoriale et ergonomique Comportements Comprendre le contexte utilisateur cf. ALLOCINE - tablette ==> bandes annonces - smartphone ==> horaires - eticket - partage

53 Web mobile, repenser l approche éditoriale et ergonomique Comportements Ces comportements déterminent comment votre expérience mobile peut être structurée et organisée pour répondre aux besoins. En vous adaptant aux comportements des utilisateurs, vous alignez naturellement votre site Web sur les besoins de la vie réelle. Dessin parodique de xkcd comparant ce que les gens veulent trouver sur le site de leur université à ce qu il y trouvent réellement. «En enlevant le contenu et le code inutiles pour répondre aux contraintes d espace et aux limites des réseaux mobiles, on peut créer une expérience utilisateur plus agréable et plus utile» (blog Mobile in Higher Ed, Dave Olsen)

54 Web mobile, repenser l approche éditoriale et ergonomique Privilégier le contenu aux liens En règle générale, sur mobiles, le contenu doit primer sur les liens : Vous cherchez des informations locales, des articles... avec un moteur de recherche ou des réseaux sociaux, vous voulez des réponses immédiates à vos besoins. Le temps est souvent précieux sur un portable

55 Web mobile, repenser l approche éditoriale et ergonomique Rebondir et explorer Permettre aux utilisateurs d explorer sans ensevelir le contenu sous des piles de barres de navigation L exemple de YouTube met l accent sur le contenu, mais il permet également de rebondir et d explorer le reste du site avec des options de navigation différentes.

56 Web mobile, repenser l approche éditoriale et ergonomique Rebondir et explorer Un lien dans l en-tête vous amène directement au menu de navigation en pied de page.

57 Web mobile, repenser l approche éditoriale et ergonomique Retour en arrière Le bouton de Retour a été inutilement transposé dans certaines expériences Web mobiles. Bouton retour Bouton retour Bouton de retour Bouton de retour La barre du navigateur d Apple comprend un bouton de retour Les appareils Android possèdent un bouton de retour

58 Web mobile, repenser l approche éditoriale et ergonomique Un ancrage solide Les applications natives utilisent souvent des barres de navigation fixes en bas de l écran. Contrairement aux expériences Web mobiles, les applications natives sous ios n ont pas de barre d outils qui grignote de l espace. L expérience Web mobile de Yahoo! illustre l impact que les fioritures du navigateur peuvent avoir sur une page Web mobile.

59 Web mobile, repenser l approche éditoriale et ergonomique Un ancrage solide Les appareils dotés de contrôles physiques sous l écran représentent également un défi pour les menus fixés en pied de page En raison de la proximité de ces contrôles et du menu de l application, les utilisateurs commettront forcément des erreurs.

60 Web mobile, repenser l approche éditoriale et ergonomique Un ancrage solide Twitter utilise un menu de navigation au sommet de la page avec les actions clés pour tenir compte des différences entre les appareils mobiles.

61 Web mobile, repenser l approche éditoriale et ergonomique Clair et focalisé Quand ils sont sur leur appareil mobile, les utilisateurs sont souvent «un œil et un pouce» Leur attention est partielle : besoin de designs clairs et focalisés ( pas de tonnes d options de navigation). En réduisant le nombre d options de navigation sur les écrans des mobiles, vous aidez également à prévenir les erreurs.

62 Web mobile, repenser l approche éditoriale et ergonomique Organiser l expérience mobile en résumé Réfléchir à la manière d adapter les comportements mobiles aux besoins de vos clients. Les cas d utilisation; consultation/recherche, explorer/jouer, rapport/statut et éditer/ créer déterminent l utilisation et la structure est ajustée en fonction. Faire primer le contenu sur les options de navigation (rapidité) Options de navigation pertinentes et bien placées (bien rebondir, bien explorer). Pas de fioritures (expérience claire et focalisée). Et même en ayant le temps l utilisateur appréciera la simplicité de votre design!

63 Web mobile, repenser l approche éditoriale et ergonomique Réduisez en agrandissant S assurer que les cibles tactiles sont de la bonne taille et placées au bon endroit. Nos doigts sont des instruments de pointage approximatifs Des cibles tactiles plus grosses aident l utilisateur à atteindre ses objectifs en mode «un œil et un pouce». Pour tenir compte des variations de résolution (en ppi), il est préférable de mesurer les cibles tactiles en dimensions physiques (7mm + gap 2mm ==> 9 mm)

64 Web mobile, repenser l approche éditoriale et ergonomique Réduisez en agrandissant

65 Web mobile, repenser l approche éditoriale et ergonomique Ou touchons nous Les actions placées en bas de l écran sont naturellement adaptées à la manière dont les utilisateurs tiennent et utilisent leurs portables. En tenant un téléphone à écran tactile dans votre main droite, vous pouvez facilement toucher la zone en vert foncé et plus difficilement la zone jaune

66 Web mobile, repenser l approche éditoriale et ergonomique Le langage du toucher Gestes de base sur la plupart des écrans tactiles

67 Web mobile, repenser l approche éditoriale et ergonomique Les NUI Interfaces utilisateur naturelles Le principe consiste à faire du contenu l interface utilisateur pour faciliter les interactions directes.

68 Web mobile, repenser l approche éditoriale et ergonomique Les NUI Interfaces utilisateur naturelles Prometteur, mais nous sommes encore dans la phase de transition entre les environnements graphiques (GUI) et les NUI.

69 Web mobile, repenser l approche éditoriale et ergonomique Les NUI Interfaces utilisateur naturelles Les actions accessibles uniquement par des gestes tactiles ne seront pas immédiatement découvertes par tous les utilisateurs, conservons des boutons pour les actions principales de nos expériences Web mobiles

70 Web mobile, repenser l approche éditoriale et ergonomique Interactions de survol Sur les mobiles, vous avez plusieurs options pour remplacer les interactions de survol : - afficher leur contenu directement à l écran - les révéler d une pression ou d un balayement du doigt - les mettre sur un écran séparé ou Rien du tout!!!

71 Web mobile, repenser l approche éditoriale et ergonomique Moteur, actions en résumé Pour utiliser nos sites Web avec nos doigts : Créez des cibles tactiles suffisamment grandes et bien placées. Apprenez le langage du toucher en vous familiarisant avec les gestes tactiles. N ayez pas peur de créer des interfaces utilisateur naturelles (NUI) qui mettent l accent sur le contenu. Transposez vos interactions de survol aux mobiles en utilisant la solution la plus appropriée pour votre site.

72 Mise en forme & Mise en œuvre

73 Mise en forme et mise en œuvre Comment vous assurer que l expérience mobile de vos réalisations sera également utilisable sur les nombreux appareils disponibles aujourd hui et dans les mois, voire les années à venir? Acceptez le fait que les mobiles vont continuer à évoluer à un rythme infernal. Faites savoir aux navigateurs mobiles que vous créez des designs pour eux. Créez des mises en page flexibles, fluides et réactives. Sachez où fixer les frontières entre les expériences des différents appareils. Réduisez le plus possible.

74 Mise en forme et mise en œuvre Seule constante, le changement En quelques années, des leaders ont été détrônés, des appareils dotés de nouvelles capacités et imposant de nouvelles contraintes ont été commercialisés, de nouveaux partenariats entre fabricants d appareils, créateurs de plates-formes mobiles et opérateurs ont été annoncés. Bienvenue dans le monde des mobiles, où la seule chose sur laquelle vous pouvez compter, c est le changement.

75 Mise en forme et mise en œuvre Seule constante, le changement Basons nous sur des tendances bien établies : - des processeurs de plus en plus puissants, - des réseaux de plus en plus rapides, - des interfaces tactiles et des navigateurs de plus en plus évolués. ET prenez des risques, innovez et acceptez le fait que les frontières entre les appareils, les navigateurs et le Web n ont pas encore toutes été fixées.

76 Mise en forme et mise en œuvre Vous êtes là pour eux Faites le savoir aux navigateurs mobiles, c est le plus important, <meta name="viewport" content="width=device- width, initial- scale=1,..."> car le «viewport» prend la largeur choisie par le fabricant comme étant optimale pour afficher nos sites. C est une aide pour gérer les différentes densités en pixel. Les premiers iphones d Apple (164 ppi), le Nexus One de Google (252 ppi) et l iphone 4 (329 ppi) utilisent tous le même device- width de 320 pixels

77 Mise en forme et mise en œuvre Vous êtes là pour eux Contrairement aux textes et aux éléments visuels rendus par le navigateur, les images ne s ajusteront pas automatiquement aux écrans à haute densité de pixels. il vous faut deux jeux d images : un jeu haute définition (deux fois plus grand) et un autre de résolution standard. Vous pouvez ensuite dire aux navigateurs (avec des media queries CSS3, du JavaScript ou un script sur le serveur) de n inclure les images haute définition que sur les appareils dotés d écrans haute définition Sinon, servez-vous de CSS pour le design graphique de votre expérience Web mobile. Attention, trop d effet CSS3 peuvent nuire aux performances.

78 Mise en forme et mise en œuvre Fluide, flexible et réactif Même si tous les appareils mobiles utilisaient un device- width de 320 pixels, la largeur change quand on bascule l appareil. Nous devons créer une page très élastiques. Qu il soit qualifié de fluide, liquide ou flexible, c est un design qui se dilate et se rétracte en fonction de l espace disponible à l écran est indispensable

79 Mise en forme et mise en œuvre Responsive design Avec l arrivée des tablettes, le fossé entre petits et grands écrans se creuse de plus en plus, et les mises en page flexibles finissent par atteindre leurs limites. En utilisant des mises en page fluides, des médias flexibles, des media queries CSS3 et (parfois) un peu de JavaScript, le responsive web design vous permet de mieux vous adapter aux divers appareils. Pour cela, vous devez définir des «points de rupture» et appliquer différentes règles de mise en page selon la résolution. Ces règles de mise en page peuvent comprendre le déplacement de certains éléments, l agrandissement des images voire carrément la suppression de certains éléments.

80 Mise en forme et mise en œuvre Responsive design

81 Mise en forme et mise en œuvre Responsive design

82 Mise en forme et mise en œuvre Utilisations des appareils Les appareils ne diffèrent pas seulement par leurs capacités techniques mais également par leurs utilisations. - postes de télévision, - ordinateurs de bureau/ordinateurs portables, - tablettes, - smartphones Posture utilisateur classique : à 3 m de l écran, assis à un bureau, utilisation informelle sur le canapé ou au lit, brèves salves d activité dans des lieux divers au fil de la journée. Méthode de saisie principale : télécommande/gestes, souris/ clavier, écran tactile/capteurs, clavier numérique. Taille moyenne de l écran : faite pour votre mur, le bureau, vos genoux, votre main.

83 Mise en forme et mise en œuvre Utilisations des appareils La combinaison de ces différences est souvent suffisamment importante pour «définir» l expérience d un appareil. Et des expériences différentes peuvent requérir des solutions de design différentes Par exemple, le service de streaming de film Netflix propose des solutions HTML5 distinctes aux téléviseurs, aux tablettes, aux navigateurs de bureau et aux appareils mobiles

84 Mise en forme et mise en œuvre Reduire Rappel, la réduction reste la meilleure approche de mise en page pour mobiles. Libérez de la place pour créer des cibles tactiles suffisamment grandes et espacées. Un design réactif doit s adapter à des écrans de taille et de résolution diverses. Tous ces facteurs nous poussent à en mettre moins sur nos écrans. Attachez-vous à simplifier au maximum toutes vos mises en page mobiles pour répondre rapidement aux besoins des utilisateurs. Pensez mobile et si vos clients commencent à vous demander pourquoi l expérience Web de bureau n est pas aussi facile à utiliser que la version mobile, vous êtes sur la bonne voie.

85 Perspectives, acteurs et luttes d influence

86 Perspectives, acteurs et luttes d influence HTML5 Standard du web (Draft - brouillon) HTML 5 : spécifications globales attendus pour Depuis 2005 beaucoup d entres elles sont déjà déployées. Le W3C délivres des spécifications qui sont implémentées par les navigateurs. Les nouveautés sont présentes ou partiellement présentes.

87 Perspectives, acteurs et luttes d influence HTML5 Standard du web Les clients veulent du HTML5 Responsive, ils veulent le rendu actuel!!! Avantage HTML 5 lit le HTML4 (1998) a apporté d abord le tag <video> (ios) et les CSS3 Les données sont maintenant sur internet, donc il faut une technologie qui permette aux consommateurs de les consulter depuis n importe où et avec n importe quel terminal.

88 Perspectives, acteurs et luttes d influence HTML5 Standard du web Les membres du W3C poussent leurs pions, ils sont là pour l harmonisation mais certains sont aussi dans une guerre de concurrence. Prochaine avancée : rendre les capteurs mobile disponible au Web.

89 Nouvelle base de déploiement

90 Nouvelle base de déploiement Web et mobilité Entrée dans une culture de l'écran après celle de l'écrit. Nouvelle écriture Nouvelle narration

91 Nouvelle base de déploiement Web et mobilité Le multi écran implique : - continuité - se servir de l'écran et de ses possibilités - adapter le contenu en base commune brut pour exploiter la force de chaque dispositif. D ou l importance de l ergonomie : Web et mobile (de 4 à 10 pouces) vers une spécialisation selon les profils de terminaux. Penser aux 2 premières minutes en mobilité (fluide - marche) pas de deuxième chance ==> droit au but.

92 Nouvelle base de déploiement Mobile first Dans le déploiement des contenus : - En cercles concentriques - De l essentiel (mobile) - Au périphérique (tablette) - A l intégrale (desktop) Partir de l'expérience mobile vers le site Internet est un gage d objectivation des contenus, et non le contraire. (interactivité et aspect graphique épuré)

93 Nouvelle base de déploiement Le web a changé de dimension, Il est décloisonné : C est aujourd hui des contenus et une logique de service au travers les différents écrans.

94