Optimisation Mobile - Responsive Webdesign - 2013

186

description

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

Transcript of Optimisation Mobile - Responsive Webdesign - 2013

Page 1: Optimisation Mobile - Responsive Webdesign - 2013
Page 2: Optimisation Mobile - Responsive Webdesign - 2013

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

Page 3: Optimisation Mobile - Responsive Webdesign - 2013
Page 4: Optimisation Mobile - Responsive Webdesign - 2013

• 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

Page 5: Optimisation Mobile - Responsive Webdesign - 2013

Source : http://www.ourmobileplanet.com/

Qui a un smartphone en France ?

Page 6: Optimisation Mobile - Responsive Webdesign - 2013

• Naviguer sur le net 78%• E mail 77 %• Recherche générale 73 %

Page 7: Optimisation Mobile - Responsive Webdesign - 2013
Page 8: Optimisation Mobile - Responsive Webdesign - 2013
Page 9: Optimisation Mobile - Responsive Webdesign - 2013

Via « The Mobile Book - smashed.by/2012-market

Page 10: Optimisation Mobile - Responsive Webdesign - 2013

• 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

Page 11: Optimisation Mobile - Responsive Webdesign - 2013

• 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 !!

Page 12: Optimisation Mobile - Responsive Webdesign - 2013

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%

Page 13: Optimisation Mobile - Responsive Webdesign - 2013
Page 14: Optimisation Mobile - Responsive Webdesign - 2013

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.

Page 15: Optimisation Mobile - Responsive Webdesign - 2013

• 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

Page 16: Optimisation Mobile - Responsive Webdesign - 2013

• 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 ?

Page 17: Optimisation Mobile - Responsive Webdesign - 2013
Page 18: Optimisation Mobile - Responsive Webdesign - 2013

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

Page 20: Optimisation Mobile - Responsive Webdesign - 2013

• 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 ?

Page 21: Optimisation Mobile - Responsive Webdesign - 2013

http://bradfrostweb.com/blog/post/this-is-the-web/

Page 22: Optimisation Mobile - Responsive Webdesign - 2013
Page 23: Optimisation Mobile - Responsive Webdesign - 2013

2005 - 2008 : + 400 résolutions d’écrans différents

• Mobile• Pc• Tv• Tablette• Laptop• Portrait• Paysage• Et demain internet sur mon frigo ??

Page 24: Optimisation Mobile - Responsive Webdesign - 2013
Page 25: Optimisation Mobile - Responsive Webdesign - 2013

“ I don't care who you are or where you’re from I still Love you “

«

»

Page 26: Optimisation Mobile - Responsive Webdesign - 2013

http://mediaqueri.es/

Page 27: Optimisation Mobile - Responsive Webdesign - 2013

« »

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

Page 28: Optimisation Mobile - Responsive Webdesign - 2013

« »

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)

Page 29: Optimisation Mobile - Responsive Webdesign - 2013
Page 30: Optimisation Mobile - Responsive Webdesign - 2013

« 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 ?!

Page 31: Optimisation Mobile - Responsive Webdesign - 2013
Page 32: Optimisation Mobile - Responsive Webdesign - 2013

Vous n’avez AUCUN contrôle sur où votre contenu finira dans quelques années, autant le préparer de suite pour le future !

Page 33: Optimisation Mobile - Responsive Webdesign - 2013

« 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

Page 34: Optimisation Mobile - Responsive Webdesign - 2013

« 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

Page 35: Optimisation Mobile - Responsive Webdesign - 2013

« 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

Page 36: Optimisation Mobile - Responsive Webdesign - 2013

« Mobile = moins de contenu »

Page 37: Optimisation Mobile - Responsive Webdesign - 2013

Pas de survol ( :hover ) sur les mobiles :

• éviter de cacher du contenu et l’afficher

au survol

• adapter pour mobile les navigations au

survol

Page 38: Optimisation Mobile - Responsive Webdesign - 2013

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

Page 39: Optimisation Mobile - Responsive Webdesign - 2013

L’utilisateur sur mobile : différentes zones plus ou moins accessibles

Source http://www.lukew.com/ff/entry.asp?1649

Page 40: Optimisation Mobile - Responsive Webdesign - 2013

L’utilisateur sur mobile : différentes zones plus ou moins accessibiles

Source http://www.lukew.com/ff/entry.asp?1649

Page 41: Optimisation Mobile - Responsive Webdesign - 2013

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

Page 43: Optimisation Mobile - Responsive Webdesign - 2013

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)

Page 44: Optimisation Mobile - Responsive Webdesign - 2013

