optimisation mobile - responsive webdesign - 2013

Download Optimisation Mobile - Responsive Webdesign - 2013

Post on 27-Jan-2015

113 views

Category:

Technology

4 download

Embed Size (px)

DESCRIPTION

La mise à jour des cours donnés à l'université de Strasbourg sur l'optimisation mobile pour 2013

TRANSCRIPT

  • 1. Designer web et mobile, spcialiseen UI et UX.Intgrateur web : HTML5, CSS 3, jQuery, WordPresshttp://www.inpixelitrust.fr/http://dribbble.com/stephaniewalterhttp://forrst.me/inpixelitrust/posts@walterstephanie

2. Smartphone : appareil mobile intelligent ayantla capacit de se connecter au net, tlcharger desapps, lire des mails, etc. OS : operating system iOs : systme dexploitation iPhone iPad Android : ice-cream sandwich (4), Honeycomb (3 sur tablet), Gingerbread (2.3) UX : User experience . Lexprience de lutilisateur,ses actions et interactions avec linterface UI : User interface. Le design de linterface(boutons, drop down, etc) User agent : Une chaine de caractre envoye parle navigateur qui permet de lidentifier 3. Qui a un smartphone en France ?Source : http://www.ourmobileplanet.com/ 4. Naviguer sur le net 78% E mail 77 % Recherche gnrale 73 % 5. Via The Mobile Book - smashed.by/2012-market 6. Safari Nokia WebKit Obigo WebKit Android WebKit Ovi BlackBerry (vieil os) Doln Palm WebKit NetFront BlackBerry WebKit IE Opera Mobile MeeGo WebKit Opera Mini Firefox 7. Safari Nokia WebKit Obigo WebKit Android WebKit Ovi BlackBerry (viel os) Doln Palm WebKit NetFront BlackBerry WebKit IE Opera Mobile MeeGo WebKit Opera Mini Firefox Attention tous les webkit ne sont pas pareils !! 8. Navigateur Parts de march OsAndroid webkit 50% AndroidSafari 30% iOsNokia4%SymbianOpera3%Symbia et view OSDoln3%Bada (os samsung)BlackBerry 6 2%BalckberryAutres 2% Source: statts en france StatCounter.com 9. Une information est un flux de donnes : xml Json Base de donnes Etc. Possibilit de rutiliser une donne sur diffrents supports. 10. se tlcharge et sinstalle (appstore /android market) utilisation fonctionnalits de lappareil(photo, gyroscope, gps) exprience fluide ddie et brande : mon logo, mescouleurs 11. dveloppement spcifique : iOs, Android,Blackberry etc. (diffrents langages) cibl un seul appareil : et les tablettes ? Licence de dveloppement + cot de mise enligne Mises jour de chaque app pour chaque OS Contenu pas indexable par un moteur derecherche La valeur ajoute pour votre utilisateur ? 12. Renvoie vers la version desktop Serveur Envoie du user-agent browser desktop Renvoie vers la versionmobileEnvoie du user-agent browser mobile Un peu de lecture : Modern Mobile Redirect Using .htaccess 13. le user agent peut avoir des erreurs le user agent peut mentir vous les connaissez TOUS les user agents vous ? mme des browsers qui vont sortir demain ?? et les tablettes ? Et les tailles dcran ? 14. http://bradfrostweb.com/blog/post/this-is-the-web/ 15. 2005 - 2008 : + 400 rsolutions dcrans diffrents Mobile Pc Tv Tablette Laptop Portrait Paysage Et demain internet sur mon frigo ?? 16. I dont care who you are or where youre from I still Love you 17. http://mediaqueri.es/ 18. Un ensemble de techniques quipermettent dafficher le contenu surdiffrents appareils (grilles fluides,media-queries, images flexibles, etc.) Ethan Marcotte Responsive WebdesignVia http://inpx.it/Y8WG4l 19. Un concept qui consiste proposer lameilleure exprience possible laudience la plus large quelque soit sonle support ( base damliorationprogressive des pages) 20. Le web sur mobile cest les applications et les sites mobile ddis Vous avez vraiment envie de faire une application pour chacun ? Un site ddi chacun ?! 21. Vous navez AUCUN contrle sur o votre contenu finira dansquelques annes, autant le prparer de suite pour le future ! 22. On utilise un site web sur mobile dans un situation de prcipitation vrai, mais plus uniquement 40% des utilisateurs utilisent leur tlphone au toilette 60% des gens ont rpondu cette question sont des menteurs - Luke Wroblewski 23. On utilise un site web sur mobile dans un situation de prcipitation 28% des utilisateurs aux USA utilisent leur mobile comme moyen premier daccder au net ebay vend 2500 voitures par semaine sur leur app mobile en Afrique, 25% du traffic de Google la semaine vient des tlphone (65% le weenkend) => le mobile devient doucement laccs primaire au web dune partie grandissante des internautes Sources http://inpx.it/VWMugQ et http://inpx.it/Y93jnl 24. Mobile = moins de contenu les utilisateurs sattendent trouver le mme contenu sur mobile que sur desktop ne pas retirer des fonctionnalits masquer provisoirement des fonctionnalits secondaires sur mobile, mais garder la possibilit de les afficher la demande 25. Mobile = moins de contenu 26. Pas de survol ( :hover ) sur les mobiles : viter de cacher du contenu et lafficherau survol adapter pour mobile les navigations ausurvol 27. Une utilisation au doigt sur les mobiles : moins prcis quune souris agrandir les zones cliquables (aumoins 44 px) Source http://www.lukew.com/ff/entry.asp?1085 28. Lutilisateur sur mobile : diffrentes zones plus ou moins accessiblesSource http://www.lukew.com/ff/entry.asp?1649 29. Lutilisateur sur mobile : diffrentes zones plus ou moins accessibiles Source http://www.lukew.com/ff/entry.asp?1649 30. Difficults dcriture au clavier sur les mobiles : faire remplir le moins de champs possible lutilisateur (input vscheckbox, radio, select) repenser les interactions et utiliser des contrleurs natifs HTML5 : quipermettent une adaptation du clavierSource http://inpx.it/ZvUkxH 31. Optimiser le peu despace : repenser son contenu en terme dehirarchie revoir les tailles des textes pour quilssoient lisibles gnralement contenu sous formedun colonne (mais pas une obligation) 32. pas de flash ! (et ses copains) vitez le son vitez les modales au chargement du site par piti par de pop-up en .js ! 33. Comprendre les besoins de lutilisateuren amont pour cibler les versionsPenser le design mobile, tablette,bureau ds le dbut 34. nous force nous concentrer sur lutilisateur mobile pas de place pour les fioritures simple => complexe // complexe => simple se concentrer sur moins de HTML et de requtes http Ce que a ne veut PAS dire : Ne soccuper que du mobile Que le mobile est plus important 35. fermez Photoshop ouvrez Notepad exprimentez avec du CSS3 plutt que desimages Testez sur diffrentes tailles Testez sur diffrents appareils mobiles TESTEZ ! 36. A prendre compte : temps : +25% Budget : +25 % Performances contenus Deux versions dun site : permet doptimiser les temps de chargement servir deux contenus diffrents usage mobile vs desktop trop opposs 37. une seule feuille de style pour les runir tous saffranchir de la taille de lappareil. peut coter moins cher quun deuxime site peut tre pens aprs la cration du site un seul HTML maintenir 38. plus long que ne pas optimiser : + 25% de temps connaissances techniques supplmentaires connaitre les astuces (et souvent bugs) de pas mal de mobiles beaucoup de tests moins de crativit : finis les larges backgrounds, le flash outrancetemps de chargement plus long : on charge des ressources inutiles pourles redimensionner ensuite (dpend du navigateur) 39. toujours prsent cliquable (52px) et renvoie laccueil 40. prsente quand lutilisateur en a besoin rduite par dfaut sur mobile pour gagnerde lespace 41. prsente quandlutilisateur en abesoin =adaptation duclavier 42. 79 % des utilisateurs de smartphone senservent en faisant des courses =>importances des notes de lutilisateur surmobile 43. les carrousels sous forme de slider sontdifficilement utilisables sur mobile : galeriedimages une dtection du touch avec modernizrpour avoir un swipe entre les images sicest support Ergonomie des carrousels : 10 principes respecter 44. + pattern = clavieroptimis sur mobile bouton add to card suffisamment grand 45. les 3 boutons = 19 requteset 246.7k d de charg ! Une solution simple, utiliser des liens HTML:link orimageShare on TwitterImageor textSocial media unbuttoned 46. mettre profit les capacits de lappareil ajouter de la VA et pertinence auxinformations apportes lutilisateur 47. les contenus secondaires ne sont paschargs sur mobile (mobile first) requte ajax pour les charger lademande 48. les contenus secondaires sont chargs sur des crans plus grands auchargement de la page 49. Sites fluides et des designs adaptables Un peu de code ct client, plus rien (ou presque) ct serveurUn peu dinspiration : http://mediaqueri.es/ 50. fixe design bas sur des pourcentages sadapte la taille du navigateurfluide 51. Fluid Layout : http://inpx.it/ZEcuLu 52. se base sur la largeur duviewport largeur du navigateur pourdu desktop largeur du mobile/tablette bas sur un systme de paliers adaptation abrupte parfois units en pixels et largeurs fixes A ne pas confondre avec adaptive webdesign 53. Adaptive layout http://inpx.it/ZEdf7i 54. un mlange entre fluide et adaptive le contenu est fluide (bas sur despourcentages max-width pour les tailles des lments toujours des paliers via diffrentsviewports des transitions parfois moins abruptes 55. Responsive Layout http://inpx.it/ZEdLT4 56. Adaptive : facile sur un site dj existant si on sait quelles tailles dcran cibler (choisir sespaliers)Responsive : couteux sur un site existant permet de cibler nimporte quelle taille 57. Le pixel est lunit minimale adressable par le contrleur vidoDpend de la densit en dpi : quantit de pixel dans 1 mm.1280 x 740720 x 128096 dpi316 dpi Pour rfrence : Comprendre le Viewport dans le Web mobile 58. Visual viewport = surface virtuellequun mobile accepte dafficherMobile : largeur = largeur du mobileHauteur = hauteur du mobile bars dunavigateur.viewportDesktop: largeur = largeur dunavigateur (scroll bar comprise)Hauteur = hauteur du navigateur(scroll bar comprise) taille desdiffrentes barres 59. La valeur en pixel par dfaut du viewport dpend du navigateur etnon du mobile quelques chiffres sur iOS : largeur physique de liPhone 4 : 640px largeur en px de liPhone (device-width): 320px largeur du viewport par dfaut de Safari : 980 pxCrdit photo