Post on 27-Jan-2015
description
http://dribbble.com/stephaniewalter
http://forrst.me/inpixelitrust/posts
@walterstephanie
http://www.inpixelitrust.fr/
Designer web et mobile, spécialisée en UI et UX.
Intégrateur web : HTML5, CSS 3, jQuery, WordPress
• Smartphone : appareil mobile « intelligent » ayant la capacité de se connecter au net, télécharger des apps, 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 par le navigateur qui permet de l’identifier
Source : http://www.ourmobileplanet.com/
Qui a un smartphone en France ?
• Naviguer sur le net 78%• E mail 77 %• Recherche générale 73 %
Via « The Mobile Book - smashed.by/2012-market
• Safari
• Android WebKit
• Dolfin
• BlackBerry WebKit
• Opera Mobile
• Opera Mini
• Nokia WebKit
• Ovi
• Palm WebKit
• IE
• MeeGo WebKit
• Firefox
• Obigo WebKit
• BlackBerry (vieil os)
• NetFront
• Safari
• Android WebKit
• Dolfin
• BlackBerry WebKit
• Opera Mobile
• Opera Mini
• Nokia WebKit
• Ovi
• Palm WebKit
• IE
• MeeGo WebKit
• Firefox
• Obigo WebKit
• BlackBerry (viel os)
• NetFront
Attention tous les webkit ne sont pas pareils !!
Source: statts en france StatCounter.com
Navigateur Parts de marché Os
Android webkit 50% Android
Safari 30% iOs
Nokia 4% Symbian
Opera 3% Symbia et view OS
Dolfin 3% Bada (os samsung)
BlackBerry 6 2% Balckberry
Autres 2%
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, mes
couleurs
• 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 en
ligne
• Mises à jour de chaque app pour chaque OS
• Contenu pas indexable par un moteur de
recherche
• La valeur ajoutée pour votre utilisateur ?
Serveur
Envoie du user-agent « browser mobile »
Renvoie vers la version mobile
Renvoie vers la version desktop
Envoie du user-agent « browser desktop »
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 don't care who you are or where you’re from I still Love you “
«
»
« »
Un ensemble de techniques qui
permettent d’afficher le contenu sur
différents appareils (grilles fluides,
media-queries, images flexibles, etc.)
Via http://inpx.it/Y8WG4l
Ethan Marcotte – Responsive Webdesign
« »
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 dans quelques 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’utilisateur en 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 des
images
• 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 pour
les 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 gagner
de l’espace
• présente quand
l’utilisateur en a
besoin
• <input type =
search > =
adaptation du
clavier
• 79 % des utilisateurs de smartphone s’en
servent en faisant des courses =>
importances des notes de l’utilisateur sur
mobile
• les carrousels sous forme de slider sont
difficilement utilisables sur mobile : galerie
d’images
• une détection du « touch » avec modernizr
pour avoir un « swipe » entre les images si
c’est supporté
Ergonomie des carrousels : 10 principes à respecter
• <input type = number > + pattern = clavier
optimisé sur mobile
• bouton « add to card » suffisamment grand
• les 3 boutons = 19 requêtes
et 246.7k d de chargé !
Social media unbuttoned
• 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>
• mettre à profit les capacités de l’appareil
• ajouter de la VA et pertinence aux
informations apportées à l’utilisateur
• les contenus secondaires ne sont pas
chargés sur mobile (mobile first)
• requête ajax pour les charger « à la
demande »
• les contenus secondaires sont chargés sur des écrans plus grands au
chargement 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/
« »
• design basé sur des pourcentages
• s’adapte à la taille du navigateur
fixe
fluide
« »
• se base sur la largeur du
viewport
• 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 des
pourcentages
• max-width pour les tailles des éléments
• toujours des « paliers » via différents
viewports
• 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 ses paliers)
Responsive : • couteux sur un site existant• permet de cibler n’importe quelle taille
Le pixel est l'unité minimale adressable par le contrôleur vidéo
Dépend de la densité en dpi : quantité de pixel dans 1 mm.
720 x 1280 316 dpi
1280 x 74096 dpi
Pour référence : Comprendre le Viewport dans le Web mobile
vie
wp
ort
Visual viewport = surface virtuelle qu’un mobile accepte d’afficher
Mobile : largeur = largeur du mobileHauteur = hauteur du mobile – bars du navigateur.
Desktop: largeur = largeur du navigateur (scroll bar comprise)Hauteur = hauteur du navigateur (scroll bar comprise) – taille des différentes barres
• La valeur en pixel par défaut du viewport dépend du navigateur et
non du mobile
Crédit photo
• 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
« »
• 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éfinition
width width=device-width /
width=320
Spécifie la largeur du viewport
height height=device-height /
height=640
Spécifie la hauteur du viewport (peu utilisé)
initial-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 zoomer
minimum-scale minimum-scale=0.5 Définit la valeur limite pour un zoom arrière
maximum-scale maximum-scale=2.5 Définit la valeur maximale pour un zoom (agrandissement)
target-densityDpi target-
densityDpi=high-dpi
Permet de changer la densité d’une page (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">
Images via http://inpx.it/10EYupP
• width = device-width
• portrait ET paysage, un viewport de 320
px
• un zoom +44% en paysage
<meta name="viewport" content="width=device-width,
initial-scale=1">
<meta name="viewport" content="initial-scale=1">
@viewport {
width: device-width;
}
@-ms-viewport {
width: device-width;
}
• meta viewport = Apple
• bug dans le « snap mode » IE 10 <
400px
• specs W3C @viewport = standard
(dans le future)
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 Utilisation
min-width: … px Quand le viewport est plus grand ou au égal à … px
max-width: … px Quand le viewport est plus petit ou au égal à … px
min-device-width: … px Quand la taille de l’écran est plus grande ou au égal à … px
max-device-width: … px Quand la taille de l’écran est plus petite ou au égal à … px
orientation : portrait // orientation: landscape
Cibler l’orientation de l’appareil
-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.
<link rel="stylesheet" type="text/CSS" media="screen and
(max-width: 480px) " href="mobile.CSS" />
Syntaxe externe :
body {
background: gray;
}
@media all and (max-width:480px) {
body {
background: blue;
}
}
Syntaxe interne :
Avantages Inconvénients
Une taille plus petite pour la feuillede style des navigateurs qui ne supportent pas les media queries
Des requêtes http en plus
On peut cibler IE avec une feuille de style spécifique
Oublie de mise à jour lors de la mise à jour de la CSS « normale »
Plus simple pour organiser sa page
Avantages Inconvénients
Pas de requête http supplémentaire
Téléchargement supplémentaire pour des browser qui vont pas utiliser
Plus difficile de l’oublier puisqu’elle fait partie de la CSS normale
JavaScript pour rendre compatible 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
• 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
« »
• 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 tant
d’autres…
FAUX !(enfin plutôt suicidaire et non futureproof)
Définir ses points de rupture
• oubliez le mythe des
périphérique, on ne sait pas de
quoi demain sera fait
• Content is King !
• « quand le contenu explose »
• « quand le contenu devient
illisible »
• 45 - 90 caractères par ligne =
bonne moyenne
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éroulante
http://codepen.io/bradfrost/full/sHvazUn menu de navigation “optimal” sur mobiles
« »Cacher la navigation et la faire apparaitre à gauche, droite au par le dessus via une div « off canvas » (en dehors du viewport)
http://dbushell.com/Navigations mobile “off canvas”
« »Descendre la navigation dans le footer, accessible via un lien « ancre ».
Luke W. Footer anchorFooter Anchor This is Responsive
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 ….
Responsive embeds
1. Encapsuler l’iframe dans un
container
2. tricher pour donner au
container un ratio de 16/9
3. Appliquer le 100% sur l’iframe
• 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 sur
les mobiles
Note : @2x = convention Apple pour noter les assets en double de tailles pour du developpement d’applications natives
Source http://inpx.it/13VMkJO
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/13VNCEC
Version standard : min-resolution( 192dpi)
Problème : toujours 2 images à maintenir
• http://retinajs.com/
• http://retina-images.complexcompulsions.com/
• automatisent le remplacement des images par une version @2x si
supporté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ésolution
de l’écran
• syntaxe similaire à la balise <video> + des media queries
• d’un point de vue de la DA, proposer différentes images dans différents
contextes
• 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érents
paramètres
• une syntaxe plus complexe que <picture>
• possibilité de proposer différentes images basées sur la résolution et taille du
viewport
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 taille
sans 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 autre
police
En pratique http://inpx.it/Z7TOox
• utilisation en pseudo-classe :before
• insertion via data-attribut ou classe dans le HTML
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 arrondis
border-radius : 10px ;
Border-radius : 10px 5px 10px 5px ;
Remplacer les png24 transparents par des couleurs rgba et de l’opacité
color:#fff;
opacity : 0.9 ;
= rgba (255,255,255,0.9);
box-shadow: 10px 10px 5px #888;
Créer des ombres portées sans image
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
What users want from mobile
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 se charge 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, si ce n’est plus rapide
http://httparchive.org/
Vos gains de performance en mobile seront également applicables aux autres utilisateurs !
http://mobitest.akamai.com/m/index.cgihttp://validator.w3.org/mobile/
« Network » panel du Dev tool de Chrome
• voir le temps de chargement des ressources
• voir l’ordre de chargement
• voir les facteurs bloquants (JS, etc)
http://inpx.it/XNbabn
• 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 ses
ressources sur différences serveurs/ sous domaine = forcer téléchargement
en parallèle
• chargement en asynchrone des ressources : dès que possible où qu’il soit
dans le HTML (ex google analytics)
• minifiez le code en prod, compressez les fichiers, combinez vos CSS et JS
pour avoir le moins de requêtes possibles
• jQuery : 90Ko.
• compressé + gzipé : +30Ko
• utiliser une petite partie de jQuery avec sizzlejs (récupération des
sélecteurs uniquement) ou http://zeptojs.com/
• utiliser uniquement les parties dont on a besoin :jquip
• utiliser du VanillaJS
http://inpx.it/XNbXJq
• 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é-écrire
les 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);
}
• 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 le mobile en premier ?
• Commencer par le HTML et CSS du site mobile, utiliser les media-queries
pour « ajouter » des contenus/images = progressive enhancement
• Problème avec IE8 et moins => feuilles de style conditionnelles / classes
conditionnelles 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
Adaptive Maps
• par défaut on charge l’image
statique (et renvoie l’utilisateur
sur Gmaps directement)
• au dessus de 550px on va
charger la map Google Maps
• Ajax-Include-Pattern librairie pour du chargement de ressources
supplémentaires en Ajax
• Le concept de RESS : responsive design + server side composent
• RESS: Responsive Design + Server Side Components
• Getting started with RESS
background-size: 100% 100%;
background-size: 250px 70px;
Changer la taille de l’image de background
« »
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-
<!– 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">
• Image carrée
• Effet « glossy ajouté par l’appareil »
• Rien pour IE6-8 qui n’existent « pas » sur mobile (IE9 gère les media queries)
• 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 et
ligne
CSS3 Flexbox Layout module
• CSS3 Multiple Column layout
gérer un nombre différents de
colonnes en fonction de l’écran
• CSS grid layout création d’une
grille “virtuelle” pour placer les
éléments
• CSS3 Template Layout: associer
un élément de layout à un nom et
le 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 type
de connexion de l’utilisateur
Mozilla 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