• pas de flash ! (et ses copains)

• évitez le son

• évitez les modales au chargement du site

• par pitié par de pop-up en .js !

Page 45: Optimisation Mobile - Responsive Webdesign - 2013

Comprendre les besoins de l’utilisateur en amont pour cibler les versions

Penser le design mobile, tablette, bureau dès le début

Page 46: Optimisation Mobile - Responsive Webdesign - 2013

« »

• 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

Page 47: Optimisation Mobile - Responsive Webdesign - 2013

• 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 !

Page 48: Optimisation Mobile - Responsive Webdesign - 2013

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

Page 49: Optimisation Mobile - Responsive Webdesign - 2013

• 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

Page 50: Optimisation Mobile - Responsive Webdesign - 2013

• 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)

Page 52: Optimisation Mobile - Responsive Webdesign - 2013

• toujours présent

• cliquable (52px) et renvoie à l’accueil

Page 53: Optimisation Mobile - Responsive Webdesign - 2013

• présente quand l’utilisateur en a besoin

• réduite par défaut sur mobile pour gagner

de l’espace

Page 54: Optimisation Mobile - Responsive Webdesign - 2013

• présente quand

l’utilisateur en a

besoin

• <input type =

search > =

adaptation du

clavier

Page 55: Optimisation Mobile - Responsive Webdesign - 2013

• 79 % des utilisateurs de smartphone s’en

servent en faisant des courses =>

importances des notes de l’utilisateur sur

mobile

Page 56: Optimisation Mobile - Responsive Webdesign - 2013

• 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

Page 57: Optimisation Mobile - Responsive Webdesign - 2013

• <input type = number > + pattern = clavier

optimisé sur mobile

• bouton « add to card » suffisamment grand

Page 58: Optimisation Mobile - Responsive Webdesign - 2013

• 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>

Page 59: Optimisation Mobile - Responsive Webdesign - 2013

• mettre à profit les capacités de l’appareil

• ajouter de la VA et pertinence aux

informations apportées à l’utilisateur

Page 60: Optimisation Mobile - Responsive Webdesign - 2013

• les contenus secondaires ne sont pas

chargés sur mobile (mobile first)

• requête ajax pour les charger « à la

demande »

Page 61: Optimisation Mobile - Responsive Webdesign - 2013

• les contenus secondaires sont chargés sur des écrans plus grands au

chargement de la page

Page 62: Optimisation Mobile - Responsive Webdesign - 2013
Page 63: Optimisation Mobile - Responsive Webdesign - 2013

• 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/

Page 64: Optimisation Mobile - Responsive Webdesign - 2013

« »

• design basé sur des pourcentages

• s’adapte à la taille du navigateur

fixe

fluide

Page 65: Optimisation Mobile - Responsive Webdesign - 2013

« »

Fluid Layout : http://inpx.it/ZEcuLu

Page 66: Optimisation Mobile - Responsive Webdesign - 2013

« »

• 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 »

Page 68: Optimisation Mobile - Responsive Webdesign - 2013

« »

• 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

Page 70: Optimisation Mobile - Responsive Webdesign - 2013

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

Page 71: Optimisation Mobile - Responsive Webdesign - 2013
Page 73: Optimisation Mobile - Responsive Webdesign - 2013

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

Page 74: Optimisation Mobile - Responsive Webdesign - 2013

• 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

Page 75: Optimisation Mobile - Responsive Webdesign - 2013

« »

• Navigateurs récents : tentent d’afficher

l’intégralité du site dans le viewport

• Très peu de contrôle sur l’affichage

Page 76: Optimisation Mobile - Responsive Webdesign - 2013

« »

• zoom : adapter le contenu du site au

viewport

• Android 4 : 980px

Page 77: Optimisation Mobile - Responsive Webdesign - 2013

<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é)

Page 78: Optimisation Mobile - Responsive Webdesign - 2013
Page 79: Optimisation Mobile - Responsive Webdesign - 2013

<meta name="viewport" content="width=320">

Page 80: Optimisation Mobile - Responsive Webdesign - 2013

<meta name="viewport" content="width=device-width">

Page 81: Optimisation Mobile - Responsive Webdesign - 2013

<meta name="viewport" content="width=device-width, initial-scale=2">

Page 82: Optimisation Mobile - Responsive Webdesign - 2013

<meta name="viewport" content="width=device-width, initial-scale=0.5">

Page 83: Optimisation Mobile - Responsive Webdesign - 2013

Images via http://inpx.it/10EYupP

• width = device-width

• portrait ET paysage, un viewport de 320

px

• un zoom +44% en paysage

