• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Optimisation Mobile - Responsive Webdesign - 2013
 

Optimisation Mobile - Responsive Webdesign - 2013

on

  • 7,062 views

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

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

Statistics

Views

Total Views
7,062
Views on SlideShare
5,531
Embed Views
1,531

Actions

Likes
17
Downloads
279
Comments
1

13 Embeds 1,531

http://www.inpixelitrust.fr 899
http://www.scoop.it 568
http://delphine-viel.com 18
http://tnytr.me 12
http://intranet.kryzalid.net 8
http://blog.websourcing.fr 6
http://preprod.capsul.info 4
http://kred.com 4
http://deepintheweb.tumblr.com 4
http://tnytr.dev 3
http://www.iphone-entreprise.com 3
http://webcache.googleusercontent.com 1
http://pinterest.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Optimisation Mobile - Responsive Webdesign - 2013 Optimisation Mobile - Responsive Webdesign - 2013 Presentation Transcript

    • Designer web et mobile, spécialiséeen UI et UX. Intégrateur web : HTML5, CSS 3, jQuery, WordPress http://www.inpixelitrust.fr/ http://dribbble.com/stephaniewalter http://forrst.me/inpixelitrust/posts @walterstephanie
    • • Smartphone : appareil mobile « intelligent » ayantla capacité de se connecter au net, télécharger desapps, lire des mails, etc.• OS : operating system • iOs : système d’exploitation iPhone – iPad • Android : ice-cream sandwich (4), Honeycomb (3 sur tablet), Gingerbread (2.3)• UX : User experience . L’expérience de l’utilisateur,ses actions et interactions avec l’interface• UI : User interface. Le design de l’interface(boutons, drop down, etc)• User agent : Une chaine de caractère envoyée parle navigateur qui permet de l’identifier
    • Qui a un smartphone en France ?Source : http://www.ourmobileplanet.com/
    • • Naviguer sur le net 78%• E mail 77 %• Recherche générale 73 %
    • Via « The Mobile Book - smashed.by/2012-market
    • • Safari • Nokia WebKit • Obigo WebKit• Android WebKit • Ovi • BlackBerry (vieil os)• Dolfin • Palm WebKit • NetFront• BlackBerry WebKit • IE• Opera Mobile • MeeGo WebKit• Opera Mini • Firefox
    • • Safari • Nokia WebKit • Obigo WebKit• Android WebKit • Ovi • BlackBerry (viel os)• Dolfin • Palm WebKit • NetFront• BlackBerry WebKit • IE• Opera Mobile • MeeGo WebKit• Opera Mini • Firefox Attention tous les webkit ne sont pas pareils !!
    • Navigateur Parts de marché OsAndroid webkit 50% AndroidSafari 30% iOsNokia 4% SymbianOpera 3% Symbia et view OSDolfin 3% Bada (os samsung)BlackBerry 6 2% BalckberryAutres 2% Source: statts en france StatCounter.com
    • Une information est un flux de données :• xml• Json• Base de données• Etc. Possibilité de réutiliser une donnée sur différents supports.
    • • se télécharge et s’installe (appstore /android market)• utilisation fonctionnalités de l’appareil(photo, gyroscope, gps)• expérience fluide• dédiée et brandée : mon logo, mescouleurs
    • • développement spécifique : iOs, Android,Blackberry etc. (différents langages)• ciblé à un seul « appareil » : et les tablettes ?• Licence de développement + coût de mise enligne• Mises à jour de chaque app pour chaque OS• Contenu pas indexable par un moteur derecherche• La valeur ajoutée pour votre utilisateur ?
    • Renvoie vers la version desktop Serveur Envoie du user-agent « browser desktop » Renvoie vers la version mobileEnvoie du user-agent« browser mobile » Un peu de lecture : Modern Mobile Redirect Using .htaccess
    • • le user agent peut avoir des erreurs• le user agent peut mentir• vous les connaissez TOUS les user agents vous ?  même des browsers qui vont sortir demain ??• et les tablettes ? Et les tailles d’écran ?
    • http://bradfrostweb.com/blog/post/this-is-the-web/
    • 2005 - 2008 : + 400 résolutions d’écrans différents • Mobile • Pc • Tv • Tablette • Laptop • Portrait • Paysage • Et demain internet sur mon frigo ??
    • « » “ I dont care who you are or where you’re from I still Love you “
    • http://mediaqueri.es/
    • « »Un ensemble de techniques quipermettent d’afficher le contenu surdifférents appareils (grilles fluides,media-queries, images flexibles, etc.) Ethan Marcotte – Responsive Webdesign Via http://inpx.it/Y8WG4l
    • « » Un concept qui consiste à proposer la meilleure expérience possible à l’audience la plus large quelque soit son le support (à base d’amélioration progressive des pages)
    • « Le web sur mobile c’est les applications et les sites mobile dédiés » Vous avez vraiment envie de faire une application pour chacun ? Un site dédié à chacun ?!
    • Vous n’avez AUCUN contrôle sur où votre contenu finira dansquelques années, autant le préparer de suite pour le future !
    • « On utilise un site web sur mobile dans un situation de précipitation » • vrai, mais plus uniquement • 40% des utilisateurs utilisent leur téléphone au toilette • « 60% des gens ont répondu à cette question sont des menteurs » - Luke Wroblewski
    • « On utilise un site web sur mobile dans un situation de précipitation » • 28% des utilisateurs aux USA utilisent leur mobile comme moyen premier d’accéder au net • ebay vend 2500 voitures par semaine sur leur app mobile • en Afrique, 25% du traffic de Google la semaine vient des téléphone (65% le weenkend) => le mobile devient doucement l’accès primaire au web d’une partie grandissante des internautes Sources http://inpx.it/VWMugQ et http://inpx.it/Y93jnl
    • « Mobile = moins de contenu » • les utilisateurs s’attendent à trouver le même contenu sur mobile que sur desktop  ne pas retirer des fonctionnalités  « masquer » provisoirement des fonctionnalités secondaires sur mobile, mais garder la possibilité de les afficher à la demande
    • « Mobile = moins de contenu »
    • Pas de survol ( :hover ) sur les mobiles : • éviter de cacher du contenu et l’afficher au survol • adapter pour mobile les navigations au survol
    • Une utilisation « au doigt » sur les mobiles : • moins précis qu’une souris • agrandir les zones « cliquables » (au moins 44 px) Source http://www.lukew.com/ff/entry.asp?1085
    • L’utilisateur sur mobile : différentes zones plus ou moins accessibles Source http://www.lukew.com/ff/entry.asp?1649
    • L’utilisateur sur mobile : différentes zones plus ou moins accessibiles Source http://www.lukew.com/ff/entry.asp?1649
    • Difficultés d’écriture au clavier sur les mobiles : • faire remplir le moins de champs possible à l’utilisateur (input vs checkbox, radio, select) • repenser les interactions et utiliser des contrôleurs natifs HTML5 : qui permettent une adaptation du clavier Source http://inpx.it/ZvUkxH
    • Optimiser le peu d’espace : • repenser son contenu en terme de hiérarchie • revoir les tailles des textes pour qu’ils soient lisibles • généralement contenu sous forme d’un colonne (mais pas une obligation)
    • • pas de flash ! (et ses copains)• évitez le son• évitez les modales au chargement du site• par pitié par de pop-up en .js !
    • Comprendre les besoins de l’utilisateuren amont pour cibler les versions Penser le design mobile, tablette, bureau dès le début
    • « »• nous force à nous concentrer sur l’utilisateur mobile• pas de place pour les fioritures• simple => complexe // complexe => simple• se concentrer sur moins de HTML et de requêtes http Ce que ça ne veut PAS dire : • Ne s’occuper que du mobile • Que le mobile est plus important
    • • fermez Photoshop• ouvrez Notepad• expérimentez avec du CSS3 plutôt que desimages• Testez sur différentes tailles• Testez sur différents appareils mobiles• TESTEZ !
    • A prendre compte :• temps : +25%• Budget : +25 %• Performances• contenus Deux versions d’un site : • permet d’optimiser les temps de chargement • servir deux contenus différents • usage mobile vs desktop trop opposés
    • • une seule feuille de style pour les réunir tous• s’affranchir de la taille de l’appareil.• peut coûter moins cher qu’un deuxième site• peut être pensé « après » la création du site• un seul HTML à maintenir
    • • plus long que ne pas optimiser : + 25% de temps• connaissances techniques supplémentaires• connaitre les astuces (et souvent bugs) de pas mal de mobiles• beaucoup de tests• moins de créativité : finis les larges backgrounds, le flash à outrance•temps de chargement plus long : on charge des ressources inutiles pourles redimensionner ensuite (dépend du navigateur)
    • • toujours présent• cliquable (52px) et renvoie à l’accueil
    • • présente quand l’utilisateur en a besoin• réduite par défaut sur mobile pour gagnerde l’espace
    • • présente quandl’utilisateur en abesoin• <input type =search > =adaptation duclavier
    • • 79 % des utilisateurs de smartphone s’enservent en faisant des courses =>importances des notes de l’utilisateur surmobile
    • • les carrousels sous forme de slider sontdifficilement utilisables sur mobile : galeried’images• une détection du « touch » avec modernizrpour avoir un « swipe » entre les images sic’est supporté Ergonomie des carrousels : 10 principes à respecter
    • • <input type = number > + pattern = clavieroptimisé sur mobile• bouton « add to card » suffisamment grand
    • • les 3 boutons = 19 requêtes et 246.7k d de chargé !• Une solution simple, utiliser des liens HTML: <a href="http://www.facebook.com/sharer.php?u=URL&t=TITLE">link or image</a> <a href="http://twitter.com/home?status=STATUS" title="Click to share this post on Twitter">Share on Twitter</a> <a href="https://m.google.com/app/plus/x/?v=compose&content=CONTENT">Image or text</a> Social media unbuttoned
    • • mettre à profit les capacités de l’appareil• ajouter de la VA et pertinence auxinformations apportées à l’utilisateur
    • • les contenus secondaires ne sont paschargés sur mobile (mobile first)• requête ajax pour les charger « à lademande »
    • • les contenus secondaires sont chargés sur des écrans plus grands auchargement de la page
    • • Sites fluides et des designs adaptables• Un peu de code côté client, plus rien (ou presque) côté serveur••• Un peu d’inspiration : http://mediaqueri.es/
    • « » fixe• design basé sur des pourcentages• s’adapte à la taille du navigateur fluide
    • « » Fluid Layout : http://inpx.it/ZEcuLu
    • « »• se base sur la largeur duviewport • largeur du navigateur pour du desktop • largeur du mobile/tablette• basé sur un système de« paliers »• adaptation « abrupte » parfois• unités en pixels et largeurs fixes• A ne pas confondre avec« adaptive webdesign »
    • « » Adaptive layout http://inpx.it/ZEdf7i
    • « »• un mélange entre fluide et adaptive• le contenu est fluide (basé sur despourcentages• max-width pour les tailles des éléments• toujours des « paliers » via différentsviewports• des transitions parfois moins« abruptes
    • « » Responsive Layout http://inpx.it/ZEdLT4
    • Adaptive :• facile sur un site déjà existant• si on sait quelles tailles d’écran cibler (choisir sespaliers) Responsive : • couteux sur un site existant • permet de cibler n’importe quelle taille
    • Le pixel est lunité minimale adressable par le contrôleur vidéoDépend de la densité en dpi : quantité de pixel dans 1 mm. 1280 x 740 720 x 1280 96 dpi 316 dpi Pour référence : Comprendre le Viewport dans le Web mobile
    • Visual viewport = surface virtuellequ’un mobile accepte d’afficherMobile : largeur = largeur du mobileHauteur = hauteur du mobile – bars dunavigateur. viewportDesktop: largeur = largeur dunavigateur (scroll bar comprise)Hauteur = hauteur du navigateur(scroll bar comprise) – taille desdifférentes barres
    • • La valeur en pixel par défaut du viewport dépend du navigateur etnon du mobile • quelques chiffres sur iOS : • largeur physique de l’iPhone 4 : 640px • largeur en px de l’iPhone (device-width): 320px • largeur du viewport par défaut de Safari : 980 px Crédit photo
    • « » • Navigateurs récents : tentent d’afficher l’intégralité du site dans le viewport • Très peu de contrôle sur l’affichage
    • « » • zoom : adapter le contenu du site au viewport • Android 4 : 980px
    • <meta name="viewport" content=" … "><meta tag> Exemple définitionwidth width=device-width / Spécifie la largeur du viewport width=320height height=device-height / Spécifie la hauteur du viewport (peu utilisé) height=640initial-scale initial-scale=2.0 Le degré de zoom au premier affichage de la page (en général 1.0)user-scalable user-scalable=no / yes Définit si l’utilisateur peut ou non zoomerminimum-scale minimum-scale=0.5 Définit la valeur limite pour un zoom arrièremaximum-scale maximum-scale=2.5 Définit la valeur maximale pour un zoom (agrandissement)target-densityDpi target- Permet de changer la densité d’une page densityDpi=high-dpi (déconseillé)
    • <meta name="viewport" content="width=320">
    • <meta name="viewport" content="width=device-width">
    • <meta name="viewport" content="width=device-width, initial-scale=2">
    • <meta name="viewport" content="width=device-width, initial-scale=0.5">
    • • width = device-width• portrait ET paysage, un viewport de 320px• un zoom +44% en paysage Images via http://inpx.it/10EYupP
    • <meta name="viewport" content="width=device-width, initial-scale=1"><meta name="viewport" content="initial-scale=1">
    • • meta viewport = Apple• bug dans le « snap mode » IE 10 <400px• specs W3C @viewport = standard(dans le future)@viewport { width: device-width;}@-ms-viewport {width: device-width;} Aller plus loin : http://inpx.it/Z31Kr3
    • « »• CSS 2 : media = print, media = screen, media = handheld …• CSS 3 specifications : media queries• servent à définir nos « paliers »
    • Media query Utilisationmin-width: … px Quand le viewport est plus grand ou au égal à … pxmax-width: … px Quand le viewport est plus petit ou au égal à … pxmin-device-width: … px Quand la taille de l’écran est plus grande ou au égal à … pxmax-device-width: … px Quand la taille de l’écran est plus petite ou au égal à … pxorientation : portrait // orientation: Cibler l’orientation de l’appareillandscape-webkit-min-device-pixel-ratio : 1.5 Pour cibler certains appareils avec une densité de pixel élevée La liste complète sur le site du W3C.
    • Syntaxe externe :<link rel="stylesheet" type="text/CSS" media="screen and(max-width: 480px) " href="mobile.CSS" />Syntaxe interne :body { background: gray;}@media all and (max-width:480px) { body { background: blue; }}
    • Avantages InconvénientsUne taille plus petite pour la feuille Des requêtes http en plusde style des navigateurs qui nesupportent pas les media queriesOn peut cibler IE avec une feuille de Oublie de mise à jour lors de lastyle spécifique mise à jour de la CSS « normale »Plus simple pour organiser sa page
    • Avantages InconvénientsPas de requête http Téléchargement supplémentairesupplémentaire pour des browser qui vont pas utiliserPlus difficile de l’oublier puisqu’elle JavaScript pour rendre compatiblefait partie de la CSS normale IE 8- Plus difficile d’organiser la feuille de style
    • • respecte la cascade• propriétés héritées• les propriétés appliquées pour le 500 sont aussi appliquées pour le 700• il faut écraser un style si on ne veut pas qu’il soit hérité• images chargées même si on les écrase / cache
    • http://inpx.it/Z346Gm Écran inférieur à 780 pxÉcran supérieur à 780 px
    • • on applique chaque style séparément• il faut répéter les styles que l’on veut pour chaque taille : risque d’oublie• pas besoin d’écraser un style non désiré• ne télécharge que les images dans la tranche de taille
    • http://inpx.it/Z3bYYs
    • Quelques sites utiles / outils de test :• Responsive design tester (fonctionne en local)• Responsivepx.com/ (fonctionne en local)• Bookmarklet pour tester son site• Resizer Bookmarklet • Tester les mq supportés par le navigateur • Media queries for standard device (CSS tricks) • Target high dpi device
    • 950 et + Moins de 950 px Moins de 580 pxhttp://inpx.it/Z38V2t
    • « »• automatiser la tâche : ne pas ré-inventer la roue• des classes « toutes faites »• peut-être lourd• « en ai-je vraiment besoin ? »• Foundation, Bootstrap, KNACSS, Skeleton, CSSgrid, et tantd’autres…
    • Foundation http://inpx.it/Z3fyBS
    • FAUX !(enfin plutôtsuicidaire et nonfutureproof)
    • • oubliez le mythe despériphérique, on ne sait pas dequoi demain sera fait• Content is King !• « quand le contenu explose »• « quand le contenu devientillisible »• 45 - 90 caractères par ligne =bonne moyenne Définir ses points de rupture
    • Passer les liens en ligne (possible si peu de liens) http://codepen.io/bradfrost/full/vcuem
    • Cacher la navigation pour les petits écrans sous forme d’une liste déroulanteUn menu de navigation “optimal” sur mobiles http://codepen.io/bradfrost/full/sHvaz
    • « »Cacher la navigation et la faire apparaitre à gauche, droite au par le dessus viaune div « off canvas » (en dehors du viewport)Navigations mobile “off canvas” http://dbushell.com/
    • « »Descendre la navigation dans le footer, accessible via un lien « ancre ».Footer Anchor This is Responsive Luke W. Footer anchor
    • Un casse tête… http://codepen.io/bradfrost/full/qwJvF
    • Encore plus casse tête ;) http://codepen.io/inpixelitrust/full/kficJ
    • • à chaque projet sa navigation• pas de solution « parfaite »• expérimenter, expérimenter, expérimenter.
    • Masquer tous les dépassements :element{ overflow : hidden ;} Source : alsacréations
    • Découper le mot pour qu’il entre dans l’espace :element{word-wrap: break-word;}
    • Masquer la fin du mot avec une ellipse :element{text-overflow: ellipsis;}
    • img{max-width: 100%;width: auto;height: auto; /*fixing ie*/-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} Fonctionne même avec une taille fixe dans le HTML !! http://inpx.it/13VKGYK
    • • Rendre une vidéo fluide avec la balise <video> : Demo elastic video http://inpx.it/10OKCt3
    • Demo http://inpx.it/10OM9zy
    • Donner une largeur de 100% à l’iframe ? Oui mais …. Demo http://inpx.it/10OM9zy
    • 1. Encapsuler l’iframe dans un container2. tricher pour donner au container un ratio de 16/93. Appliquer le 100% sur l’iframe Responsive embeds
    • • Fonctionne avec « tout » type d’iframe :vimeo, youtube, slidershare, etc. http://fitvidsjs.com/ un plugin pour automatiser l’ajout du container sur les vidéos
    • Utilisation d’unités relatives : em ou %body {font:1em/1.5em Verdana, Arial, sans-serif;}@media screen and (max-width:800px) { body { font-size:0.8em; }}@media screen and (max-width:400px) { body { font-size:0.7em; }}
    • Utilisation d’unités relatives rem : relative au root ( = HTML)html { font-size: 14px}P { font-size: 1 rem; } /* =14px */@media screen and (max-width:800px) { html { font-size: 12px} /* => p = 12px */}@media screen and (max-width:400px) { html { font-size: 16px} /* => p = 16px */} Support de rem http://caniuse.com/#search=rem
    • • 4 x plus de pixels sur une même zone• des images « floues » sur les écrans avec un pixel ratio supérieur à 2 Source http://inpx.it/13VL2ys
    • • doubler la taille physique des images ?• réduire de 50 % l’image dans le HTML• Problème : image 2 fois plus grosses = problème de performance surles mobilesNote : @2x = convention Apple pour noter les assets en double de tailles pour dudeveloppement d’applications natives
    • Une solution en CSS : utiliser des média queries device-pixel-ratio(non standard ! ) Version standard : min-resolution( 192dpi) Problème : toujours 2 images à maintenir Source http://inpx.it/13VMkJO
    • Version standard : min-resolution( 192dpi)Problème : toujours 2 images à maintenir Source http://inpx.it/13VNCEC
    • • http://retinajs.com/• http://retina-images.complexcompulsions.com/• automatisent le remplacement des images par une version @2x sisupportée• problèmes : • dépendants du JS • problèmes de performance (retina ne veut pas dire grosse bande passante)
    • • http://adaptive-images.com/ • détecter la taille de l’écran du navigateur qui visite la page • créer automatiquement la bonne taille d’image • « cacher » l’image et envoyer la version appropriée au navigateur • Avantages : • possibilité de charger des petites images sur les petits écrans = perf • Inconvénients : • lourd à mettre en place (PHP + .htaccess + JS) • pas standards besoin d’une standardisation d’une solution d’image pour le future !
    • • proposé par http://responsiveimages.org/• une syntaxe qui permettra de charger une image en fonction de la résolutionde l’écran• syntaxe similaire à la balise <video> + des media queries
    • • d’un point de vue de la DA, proposer différentes images dans différentscontextes• en discussion et non implémenté• un polyfill « picturefill » pour tester
    • « »• Une proposition au W3C par Apple• conserver la balise <img> et lui ajouter un attribut srcset avec différentsparamètres• une syntaxe plus complexe que <picture>• possibilité de proposer différentes images basées sur la résolution et taille duviewport Scrset les spécifications http://inpx.it/13VPugH
    • • Scalable Vector Graphics• Vectoriel = agrandissable àl’infini sans pertes• pas pour des images type« photo »• générer avec du code• générer avec des logiciels Tutoriel logo cliquable en SVG
    • • possibilité d’utiliser du SVG dans la balise <img>• possibilité d’utiliser du SVG comme image en CSS (background) Resolution Independence With SVG
    • « »• remplacer les lettres d’une police par les icônes utilisées dans l’interface• plus besoin d’images et sprites• changer facilement la couleur• changer facilement la taillesans perte ni pixellisation• Inconvénients : • monochrome • pas possible d’utiliser en arrière plan • utilisation moins « sémantique » http://css-tricks.com/examples/IconFont/
    • • Chargement de la font-icon dans la CSS comme n’importe quelle autrepolice• utilisation en pseudo-classe :before• insertion via data-attribut ou classe dans le HTML En pratique http://inpx.it/Z7TOox
    • Remplacer des images par des gradient CSS 3 :background: linear-gradient(top, #1e5799 0%,#207cca 51%,#7db9e8 100%); /* W3C */background: -moz-linear-gradient(top, #1e5799 0%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */background: -webkit-linear-gradient(top, #1e5799 0%,#207cca 51%,#7db9e8 100%); /*Chrome10+,Safari5.1+ */Editeur de gradient colorzilla
    • Création de coins arrondisborder-radius : 10px ;Border-radius : 10px 5px 10px 5px ;
    • Remplacer les png24 transparents par des couleurs rgba et del’opacitécolor:#fff;opacity : 0.9 ;= rgba (255,255,255,0.9);
    • Créer des ombres portées sans imagebox-shadow: 10px 10px 5px #888; box-shadow: 0 0 0 3px red, 0 0 0 5px yellow, 0 0 0 7px grey;
    • • pas d’images utilisées• Flexible• plus léger
    • Environ 60% des utilisateurs s’attendent à ce qu’un site mobile soit chargé en 3 secondes ou moins. What users want from mobile
    • 74% des utilisateurs ne sont prêts qu’à attendre 5 secondes ou moins pour que le site secharge avant de le quitter What users want from mobile
    • 71% des utilisateurs s’attendent à ce qu’un site sur mobile soit aussi rapide que sur bureau, sice n’est plus rapide What users want from mobile
    • Vos gains de performance en mobile seront également applicables auxautres utilisateurs ! http://httparchive.org/
    • http://validator.w3.org/mobile/ http://mobitest.akamai.com/m/index.cgi
    • • voir le temps de chargement des ressources• voir l’ordre de chargement• voir les facteurs bloquants (JS, etc) « Network » panel du Dev tool de Chrome
    • • le CSS au début (bloquent le rendu) • le JS à la fin avant </body> (bloquent les téléchargements) sauf modernizr• autant que possible, une seule feuille de style = une seule requête (éviter les@import)• éviter les redirections !! http://inpx.it/XNbabn
    • • maximiser la parallélisation (jusqu’à un certain point) : héberger sesressources sur différences serveurs/ sous domaine = forcer téléchargementen parallèle• chargement en asynchrone des ressources : dès que possible où qu’il soitdans le HTML (ex google analytics)• minifiez le code en prod, compressez les fichiers, combinez vos CSS et JSpour avoir le moins de requêtes possibles http://inpx.it/XNbabn
    • • jQuery : 90Ko.• compressé + gzipé : +30Ko• utiliser une petite partie de jQuery avec sizzlejs (récupération dessélecteurs uniquement) ou http://zeptojs.com/• utiliser uniquement les parties dont on a besoin :jquip• utiliser du VanillaJS
    • • Utilisez des sélecteurs performants #header nav ul li a {...}VS.primary-link {...}• Créez du code réutilisable, des classes ré-utilisables pour éviter de ré-écrireles mêmes propriétés• Groupez les sélecteurs qui ont les mêmes propriétés.news, .social { background: #eee; border-radius: 5px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);} http://inpx.it/XNbXJq
    • • Utilisez la compression de Photoshop / Fireworks pour enregistrer• Passer ensuite les images dans un outil comme • http://imageoptim.com/ • http://www.smushit.com/ysmush.it/ • http://kraken.io/ Comparaison des outils de compression d’image en ligne
    • • Combinez les images dans un « sprite » quand c’est possible Les sprites CSS
    • • encodage d’images en base64 pour éviter une requête supplémentaire• sur de très petites images ou des patterns• peut-être utilisé dans le HTML et dans le CSS http://css-tricks.com/data-uris/
    • • activez la compression gzip sur le serveur• activez la mise en cache des ressources .htaccess .htaccess du HTML5 boiler template
    • display: none = ressources chargées. Penser lemobile en premier ?
    • • Commencer par le HTML et CSS du site mobile, utiliser les media-queriespour « ajouter » des contenus/images = progressive enhancement• Problème avec IE8 et moins => feuilles de style conditionnelles / classesconditionnelles ou un polyfill comme respond.js
    • • charger conditionnellement les ressources pour les grands écrans• éviter les display:none sur les ressources dont on a pas besoin en mobile • ne pas les charger à la base • les charger conditionnellement ensuite en fonction de la taille de l’écran Conditional Loading for Responsive Designs
    • • La technique matchMedia• la syntaxe des media queries en JS !• support : http://caniuse.com/#feat=matchmedia• un polyfill https://github.com/paulirish/matchMedia.js La méthode matchMedia ou les Media Queries pour JavaScript
    • Adaptive Maps
    • • par défaut on charge l’imagestatique (et renvoie l’utilisateursur Gmaps directement)• au dessus de 550px on vacharger la map Google Maps Adaptive Maps
    • • Ajax-Include-Pattern librairie pour du chargement de ressourcessupplémentaires en Ajax• Le concept de RESS : responsive design + server side composent • RESS: Responsive Design + Server Side Components • Getting started with RESS
    • Changer la taille de l’image de backgroundbackground-size: 100% 100%;background-size: 250px 70px;
    • « »Empêcher le zoom du texte sur browser mobile (mais pas sur bureau) :body {-webkit-text-size-adjust: 100%; -ms-text-size-adjust: none; }
    • • préfixe vendeur : • -webkit- • -moz- • -o-
    • • Image carrée• Effet « glossy ajouté par l’appareil »<!– Iphone 4 & hdpi 114* 114 px--><link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/apple-touch-icon.png"><!– iphone 3G et mdpi 72* 72px --><link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon.png"> <!-- Plus vieux appareils : 57 * 57 px--> <link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-precomposed.png">
    • • Rien pour IE6-8 qui n’existent « pas » sur mobile (IE9 gère les mediaqueries)• Feuille de style à part sans media queries• Feuille de style pour viser ie mobile<!--[if (lt IE 9)&(!IEMobile 7)]><link rel="stylesheet" href="desktop.CSS"media="all"><![endif]-->• Utiliser des polyfills pour « simuler » les media queries • Respond.js : https://github.com/scottjehl/Respond • CSS 3 media queries : http://code.google.com/p/CSS 3- mediaqueries-js/ • Cocher la case « media queries » de modernizr : http://www.modernizr.com/download/
    • • CSS3 Flexible box model permet de réarranger visuellement leséléments plus facilement que des flottants• propriétés pour changer l’orientation ,l’ordre des blocs, colonnes etligne CSS3 Flexbox Layout module
    • • CSS3 Multiple Column layoutgérer un nombre différents decolonnes en fonction de l’écran• CSS grid layout création d’unegrille “virtuelle” pour placer leséléments• CSS3 Template Layout: associerun élément de layout à un nom etle placer sur une grille invisible
    • • Viewport Percentage Lengths vw, vh, vmin, vmax : unités en % relatives àla dimension du viewport• CSS4 nouvelles media queries : • @media(luminosity: normal|dim|washed) adapter à la luminosité de l’écran • @media(hover) pour savoir si l’appareil supporte le :hover ou non • @media(pointer:none|coarse|fine) adapter à la précision du pointeur de l’appareil
    • Détecter des capacités « natives » de l’appareil :• deviceorientationEvent détecter l’orientation de l’appareil(gyroscope)• geolocation API détecter la position géographique de l’utilisateur• Vibration API : accéder nativement aux vibrations de l’appareil(pour du gaming HTML5)• network information API récupérer des informations sur le typede connexion de l’utilisateurMozilla WebAPI : une liste très complète des API disponibles
    • • Responsive Web Design: What It Is and How To Use It Smashingmagazine• Multi-Device Web Design: An Evolution Luke Wroblewski• Responsive Web Design Techniques, Tools and Design Strategies Smashingmagazine
    • • Fittextjs : adapter le texte à la taille de l’écran• Responsive slide js : un slideshow responsive• Iscroll : une scroll bar « native » pour ios (et android)• Photoswipe : une librairie d’image optimisée mobile• Isotope : plugin jquery pour un layout flexible• http://www.onextrapixel.com/2012/06/13/really-useful-resources-and-tools-for-responsive-web-design/ des outils, encore des outils• et encore plus d’outils http://www.onextrapixel.com/2013/02/20/55-great-and-useful-tools-for-responsive-web-design/• http://lab.goetter.fr/tagged/mobile des expérimentations mobiles
    • www.inpixelitrust.fr/caweb/opti.m.zip