Page 84: Optimisation Mobile - Responsive Webdesign - 2013

<meta name="viewport" content="width=device-width,

initial-scale=1">

<meta name="viewport" content="initial-scale=1">

Page 85: Optimisation Mobile - Responsive Webdesign - 2013

@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

Page 86: Optimisation Mobile - Responsive Webdesign - 2013
Page 87: Optimisation Mobile - Responsive Webdesign - 2013

• CSS 2 : media = print, media = screen, media = handheld …

• CSS 3 specifications : media queries

• servent à définir nos « paliers »

«

»

Page 88: Optimisation Mobile - Responsive Webdesign - 2013

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.

Page 89: Optimisation Mobile - Responsive Webdesign - 2013

<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 :

Page 90: Optimisation Mobile - Responsive Webdesign - 2013

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

Page 91: Optimisation Mobile - Responsive Webdesign - 2013

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

Page 92: Optimisation Mobile - Responsive Webdesign - 2013

• 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

Page 93: Optimisation Mobile - Responsive Webdesign - 2013

http://inpx.it/Z346Gm

Écran supérieur à 780 px

Écran inférieur à 780 px

Page 94: Optimisation Mobile - Responsive Webdesign - 2013

• 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

Page 96: Optimisation Mobile - Responsive Webdesign - 2013

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

Page 97: Optimisation Mobile - Responsive Webdesign - 2013

http://inpx.it/Z38V2t

950 et +

Moins de 950 px

Moins de 580 px

Page 98: Optimisation Mobile - Responsive Webdesign - 2013

« »

• 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…

Page 99: Optimisation Mobile - Responsive Webdesign - 2013

Foundation http://inpx.it/Z3fyBS

Page 100: Optimisation Mobile - Responsive Webdesign - 2013

FAUX !(enfin plutôt suicidaire et non futureproof)

Page 101: Optimisation Mobile - Responsive Webdesign - 2013
Page 102: Optimisation Mobile - Responsive Webdesign - 2013

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

Page 103: Optimisation Mobile - Responsive Webdesign - 2013
Page 105: Optimisation Mobile - Responsive Webdesign - 2013

Passer les liens en ligne (possible si peu de liens)

http://codepen.io/bradfrost/full/vcuem

Page 106: Optimisation Mobile - Responsive Webdesign - 2013

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

Page 107: Optimisation Mobile - Responsive Webdesign - 2013

« »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”

Page 109: Optimisation Mobile - Responsive Webdesign - 2013

Un casse tête…

http://codepen.io/bradfrost/full/qwJvF

Page 110: Optimisation Mobile - Responsive Webdesign - 2013

Encore plus casse tête ;)

http://codepen.io/inpixelitrust/full/kficJ

Page 111: Optimisation Mobile - Responsive Webdesign - 2013

• à chaque projet sa navigation

• pas de solution « parfaite »

• expérimenter, expérimenter, expérimenter.

Page 112: Optimisation Mobile - Responsive Webdesign - 2013
Page 113: Optimisation Mobile - Responsive Webdesign - 2013

Masquer tous les dépassements :

element{

overflow : hidden ;

}

Source : alsacréations

Page 114: Optimisation Mobile - Responsive Webdesign - 2013

Découper le mot pour qu’il entre dans l’espace :

element{

word-wrap: break-word;

}

Page 115: Optimisation Mobile - Responsive Webdesign - 2013

Masquer la fin du mot avec une ellipse :

element{

text-overflow: ellipsis;

}

Page 116: Optimisation Mobile - Responsive Webdesign - 2013

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

Page 117: Optimisation Mobile - Responsive Webdesign - 2013

• Rendre une vidéo fluide avec la balise <video> :

Demo elastic video http://inpx.it/10OKCt3

Page 118: Optimisation Mobile - Responsive Webdesign - 2013

Demo http://inpx.it/10OM9zy

Page 119: Optimisation Mobile - Responsive Webdesign - 2013

Demo http://inpx.it/10OM9zy

Donner une largeur de 100% à l’iframe ? Oui mais ….

Page 120: Optimisation Mobile - Responsive Webdesign - 2013

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

Page 121: Optimisation Mobile - Responsive Webdesign - 2013

• 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

Page 122: Optimisation Mobile - Responsive Webdesign - 2013

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;

}

}

Page 123: Optimisation Mobile - Responsive Webdesign - 2013

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

Page 124: Optimisation Mobile - Responsive Webdesign - 2013
Page 125: Optimisation Mobile - Responsive Webdesign - 2013

• 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

Page 126: Optimisation Mobile - Responsive Webdesign - 2013

• 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

Page 127: Optimisation Mobile - Responsive Webdesign - 2013

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

Page 128: Optimisation Mobile - Responsive Webdesign - 2013

Source http://inpx.it/13VNCEC

Version standard : min-resolution( 192dpi)

Problème : toujours 2 images à maintenir

Page 129: Optimisation Mobile - Responsive Webdesign - 2013

• 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)

Page 130: Optimisation Mobile - Responsive Webdesign - 2013

• 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 !

Page 131: Optimisation Mobile - Responsive Webdesign - 2013

• 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

Page 132: Optimisation Mobile - Responsive Webdesign - 2013

• 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

Page 133: Optimisation Mobile - Responsive Webdesign - 2013

« »

• 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

Page 134: Optimisation Mobile - Responsive Webdesign - 2013

• 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

Page 136: Optimisation Mobile - Responsive Webdesign - 2013

« »

• 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/

Page 140: Optimisation Mobile - Responsive Webdesign - 2013

• 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

Page 141: Optimisation Mobile - Responsive Webdesign - 2013

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

Page 142: Optimisation Mobile - Responsive Webdesign - 2013

Création de coins arrondis

border-radius : 10px ;

Border-radius : 10px 5px 10px 5px ;

Page 143: Optimisation Mobile - Responsive Webdesign - 2013

Remplacer les png24 transparents par des couleurs rgba et de l’opacité

color:#fff;

opacity : 0.9 ;

= rgba (255,255,255,0.9);

Page 144: Optimisation Mobile - Responsive Webdesign - 2013

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;

Page 145: Optimisation Mobile - Responsive Webdesign - 2013

• pas d’images utilisées

• Flexible

• plus léger

Page 146: Optimisation Mobile - Responsive Webdesign - 2013
Page 150: Optimisation Mobile - Responsive Webdesign - 2013

http://httparchive.org/

Vos gains de performance en mobile seront également applicables aux autres utilisateurs !

Page 151: Optimisation Mobile - Responsive Webdesign - 2013

http://mobitest.akamai.com/m/index.cgihttp://validator.w3.org/mobile/

Page 153: Optimisation Mobile - Responsive Webdesign - 2013

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 !!

Page 154: Optimisation Mobile - Responsive Webdesign - 2013

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

Page 155: Optimisation Mobile - Responsive Webdesign - 2013

• 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

Page 156: Optimisation Mobile - Responsive Webdesign - 2013

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);

}

Page 157: Optimisation Mobile - Responsive Webdesign - 2013

• 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

Page 159: Optimisation Mobile - Responsive Webdesign - 2013

• 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/

Page 162: Optimisation Mobile - Responsive Webdesign - 2013

display: none = ressources chargées. Penser le mobile en premier ?

Page 163: Optimisation Mobile - Responsive Webdesign - 2013

• 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

Page 164: Optimisation Mobile - Responsive Webdesign - 2013

• 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

Page 167: Optimisation Mobile - Responsive Webdesign - 2013

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

Page 169: Optimisation Mobile - Responsive Webdesign - 2013
Page 170: Optimisation Mobile - Responsive Webdesign - 2013

background-size: 100% 100%;

background-size: 250px 70px;

Changer la taille de l’image de background

Page 171: Optimisation Mobile - Responsive Webdesign - 2013

« »

Empêcher le zoom du texte sur browser mobile (mais pas sur bureau) :

body {

-webkit-text-size-adjust: 100%;

-ms-text-size-adjust: none;

}

Page 172: Optimisation Mobile - Responsive Webdesign - 2013

• préfixe vendeur : • -webkit-• -moz-• -o-

Page 173: Optimisation Mobile - Responsive Webdesign - 2013

<!– 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 »

Page 174: Optimisation Mobile - Responsive Webdesign - 2013

• 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/

Page 175: Optimisation Mobile - Responsive Webdesign - 2013
Page 176: Optimisation Mobile - Responsive Webdesign - 2013

• 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

Page 177: Optimisation Mobile - Responsive Webdesign - 2013

• 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

Page 178: Optimisation Mobile - Responsive Webdesign - 2013

• 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

Page 179: Optimisation Mobile - Responsive Webdesign - 2013

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

Page 180: Optimisation Mobile - Responsive Webdesign - 2013
Page 184: Optimisation Mobile - Responsive Webdesign - 2013

• 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

Page 185: Optimisation Mobile - Responsive Webdesign - 2013
Page 186: Optimisation Mobile - Responsive Webdesign - 2013

www.inpixelitrust.fr/caweb/opti.m.zip