Nouveaux comportements des consommateurs : quelles évolutions techniques, ergonomiques, visuelles mettre en place ? Jeudi 7 avril 2016 Organisé en partenariat avec E-COD Ecole Professionnelle de la CCI de Bordeaux Connexion wifi salle Margaux : *33-WorldSom(Bd9
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Nouveaux comportements des consommateurs
quelles eacutevolutions techniques ergonomiques visuelles mettre en place
Jeudi 7 avril 2016
Organiseacute en partenariat avec E-COD Ecole Professionnelle de la CCI de Bordeaux
Connexion wifi salle Margaux 33-WorldSom(Bd9
Etude de faisabiliteacute veille aide au cahiers des charges pour site webhellip
Mise en œuvre (audit de site strateacutegie de preacutesence en ligne gestion de la e-reputationhellip)
Actions e-marketing (reacuteseaux sociaux e mailing marketing newsletter Gestion de la relation client)
Appui juridique (permanence drsquoavocats du numeacuteriquehellip)
Appui agrave la deacutemateacuterialisation des eacutechanges de donneacutees et agrave la seacutecurisation
Recherche de financements
wwwbordeauxccifr polenumerique
05 56 79 5000
Le Pocircle numeacuterique au service de la Transformation numeacuterique des entreprises
Nos conseillers vous accompagnent tout au long de votre projet
Evolution du web
Quelles solutions ergonomiques estheacutetiques et techniques
Le point de vue drsquoun inteacutegrateur
Thomas Catinaud inteacutegrateur web - formateur
thomascatinaudcom
hellothomascatinaudcom
Thomas Catinaud
Inteacutegrateur web (ou le plus beau meacutetier du monde)
laquo Lrsquointeacutegrateur Web est chargeacute de traduire et de transposer les
maquettes fournies par lrsquoeacutequipe graphique dans un langage informatique le HTML Il compose la mise en page du site Web en y
inteacutegrant les eacuteleacutements des maquettes graphiques textes sons
images Il participe agrave la qualiteacute du site dans le respect des normes
drsquoaccessibiliteacute de reacutefeacuterencement et drsquoergonomieraquo
Portail des meacutetiers de lrsquoInternet
httpwwwmetiersinternetgouvfrmetierintegrateur-web SOURCE
Web designer Inteacutegrateur Deacuteveloppeur
Reacutealise les maquettes graphiques
Creacuteeacute des templates HTML (code cocircteacute client)
programme les fonctionnaliteacutes du site
(code cocircteacute serveur)
Et vous qui ecirctes vous
Avant de commencer
Deux points essentiels
Lrsquoentreprise
Les utilisateurs
Lrsquoentreprise Valeurs
Clients
Marcheacutes
Strateacutegie
Besoins
Objectifs
Positionnement
Concurrents
Produits
Budgets
Les utilisateurs Valeurs
Envies
Objectifs
Budgets
Caracteacuteristiques
Habitudes de navigation
Habitudes de consommation
Deacutefinir ses utilisateurshellip
hellip pour mieux les connaicirctre
Qui sont-ils
Quels sont leurs attentes
Quels sont leurs besoins
Quels sont leurs habitudes de navigations
un utilisateur = un humainun utilisateur nrsquoest pas monsieur-tout-le-monde
hellip pour mieux les connaicirctre
une meacutethode efficace
Les personasP e rs o n a s
Personnaliteacutes
Situation maritale marieacutes
Enfants 2 (2 et 5 ans)
Ages 32 (Mei) et 33 (Tao)
Professions professeurs
Nationaliteacute chinois
SiteProvenance bouche agrave oreille
Fonctionnaliteacute reacuteservation
Page deacutecouvrir chambre reacuteservation
Technique ordinateur tablette smartphone
Voyage
Dureacutee 1 semaine
Date aoucirct
Activiteacutes shopping visites plages
Mei et Tao NiuMei et Tao veulent partir en vacances en France Ils ont choisi Bordeaux car
crsquoest une petite ville comprenant toutes les commoditeacutes plages (Arca-
chon) visites de chateaux shopping etc
Voyage avec les enfants
Deacutepaysement
Restons accessible
Tout le monde peut acceacuteder au contenu des sites et applications web de faccedilon eacutegale
quelque soit son handicap
scleacuterose en plaque
sensorielmoteur
psychiquemental
Autisme
trisomie 21
paralysie
amputation
myopathie
infirmiteacute motrice ceacutereacutebrale
spina bifida
ceacuteciteacute
malvoyance
amblyopie
achromatopsie
surditeacute
maladies bipolaires
schizophreacutenie
hypochondriaqueeacutepilepsie
scleacuterose en plaque
sensorielmoteur
psychiquemental
Autisme
trisomie 21
paralysie
amputation
myopathie
infirmiteacute motrice ceacutereacutebrale
spina bifida
ceacuteciteacute
malvoyance
amblyopie
achromatopsie
surditeacute
maladies bipolaires
schizophreacutenie
hypochondriaqueeacutepilepsie
maladie
mateacuteriel
support
bruit
environnement
luminositeacute
aujourdrsquohui
De nouveaux supports
De nouvelles attentes de la part des utilisateurs
De nouvelles probleacutematiques
Lrsquoeacutevolution des mobiles
Une augmentation fulgurante
Lrsquoaccegraves agrave lrsquoInternet mobile double chaque anneacutee
Gartner
httpwwwgartnercomnewsroomid2977917SOURCE
+183 drsquoaugmentation de revenus sur mobiles
en 2015 pour Alibaba
Une augmentation fulgurante
StatCounter
httpgsstatcountercom SOURCE
Une augmentation fulgurante
Mediameacutetrie
SOURCE
The mobile moment
Luke Wroblewski
httpwwwlukewcomffentryasp1841 SOURCE
The mobile moment
Adwords laquo Building for the next moment raquo - 5 mai 2015
httpadwordsblogspotfr201505building-for-next-momenthtml SOURCE
laquo And at these times consumers are increasingly picking up their
smartphones for answers In fact more Google searches take place
on mobile devices than on computers in 10 countries including the
US and Japan This presents a tremendous opportunity for marketers
to reach people throughout all the new touchpoints of a consumerrsquos
path to purchase raquo
Des supports diffeacuterents
Saisie Ecran Configuration Connexion
Ordinateur Clavier sourisGrande - tregraves grande
taille(gt 10)
Outils puissants Stable (Ethernet WIFI fibre hellip)
Tablette Ecran tactile clavier (optionnel)
Taille moyenne(sans compter lrsquoiPad
Pro)(7 agrave 12)
Outils moins puissants
Stable (WIFI fibre hellip)
Smartphone Ecran tactile clavier numeacuterique
Petite taille(lt6)
Outils moins puissants
Aleacuteatoire
Des utilisations diffeacuterentes
Utilisation Environnement
Ordinateur Utilisation prolongeacutee assis sur un bureau Stable
Tablette Utilisation informelle sur le canapeacute ou au lit Relativement stable
Smartphone Bregraveves salves drsquoactiviteacutes dans des lieux divers au fil de la journeacutee
Aleacuteatoire
Des utilisations agrave des moments diffeacuterents
httpsreaditlaterlistcomblog201101is-mobile-affecting-when-we-read SOURCE
Desktop un environnement - geacuteneacuteralement - bienveillant
Mobile un environnement - parfois - hostile
La taille compte (comme quoi)
Des curseurs diffeacuterents
Desktop (souris)
Mobile (doigt)
1 pixel (ou presque)
Plusieurs pixels
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Espacer les eacuteleacutements cliquables
Lien
B O U T O N gt 7mm
gt 2mm
B O U T O N
OK
Lien
B O U T O N
KO
B O U T O N
LienLien
Ameacuteliorer la lisibiliteacute du texte
Des paragraphes trop larges reacuteduisent la lisibiliteacute Compter en moyenne 60 caractegraveres par ligne
Wikipeacutedia - JRR Tolkien
httpsfrwikipediaorgwikiJ_R_R_TolkienSOURCE
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Le texte justifieacute sur des petites largeurs reacuteduit la lisibiliteacute
X
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Un contenu lisible
URSSAF
httpswwwurssaffrportailhomehtml SOURCE
Un corps de texte suffisamment grand Agrave minima 14px sur mobile (deacutepend de la typographie)
X
Un contenu lisible
Korben
httpkorbeninfoSOURCE
Le survol du curseur nrsquoexiste pas sur mobile
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Etude de faisabiliteacute veille aide au cahiers des charges pour site webhellip
Mise en œuvre (audit de site strateacutegie de preacutesence en ligne gestion de la e-reputationhellip)
Actions e-marketing (reacuteseaux sociaux e mailing marketing newsletter Gestion de la relation client)
Appui juridique (permanence drsquoavocats du numeacuteriquehellip)
Appui agrave la deacutemateacuterialisation des eacutechanges de donneacutees et agrave la seacutecurisation
Recherche de financements
wwwbordeauxccifr polenumerique
05 56 79 5000
Le Pocircle numeacuterique au service de la Transformation numeacuterique des entreprises
Nos conseillers vous accompagnent tout au long de votre projet
Evolution du web
Quelles solutions ergonomiques estheacutetiques et techniques
Le point de vue drsquoun inteacutegrateur
Thomas Catinaud inteacutegrateur web - formateur
thomascatinaudcom
hellothomascatinaudcom
Thomas Catinaud
Inteacutegrateur web (ou le plus beau meacutetier du monde)
laquo Lrsquointeacutegrateur Web est chargeacute de traduire et de transposer les
maquettes fournies par lrsquoeacutequipe graphique dans un langage informatique le HTML Il compose la mise en page du site Web en y
inteacutegrant les eacuteleacutements des maquettes graphiques textes sons
images Il participe agrave la qualiteacute du site dans le respect des normes
drsquoaccessibiliteacute de reacutefeacuterencement et drsquoergonomieraquo
Portail des meacutetiers de lrsquoInternet
httpwwwmetiersinternetgouvfrmetierintegrateur-web SOURCE
Web designer Inteacutegrateur Deacuteveloppeur
Reacutealise les maquettes graphiques
Creacuteeacute des templates HTML (code cocircteacute client)
programme les fonctionnaliteacutes du site
(code cocircteacute serveur)
Et vous qui ecirctes vous
Avant de commencer
Deux points essentiels
Lrsquoentreprise
Les utilisateurs
Lrsquoentreprise Valeurs
Clients
Marcheacutes
Strateacutegie
Besoins
Objectifs
Positionnement
Concurrents
Produits
Budgets
Les utilisateurs Valeurs
Envies
Objectifs
Budgets
Caracteacuteristiques
Habitudes de navigation
Habitudes de consommation
Deacutefinir ses utilisateurshellip
hellip pour mieux les connaicirctre
Qui sont-ils
Quels sont leurs attentes
Quels sont leurs besoins
Quels sont leurs habitudes de navigations
un utilisateur = un humainun utilisateur nrsquoest pas monsieur-tout-le-monde
hellip pour mieux les connaicirctre
une meacutethode efficace
Les personasP e rs o n a s
Personnaliteacutes
Situation maritale marieacutes
Enfants 2 (2 et 5 ans)
Ages 32 (Mei) et 33 (Tao)
Professions professeurs
Nationaliteacute chinois
SiteProvenance bouche agrave oreille
Fonctionnaliteacute reacuteservation
Page deacutecouvrir chambre reacuteservation
Technique ordinateur tablette smartphone
Voyage
Dureacutee 1 semaine
Date aoucirct
Activiteacutes shopping visites plages
Mei et Tao NiuMei et Tao veulent partir en vacances en France Ils ont choisi Bordeaux car
crsquoest une petite ville comprenant toutes les commoditeacutes plages (Arca-
chon) visites de chateaux shopping etc
Voyage avec les enfants
Deacutepaysement
Restons accessible
Tout le monde peut acceacuteder au contenu des sites et applications web de faccedilon eacutegale
quelque soit son handicap
scleacuterose en plaque
sensorielmoteur
psychiquemental
Autisme
trisomie 21
paralysie
amputation
myopathie
infirmiteacute motrice ceacutereacutebrale
spina bifida
ceacuteciteacute
malvoyance
amblyopie
achromatopsie
surditeacute
maladies bipolaires
schizophreacutenie
hypochondriaqueeacutepilepsie
scleacuterose en plaque
sensorielmoteur
psychiquemental
Autisme
trisomie 21
paralysie
amputation
myopathie
infirmiteacute motrice ceacutereacutebrale
spina bifida
ceacuteciteacute
malvoyance
amblyopie
achromatopsie
surditeacute
maladies bipolaires
schizophreacutenie
hypochondriaqueeacutepilepsie
maladie
mateacuteriel
support
bruit
environnement
luminositeacute
aujourdrsquohui
De nouveaux supports
De nouvelles attentes de la part des utilisateurs
De nouvelles probleacutematiques
Lrsquoeacutevolution des mobiles
Une augmentation fulgurante
Lrsquoaccegraves agrave lrsquoInternet mobile double chaque anneacutee
Gartner
httpwwwgartnercomnewsroomid2977917SOURCE
+183 drsquoaugmentation de revenus sur mobiles
en 2015 pour Alibaba
Une augmentation fulgurante
StatCounter
httpgsstatcountercom SOURCE
Une augmentation fulgurante
Mediameacutetrie
SOURCE
The mobile moment
Luke Wroblewski
httpwwwlukewcomffentryasp1841 SOURCE
The mobile moment
Adwords laquo Building for the next moment raquo - 5 mai 2015
httpadwordsblogspotfr201505building-for-next-momenthtml SOURCE
laquo And at these times consumers are increasingly picking up their
smartphones for answers In fact more Google searches take place
on mobile devices than on computers in 10 countries including the
US and Japan This presents a tremendous opportunity for marketers
to reach people throughout all the new touchpoints of a consumerrsquos
path to purchase raquo
Des supports diffeacuterents
Saisie Ecran Configuration Connexion
Ordinateur Clavier sourisGrande - tregraves grande
taille(gt 10)
Outils puissants Stable (Ethernet WIFI fibre hellip)
Tablette Ecran tactile clavier (optionnel)
Taille moyenne(sans compter lrsquoiPad
Pro)(7 agrave 12)
Outils moins puissants
Stable (WIFI fibre hellip)
Smartphone Ecran tactile clavier numeacuterique
Petite taille(lt6)
Outils moins puissants
Aleacuteatoire
Des utilisations diffeacuterentes
Utilisation Environnement
Ordinateur Utilisation prolongeacutee assis sur un bureau Stable
Tablette Utilisation informelle sur le canapeacute ou au lit Relativement stable
Smartphone Bregraveves salves drsquoactiviteacutes dans des lieux divers au fil de la journeacutee
Aleacuteatoire
Des utilisations agrave des moments diffeacuterents
httpsreaditlaterlistcomblog201101is-mobile-affecting-when-we-read SOURCE
Desktop un environnement - geacuteneacuteralement - bienveillant
Mobile un environnement - parfois - hostile
La taille compte (comme quoi)
Des curseurs diffeacuterents
Desktop (souris)
Mobile (doigt)
1 pixel (ou presque)
Plusieurs pixels
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Espacer les eacuteleacutements cliquables
Lien
B O U T O N gt 7mm
gt 2mm
B O U T O N
OK
Lien
B O U T O N
KO
B O U T O N
LienLien
Ameacuteliorer la lisibiliteacute du texte
Des paragraphes trop larges reacuteduisent la lisibiliteacute Compter en moyenne 60 caractegraveres par ligne
Wikipeacutedia - JRR Tolkien
httpsfrwikipediaorgwikiJ_R_R_TolkienSOURCE
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Le texte justifieacute sur des petites largeurs reacuteduit la lisibiliteacute
X
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Un contenu lisible
URSSAF
httpswwwurssaffrportailhomehtml SOURCE
Un corps de texte suffisamment grand Agrave minima 14px sur mobile (deacutepend de la typographie)
X
Un contenu lisible
Korben
httpkorbeninfoSOURCE
Le survol du curseur nrsquoexiste pas sur mobile
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Evolution du web
Quelles solutions ergonomiques estheacutetiques et techniques
Le point de vue drsquoun inteacutegrateur
Thomas Catinaud inteacutegrateur web - formateur
thomascatinaudcom
hellothomascatinaudcom
Thomas Catinaud
Inteacutegrateur web (ou le plus beau meacutetier du monde)
laquo Lrsquointeacutegrateur Web est chargeacute de traduire et de transposer les
maquettes fournies par lrsquoeacutequipe graphique dans un langage informatique le HTML Il compose la mise en page du site Web en y
inteacutegrant les eacuteleacutements des maquettes graphiques textes sons
images Il participe agrave la qualiteacute du site dans le respect des normes
drsquoaccessibiliteacute de reacutefeacuterencement et drsquoergonomieraquo
Portail des meacutetiers de lrsquoInternet
httpwwwmetiersinternetgouvfrmetierintegrateur-web SOURCE
Web designer Inteacutegrateur Deacuteveloppeur
Reacutealise les maquettes graphiques
Creacuteeacute des templates HTML (code cocircteacute client)
programme les fonctionnaliteacutes du site
(code cocircteacute serveur)
Et vous qui ecirctes vous
Avant de commencer
Deux points essentiels
Lrsquoentreprise
Les utilisateurs
Lrsquoentreprise Valeurs
Clients
Marcheacutes
Strateacutegie
Besoins
Objectifs
Positionnement
Concurrents
Produits
Budgets
Les utilisateurs Valeurs
Envies
Objectifs
Budgets
Caracteacuteristiques
Habitudes de navigation
Habitudes de consommation
Deacutefinir ses utilisateurshellip
hellip pour mieux les connaicirctre
Qui sont-ils
Quels sont leurs attentes
Quels sont leurs besoins
Quels sont leurs habitudes de navigations
un utilisateur = un humainun utilisateur nrsquoest pas monsieur-tout-le-monde
hellip pour mieux les connaicirctre
une meacutethode efficace
Les personasP e rs o n a s
Personnaliteacutes
Situation maritale marieacutes
Enfants 2 (2 et 5 ans)
Ages 32 (Mei) et 33 (Tao)
Professions professeurs
Nationaliteacute chinois
SiteProvenance bouche agrave oreille
Fonctionnaliteacute reacuteservation
Page deacutecouvrir chambre reacuteservation
Technique ordinateur tablette smartphone
Voyage
Dureacutee 1 semaine
Date aoucirct
Activiteacutes shopping visites plages
Mei et Tao NiuMei et Tao veulent partir en vacances en France Ils ont choisi Bordeaux car
crsquoest une petite ville comprenant toutes les commoditeacutes plages (Arca-
chon) visites de chateaux shopping etc
Voyage avec les enfants
Deacutepaysement
Restons accessible
Tout le monde peut acceacuteder au contenu des sites et applications web de faccedilon eacutegale
quelque soit son handicap
scleacuterose en plaque
sensorielmoteur
psychiquemental
Autisme
trisomie 21
paralysie
amputation
myopathie
infirmiteacute motrice ceacutereacutebrale
spina bifida
ceacuteciteacute
malvoyance
amblyopie
achromatopsie
surditeacute
maladies bipolaires
schizophreacutenie
hypochondriaqueeacutepilepsie
scleacuterose en plaque
sensorielmoteur
psychiquemental
Autisme
trisomie 21
paralysie
amputation
myopathie
infirmiteacute motrice ceacutereacutebrale
spina bifida
ceacuteciteacute
malvoyance
amblyopie
achromatopsie
surditeacute
maladies bipolaires
schizophreacutenie
hypochondriaqueeacutepilepsie
maladie
mateacuteriel
support
bruit
environnement
luminositeacute
aujourdrsquohui
De nouveaux supports
De nouvelles attentes de la part des utilisateurs
De nouvelles probleacutematiques
Lrsquoeacutevolution des mobiles
Une augmentation fulgurante
Lrsquoaccegraves agrave lrsquoInternet mobile double chaque anneacutee
Gartner
httpwwwgartnercomnewsroomid2977917SOURCE
+183 drsquoaugmentation de revenus sur mobiles
en 2015 pour Alibaba
Une augmentation fulgurante
StatCounter
httpgsstatcountercom SOURCE
Une augmentation fulgurante
Mediameacutetrie
SOURCE
The mobile moment
Luke Wroblewski
httpwwwlukewcomffentryasp1841 SOURCE
The mobile moment
Adwords laquo Building for the next moment raquo - 5 mai 2015
httpadwordsblogspotfr201505building-for-next-momenthtml SOURCE
laquo And at these times consumers are increasingly picking up their
smartphones for answers In fact more Google searches take place
on mobile devices than on computers in 10 countries including the
US and Japan This presents a tremendous opportunity for marketers
to reach people throughout all the new touchpoints of a consumerrsquos
path to purchase raquo
Des supports diffeacuterents
Saisie Ecran Configuration Connexion
Ordinateur Clavier sourisGrande - tregraves grande
taille(gt 10)
Outils puissants Stable (Ethernet WIFI fibre hellip)
Tablette Ecran tactile clavier (optionnel)
Taille moyenne(sans compter lrsquoiPad
Pro)(7 agrave 12)
Outils moins puissants
Stable (WIFI fibre hellip)
Smartphone Ecran tactile clavier numeacuterique
Petite taille(lt6)
Outils moins puissants
Aleacuteatoire
Des utilisations diffeacuterentes
Utilisation Environnement
Ordinateur Utilisation prolongeacutee assis sur un bureau Stable
Tablette Utilisation informelle sur le canapeacute ou au lit Relativement stable
Smartphone Bregraveves salves drsquoactiviteacutes dans des lieux divers au fil de la journeacutee
Aleacuteatoire
Des utilisations agrave des moments diffeacuterents
httpsreaditlaterlistcomblog201101is-mobile-affecting-when-we-read SOURCE
Desktop un environnement - geacuteneacuteralement - bienveillant
Mobile un environnement - parfois - hostile
La taille compte (comme quoi)
Des curseurs diffeacuterents
Desktop (souris)
Mobile (doigt)
1 pixel (ou presque)
Plusieurs pixels
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Espacer les eacuteleacutements cliquables
Lien
B O U T O N gt 7mm
gt 2mm
B O U T O N
OK
Lien
B O U T O N
KO
B O U T O N
LienLien
Ameacuteliorer la lisibiliteacute du texte
Des paragraphes trop larges reacuteduisent la lisibiliteacute Compter en moyenne 60 caractegraveres par ligne
Wikipeacutedia - JRR Tolkien
httpsfrwikipediaorgwikiJ_R_R_TolkienSOURCE
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Le texte justifieacute sur des petites largeurs reacuteduit la lisibiliteacute
X
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Un contenu lisible
URSSAF
httpswwwurssaffrportailhomehtml SOURCE
Un corps de texte suffisamment grand Agrave minima 14px sur mobile (deacutepend de la typographie)
X
Un contenu lisible
Korben
httpkorbeninfoSOURCE
Le survol du curseur nrsquoexiste pas sur mobile
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Thomas Catinaud inteacutegrateur web - formateur
thomascatinaudcom
hellothomascatinaudcom
Thomas Catinaud
Inteacutegrateur web (ou le plus beau meacutetier du monde)
laquo Lrsquointeacutegrateur Web est chargeacute de traduire et de transposer les
maquettes fournies par lrsquoeacutequipe graphique dans un langage informatique le HTML Il compose la mise en page du site Web en y
inteacutegrant les eacuteleacutements des maquettes graphiques textes sons
images Il participe agrave la qualiteacute du site dans le respect des normes
drsquoaccessibiliteacute de reacutefeacuterencement et drsquoergonomieraquo
Portail des meacutetiers de lrsquoInternet
httpwwwmetiersinternetgouvfrmetierintegrateur-web SOURCE
Web designer Inteacutegrateur Deacuteveloppeur
Reacutealise les maquettes graphiques
Creacuteeacute des templates HTML (code cocircteacute client)
programme les fonctionnaliteacutes du site
(code cocircteacute serveur)
Et vous qui ecirctes vous
Avant de commencer
Deux points essentiels
Lrsquoentreprise
Les utilisateurs
Lrsquoentreprise Valeurs
Clients
Marcheacutes
Strateacutegie
Besoins
Objectifs
Positionnement
Concurrents
Produits
Budgets
Les utilisateurs Valeurs
Envies
Objectifs
Budgets
Caracteacuteristiques
Habitudes de navigation
Habitudes de consommation
Deacutefinir ses utilisateurshellip
hellip pour mieux les connaicirctre
Qui sont-ils
Quels sont leurs attentes
Quels sont leurs besoins
Quels sont leurs habitudes de navigations
un utilisateur = un humainun utilisateur nrsquoest pas monsieur-tout-le-monde
hellip pour mieux les connaicirctre
une meacutethode efficace
Les personasP e rs o n a s
Personnaliteacutes
Situation maritale marieacutes
Enfants 2 (2 et 5 ans)
Ages 32 (Mei) et 33 (Tao)
Professions professeurs
Nationaliteacute chinois
SiteProvenance bouche agrave oreille
Fonctionnaliteacute reacuteservation
Page deacutecouvrir chambre reacuteservation
Technique ordinateur tablette smartphone
Voyage
Dureacutee 1 semaine
Date aoucirct
Activiteacutes shopping visites plages
Mei et Tao NiuMei et Tao veulent partir en vacances en France Ils ont choisi Bordeaux car
crsquoest une petite ville comprenant toutes les commoditeacutes plages (Arca-
chon) visites de chateaux shopping etc
Voyage avec les enfants
Deacutepaysement
Restons accessible
Tout le monde peut acceacuteder au contenu des sites et applications web de faccedilon eacutegale
quelque soit son handicap
scleacuterose en plaque
sensorielmoteur
psychiquemental
Autisme
trisomie 21
paralysie
amputation
myopathie
infirmiteacute motrice ceacutereacutebrale
spina bifida
ceacuteciteacute
malvoyance
amblyopie
achromatopsie
surditeacute
maladies bipolaires
schizophreacutenie
hypochondriaqueeacutepilepsie
scleacuterose en plaque
sensorielmoteur
psychiquemental
Autisme
trisomie 21
paralysie
amputation
myopathie
infirmiteacute motrice ceacutereacutebrale
spina bifida
ceacuteciteacute
malvoyance
amblyopie
achromatopsie
surditeacute
maladies bipolaires
schizophreacutenie
hypochondriaqueeacutepilepsie
maladie
mateacuteriel
support
bruit
environnement
luminositeacute
aujourdrsquohui
De nouveaux supports
De nouvelles attentes de la part des utilisateurs
De nouvelles probleacutematiques
Lrsquoeacutevolution des mobiles
Une augmentation fulgurante
Lrsquoaccegraves agrave lrsquoInternet mobile double chaque anneacutee
Gartner
httpwwwgartnercomnewsroomid2977917SOURCE
+183 drsquoaugmentation de revenus sur mobiles
en 2015 pour Alibaba
Une augmentation fulgurante
StatCounter
httpgsstatcountercom SOURCE
Une augmentation fulgurante
Mediameacutetrie
SOURCE
The mobile moment
Luke Wroblewski
httpwwwlukewcomffentryasp1841 SOURCE
The mobile moment
Adwords laquo Building for the next moment raquo - 5 mai 2015
httpadwordsblogspotfr201505building-for-next-momenthtml SOURCE
laquo And at these times consumers are increasingly picking up their
smartphones for answers In fact more Google searches take place
on mobile devices than on computers in 10 countries including the
US and Japan This presents a tremendous opportunity for marketers
to reach people throughout all the new touchpoints of a consumerrsquos
path to purchase raquo
Des supports diffeacuterents
Saisie Ecran Configuration Connexion
Ordinateur Clavier sourisGrande - tregraves grande
taille(gt 10)
Outils puissants Stable (Ethernet WIFI fibre hellip)
Tablette Ecran tactile clavier (optionnel)
Taille moyenne(sans compter lrsquoiPad
Pro)(7 agrave 12)
Outils moins puissants
Stable (WIFI fibre hellip)
Smartphone Ecran tactile clavier numeacuterique
Petite taille(lt6)
Outils moins puissants
Aleacuteatoire
Des utilisations diffeacuterentes
Utilisation Environnement
Ordinateur Utilisation prolongeacutee assis sur un bureau Stable
Tablette Utilisation informelle sur le canapeacute ou au lit Relativement stable
Smartphone Bregraveves salves drsquoactiviteacutes dans des lieux divers au fil de la journeacutee
Aleacuteatoire
Des utilisations agrave des moments diffeacuterents
httpsreaditlaterlistcomblog201101is-mobile-affecting-when-we-read SOURCE
Desktop un environnement - geacuteneacuteralement - bienveillant
Mobile un environnement - parfois - hostile
La taille compte (comme quoi)
Des curseurs diffeacuterents
Desktop (souris)
Mobile (doigt)
1 pixel (ou presque)
Plusieurs pixels
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Espacer les eacuteleacutements cliquables
Lien
B O U T O N gt 7mm
gt 2mm
B O U T O N
OK
Lien
B O U T O N
KO
B O U T O N
LienLien
Ameacuteliorer la lisibiliteacute du texte
Des paragraphes trop larges reacuteduisent la lisibiliteacute Compter en moyenne 60 caractegraveres par ligne
Wikipeacutedia - JRR Tolkien
httpsfrwikipediaorgwikiJ_R_R_TolkienSOURCE
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Le texte justifieacute sur des petites largeurs reacuteduit la lisibiliteacute
X
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Un contenu lisible
URSSAF
httpswwwurssaffrportailhomehtml SOURCE
Un corps de texte suffisamment grand Agrave minima 14px sur mobile (deacutepend de la typographie)
X
Un contenu lisible
Korben
httpkorbeninfoSOURCE
Le survol du curseur nrsquoexiste pas sur mobile
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Inteacutegrateur web (ou le plus beau meacutetier du monde)
laquo Lrsquointeacutegrateur Web est chargeacute de traduire et de transposer les
maquettes fournies par lrsquoeacutequipe graphique dans un langage informatique le HTML Il compose la mise en page du site Web en y
inteacutegrant les eacuteleacutements des maquettes graphiques textes sons
images Il participe agrave la qualiteacute du site dans le respect des normes
drsquoaccessibiliteacute de reacutefeacuterencement et drsquoergonomieraquo
Portail des meacutetiers de lrsquoInternet
httpwwwmetiersinternetgouvfrmetierintegrateur-web SOURCE
Web designer Inteacutegrateur Deacuteveloppeur
Reacutealise les maquettes graphiques
Creacuteeacute des templates HTML (code cocircteacute client)
programme les fonctionnaliteacutes du site
(code cocircteacute serveur)
Et vous qui ecirctes vous
Avant de commencer
Deux points essentiels
Lrsquoentreprise
Les utilisateurs
Lrsquoentreprise Valeurs
Clients
Marcheacutes
Strateacutegie
Besoins
Objectifs
Positionnement
Concurrents
Produits
Budgets
Les utilisateurs Valeurs
Envies
Objectifs
Budgets
Caracteacuteristiques
Habitudes de navigation
Habitudes de consommation
Deacutefinir ses utilisateurshellip
hellip pour mieux les connaicirctre
Qui sont-ils
Quels sont leurs attentes
Quels sont leurs besoins
Quels sont leurs habitudes de navigations
un utilisateur = un humainun utilisateur nrsquoest pas monsieur-tout-le-monde
hellip pour mieux les connaicirctre
une meacutethode efficace
Les personasP e rs o n a s
Personnaliteacutes
Situation maritale marieacutes
Enfants 2 (2 et 5 ans)
Ages 32 (Mei) et 33 (Tao)
Professions professeurs
Nationaliteacute chinois
SiteProvenance bouche agrave oreille
Fonctionnaliteacute reacuteservation
Page deacutecouvrir chambre reacuteservation
Technique ordinateur tablette smartphone
Voyage
Dureacutee 1 semaine
Date aoucirct
Activiteacutes shopping visites plages
Mei et Tao NiuMei et Tao veulent partir en vacances en France Ils ont choisi Bordeaux car
crsquoest une petite ville comprenant toutes les commoditeacutes plages (Arca-
chon) visites de chateaux shopping etc
Voyage avec les enfants
Deacutepaysement
Restons accessible
Tout le monde peut acceacuteder au contenu des sites et applications web de faccedilon eacutegale
quelque soit son handicap
scleacuterose en plaque
sensorielmoteur
psychiquemental
Autisme
trisomie 21
paralysie
amputation
myopathie
infirmiteacute motrice ceacutereacutebrale
spina bifida
ceacuteciteacute
malvoyance
amblyopie
achromatopsie
surditeacute
maladies bipolaires
schizophreacutenie
hypochondriaqueeacutepilepsie
scleacuterose en plaque
sensorielmoteur
psychiquemental
Autisme
trisomie 21
paralysie
amputation
myopathie
infirmiteacute motrice ceacutereacutebrale
spina bifida
ceacuteciteacute
malvoyance
amblyopie
achromatopsie
surditeacute
maladies bipolaires
schizophreacutenie
hypochondriaqueeacutepilepsie
maladie
mateacuteriel
support
bruit
environnement
luminositeacute
aujourdrsquohui
De nouveaux supports
De nouvelles attentes de la part des utilisateurs
De nouvelles probleacutematiques
Lrsquoeacutevolution des mobiles
Une augmentation fulgurante
Lrsquoaccegraves agrave lrsquoInternet mobile double chaque anneacutee
Gartner
httpwwwgartnercomnewsroomid2977917SOURCE
+183 drsquoaugmentation de revenus sur mobiles
en 2015 pour Alibaba
Une augmentation fulgurante
StatCounter
httpgsstatcountercom SOURCE
Une augmentation fulgurante
Mediameacutetrie
SOURCE
The mobile moment
Luke Wroblewski
httpwwwlukewcomffentryasp1841 SOURCE
The mobile moment
Adwords laquo Building for the next moment raquo - 5 mai 2015
httpadwordsblogspotfr201505building-for-next-momenthtml SOURCE
laquo And at these times consumers are increasingly picking up their
smartphones for answers In fact more Google searches take place
on mobile devices than on computers in 10 countries including the
US and Japan This presents a tremendous opportunity for marketers
to reach people throughout all the new touchpoints of a consumerrsquos
path to purchase raquo
Des supports diffeacuterents
Saisie Ecran Configuration Connexion
Ordinateur Clavier sourisGrande - tregraves grande
taille(gt 10)
Outils puissants Stable (Ethernet WIFI fibre hellip)
Tablette Ecran tactile clavier (optionnel)
Taille moyenne(sans compter lrsquoiPad
Pro)(7 agrave 12)
Outils moins puissants
Stable (WIFI fibre hellip)
Smartphone Ecran tactile clavier numeacuterique
Petite taille(lt6)
Outils moins puissants
Aleacuteatoire
Des utilisations diffeacuterentes
Utilisation Environnement
Ordinateur Utilisation prolongeacutee assis sur un bureau Stable
Tablette Utilisation informelle sur le canapeacute ou au lit Relativement stable
Smartphone Bregraveves salves drsquoactiviteacutes dans des lieux divers au fil de la journeacutee
Aleacuteatoire
Des utilisations agrave des moments diffeacuterents
httpsreaditlaterlistcomblog201101is-mobile-affecting-when-we-read SOURCE
Desktop un environnement - geacuteneacuteralement - bienveillant
Mobile un environnement - parfois - hostile
La taille compte (comme quoi)
Des curseurs diffeacuterents
Desktop (souris)
Mobile (doigt)
1 pixel (ou presque)
Plusieurs pixels
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Espacer les eacuteleacutements cliquables
Lien
B O U T O N gt 7mm
gt 2mm
B O U T O N
OK
Lien
B O U T O N
KO
B O U T O N
LienLien
Ameacuteliorer la lisibiliteacute du texte
Des paragraphes trop larges reacuteduisent la lisibiliteacute Compter en moyenne 60 caractegraveres par ligne
Wikipeacutedia - JRR Tolkien
httpsfrwikipediaorgwikiJ_R_R_TolkienSOURCE
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Le texte justifieacute sur des petites largeurs reacuteduit la lisibiliteacute
X
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Un contenu lisible
URSSAF
httpswwwurssaffrportailhomehtml SOURCE
Un corps de texte suffisamment grand Agrave minima 14px sur mobile (deacutepend de la typographie)
X
Un contenu lisible
Korben
httpkorbeninfoSOURCE
Le survol du curseur nrsquoexiste pas sur mobile
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
laquo Lrsquointeacutegrateur Web est chargeacute de traduire et de transposer les
maquettes fournies par lrsquoeacutequipe graphique dans un langage informatique le HTML Il compose la mise en page du site Web en y
inteacutegrant les eacuteleacutements des maquettes graphiques textes sons
images Il participe agrave la qualiteacute du site dans le respect des normes
drsquoaccessibiliteacute de reacutefeacuterencement et drsquoergonomieraquo
Portail des meacutetiers de lrsquoInternet
httpwwwmetiersinternetgouvfrmetierintegrateur-web SOURCE
Web designer Inteacutegrateur Deacuteveloppeur
Reacutealise les maquettes graphiques
Creacuteeacute des templates HTML (code cocircteacute client)
programme les fonctionnaliteacutes du site
(code cocircteacute serveur)
Et vous qui ecirctes vous
Avant de commencer
Deux points essentiels
Lrsquoentreprise
Les utilisateurs
Lrsquoentreprise Valeurs
Clients
Marcheacutes
Strateacutegie
Besoins
Objectifs
Positionnement
Concurrents
Produits
Budgets
Les utilisateurs Valeurs
Envies
Objectifs
Budgets
Caracteacuteristiques
Habitudes de navigation
Habitudes de consommation
Deacutefinir ses utilisateurshellip
hellip pour mieux les connaicirctre
Qui sont-ils
Quels sont leurs attentes
Quels sont leurs besoins
Quels sont leurs habitudes de navigations
un utilisateur = un humainun utilisateur nrsquoest pas monsieur-tout-le-monde
hellip pour mieux les connaicirctre
une meacutethode efficace
Les personasP e rs o n a s
Personnaliteacutes
Situation maritale marieacutes
Enfants 2 (2 et 5 ans)
Ages 32 (Mei) et 33 (Tao)
Professions professeurs
Nationaliteacute chinois
SiteProvenance bouche agrave oreille
Fonctionnaliteacute reacuteservation
Page deacutecouvrir chambre reacuteservation
Technique ordinateur tablette smartphone
Voyage
Dureacutee 1 semaine
Date aoucirct
Activiteacutes shopping visites plages
Mei et Tao NiuMei et Tao veulent partir en vacances en France Ils ont choisi Bordeaux car
crsquoest une petite ville comprenant toutes les commoditeacutes plages (Arca-
chon) visites de chateaux shopping etc
Voyage avec les enfants
Deacutepaysement
Restons accessible
Tout le monde peut acceacuteder au contenu des sites et applications web de faccedilon eacutegale
quelque soit son handicap
scleacuterose en plaque
sensorielmoteur
psychiquemental
Autisme
trisomie 21
paralysie
amputation
myopathie
infirmiteacute motrice ceacutereacutebrale
spina bifida
ceacuteciteacute
malvoyance
amblyopie
achromatopsie
surditeacute
maladies bipolaires
schizophreacutenie
hypochondriaqueeacutepilepsie
scleacuterose en plaque
sensorielmoteur
psychiquemental
Autisme
trisomie 21
paralysie
amputation
myopathie
infirmiteacute motrice ceacutereacutebrale
spina bifida
ceacuteciteacute
malvoyance
amblyopie
achromatopsie
surditeacute
maladies bipolaires
schizophreacutenie
hypochondriaqueeacutepilepsie
maladie
mateacuteriel
support
bruit
environnement
luminositeacute
aujourdrsquohui
De nouveaux supports
De nouvelles attentes de la part des utilisateurs
De nouvelles probleacutematiques
Lrsquoeacutevolution des mobiles
Une augmentation fulgurante
Lrsquoaccegraves agrave lrsquoInternet mobile double chaque anneacutee
Gartner
httpwwwgartnercomnewsroomid2977917SOURCE
+183 drsquoaugmentation de revenus sur mobiles
en 2015 pour Alibaba
Une augmentation fulgurante
StatCounter
httpgsstatcountercom SOURCE
Une augmentation fulgurante
Mediameacutetrie
SOURCE
The mobile moment
Luke Wroblewski
httpwwwlukewcomffentryasp1841 SOURCE
The mobile moment
Adwords laquo Building for the next moment raquo - 5 mai 2015
httpadwordsblogspotfr201505building-for-next-momenthtml SOURCE
laquo And at these times consumers are increasingly picking up their
smartphones for answers In fact more Google searches take place
on mobile devices than on computers in 10 countries including the
US and Japan This presents a tremendous opportunity for marketers
to reach people throughout all the new touchpoints of a consumerrsquos
path to purchase raquo
Des supports diffeacuterents
Saisie Ecran Configuration Connexion
Ordinateur Clavier sourisGrande - tregraves grande
taille(gt 10)
Outils puissants Stable (Ethernet WIFI fibre hellip)
Tablette Ecran tactile clavier (optionnel)
Taille moyenne(sans compter lrsquoiPad
Pro)(7 agrave 12)
Outils moins puissants
Stable (WIFI fibre hellip)
Smartphone Ecran tactile clavier numeacuterique
Petite taille(lt6)
Outils moins puissants
Aleacuteatoire
Des utilisations diffeacuterentes
Utilisation Environnement
Ordinateur Utilisation prolongeacutee assis sur un bureau Stable
Tablette Utilisation informelle sur le canapeacute ou au lit Relativement stable
Smartphone Bregraveves salves drsquoactiviteacutes dans des lieux divers au fil de la journeacutee
Aleacuteatoire
Des utilisations agrave des moments diffeacuterents
httpsreaditlaterlistcomblog201101is-mobile-affecting-when-we-read SOURCE
Desktop un environnement - geacuteneacuteralement - bienveillant
Mobile un environnement - parfois - hostile
La taille compte (comme quoi)
Des curseurs diffeacuterents
Desktop (souris)
Mobile (doigt)
1 pixel (ou presque)
Plusieurs pixels
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Espacer les eacuteleacutements cliquables
Lien
B O U T O N gt 7mm
gt 2mm
B O U T O N
OK
Lien
B O U T O N
KO
B O U T O N
LienLien
Ameacuteliorer la lisibiliteacute du texte
Des paragraphes trop larges reacuteduisent la lisibiliteacute Compter en moyenne 60 caractegraveres par ligne
Wikipeacutedia - JRR Tolkien
httpsfrwikipediaorgwikiJ_R_R_TolkienSOURCE
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Le texte justifieacute sur des petites largeurs reacuteduit la lisibiliteacute
X
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Un contenu lisible
URSSAF
httpswwwurssaffrportailhomehtml SOURCE
Un corps de texte suffisamment grand Agrave minima 14px sur mobile (deacutepend de la typographie)
X
Un contenu lisible
Korben
httpkorbeninfoSOURCE
Le survol du curseur nrsquoexiste pas sur mobile
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Web designer Inteacutegrateur Deacuteveloppeur
Reacutealise les maquettes graphiques
Creacuteeacute des templates HTML (code cocircteacute client)
programme les fonctionnaliteacutes du site
(code cocircteacute serveur)
Et vous qui ecirctes vous
Avant de commencer
Deux points essentiels
Lrsquoentreprise
Les utilisateurs
Lrsquoentreprise Valeurs
Clients
Marcheacutes
Strateacutegie
Besoins
Objectifs
Positionnement
Concurrents
Produits
Budgets
Les utilisateurs Valeurs
Envies
Objectifs
Budgets
Caracteacuteristiques
Habitudes de navigation
Habitudes de consommation
Deacutefinir ses utilisateurshellip
hellip pour mieux les connaicirctre
Qui sont-ils
Quels sont leurs attentes
Quels sont leurs besoins
Quels sont leurs habitudes de navigations
un utilisateur = un humainun utilisateur nrsquoest pas monsieur-tout-le-monde
hellip pour mieux les connaicirctre
une meacutethode efficace
Les personasP e rs o n a s
Personnaliteacutes
Situation maritale marieacutes
Enfants 2 (2 et 5 ans)
Ages 32 (Mei) et 33 (Tao)
Professions professeurs
Nationaliteacute chinois
SiteProvenance bouche agrave oreille
Fonctionnaliteacute reacuteservation
Page deacutecouvrir chambre reacuteservation
Technique ordinateur tablette smartphone
Voyage
Dureacutee 1 semaine
Date aoucirct
Activiteacutes shopping visites plages
Mei et Tao NiuMei et Tao veulent partir en vacances en France Ils ont choisi Bordeaux car
crsquoest une petite ville comprenant toutes les commoditeacutes plages (Arca-
chon) visites de chateaux shopping etc
Voyage avec les enfants
Deacutepaysement
Restons accessible
Tout le monde peut acceacuteder au contenu des sites et applications web de faccedilon eacutegale
quelque soit son handicap
scleacuterose en plaque
sensorielmoteur
psychiquemental
Autisme
trisomie 21
paralysie
amputation
myopathie
infirmiteacute motrice ceacutereacutebrale
spina bifida
ceacuteciteacute
malvoyance
amblyopie
achromatopsie
surditeacute
maladies bipolaires
schizophreacutenie
hypochondriaqueeacutepilepsie
scleacuterose en plaque
sensorielmoteur
psychiquemental
Autisme
trisomie 21
paralysie
amputation
myopathie
infirmiteacute motrice ceacutereacutebrale
spina bifida
ceacuteciteacute
malvoyance
amblyopie
achromatopsie
surditeacute
maladies bipolaires
schizophreacutenie
hypochondriaqueeacutepilepsie
maladie
mateacuteriel
support
bruit
environnement
luminositeacute
aujourdrsquohui
De nouveaux supports
De nouvelles attentes de la part des utilisateurs
De nouvelles probleacutematiques
Lrsquoeacutevolution des mobiles
Une augmentation fulgurante
Lrsquoaccegraves agrave lrsquoInternet mobile double chaque anneacutee
Gartner
httpwwwgartnercomnewsroomid2977917SOURCE
+183 drsquoaugmentation de revenus sur mobiles
en 2015 pour Alibaba
Une augmentation fulgurante
StatCounter
httpgsstatcountercom SOURCE
Une augmentation fulgurante
Mediameacutetrie
SOURCE
The mobile moment
Luke Wroblewski
httpwwwlukewcomffentryasp1841 SOURCE
The mobile moment
Adwords laquo Building for the next moment raquo - 5 mai 2015
httpadwordsblogspotfr201505building-for-next-momenthtml SOURCE
laquo And at these times consumers are increasingly picking up their
smartphones for answers In fact more Google searches take place
on mobile devices than on computers in 10 countries including the
US and Japan This presents a tremendous opportunity for marketers
to reach people throughout all the new touchpoints of a consumerrsquos
path to purchase raquo
Des supports diffeacuterents
Saisie Ecran Configuration Connexion
Ordinateur Clavier sourisGrande - tregraves grande
taille(gt 10)
Outils puissants Stable (Ethernet WIFI fibre hellip)
Tablette Ecran tactile clavier (optionnel)
Taille moyenne(sans compter lrsquoiPad
Pro)(7 agrave 12)
Outils moins puissants
Stable (WIFI fibre hellip)
Smartphone Ecran tactile clavier numeacuterique
Petite taille(lt6)
Outils moins puissants
Aleacuteatoire
Des utilisations diffeacuterentes
Utilisation Environnement
Ordinateur Utilisation prolongeacutee assis sur un bureau Stable
Tablette Utilisation informelle sur le canapeacute ou au lit Relativement stable
Smartphone Bregraveves salves drsquoactiviteacutes dans des lieux divers au fil de la journeacutee
Aleacuteatoire
Des utilisations agrave des moments diffeacuterents
httpsreaditlaterlistcomblog201101is-mobile-affecting-when-we-read SOURCE
Desktop un environnement - geacuteneacuteralement - bienveillant
Mobile un environnement - parfois - hostile
La taille compte (comme quoi)
Des curseurs diffeacuterents
Desktop (souris)
Mobile (doigt)
1 pixel (ou presque)
Plusieurs pixels
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Espacer les eacuteleacutements cliquables
Lien
B O U T O N gt 7mm
gt 2mm
B O U T O N
OK
Lien
B O U T O N
KO
B O U T O N
LienLien
Ameacuteliorer la lisibiliteacute du texte
Des paragraphes trop larges reacuteduisent la lisibiliteacute Compter en moyenne 60 caractegraveres par ligne
Wikipeacutedia - JRR Tolkien
httpsfrwikipediaorgwikiJ_R_R_TolkienSOURCE
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Le texte justifieacute sur des petites largeurs reacuteduit la lisibiliteacute
X
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Un contenu lisible
URSSAF
httpswwwurssaffrportailhomehtml SOURCE
Un corps de texte suffisamment grand Agrave minima 14px sur mobile (deacutepend de la typographie)
X
Un contenu lisible
Korben
httpkorbeninfoSOURCE
Le survol du curseur nrsquoexiste pas sur mobile
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Et vous qui ecirctes vous
Avant de commencer
Deux points essentiels
Lrsquoentreprise
Les utilisateurs
Lrsquoentreprise Valeurs
Clients
Marcheacutes
Strateacutegie
Besoins
Objectifs
Positionnement
Concurrents
Produits
Budgets
Les utilisateurs Valeurs
Envies
Objectifs
Budgets
Caracteacuteristiques
Habitudes de navigation
Habitudes de consommation
Deacutefinir ses utilisateurshellip
hellip pour mieux les connaicirctre
Qui sont-ils
Quels sont leurs attentes
Quels sont leurs besoins
Quels sont leurs habitudes de navigations
un utilisateur = un humainun utilisateur nrsquoest pas monsieur-tout-le-monde
hellip pour mieux les connaicirctre
une meacutethode efficace
Les personasP e rs o n a s
Personnaliteacutes
Situation maritale marieacutes
Enfants 2 (2 et 5 ans)
Ages 32 (Mei) et 33 (Tao)
Professions professeurs
Nationaliteacute chinois
SiteProvenance bouche agrave oreille
Fonctionnaliteacute reacuteservation
Page deacutecouvrir chambre reacuteservation
Technique ordinateur tablette smartphone
Voyage
Dureacutee 1 semaine
Date aoucirct
Activiteacutes shopping visites plages
Mei et Tao NiuMei et Tao veulent partir en vacances en France Ils ont choisi Bordeaux car
crsquoest une petite ville comprenant toutes les commoditeacutes plages (Arca-
chon) visites de chateaux shopping etc
Voyage avec les enfants
Deacutepaysement
Restons accessible
Tout le monde peut acceacuteder au contenu des sites et applications web de faccedilon eacutegale
quelque soit son handicap
scleacuterose en plaque
sensorielmoteur
psychiquemental
Autisme
trisomie 21
paralysie
amputation
myopathie
infirmiteacute motrice ceacutereacutebrale
spina bifida
ceacuteciteacute
malvoyance
amblyopie
achromatopsie
surditeacute
maladies bipolaires
schizophreacutenie
hypochondriaqueeacutepilepsie
scleacuterose en plaque
sensorielmoteur
psychiquemental
Autisme
trisomie 21
paralysie
amputation
myopathie
infirmiteacute motrice ceacutereacutebrale
spina bifida
ceacuteciteacute
malvoyance
amblyopie
achromatopsie
surditeacute
maladies bipolaires
schizophreacutenie
hypochondriaqueeacutepilepsie
maladie
mateacuteriel
support
bruit
environnement
luminositeacute
aujourdrsquohui
De nouveaux supports
De nouvelles attentes de la part des utilisateurs
De nouvelles probleacutematiques
Lrsquoeacutevolution des mobiles
Une augmentation fulgurante
Lrsquoaccegraves agrave lrsquoInternet mobile double chaque anneacutee
Gartner
httpwwwgartnercomnewsroomid2977917SOURCE
+183 drsquoaugmentation de revenus sur mobiles
en 2015 pour Alibaba
Une augmentation fulgurante
StatCounter
httpgsstatcountercom SOURCE
Une augmentation fulgurante
Mediameacutetrie
SOURCE
The mobile moment
Luke Wroblewski
httpwwwlukewcomffentryasp1841 SOURCE
The mobile moment
Adwords laquo Building for the next moment raquo - 5 mai 2015
httpadwordsblogspotfr201505building-for-next-momenthtml SOURCE
laquo And at these times consumers are increasingly picking up their
smartphones for answers In fact more Google searches take place
on mobile devices than on computers in 10 countries including the
US and Japan This presents a tremendous opportunity for marketers
to reach people throughout all the new touchpoints of a consumerrsquos
path to purchase raquo
Des supports diffeacuterents
Saisie Ecran Configuration Connexion
Ordinateur Clavier sourisGrande - tregraves grande
taille(gt 10)
Outils puissants Stable (Ethernet WIFI fibre hellip)
Tablette Ecran tactile clavier (optionnel)
Taille moyenne(sans compter lrsquoiPad
Pro)(7 agrave 12)
Outils moins puissants
Stable (WIFI fibre hellip)
Smartphone Ecran tactile clavier numeacuterique
Petite taille(lt6)
Outils moins puissants
Aleacuteatoire
Des utilisations diffeacuterentes
Utilisation Environnement
Ordinateur Utilisation prolongeacutee assis sur un bureau Stable
Tablette Utilisation informelle sur le canapeacute ou au lit Relativement stable
Smartphone Bregraveves salves drsquoactiviteacutes dans des lieux divers au fil de la journeacutee
Aleacuteatoire
Des utilisations agrave des moments diffeacuterents
httpsreaditlaterlistcomblog201101is-mobile-affecting-when-we-read SOURCE
Desktop un environnement - geacuteneacuteralement - bienveillant
Mobile un environnement - parfois - hostile
La taille compte (comme quoi)
Des curseurs diffeacuterents
Desktop (souris)
Mobile (doigt)
1 pixel (ou presque)
Plusieurs pixels
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Espacer les eacuteleacutements cliquables
Lien
B O U T O N gt 7mm
gt 2mm
B O U T O N
OK
Lien
B O U T O N
KO
B O U T O N
LienLien
Ameacuteliorer la lisibiliteacute du texte
Des paragraphes trop larges reacuteduisent la lisibiliteacute Compter en moyenne 60 caractegraveres par ligne
Wikipeacutedia - JRR Tolkien
httpsfrwikipediaorgwikiJ_R_R_TolkienSOURCE
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Le texte justifieacute sur des petites largeurs reacuteduit la lisibiliteacute
X
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Un contenu lisible
URSSAF
httpswwwurssaffrportailhomehtml SOURCE
Un corps de texte suffisamment grand Agrave minima 14px sur mobile (deacutepend de la typographie)
X
Un contenu lisible
Korben
httpkorbeninfoSOURCE
Le survol du curseur nrsquoexiste pas sur mobile
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Avant de commencer
Deux points essentiels
Lrsquoentreprise
Les utilisateurs
Lrsquoentreprise Valeurs
Clients
Marcheacutes
Strateacutegie
Besoins
Objectifs
Positionnement
Concurrents
Produits
Budgets
Les utilisateurs Valeurs
Envies
Objectifs
Budgets
Caracteacuteristiques
Habitudes de navigation
Habitudes de consommation
Deacutefinir ses utilisateurshellip
hellip pour mieux les connaicirctre
Qui sont-ils
Quels sont leurs attentes
Quels sont leurs besoins
Quels sont leurs habitudes de navigations
un utilisateur = un humainun utilisateur nrsquoest pas monsieur-tout-le-monde
hellip pour mieux les connaicirctre
une meacutethode efficace
Les personasP e rs o n a s
Personnaliteacutes
Situation maritale marieacutes
Enfants 2 (2 et 5 ans)
Ages 32 (Mei) et 33 (Tao)
Professions professeurs
Nationaliteacute chinois
SiteProvenance bouche agrave oreille
Fonctionnaliteacute reacuteservation
Page deacutecouvrir chambre reacuteservation
Technique ordinateur tablette smartphone
Voyage
Dureacutee 1 semaine
Date aoucirct
Activiteacutes shopping visites plages
Mei et Tao NiuMei et Tao veulent partir en vacances en France Ils ont choisi Bordeaux car
crsquoest une petite ville comprenant toutes les commoditeacutes plages (Arca-
chon) visites de chateaux shopping etc
Voyage avec les enfants
Deacutepaysement
Restons accessible
Tout le monde peut acceacuteder au contenu des sites et applications web de faccedilon eacutegale
quelque soit son handicap
scleacuterose en plaque
sensorielmoteur
psychiquemental
Autisme
trisomie 21
paralysie
amputation
myopathie
infirmiteacute motrice ceacutereacutebrale
spina bifida
ceacuteciteacute
malvoyance
amblyopie
achromatopsie
surditeacute
maladies bipolaires
schizophreacutenie
hypochondriaqueeacutepilepsie
scleacuterose en plaque
sensorielmoteur
psychiquemental
Autisme
trisomie 21
paralysie
amputation
myopathie
infirmiteacute motrice ceacutereacutebrale
spina bifida
ceacuteciteacute
malvoyance
amblyopie
achromatopsie
surditeacute
maladies bipolaires
schizophreacutenie
hypochondriaqueeacutepilepsie
maladie
mateacuteriel
support
bruit
environnement
luminositeacute
aujourdrsquohui
De nouveaux supports
De nouvelles attentes de la part des utilisateurs
De nouvelles probleacutematiques
Lrsquoeacutevolution des mobiles
Une augmentation fulgurante
Lrsquoaccegraves agrave lrsquoInternet mobile double chaque anneacutee
Gartner
httpwwwgartnercomnewsroomid2977917SOURCE
+183 drsquoaugmentation de revenus sur mobiles
en 2015 pour Alibaba
Une augmentation fulgurante
StatCounter
httpgsstatcountercom SOURCE
Une augmentation fulgurante
Mediameacutetrie
SOURCE
The mobile moment
Luke Wroblewski
httpwwwlukewcomffentryasp1841 SOURCE
The mobile moment
Adwords laquo Building for the next moment raquo - 5 mai 2015
httpadwordsblogspotfr201505building-for-next-momenthtml SOURCE
laquo And at these times consumers are increasingly picking up their
smartphones for answers In fact more Google searches take place
on mobile devices than on computers in 10 countries including the
US and Japan This presents a tremendous opportunity for marketers
to reach people throughout all the new touchpoints of a consumerrsquos
path to purchase raquo
Des supports diffeacuterents
Saisie Ecran Configuration Connexion
Ordinateur Clavier sourisGrande - tregraves grande
taille(gt 10)
Outils puissants Stable (Ethernet WIFI fibre hellip)
Tablette Ecran tactile clavier (optionnel)
Taille moyenne(sans compter lrsquoiPad
Pro)(7 agrave 12)
Outils moins puissants
Stable (WIFI fibre hellip)
Smartphone Ecran tactile clavier numeacuterique
Petite taille(lt6)
Outils moins puissants
Aleacuteatoire
Des utilisations diffeacuterentes
Utilisation Environnement
Ordinateur Utilisation prolongeacutee assis sur un bureau Stable
Tablette Utilisation informelle sur le canapeacute ou au lit Relativement stable
Smartphone Bregraveves salves drsquoactiviteacutes dans des lieux divers au fil de la journeacutee
Aleacuteatoire
Des utilisations agrave des moments diffeacuterents
httpsreaditlaterlistcomblog201101is-mobile-affecting-when-we-read SOURCE
Desktop un environnement - geacuteneacuteralement - bienveillant
Mobile un environnement - parfois - hostile
La taille compte (comme quoi)
Des curseurs diffeacuterents
Desktop (souris)
Mobile (doigt)
1 pixel (ou presque)
Plusieurs pixels
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Espacer les eacuteleacutements cliquables
Lien
B O U T O N gt 7mm
gt 2mm
B O U T O N
OK
Lien
B O U T O N
KO
B O U T O N
LienLien
Ameacuteliorer la lisibiliteacute du texte
Des paragraphes trop larges reacuteduisent la lisibiliteacute Compter en moyenne 60 caractegraveres par ligne
Wikipeacutedia - JRR Tolkien
httpsfrwikipediaorgwikiJ_R_R_TolkienSOURCE
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Le texte justifieacute sur des petites largeurs reacuteduit la lisibiliteacute
X
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Un contenu lisible
URSSAF
httpswwwurssaffrportailhomehtml SOURCE
Un corps de texte suffisamment grand Agrave minima 14px sur mobile (deacutepend de la typographie)
X
Un contenu lisible
Korben
httpkorbeninfoSOURCE
Le survol du curseur nrsquoexiste pas sur mobile
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Deux points essentiels
Lrsquoentreprise
Les utilisateurs
Lrsquoentreprise Valeurs
Clients
Marcheacutes
Strateacutegie
Besoins
Objectifs
Positionnement
Concurrents
Produits
Budgets
Les utilisateurs Valeurs
Envies
Objectifs
Budgets
Caracteacuteristiques
Habitudes de navigation
Habitudes de consommation
Deacutefinir ses utilisateurshellip
hellip pour mieux les connaicirctre
Qui sont-ils
Quels sont leurs attentes
Quels sont leurs besoins
Quels sont leurs habitudes de navigations
un utilisateur = un humainun utilisateur nrsquoest pas monsieur-tout-le-monde
hellip pour mieux les connaicirctre
une meacutethode efficace
Les personasP e rs o n a s
Personnaliteacutes
Situation maritale marieacutes
Enfants 2 (2 et 5 ans)
Ages 32 (Mei) et 33 (Tao)
Professions professeurs
Nationaliteacute chinois
SiteProvenance bouche agrave oreille
Fonctionnaliteacute reacuteservation
Page deacutecouvrir chambre reacuteservation
Technique ordinateur tablette smartphone
Voyage
Dureacutee 1 semaine
Date aoucirct
Activiteacutes shopping visites plages
Mei et Tao NiuMei et Tao veulent partir en vacances en France Ils ont choisi Bordeaux car
crsquoest une petite ville comprenant toutes les commoditeacutes plages (Arca-
chon) visites de chateaux shopping etc
Voyage avec les enfants
Deacutepaysement
Restons accessible
Tout le monde peut acceacuteder au contenu des sites et applications web de faccedilon eacutegale
quelque soit son handicap
scleacuterose en plaque
sensorielmoteur
psychiquemental
Autisme
trisomie 21
paralysie
amputation
myopathie
infirmiteacute motrice ceacutereacutebrale
spina bifida
ceacuteciteacute
malvoyance
amblyopie
achromatopsie
surditeacute
maladies bipolaires
schizophreacutenie
hypochondriaqueeacutepilepsie
scleacuterose en plaque
sensorielmoteur
psychiquemental
Autisme
trisomie 21
paralysie
amputation
myopathie
infirmiteacute motrice ceacutereacutebrale
spina bifida
ceacuteciteacute
malvoyance
amblyopie
achromatopsie
surditeacute
maladies bipolaires
schizophreacutenie
hypochondriaqueeacutepilepsie
maladie
mateacuteriel
support
bruit
environnement
luminositeacute
aujourdrsquohui
De nouveaux supports
De nouvelles attentes de la part des utilisateurs
De nouvelles probleacutematiques
Lrsquoeacutevolution des mobiles
Une augmentation fulgurante
Lrsquoaccegraves agrave lrsquoInternet mobile double chaque anneacutee
Gartner
httpwwwgartnercomnewsroomid2977917SOURCE
+183 drsquoaugmentation de revenus sur mobiles
en 2015 pour Alibaba
Une augmentation fulgurante
StatCounter
httpgsstatcountercom SOURCE
Une augmentation fulgurante
Mediameacutetrie
SOURCE
The mobile moment
Luke Wroblewski
httpwwwlukewcomffentryasp1841 SOURCE
The mobile moment
Adwords laquo Building for the next moment raquo - 5 mai 2015
httpadwordsblogspotfr201505building-for-next-momenthtml SOURCE
laquo And at these times consumers are increasingly picking up their
smartphones for answers In fact more Google searches take place
on mobile devices than on computers in 10 countries including the
US and Japan This presents a tremendous opportunity for marketers
to reach people throughout all the new touchpoints of a consumerrsquos
path to purchase raquo
Des supports diffeacuterents
Saisie Ecran Configuration Connexion
Ordinateur Clavier sourisGrande - tregraves grande
taille(gt 10)
Outils puissants Stable (Ethernet WIFI fibre hellip)
Tablette Ecran tactile clavier (optionnel)
Taille moyenne(sans compter lrsquoiPad
Pro)(7 agrave 12)
Outils moins puissants
Stable (WIFI fibre hellip)
Smartphone Ecran tactile clavier numeacuterique
Petite taille(lt6)
Outils moins puissants
Aleacuteatoire
Des utilisations diffeacuterentes
Utilisation Environnement
Ordinateur Utilisation prolongeacutee assis sur un bureau Stable
Tablette Utilisation informelle sur le canapeacute ou au lit Relativement stable
Smartphone Bregraveves salves drsquoactiviteacutes dans des lieux divers au fil de la journeacutee
Aleacuteatoire
Des utilisations agrave des moments diffeacuterents
httpsreaditlaterlistcomblog201101is-mobile-affecting-when-we-read SOURCE
Desktop un environnement - geacuteneacuteralement - bienveillant
Mobile un environnement - parfois - hostile
La taille compte (comme quoi)
Des curseurs diffeacuterents
Desktop (souris)
Mobile (doigt)
1 pixel (ou presque)
Plusieurs pixels
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Espacer les eacuteleacutements cliquables
Lien
B O U T O N gt 7mm
gt 2mm
B O U T O N
OK
Lien
B O U T O N
KO
B O U T O N
LienLien
Ameacuteliorer la lisibiliteacute du texte
Des paragraphes trop larges reacuteduisent la lisibiliteacute Compter en moyenne 60 caractegraveres par ligne
Wikipeacutedia - JRR Tolkien
httpsfrwikipediaorgwikiJ_R_R_TolkienSOURCE
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Le texte justifieacute sur des petites largeurs reacuteduit la lisibiliteacute
X
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Un contenu lisible
URSSAF
httpswwwurssaffrportailhomehtml SOURCE
Un corps de texte suffisamment grand Agrave minima 14px sur mobile (deacutepend de la typographie)
X
Un contenu lisible
Korben
httpkorbeninfoSOURCE
Le survol du curseur nrsquoexiste pas sur mobile
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Lrsquoentreprise Valeurs
Clients
Marcheacutes
Strateacutegie
Besoins
Objectifs
Positionnement
Concurrents
Produits
Budgets
Les utilisateurs Valeurs
Envies
Objectifs
Budgets
Caracteacuteristiques
Habitudes de navigation
Habitudes de consommation
Deacutefinir ses utilisateurshellip
hellip pour mieux les connaicirctre
Qui sont-ils
Quels sont leurs attentes
Quels sont leurs besoins
Quels sont leurs habitudes de navigations
un utilisateur = un humainun utilisateur nrsquoest pas monsieur-tout-le-monde
hellip pour mieux les connaicirctre
une meacutethode efficace
Les personasP e rs o n a s
Personnaliteacutes
Situation maritale marieacutes
Enfants 2 (2 et 5 ans)
Ages 32 (Mei) et 33 (Tao)
Professions professeurs
Nationaliteacute chinois
SiteProvenance bouche agrave oreille
Fonctionnaliteacute reacuteservation
Page deacutecouvrir chambre reacuteservation
Technique ordinateur tablette smartphone
Voyage
Dureacutee 1 semaine
Date aoucirct
Activiteacutes shopping visites plages
Mei et Tao NiuMei et Tao veulent partir en vacances en France Ils ont choisi Bordeaux car
crsquoest une petite ville comprenant toutes les commoditeacutes plages (Arca-
chon) visites de chateaux shopping etc
Voyage avec les enfants
Deacutepaysement
Restons accessible
Tout le monde peut acceacuteder au contenu des sites et applications web de faccedilon eacutegale
quelque soit son handicap
scleacuterose en plaque
sensorielmoteur
psychiquemental
Autisme
trisomie 21
paralysie
amputation
myopathie
infirmiteacute motrice ceacutereacutebrale
spina bifida
ceacuteciteacute
malvoyance
amblyopie
achromatopsie
surditeacute
maladies bipolaires
schizophreacutenie
hypochondriaqueeacutepilepsie
scleacuterose en plaque
sensorielmoteur
psychiquemental
Autisme
trisomie 21
paralysie
amputation
myopathie
infirmiteacute motrice ceacutereacutebrale
spina bifida
ceacuteciteacute
malvoyance
amblyopie
achromatopsie
surditeacute
maladies bipolaires
schizophreacutenie
hypochondriaqueeacutepilepsie
maladie
mateacuteriel
support
bruit
environnement
luminositeacute
aujourdrsquohui
De nouveaux supports
De nouvelles attentes de la part des utilisateurs
De nouvelles probleacutematiques
Lrsquoeacutevolution des mobiles
Une augmentation fulgurante
Lrsquoaccegraves agrave lrsquoInternet mobile double chaque anneacutee
Gartner
httpwwwgartnercomnewsroomid2977917SOURCE
+183 drsquoaugmentation de revenus sur mobiles
en 2015 pour Alibaba
Une augmentation fulgurante
StatCounter
httpgsstatcountercom SOURCE
Une augmentation fulgurante
Mediameacutetrie
SOURCE
The mobile moment
Luke Wroblewski
httpwwwlukewcomffentryasp1841 SOURCE
The mobile moment
Adwords laquo Building for the next moment raquo - 5 mai 2015
httpadwordsblogspotfr201505building-for-next-momenthtml SOURCE
laquo And at these times consumers are increasingly picking up their
smartphones for answers In fact more Google searches take place
on mobile devices than on computers in 10 countries including the
US and Japan This presents a tremendous opportunity for marketers
to reach people throughout all the new touchpoints of a consumerrsquos
path to purchase raquo
Des supports diffeacuterents
Saisie Ecran Configuration Connexion
Ordinateur Clavier sourisGrande - tregraves grande
taille(gt 10)
Outils puissants Stable (Ethernet WIFI fibre hellip)
Tablette Ecran tactile clavier (optionnel)
Taille moyenne(sans compter lrsquoiPad
Pro)(7 agrave 12)
Outils moins puissants
Stable (WIFI fibre hellip)
Smartphone Ecran tactile clavier numeacuterique
Petite taille(lt6)
Outils moins puissants
Aleacuteatoire
Des utilisations diffeacuterentes
Utilisation Environnement
Ordinateur Utilisation prolongeacutee assis sur un bureau Stable
Tablette Utilisation informelle sur le canapeacute ou au lit Relativement stable
Smartphone Bregraveves salves drsquoactiviteacutes dans des lieux divers au fil de la journeacutee
Aleacuteatoire
Des utilisations agrave des moments diffeacuterents
httpsreaditlaterlistcomblog201101is-mobile-affecting-when-we-read SOURCE
Desktop un environnement - geacuteneacuteralement - bienveillant
Mobile un environnement - parfois - hostile
La taille compte (comme quoi)
Des curseurs diffeacuterents
Desktop (souris)
Mobile (doigt)
1 pixel (ou presque)
Plusieurs pixels
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Espacer les eacuteleacutements cliquables
Lien
B O U T O N gt 7mm
gt 2mm
B O U T O N
OK
Lien
B O U T O N
KO
B O U T O N
LienLien
Ameacuteliorer la lisibiliteacute du texte
Des paragraphes trop larges reacuteduisent la lisibiliteacute Compter en moyenne 60 caractegraveres par ligne
Wikipeacutedia - JRR Tolkien
httpsfrwikipediaorgwikiJ_R_R_TolkienSOURCE
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Le texte justifieacute sur des petites largeurs reacuteduit la lisibiliteacute
X
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Un contenu lisible
URSSAF
httpswwwurssaffrportailhomehtml SOURCE
Un corps de texte suffisamment grand Agrave minima 14px sur mobile (deacutepend de la typographie)
X
Un contenu lisible
Korben
httpkorbeninfoSOURCE
Le survol du curseur nrsquoexiste pas sur mobile
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Les utilisateurs Valeurs
Envies
Objectifs
Budgets
Caracteacuteristiques
Habitudes de navigation
Habitudes de consommation
Deacutefinir ses utilisateurshellip
hellip pour mieux les connaicirctre
Qui sont-ils
Quels sont leurs attentes
Quels sont leurs besoins
Quels sont leurs habitudes de navigations
un utilisateur = un humainun utilisateur nrsquoest pas monsieur-tout-le-monde
hellip pour mieux les connaicirctre
une meacutethode efficace
Les personasP e rs o n a s
Personnaliteacutes
Situation maritale marieacutes
Enfants 2 (2 et 5 ans)
Ages 32 (Mei) et 33 (Tao)
Professions professeurs
Nationaliteacute chinois
SiteProvenance bouche agrave oreille
Fonctionnaliteacute reacuteservation
Page deacutecouvrir chambre reacuteservation
Technique ordinateur tablette smartphone
Voyage
Dureacutee 1 semaine
Date aoucirct
Activiteacutes shopping visites plages
Mei et Tao NiuMei et Tao veulent partir en vacances en France Ils ont choisi Bordeaux car
crsquoest une petite ville comprenant toutes les commoditeacutes plages (Arca-
chon) visites de chateaux shopping etc
Voyage avec les enfants
Deacutepaysement
Restons accessible
Tout le monde peut acceacuteder au contenu des sites et applications web de faccedilon eacutegale
quelque soit son handicap
scleacuterose en plaque
sensorielmoteur
psychiquemental
Autisme
trisomie 21
paralysie
amputation
myopathie
infirmiteacute motrice ceacutereacutebrale
spina bifida
ceacuteciteacute
malvoyance
amblyopie
achromatopsie
surditeacute
maladies bipolaires
schizophreacutenie
hypochondriaqueeacutepilepsie
scleacuterose en plaque
sensorielmoteur
psychiquemental
Autisme
trisomie 21
paralysie
amputation
myopathie
infirmiteacute motrice ceacutereacutebrale
spina bifida
ceacuteciteacute
malvoyance
amblyopie
achromatopsie
surditeacute
maladies bipolaires
schizophreacutenie
hypochondriaqueeacutepilepsie
maladie
mateacuteriel
support
bruit
environnement
luminositeacute
aujourdrsquohui
De nouveaux supports
De nouvelles attentes de la part des utilisateurs
De nouvelles probleacutematiques
Lrsquoeacutevolution des mobiles
Une augmentation fulgurante
Lrsquoaccegraves agrave lrsquoInternet mobile double chaque anneacutee
Gartner
httpwwwgartnercomnewsroomid2977917SOURCE
+183 drsquoaugmentation de revenus sur mobiles
en 2015 pour Alibaba
Une augmentation fulgurante
StatCounter
httpgsstatcountercom SOURCE
Une augmentation fulgurante
Mediameacutetrie
SOURCE
The mobile moment
Luke Wroblewski
httpwwwlukewcomffentryasp1841 SOURCE
The mobile moment
Adwords laquo Building for the next moment raquo - 5 mai 2015
httpadwordsblogspotfr201505building-for-next-momenthtml SOURCE
laquo And at these times consumers are increasingly picking up their
smartphones for answers In fact more Google searches take place
on mobile devices than on computers in 10 countries including the
US and Japan This presents a tremendous opportunity for marketers
to reach people throughout all the new touchpoints of a consumerrsquos
path to purchase raquo
Des supports diffeacuterents
Saisie Ecran Configuration Connexion
Ordinateur Clavier sourisGrande - tregraves grande
taille(gt 10)
Outils puissants Stable (Ethernet WIFI fibre hellip)
Tablette Ecran tactile clavier (optionnel)
Taille moyenne(sans compter lrsquoiPad
Pro)(7 agrave 12)
Outils moins puissants
Stable (WIFI fibre hellip)
Smartphone Ecran tactile clavier numeacuterique
Petite taille(lt6)
Outils moins puissants
Aleacuteatoire
Des utilisations diffeacuterentes
Utilisation Environnement
Ordinateur Utilisation prolongeacutee assis sur un bureau Stable
Tablette Utilisation informelle sur le canapeacute ou au lit Relativement stable
Smartphone Bregraveves salves drsquoactiviteacutes dans des lieux divers au fil de la journeacutee
Aleacuteatoire
Des utilisations agrave des moments diffeacuterents
httpsreaditlaterlistcomblog201101is-mobile-affecting-when-we-read SOURCE
Desktop un environnement - geacuteneacuteralement - bienveillant
Mobile un environnement - parfois - hostile
La taille compte (comme quoi)
Des curseurs diffeacuterents
Desktop (souris)
Mobile (doigt)
1 pixel (ou presque)
Plusieurs pixels
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Espacer les eacuteleacutements cliquables
Lien
B O U T O N gt 7mm
gt 2mm
B O U T O N
OK
Lien
B O U T O N
KO
B O U T O N
LienLien
Ameacuteliorer la lisibiliteacute du texte
Des paragraphes trop larges reacuteduisent la lisibiliteacute Compter en moyenne 60 caractegraveres par ligne
Wikipeacutedia - JRR Tolkien
httpsfrwikipediaorgwikiJ_R_R_TolkienSOURCE
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Le texte justifieacute sur des petites largeurs reacuteduit la lisibiliteacute
X
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Un contenu lisible
URSSAF
httpswwwurssaffrportailhomehtml SOURCE
Un corps de texte suffisamment grand Agrave minima 14px sur mobile (deacutepend de la typographie)
X
Un contenu lisible
Korben
httpkorbeninfoSOURCE
Le survol du curseur nrsquoexiste pas sur mobile
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Deacutefinir ses utilisateurshellip
hellip pour mieux les connaicirctre
Qui sont-ils
Quels sont leurs attentes
Quels sont leurs besoins
Quels sont leurs habitudes de navigations
un utilisateur = un humainun utilisateur nrsquoest pas monsieur-tout-le-monde
hellip pour mieux les connaicirctre
une meacutethode efficace
Les personasP e rs o n a s
Personnaliteacutes
Situation maritale marieacutes
Enfants 2 (2 et 5 ans)
Ages 32 (Mei) et 33 (Tao)
Professions professeurs
Nationaliteacute chinois
SiteProvenance bouche agrave oreille
Fonctionnaliteacute reacuteservation
Page deacutecouvrir chambre reacuteservation
Technique ordinateur tablette smartphone
Voyage
Dureacutee 1 semaine
Date aoucirct
Activiteacutes shopping visites plages
Mei et Tao NiuMei et Tao veulent partir en vacances en France Ils ont choisi Bordeaux car
crsquoest une petite ville comprenant toutes les commoditeacutes plages (Arca-
chon) visites de chateaux shopping etc
Voyage avec les enfants
Deacutepaysement
Restons accessible
Tout le monde peut acceacuteder au contenu des sites et applications web de faccedilon eacutegale
quelque soit son handicap
scleacuterose en plaque
sensorielmoteur
psychiquemental
Autisme
trisomie 21
paralysie
amputation
myopathie
infirmiteacute motrice ceacutereacutebrale
spina bifida
ceacuteciteacute
malvoyance
amblyopie
achromatopsie
surditeacute
maladies bipolaires
schizophreacutenie
hypochondriaqueeacutepilepsie
scleacuterose en plaque
sensorielmoteur
psychiquemental
Autisme
trisomie 21
paralysie
amputation
myopathie
infirmiteacute motrice ceacutereacutebrale
spina bifida
ceacuteciteacute
malvoyance
amblyopie
achromatopsie
surditeacute
maladies bipolaires
schizophreacutenie
hypochondriaqueeacutepilepsie
maladie
mateacuteriel
support
bruit
environnement
luminositeacute
aujourdrsquohui
De nouveaux supports
De nouvelles attentes de la part des utilisateurs
De nouvelles probleacutematiques
Lrsquoeacutevolution des mobiles
Une augmentation fulgurante
Lrsquoaccegraves agrave lrsquoInternet mobile double chaque anneacutee
Gartner
httpwwwgartnercomnewsroomid2977917SOURCE
+183 drsquoaugmentation de revenus sur mobiles
en 2015 pour Alibaba
Une augmentation fulgurante
StatCounter
httpgsstatcountercom SOURCE
Une augmentation fulgurante
Mediameacutetrie
SOURCE
The mobile moment
Luke Wroblewski
httpwwwlukewcomffentryasp1841 SOURCE
The mobile moment
Adwords laquo Building for the next moment raquo - 5 mai 2015
httpadwordsblogspotfr201505building-for-next-momenthtml SOURCE
laquo And at these times consumers are increasingly picking up their
smartphones for answers In fact more Google searches take place
on mobile devices than on computers in 10 countries including the
US and Japan This presents a tremendous opportunity for marketers
to reach people throughout all the new touchpoints of a consumerrsquos
path to purchase raquo
Des supports diffeacuterents
Saisie Ecran Configuration Connexion
Ordinateur Clavier sourisGrande - tregraves grande
taille(gt 10)
Outils puissants Stable (Ethernet WIFI fibre hellip)
Tablette Ecran tactile clavier (optionnel)
Taille moyenne(sans compter lrsquoiPad
Pro)(7 agrave 12)
Outils moins puissants
Stable (WIFI fibre hellip)
Smartphone Ecran tactile clavier numeacuterique
Petite taille(lt6)
Outils moins puissants
Aleacuteatoire
Des utilisations diffeacuterentes
Utilisation Environnement
Ordinateur Utilisation prolongeacutee assis sur un bureau Stable
Tablette Utilisation informelle sur le canapeacute ou au lit Relativement stable
Smartphone Bregraveves salves drsquoactiviteacutes dans des lieux divers au fil de la journeacutee
Aleacuteatoire
Des utilisations agrave des moments diffeacuterents
httpsreaditlaterlistcomblog201101is-mobile-affecting-when-we-read SOURCE
Desktop un environnement - geacuteneacuteralement - bienveillant
Mobile un environnement - parfois - hostile
La taille compte (comme quoi)
Des curseurs diffeacuterents
Desktop (souris)
Mobile (doigt)
1 pixel (ou presque)
Plusieurs pixels
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Espacer les eacuteleacutements cliquables
Lien
B O U T O N gt 7mm
gt 2mm
B O U T O N
OK
Lien
B O U T O N
KO
B O U T O N
LienLien
Ameacuteliorer la lisibiliteacute du texte
Des paragraphes trop larges reacuteduisent la lisibiliteacute Compter en moyenne 60 caractegraveres par ligne
Wikipeacutedia - JRR Tolkien
httpsfrwikipediaorgwikiJ_R_R_TolkienSOURCE
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Le texte justifieacute sur des petites largeurs reacuteduit la lisibiliteacute
X
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Un contenu lisible
URSSAF
httpswwwurssaffrportailhomehtml SOURCE
Un corps de texte suffisamment grand Agrave minima 14px sur mobile (deacutepend de la typographie)
X
Un contenu lisible
Korben
httpkorbeninfoSOURCE
Le survol du curseur nrsquoexiste pas sur mobile
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
hellip pour mieux les connaicirctre
Qui sont-ils
Quels sont leurs attentes
Quels sont leurs besoins
Quels sont leurs habitudes de navigations
un utilisateur = un humainun utilisateur nrsquoest pas monsieur-tout-le-monde
hellip pour mieux les connaicirctre
une meacutethode efficace
Les personasP e rs o n a s
Personnaliteacutes
Situation maritale marieacutes
Enfants 2 (2 et 5 ans)
Ages 32 (Mei) et 33 (Tao)
Professions professeurs
Nationaliteacute chinois
SiteProvenance bouche agrave oreille
Fonctionnaliteacute reacuteservation
Page deacutecouvrir chambre reacuteservation
Technique ordinateur tablette smartphone
Voyage
Dureacutee 1 semaine
Date aoucirct
Activiteacutes shopping visites plages
Mei et Tao NiuMei et Tao veulent partir en vacances en France Ils ont choisi Bordeaux car
crsquoest une petite ville comprenant toutes les commoditeacutes plages (Arca-
chon) visites de chateaux shopping etc
Voyage avec les enfants
Deacutepaysement
Restons accessible
Tout le monde peut acceacuteder au contenu des sites et applications web de faccedilon eacutegale
quelque soit son handicap
scleacuterose en plaque
sensorielmoteur
psychiquemental
Autisme
trisomie 21
paralysie
amputation
myopathie
infirmiteacute motrice ceacutereacutebrale
spina bifida
ceacuteciteacute
malvoyance
amblyopie
achromatopsie
surditeacute
maladies bipolaires
schizophreacutenie
hypochondriaqueeacutepilepsie
scleacuterose en plaque
sensorielmoteur
psychiquemental
Autisme
trisomie 21
paralysie
amputation
myopathie
infirmiteacute motrice ceacutereacutebrale
spina bifida
ceacuteciteacute
malvoyance
amblyopie
achromatopsie
surditeacute
maladies bipolaires
schizophreacutenie
hypochondriaqueeacutepilepsie
maladie
mateacuteriel
support
bruit
environnement
luminositeacute
aujourdrsquohui
De nouveaux supports
De nouvelles attentes de la part des utilisateurs
De nouvelles probleacutematiques
Lrsquoeacutevolution des mobiles
Une augmentation fulgurante
Lrsquoaccegraves agrave lrsquoInternet mobile double chaque anneacutee
Gartner
httpwwwgartnercomnewsroomid2977917SOURCE
+183 drsquoaugmentation de revenus sur mobiles
en 2015 pour Alibaba
Une augmentation fulgurante
StatCounter
httpgsstatcountercom SOURCE
Une augmentation fulgurante
Mediameacutetrie
SOURCE
The mobile moment
Luke Wroblewski
httpwwwlukewcomffentryasp1841 SOURCE
The mobile moment
Adwords laquo Building for the next moment raquo - 5 mai 2015
httpadwordsblogspotfr201505building-for-next-momenthtml SOURCE
laquo And at these times consumers are increasingly picking up their
smartphones for answers In fact more Google searches take place
on mobile devices than on computers in 10 countries including the
US and Japan This presents a tremendous opportunity for marketers
to reach people throughout all the new touchpoints of a consumerrsquos
path to purchase raquo
Des supports diffeacuterents
Saisie Ecran Configuration Connexion
Ordinateur Clavier sourisGrande - tregraves grande
taille(gt 10)
Outils puissants Stable (Ethernet WIFI fibre hellip)
Tablette Ecran tactile clavier (optionnel)
Taille moyenne(sans compter lrsquoiPad
Pro)(7 agrave 12)
Outils moins puissants
Stable (WIFI fibre hellip)
Smartphone Ecran tactile clavier numeacuterique
Petite taille(lt6)
Outils moins puissants
Aleacuteatoire
Des utilisations diffeacuterentes
Utilisation Environnement
Ordinateur Utilisation prolongeacutee assis sur un bureau Stable
Tablette Utilisation informelle sur le canapeacute ou au lit Relativement stable
Smartphone Bregraveves salves drsquoactiviteacutes dans des lieux divers au fil de la journeacutee
Aleacuteatoire
Des utilisations agrave des moments diffeacuterents
httpsreaditlaterlistcomblog201101is-mobile-affecting-when-we-read SOURCE
Desktop un environnement - geacuteneacuteralement - bienveillant
Mobile un environnement - parfois - hostile
La taille compte (comme quoi)
Des curseurs diffeacuterents
Desktop (souris)
Mobile (doigt)
1 pixel (ou presque)
Plusieurs pixels
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Espacer les eacuteleacutements cliquables
Lien
B O U T O N gt 7mm
gt 2mm
B O U T O N
OK
Lien
B O U T O N
KO
B O U T O N
LienLien
Ameacuteliorer la lisibiliteacute du texte
Des paragraphes trop larges reacuteduisent la lisibiliteacute Compter en moyenne 60 caractegraveres par ligne
Wikipeacutedia - JRR Tolkien
httpsfrwikipediaorgwikiJ_R_R_TolkienSOURCE
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Le texte justifieacute sur des petites largeurs reacuteduit la lisibiliteacute
X
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Un contenu lisible
URSSAF
httpswwwurssaffrportailhomehtml SOURCE
Un corps de texte suffisamment grand Agrave minima 14px sur mobile (deacutepend de la typographie)
X
Un contenu lisible
Korben
httpkorbeninfoSOURCE
Le survol du curseur nrsquoexiste pas sur mobile
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
un utilisateur = un humainun utilisateur nrsquoest pas monsieur-tout-le-monde
hellip pour mieux les connaicirctre
une meacutethode efficace
Les personasP e rs o n a s
Personnaliteacutes
Situation maritale marieacutes
Enfants 2 (2 et 5 ans)
Ages 32 (Mei) et 33 (Tao)
Professions professeurs
Nationaliteacute chinois
SiteProvenance bouche agrave oreille
Fonctionnaliteacute reacuteservation
Page deacutecouvrir chambre reacuteservation
Technique ordinateur tablette smartphone
Voyage
Dureacutee 1 semaine
Date aoucirct
Activiteacutes shopping visites plages
Mei et Tao NiuMei et Tao veulent partir en vacances en France Ils ont choisi Bordeaux car
crsquoest une petite ville comprenant toutes les commoditeacutes plages (Arca-
chon) visites de chateaux shopping etc
Voyage avec les enfants
Deacutepaysement
Restons accessible
Tout le monde peut acceacuteder au contenu des sites et applications web de faccedilon eacutegale
quelque soit son handicap
scleacuterose en plaque
sensorielmoteur
psychiquemental
Autisme
trisomie 21
paralysie
amputation
myopathie
infirmiteacute motrice ceacutereacutebrale
spina bifida
ceacuteciteacute
malvoyance
amblyopie
achromatopsie
surditeacute
maladies bipolaires
schizophreacutenie
hypochondriaqueeacutepilepsie
scleacuterose en plaque
sensorielmoteur
psychiquemental
Autisme
trisomie 21
paralysie
amputation
myopathie
infirmiteacute motrice ceacutereacutebrale
spina bifida
ceacuteciteacute
malvoyance
amblyopie
achromatopsie
surditeacute
maladies bipolaires
schizophreacutenie
hypochondriaqueeacutepilepsie
maladie
mateacuteriel
support
bruit
environnement
luminositeacute
aujourdrsquohui
De nouveaux supports
De nouvelles attentes de la part des utilisateurs
De nouvelles probleacutematiques
Lrsquoeacutevolution des mobiles
Une augmentation fulgurante
Lrsquoaccegraves agrave lrsquoInternet mobile double chaque anneacutee
Gartner
httpwwwgartnercomnewsroomid2977917SOURCE
+183 drsquoaugmentation de revenus sur mobiles
en 2015 pour Alibaba
Une augmentation fulgurante
StatCounter
httpgsstatcountercom SOURCE
Une augmentation fulgurante
Mediameacutetrie
SOURCE
The mobile moment
Luke Wroblewski
httpwwwlukewcomffentryasp1841 SOURCE
The mobile moment
Adwords laquo Building for the next moment raquo - 5 mai 2015
httpadwordsblogspotfr201505building-for-next-momenthtml SOURCE
laquo And at these times consumers are increasingly picking up their
smartphones for answers In fact more Google searches take place
on mobile devices than on computers in 10 countries including the
US and Japan This presents a tremendous opportunity for marketers
to reach people throughout all the new touchpoints of a consumerrsquos
path to purchase raquo
Des supports diffeacuterents
Saisie Ecran Configuration Connexion
Ordinateur Clavier sourisGrande - tregraves grande
taille(gt 10)
Outils puissants Stable (Ethernet WIFI fibre hellip)
Tablette Ecran tactile clavier (optionnel)
Taille moyenne(sans compter lrsquoiPad
Pro)(7 agrave 12)
Outils moins puissants
Stable (WIFI fibre hellip)
Smartphone Ecran tactile clavier numeacuterique
Petite taille(lt6)
Outils moins puissants
Aleacuteatoire
Des utilisations diffeacuterentes
Utilisation Environnement
Ordinateur Utilisation prolongeacutee assis sur un bureau Stable
Tablette Utilisation informelle sur le canapeacute ou au lit Relativement stable
Smartphone Bregraveves salves drsquoactiviteacutes dans des lieux divers au fil de la journeacutee
Aleacuteatoire
Des utilisations agrave des moments diffeacuterents
httpsreaditlaterlistcomblog201101is-mobile-affecting-when-we-read SOURCE
Desktop un environnement - geacuteneacuteralement - bienveillant
Mobile un environnement - parfois - hostile
La taille compte (comme quoi)
Des curseurs diffeacuterents
Desktop (souris)
Mobile (doigt)
1 pixel (ou presque)
Plusieurs pixels
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Espacer les eacuteleacutements cliquables
Lien
B O U T O N gt 7mm
gt 2mm
B O U T O N
OK
Lien
B O U T O N
KO
B O U T O N
LienLien
Ameacuteliorer la lisibiliteacute du texte
Des paragraphes trop larges reacuteduisent la lisibiliteacute Compter en moyenne 60 caractegraveres par ligne
Wikipeacutedia - JRR Tolkien
httpsfrwikipediaorgwikiJ_R_R_TolkienSOURCE
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Le texte justifieacute sur des petites largeurs reacuteduit la lisibiliteacute
X
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Un contenu lisible
URSSAF
httpswwwurssaffrportailhomehtml SOURCE
Un corps de texte suffisamment grand Agrave minima 14px sur mobile (deacutepend de la typographie)
X
Un contenu lisible
Korben
httpkorbeninfoSOURCE
Le survol du curseur nrsquoexiste pas sur mobile
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
une meacutethode efficace
Les personasP e rs o n a s
Personnaliteacutes
Situation maritale marieacutes
Enfants 2 (2 et 5 ans)
Ages 32 (Mei) et 33 (Tao)
Professions professeurs
Nationaliteacute chinois
SiteProvenance bouche agrave oreille
Fonctionnaliteacute reacuteservation
Page deacutecouvrir chambre reacuteservation
Technique ordinateur tablette smartphone
Voyage
Dureacutee 1 semaine
Date aoucirct
Activiteacutes shopping visites plages
Mei et Tao NiuMei et Tao veulent partir en vacances en France Ils ont choisi Bordeaux car
crsquoest une petite ville comprenant toutes les commoditeacutes plages (Arca-
chon) visites de chateaux shopping etc
Voyage avec les enfants
Deacutepaysement
Restons accessible
Tout le monde peut acceacuteder au contenu des sites et applications web de faccedilon eacutegale
quelque soit son handicap
scleacuterose en plaque
sensorielmoteur
psychiquemental
Autisme
trisomie 21
paralysie
amputation
myopathie
infirmiteacute motrice ceacutereacutebrale
spina bifida
ceacuteciteacute
malvoyance
amblyopie
achromatopsie
surditeacute
maladies bipolaires
schizophreacutenie
hypochondriaqueeacutepilepsie
scleacuterose en plaque
sensorielmoteur
psychiquemental
Autisme
trisomie 21
paralysie
amputation
myopathie
infirmiteacute motrice ceacutereacutebrale
spina bifida
ceacuteciteacute
malvoyance
amblyopie
achromatopsie
surditeacute
maladies bipolaires
schizophreacutenie
hypochondriaqueeacutepilepsie
maladie
mateacuteriel
support
bruit
environnement
luminositeacute
aujourdrsquohui
De nouveaux supports
De nouvelles attentes de la part des utilisateurs
De nouvelles probleacutematiques
Lrsquoeacutevolution des mobiles
Une augmentation fulgurante
Lrsquoaccegraves agrave lrsquoInternet mobile double chaque anneacutee
Gartner
httpwwwgartnercomnewsroomid2977917SOURCE
+183 drsquoaugmentation de revenus sur mobiles
en 2015 pour Alibaba
Une augmentation fulgurante
StatCounter
httpgsstatcountercom SOURCE
Une augmentation fulgurante
Mediameacutetrie
SOURCE
The mobile moment
Luke Wroblewski
httpwwwlukewcomffentryasp1841 SOURCE
The mobile moment
Adwords laquo Building for the next moment raquo - 5 mai 2015
httpadwordsblogspotfr201505building-for-next-momenthtml SOURCE
laquo And at these times consumers are increasingly picking up their
smartphones for answers In fact more Google searches take place
on mobile devices than on computers in 10 countries including the
US and Japan This presents a tremendous opportunity for marketers
to reach people throughout all the new touchpoints of a consumerrsquos
path to purchase raquo
Des supports diffeacuterents
Saisie Ecran Configuration Connexion
Ordinateur Clavier sourisGrande - tregraves grande
taille(gt 10)
Outils puissants Stable (Ethernet WIFI fibre hellip)
Tablette Ecran tactile clavier (optionnel)
Taille moyenne(sans compter lrsquoiPad
Pro)(7 agrave 12)
Outils moins puissants
Stable (WIFI fibre hellip)
Smartphone Ecran tactile clavier numeacuterique
Petite taille(lt6)
Outils moins puissants
Aleacuteatoire
Des utilisations diffeacuterentes
Utilisation Environnement
Ordinateur Utilisation prolongeacutee assis sur un bureau Stable
Tablette Utilisation informelle sur le canapeacute ou au lit Relativement stable
Smartphone Bregraveves salves drsquoactiviteacutes dans des lieux divers au fil de la journeacutee
Aleacuteatoire
Des utilisations agrave des moments diffeacuterents
httpsreaditlaterlistcomblog201101is-mobile-affecting-when-we-read SOURCE
Desktop un environnement - geacuteneacuteralement - bienveillant
Mobile un environnement - parfois - hostile
La taille compte (comme quoi)
Des curseurs diffeacuterents
Desktop (souris)
Mobile (doigt)
1 pixel (ou presque)
Plusieurs pixels
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Espacer les eacuteleacutements cliquables
Lien
B O U T O N gt 7mm
gt 2mm
B O U T O N
OK
Lien
B O U T O N
KO
B O U T O N
LienLien
Ameacuteliorer la lisibiliteacute du texte
Des paragraphes trop larges reacuteduisent la lisibiliteacute Compter en moyenne 60 caractegraveres par ligne
Wikipeacutedia - JRR Tolkien
httpsfrwikipediaorgwikiJ_R_R_TolkienSOURCE
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Le texte justifieacute sur des petites largeurs reacuteduit la lisibiliteacute
X
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Un contenu lisible
URSSAF
httpswwwurssaffrportailhomehtml SOURCE
Un corps de texte suffisamment grand Agrave minima 14px sur mobile (deacutepend de la typographie)
X
Un contenu lisible
Korben
httpkorbeninfoSOURCE
Le survol du curseur nrsquoexiste pas sur mobile
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Restons accessible
Tout le monde peut acceacuteder au contenu des sites et applications web de faccedilon eacutegale
quelque soit son handicap
scleacuterose en plaque
sensorielmoteur
psychiquemental
Autisme
trisomie 21
paralysie
amputation
myopathie
infirmiteacute motrice ceacutereacutebrale
spina bifida
ceacuteciteacute
malvoyance
amblyopie
achromatopsie
surditeacute
maladies bipolaires
schizophreacutenie
hypochondriaqueeacutepilepsie
scleacuterose en plaque
sensorielmoteur
psychiquemental
Autisme
trisomie 21
paralysie
amputation
myopathie
infirmiteacute motrice ceacutereacutebrale
spina bifida
ceacuteciteacute
malvoyance
amblyopie
achromatopsie
surditeacute
maladies bipolaires
schizophreacutenie
hypochondriaqueeacutepilepsie
maladie
mateacuteriel
support
bruit
environnement
luminositeacute
aujourdrsquohui
De nouveaux supports
De nouvelles attentes de la part des utilisateurs
De nouvelles probleacutematiques
Lrsquoeacutevolution des mobiles
Une augmentation fulgurante
Lrsquoaccegraves agrave lrsquoInternet mobile double chaque anneacutee
Gartner
httpwwwgartnercomnewsroomid2977917SOURCE
+183 drsquoaugmentation de revenus sur mobiles
en 2015 pour Alibaba
Une augmentation fulgurante
StatCounter
httpgsstatcountercom SOURCE
Une augmentation fulgurante
Mediameacutetrie
SOURCE
The mobile moment
Luke Wroblewski
httpwwwlukewcomffentryasp1841 SOURCE
The mobile moment
Adwords laquo Building for the next moment raquo - 5 mai 2015
httpadwordsblogspotfr201505building-for-next-momenthtml SOURCE
laquo And at these times consumers are increasingly picking up their
smartphones for answers In fact more Google searches take place
on mobile devices than on computers in 10 countries including the
US and Japan This presents a tremendous opportunity for marketers
to reach people throughout all the new touchpoints of a consumerrsquos
path to purchase raquo
Des supports diffeacuterents
Saisie Ecran Configuration Connexion
Ordinateur Clavier sourisGrande - tregraves grande
taille(gt 10)
Outils puissants Stable (Ethernet WIFI fibre hellip)
Tablette Ecran tactile clavier (optionnel)
Taille moyenne(sans compter lrsquoiPad
Pro)(7 agrave 12)
Outils moins puissants
Stable (WIFI fibre hellip)
Smartphone Ecran tactile clavier numeacuterique
Petite taille(lt6)
Outils moins puissants
Aleacuteatoire
Des utilisations diffeacuterentes
Utilisation Environnement
Ordinateur Utilisation prolongeacutee assis sur un bureau Stable
Tablette Utilisation informelle sur le canapeacute ou au lit Relativement stable
Smartphone Bregraveves salves drsquoactiviteacutes dans des lieux divers au fil de la journeacutee
Aleacuteatoire
Des utilisations agrave des moments diffeacuterents
httpsreaditlaterlistcomblog201101is-mobile-affecting-when-we-read SOURCE
Desktop un environnement - geacuteneacuteralement - bienveillant
Mobile un environnement - parfois - hostile
La taille compte (comme quoi)
Des curseurs diffeacuterents
Desktop (souris)
Mobile (doigt)
1 pixel (ou presque)
Plusieurs pixels
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Espacer les eacuteleacutements cliquables
Lien
B O U T O N gt 7mm
gt 2mm
B O U T O N
OK
Lien
B O U T O N
KO
B O U T O N
LienLien
Ameacuteliorer la lisibiliteacute du texte
Des paragraphes trop larges reacuteduisent la lisibiliteacute Compter en moyenne 60 caractegraveres par ligne
Wikipeacutedia - JRR Tolkien
httpsfrwikipediaorgwikiJ_R_R_TolkienSOURCE
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Le texte justifieacute sur des petites largeurs reacuteduit la lisibiliteacute
X
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Un contenu lisible
URSSAF
httpswwwurssaffrportailhomehtml SOURCE
Un corps de texte suffisamment grand Agrave minima 14px sur mobile (deacutepend de la typographie)
X
Un contenu lisible
Korben
httpkorbeninfoSOURCE
Le survol du curseur nrsquoexiste pas sur mobile
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Tout le monde peut acceacuteder au contenu des sites et applications web de faccedilon eacutegale
quelque soit son handicap
scleacuterose en plaque
sensorielmoteur
psychiquemental
Autisme
trisomie 21
paralysie
amputation
myopathie
infirmiteacute motrice ceacutereacutebrale
spina bifida
ceacuteciteacute
malvoyance
amblyopie
achromatopsie
surditeacute
maladies bipolaires
schizophreacutenie
hypochondriaqueeacutepilepsie
scleacuterose en plaque
sensorielmoteur
psychiquemental
Autisme
trisomie 21
paralysie
amputation
myopathie
infirmiteacute motrice ceacutereacutebrale
spina bifida
ceacuteciteacute
malvoyance
amblyopie
achromatopsie
surditeacute
maladies bipolaires
schizophreacutenie
hypochondriaqueeacutepilepsie
maladie
mateacuteriel
support
bruit
environnement
luminositeacute
aujourdrsquohui
De nouveaux supports
De nouvelles attentes de la part des utilisateurs
De nouvelles probleacutematiques
Lrsquoeacutevolution des mobiles
Une augmentation fulgurante
Lrsquoaccegraves agrave lrsquoInternet mobile double chaque anneacutee
Gartner
httpwwwgartnercomnewsroomid2977917SOURCE
+183 drsquoaugmentation de revenus sur mobiles
en 2015 pour Alibaba
Une augmentation fulgurante
StatCounter
httpgsstatcountercom SOURCE
Une augmentation fulgurante
Mediameacutetrie
SOURCE
The mobile moment
Luke Wroblewski
httpwwwlukewcomffentryasp1841 SOURCE
The mobile moment
Adwords laquo Building for the next moment raquo - 5 mai 2015
httpadwordsblogspotfr201505building-for-next-momenthtml SOURCE
laquo And at these times consumers are increasingly picking up their
smartphones for answers In fact more Google searches take place
on mobile devices than on computers in 10 countries including the
US and Japan This presents a tremendous opportunity for marketers
to reach people throughout all the new touchpoints of a consumerrsquos
path to purchase raquo
Des supports diffeacuterents
Saisie Ecran Configuration Connexion
Ordinateur Clavier sourisGrande - tregraves grande
taille(gt 10)
Outils puissants Stable (Ethernet WIFI fibre hellip)
Tablette Ecran tactile clavier (optionnel)
Taille moyenne(sans compter lrsquoiPad
Pro)(7 agrave 12)
Outils moins puissants
Stable (WIFI fibre hellip)
Smartphone Ecran tactile clavier numeacuterique
Petite taille(lt6)
Outils moins puissants
Aleacuteatoire
Des utilisations diffeacuterentes
Utilisation Environnement
Ordinateur Utilisation prolongeacutee assis sur un bureau Stable
Tablette Utilisation informelle sur le canapeacute ou au lit Relativement stable
Smartphone Bregraveves salves drsquoactiviteacutes dans des lieux divers au fil de la journeacutee
Aleacuteatoire
Des utilisations agrave des moments diffeacuterents
httpsreaditlaterlistcomblog201101is-mobile-affecting-when-we-read SOURCE
Desktop un environnement - geacuteneacuteralement - bienveillant
Mobile un environnement - parfois - hostile
La taille compte (comme quoi)
Des curseurs diffeacuterents
Desktop (souris)
Mobile (doigt)
1 pixel (ou presque)
Plusieurs pixels
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Espacer les eacuteleacutements cliquables
Lien
B O U T O N gt 7mm
gt 2mm
B O U T O N
OK
Lien
B O U T O N
KO
B O U T O N
LienLien
Ameacuteliorer la lisibiliteacute du texte
Des paragraphes trop larges reacuteduisent la lisibiliteacute Compter en moyenne 60 caractegraveres par ligne
Wikipeacutedia - JRR Tolkien
httpsfrwikipediaorgwikiJ_R_R_TolkienSOURCE
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Le texte justifieacute sur des petites largeurs reacuteduit la lisibiliteacute
X
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Un contenu lisible
URSSAF
httpswwwurssaffrportailhomehtml SOURCE
Un corps de texte suffisamment grand Agrave minima 14px sur mobile (deacutepend de la typographie)
X
Un contenu lisible
Korben
httpkorbeninfoSOURCE
Le survol du curseur nrsquoexiste pas sur mobile
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
scleacuterose en plaque
sensorielmoteur
psychiquemental
Autisme
trisomie 21
paralysie
amputation
myopathie
infirmiteacute motrice ceacutereacutebrale
spina bifida
ceacuteciteacute
malvoyance
amblyopie
achromatopsie
surditeacute
maladies bipolaires
schizophreacutenie
hypochondriaqueeacutepilepsie
scleacuterose en plaque
sensorielmoteur
psychiquemental
Autisme
trisomie 21
paralysie
amputation
myopathie
infirmiteacute motrice ceacutereacutebrale
spina bifida
ceacuteciteacute
malvoyance
amblyopie
achromatopsie
surditeacute
maladies bipolaires
schizophreacutenie
hypochondriaqueeacutepilepsie
maladie
mateacuteriel
support
bruit
environnement
luminositeacute
aujourdrsquohui
De nouveaux supports
De nouvelles attentes de la part des utilisateurs
De nouvelles probleacutematiques
Lrsquoeacutevolution des mobiles
Une augmentation fulgurante
Lrsquoaccegraves agrave lrsquoInternet mobile double chaque anneacutee
Gartner
httpwwwgartnercomnewsroomid2977917SOURCE
+183 drsquoaugmentation de revenus sur mobiles
en 2015 pour Alibaba
Une augmentation fulgurante
StatCounter
httpgsstatcountercom SOURCE
Une augmentation fulgurante
Mediameacutetrie
SOURCE
The mobile moment
Luke Wroblewski
httpwwwlukewcomffentryasp1841 SOURCE
The mobile moment
Adwords laquo Building for the next moment raquo - 5 mai 2015
httpadwordsblogspotfr201505building-for-next-momenthtml SOURCE
laquo And at these times consumers are increasingly picking up their
smartphones for answers In fact more Google searches take place
on mobile devices than on computers in 10 countries including the
US and Japan This presents a tremendous opportunity for marketers
to reach people throughout all the new touchpoints of a consumerrsquos
path to purchase raquo
Des supports diffeacuterents
Saisie Ecran Configuration Connexion
Ordinateur Clavier sourisGrande - tregraves grande
taille(gt 10)
Outils puissants Stable (Ethernet WIFI fibre hellip)
Tablette Ecran tactile clavier (optionnel)
Taille moyenne(sans compter lrsquoiPad
Pro)(7 agrave 12)
Outils moins puissants
Stable (WIFI fibre hellip)
Smartphone Ecran tactile clavier numeacuterique
Petite taille(lt6)
Outils moins puissants
Aleacuteatoire
Des utilisations diffeacuterentes
Utilisation Environnement
Ordinateur Utilisation prolongeacutee assis sur un bureau Stable
Tablette Utilisation informelle sur le canapeacute ou au lit Relativement stable
Smartphone Bregraveves salves drsquoactiviteacutes dans des lieux divers au fil de la journeacutee
Aleacuteatoire
Des utilisations agrave des moments diffeacuterents
httpsreaditlaterlistcomblog201101is-mobile-affecting-when-we-read SOURCE
Desktop un environnement - geacuteneacuteralement - bienveillant
Mobile un environnement - parfois - hostile
La taille compte (comme quoi)
Des curseurs diffeacuterents
Desktop (souris)
Mobile (doigt)
1 pixel (ou presque)
Plusieurs pixels
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Espacer les eacuteleacutements cliquables
Lien
B O U T O N gt 7mm
gt 2mm
B O U T O N
OK
Lien
B O U T O N
KO
B O U T O N
LienLien
Ameacuteliorer la lisibiliteacute du texte
Des paragraphes trop larges reacuteduisent la lisibiliteacute Compter en moyenne 60 caractegraveres par ligne
Wikipeacutedia - JRR Tolkien
httpsfrwikipediaorgwikiJ_R_R_TolkienSOURCE
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Le texte justifieacute sur des petites largeurs reacuteduit la lisibiliteacute
X
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Un contenu lisible
URSSAF
httpswwwurssaffrportailhomehtml SOURCE
Un corps de texte suffisamment grand Agrave minima 14px sur mobile (deacutepend de la typographie)
X
Un contenu lisible
Korben
httpkorbeninfoSOURCE
Le survol du curseur nrsquoexiste pas sur mobile
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
scleacuterose en plaque
sensorielmoteur
psychiquemental
Autisme
trisomie 21
paralysie
amputation
myopathie
infirmiteacute motrice ceacutereacutebrale
spina bifida
ceacuteciteacute
malvoyance
amblyopie
achromatopsie
surditeacute
maladies bipolaires
schizophreacutenie
hypochondriaqueeacutepilepsie
maladie
mateacuteriel
support
bruit
environnement
luminositeacute
aujourdrsquohui
De nouveaux supports
De nouvelles attentes de la part des utilisateurs
De nouvelles probleacutematiques
Lrsquoeacutevolution des mobiles
Une augmentation fulgurante
Lrsquoaccegraves agrave lrsquoInternet mobile double chaque anneacutee
Gartner
httpwwwgartnercomnewsroomid2977917SOURCE
+183 drsquoaugmentation de revenus sur mobiles
en 2015 pour Alibaba
Une augmentation fulgurante
StatCounter
httpgsstatcountercom SOURCE
Une augmentation fulgurante
Mediameacutetrie
SOURCE
The mobile moment
Luke Wroblewski
httpwwwlukewcomffentryasp1841 SOURCE
The mobile moment
Adwords laquo Building for the next moment raquo - 5 mai 2015
httpadwordsblogspotfr201505building-for-next-momenthtml SOURCE
laquo And at these times consumers are increasingly picking up their
smartphones for answers In fact more Google searches take place
on mobile devices than on computers in 10 countries including the
US and Japan This presents a tremendous opportunity for marketers
to reach people throughout all the new touchpoints of a consumerrsquos
path to purchase raquo
Des supports diffeacuterents
Saisie Ecran Configuration Connexion
Ordinateur Clavier sourisGrande - tregraves grande
taille(gt 10)
Outils puissants Stable (Ethernet WIFI fibre hellip)
Tablette Ecran tactile clavier (optionnel)
Taille moyenne(sans compter lrsquoiPad
Pro)(7 agrave 12)
Outils moins puissants
Stable (WIFI fibre hellip)
Smartphone Ecran tactile clavier numeacuterique
Petite taille(lt6)
Outils moins puissants
Aleacuteatoire
Des utilisations diffeacuterentes
Utilisation Environnement
Ordinateur Utilisation prolongeacutee assis sur un bureau Stable
Tablette Utilisation informelle sur le canapeacute ou au lit Relativement stable
Smartphone Bregraveves salves drsquoactiviteacutes dans des lieux divers au fil de la journeacutee
Aleacuteatoire
Des utilisations agrave des moments diffeacuterents
httpsreaditlaterlistcomblog201101is-mobile-affecting-when-we-read SOURCE
Desktop un environnement - geacuteneacuteralement - bienveillant
Mobile un environnement - parfois - hostile
La taille compte (comme quoi)
Des curseurs diffeacuterents
Desktop (souris)
Mobile (doigt)
1 pixel (ou presque)
Plusieurs pixels
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Espacer les eacuteleacutements cliquables
Lien
B O U T O N gt 7mm
gt 2mm
B O U T O N
OK
Lien
B O U T O N
KO
B O U T O N
LienLien
Ameacuteliorer la lisibiliteacute du texte
Des paragraphes trop larges reacuteduisent la lisibiliteacute Compter en moyenne 60 caractegraveres par ligne
Wikipeacutedia - JRR Tolkien
httpsfrwikipediaorgwikiJ_R_R_TolkienSOURCE
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Le texte justifieacute sur des petites largeurs reacuteduit la lisibiliteacute
X
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Un contenu lisible
URSSAF
httpswwwurssaffrportailhomehtml SOURCE
Un corps de texte suffisamment grand Agrave minima 14px sur mobile (deacutepend de la typographie)
X
Un contenu lisible
Korben
httpkorbeninfoSOURCE
Le survol du curseur nrsquoexiste pas sur mobile
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
aujourdrsquohui
De nouveaux supports
De nouvelles attentes de la part des utilisateurs
De nouvelles probleacutematiques
Lrsquoeacutevolution des mobiles
Une augmentation fulgurante
Lrsquoaccegraves agrave lrsquoInternet mobile double chaque anneacutee
Gartner
httpwwwgartnercomnewsroomid2977917SOURCE
+183 drsquoaugmentation de revenus sur mobiles
en 2015 pour Alibaba
Une augmentation fulgurante
StatCounter
httpgsstatcountercom SOURCE
Une augmentation fulgurante
Mediameacutetrie
SOURCE
The mobile moment
Luke Wroblewski
httpwwwlukewcomffentryasp1841 SOURCE
The mobile moment
Adwords laquo Building for the next moment raquo - 5 mai 2015
httpadwordsblogspotfr201505building-for-next-momenthtml SOURCE
laquo And at these times consumers are increasingly picking up their
smartphones for answers In fact more Google searches take place
on mobile devices than on computers in 10 countries including the
US and Japan This presents a tremendous opportunity for marketers
to reach people throughout all the new touchpoints of a consumerrsquos
path to purchase raquo
Des supports diffeacuterents
Saisie Ecran Configuration Connexion
Ordinateur Clavier sourisGrande - tregraves grande
taille(gt 10)
Outils puissants Stable (Ethernet WIFI fibre hellip)
Tablette Ecran tactile clavier (optionnel)
Taille moyenne(sans compter lrsquoiPad
Pro)(7 agrave 12)
Outils moins puissants
Stable (WIFI fibre hellip)
Smartphone Ecran tactile clavier numeacuterique
Petite taille(lt6)
Outils moins puissants
Aleacuteatoire
Des utilisations diffeacuterentes
Utilisation Environnement
Ordinateur Utilisation prolongeacutee assis sur un bureau Stable
Tablette Utilisation informelle sur le canapeacute ou au lit Relativement stable
Smartphone Bregraveves salves drsquoactiviteacutes dans des lieux divers au fil de la journeacutee
Aleacuteatoire
Des utilisations agrave des moments diffeacuterents
httpsreaditlaterlistcomblog201101is-mobile-affecting-when-we-read SOURCE
Desktop un environnement - geacuteneacuteralement - bienveillant
Mobile un environnement - parfois - hostile
La taille compte (comme quoi)
Des curseurs diffeacuterents
Desktop (souris)
Mobile (doigt)
1 pixel (ou presque)
Plusieurs pixels
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Espacer les eacuteleacutements cliquables
Lien
B O U T O N gt 7mm
gt 2mm
B O U T O N
OK
Lien
B O U T O N
KO
B O U T O N
LienLien
Ameacuteliorer la lisibiliteacute du texte
Des paragraphes trop larges reacuteduisent la lisibiliteacute Compter en moyenne 60 caractegraveres par ligne
Wikipeacutedia - JRR Tolkien
httpsfrwikipediaorgwikiJ_R_R_TolkienSOURCE
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Le texte justifieacute sur des petites largeurs reacuteduit la lisibiliteacute
X
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Un contenu lisible
URSSAF
httpswwwurssaffrportailhomehtml SOURCE
Un corps de texte suffisamment grand Agrave minima 14px sur mobile (deacutepend de la typographie)
X
Un contenu lisible
Korben
httpkorbeninfoSOURCE
Le survol du curseur nrsquoexiste pas sur mobile
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
De nouveaux supports
De nouvelles attentes de la part des utilisateurs
De nouvelles probleacutematiques
Lrsquoeacutevolution des mobiles
Une augmentation fulgurante
Lrsquoaccegraves agrave lrsquoInternet mobile double chaque anneacutee
Gartner
httpwwwgartnercomnewsroomid2977917SOURCE
+183 drsquoaugmentation de revenus sur mobiles
en 2015 pour Alibaba
Une augmentation fulgurante
StatCounter
httpgsstatcountercom SOURCE
Une augmentation fulgurante
Mediameacutetrie
SOURCE
The mobile moment
Luke Wroblewski
httpwwwlukewcomffentryasp1841 SOURCE
The mobile moment
Adwords laquo Building for the next moment raquo - 5 mai 2015
httpadwordsblogspotfr201505building-for-next-momenthtml SOURCE
laquo And at these times consumers are increasingly picking up their
smartphones for answers In fact more Google searches take place
on mobile devices than on computers in 10 countries including the
US and Japan This presents a tremendous opportunity for marketers
to reach people throughout all the new touchpoints of a consumerrsquos
path to purchase raquo
Des supports diffeacuterents
Saisie Ecran Configuration Connexion
Ordinateur Clavier sourisGrande - tregraves grande
taille(gt 10)
Outils puissants Stable (Ethernet WIFI fibre hellip)
Tablette Ecran tactile clavier (optionnel)
Taille moyenne(sans compter lrsquoiPad
Pro)(7 agrave 12)
Outils moins puissants
Stable (WIFI fibre hellip)
Smartphone Ecran tactile clavier numeacuterique
Petite taille(lt6)
Outils moins puissants
Aleacuteatoire
Des utilisations diffeacuterentes
Utilisation Environnement
Ordinateur Utilisation prolongeacutee assis sur un bureau Stable
Tablette Utilisation informelle sur le canapeacute ou au lit Relativement stable
Smartphone Bregraveves salves drsquoactiviteacutes dans des lieux divers au fil de la journeacutee
Aleacuteatoire
Des utilisations agrave des moments diffeacuterents
httpsreaditlaterlistcomblog201101is-mobile-affecting-when-we-read SOURCE
Desktop un environnement - geacuteneacuteralement - bienveillant
Mobile un environnement - parfois - hostile
La taille compte (comme quoi)
Des curseurs diffeacuterents
Desktop (souris)
Mobile (doigt)
1 pixel (ou presque)
Plusieurs pixels
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Espacer les eacuteleacutements cliquables
Lien
B O U T O N gt 7mm
gt 2mm
B O U T O N
OK
Lien
B O U T O N
KO
B O U T O N
LienLien
Ameacuteliorer la lisibiliteacute du texte
Des paragraphes trop larges reacuteduisent la lisibiliteacute Compter en moyenne 60 caractegraveres par ligne
Wikipeacutedia - JRR Tolkien
httpsfrwikipediaorgwikiJ_R_R_TolkienSOURCE
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Le texte justifieacute sur des petites largeurs reacuteduit la lisibiliteacute
X
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Un contenu lisible
URSSAF
httpswwwurssaffrportailhomehtml SOURCE
Un corps de texte suffisamment grand Agrave minima 14px sur mobile (deacutepend de la typographie)
X
Un contenu lisible
Korben
httpkorbeninfoSOURCE
Le survol du curseur nrsquoexiste pas sur mobile
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Lrsquoeacutevolution des mobiles
Une augmentation fulgurante
Lrsquoaccegraves agrave lrsquoInternet mobile double chaque anneacutee
Gartner
httpwwwgartnercomnewsroomid2977917SOURCE
+183 drsquoaugmentation de revenus sur mobiles
en 2015 pour Alibaba
Une augmentation fulgurante
StatCounter
httpgsstatcountercom SOURCE
Une augmentation fulgurante
Mediameacutetrie
SOURCE
The mobile moment
Luke Wroblewski
httpwwwlukewcomffentryasp1841 SOURCE
The mobile moment
Adwords laquo Building for the next moment raquo - 5 mai 2015
httpadwordsblogspotfr201505building-for-next-momenthtml SOURCE
laquo And at these times consumers are increasingly picking up their
smartphones for answers In fact more Google searches take place
on mobile devices than on computers in 10 countries including the
US and Japan This presents a tremendous opportunity for marketers
to reach people throughout all the new touchpoints of a consumerrsquos
path to purchase raquo
Des supports diffeacuterents
Saisie Ecran Configuration Connexion
Ordinateur Clavier sourisGrande - tregraves grande
taille(gt 10)
Outils puissants Stable (Ethernet WIFI fibre hellip)
Tablette Ecran tactile clavier (optionnel)
Taille moyenne(sans compter lrsquoiPad
Pro)(7 agrave 12)
Outils moins puissants
Stable (WIFI fibre hellip)
Smartphone Ecran tactile clavier numeacuterique
Petite taille(lt6)
Outils moins puissants
Aleacuteatoire
Des utilisations diffeacuterentes
Utilisation Environnement
Ordinateur Utilisation prolongeacutee assis sur un bureau Stable
Tablette Utilisation informelle sur le canapeacute ou au lit Relativement stable
Smartphone Bregraveves salves drsquoactiviteacutes dans des lieux divers au fil de la journeacutee
Aleacuteatoire
Des utilisations agrave des moments diffeacuterents
httpsreaditlaterlistcomblog201101is-mobile-affecting-when-we-read SOURCE
Desktop un environnement - geacuteneacuteralement - bienveillant
Mobile un environnement - parfois - hostile
La taille compte (comme quoi)
Des curseurs diffeacuterents
Desktop (souris)
Mobile (doigt)
1 pixel (ou presque)
Plusieurs pixels
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Espacer les eacuteleacutements cliquables
Lien
B O U T O N gt 7mm
gt 2mm
B O U T O N
OK
Lien
B O U T O N
KO
B O U T O N
LienLien
Ameacuteliorer la lisibiliteacute du texte
Des paragraphes trop larges reacuteduisent la lisibiliteacute Compter en moyenne 60 caractegraveres par ligne
Wikipeacutedia - JRR Tolkien
httpsfrwikipediaorgwikiJ_R_R_TolkienSOURCE
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Le texte justifieacute sur des petites largeurs reacuteduit la lisibiliteacute
X
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Un contenu lisible
URSSAF
httpswwwurssaffrportailhomehtml SOURCE
Un corps de texte suffisamment grand Agrave minima 14px sur mobile (deacutepend de la typographie)
X
Un contenu lisible
Korben
httpkorbeninfoSOURCE
Le survol du curseur nrsquoexiste pas sur mobile
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Une augmentation fulgurante
Lrsquoaccegraves agrave lrsquoInternet mobile double chaque anneacutee
Gartner
httpwwwgartnercomnewsroomid2977917SOURCE
+183 drsquoaugmentation de revenus sur mobiles
en 2015 pour Alibaba
Une augmentation fulgurante
StatCounter
httpgsstatcountercom SOURCE
Une augmentation fulgurante
Mediameacutetrie
SOURCE
The mobile moment
Luke Wroblewski
httpwwwlukewcomffentryasp1841 SOURCE
The mobile moment
Adwords laquo Building for the next moment raquo - 5 mai 2015
httpadwordsblogspotfr201505building-for-next-momenthtml SOURCE
laquo And at these times consumers are increasingly picking up their
smartphones for answers In fact more Google searches take place
on mobile devices than on computers in 10 countries including the
US and Japan This presents a tremendous opportunity for marketers
to reach people throughout all the new touchpoints of a consumerrsquos
path to purchase raquo
Des supports diffeacuterents
Saisie Ecran Configuration Connexion
Ordinateur Clavier sourisGrande - tregraves grande
taille(gt 10)
Outils puissants Stable (Ethernet WIFI fibre hellip)
Tablette Ecran tactile clavier (optionnel)
Taille moyenne(sans compter lrsquoiPad
Pro)(7 agrave 12)
Outils moins puissants
Stable (WIFI fibre hellip)
Smartphone Ecran tactile clavier numeacuterique
Petite taille(lt6)
Outils moins puissants
Aleacuteatoire
Des utilisations diffeacuterentes
Utilisation Environnement
Ordinateur Utilisation prolongeacutee assis sur un bureau Stable
Tablette Utilisation informelle sur le canapeacute ou au lit Relativement stable
Smartphone Bregraveves salves drsquoactiviteacutes dans des lieux divers au fil de la journeacutee
Aleacuteatoire
Des utilisations agrave des moments diffeacuterents
httpsreaditlaterlistcomblog201101is-mobile-affecting-when-we-read SOURCE
Desktop un environnement - geacuteneacuteralement - bienveillant
Mobile un environnement - parfois - hostile
La taille compte (comme quoi)
Des curseurs diffeacuterents
Desktop (souris)
Mobile (doigt)
1 pixel (ou presque)
Plusieurs pixels
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Espacer les eacuteleacutements cliquables
Lien
B O U T O N gt 7mm
gt 2mm
B O U T O N
OK
Lien
B O U T O N
KO
B O U T O N
LienLien
Ameacuteliorer la lisibiliteacute du texte
Des paragraphes trop larges reacuteduisent la lisibiliteacute Compter en moyenne 60 caractegraveres par ligne
Wikipeacutedia - JRR Tolkien
httpsfrwikipediaorgwikiJ_R_R_TolkienSOURCE
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Le texte justifieacute sur des petites largeurs reacuteduit la lisibiliteacute
X
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Un contenu lisible
URSSAF
httpswwwurssaffrportailhomehtml SOURCE
Un corps de texte suffisamment grand Agrave minima 14px sur mobile (deacutepend de la typographie)
X
Un contenu lisible
Korben
httpkorbeninfoSOURCE
Le survol du curseur nrsquoexiste pas sur mobile
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
+183 drsquoaugmentation de revenus sur mobiles
en 2015 pour Alibaba
Une augmentation fulgurante
StatCounter
httpgsstatcountercom SOURCE
Une augmentation fulgurante
Mediameacutetrie
SOURCE
The mobile moment
Luke Wroblewski
httpwwwlukewcomffentryasp1841 SOURCE
The mobile moment
Adwords laquo Building for the next moment raquo - 5 mai 2015
httpadwordsblogspotfr201505building-for-next-momenthtml SOURCE
laquo And at these times consumers are increasingly picking up their
smartphones for answers In fact more Google searches take place
on mobile devices than on computers in 10 countries including the
US and Japan This presents a tremendous opportunity for marketers
to reach people throughout all the new touchpoints of a consumerrsquos
path to purchase raquo
Des supports diffeacuterents
Saisie Ecran Configuration Connexion
Ordinateur Clavier sourisGrande - tregraves grande
taille(gt 10)
Outils puissants Stable (Ethernet WIFI fibre hellip)
Tablette Ecran tactile clavier (optionnel)
Taille moyenne(sans compter lrsquoiPad
Pro)(7 agrave 12)
Outils moins puissants
Stable (WIFI fibre hellip)
Smartphone Ecran tactile clavier numeacuterique
Petite taille(lt6)
Outils moins puissants
Aleacuteatoire
Des utilisations diffeacuterentes
Utilisation Environnement
Ordinateur Utilisation prolongeacutee assis sur un bureau Stable
Tablette Utilisation informelle sur le canapeacute ou au lit Relativement stable
Smartphone Bregraveves salves drsquoactiviteacutes dans des lieux divers au fil de la journeacutee
Aleacuteatoire
Des utilisations agrave des moments diffeacuterents
httpsreaditlaterlistcomblog201101is-mobile-affecting-when-we-read SOURCE
Desktop un environnement - geacuteneacuteralement - bienveillant
Mobile un environnement - parfois - hostile
La taille compte (comme quoi)
Des curseurs diffeacuterents
Desktop (souris)
Mobile (doigt)
1 pixel (ou presque)
Plusieurs pixels
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Espacer les eacuteleacutements cliquables
Lien
B O U T O N gt 7mm
gt 2mm
B O U T O N
OK
Lien
B O U T O N
KO
B O U T O N
LienLien
Ameacuteliorer la lisibiliteacute du texte
Des paragraphes trop larges reacuteduisent la lisibiliteacute Compter en moyenne 60 caractegraveres par ligne
Wikipeacutedia - JRR Tolkien
httpsfrwikipediaorgwikiJ_R_R_TolkienSOURCE
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Le texte justifieacute sur des petites largeurs reacuteduit la lisibiliteacute
X
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Un contenu lisible
URSSAF
httpswwwurssaffrportailhomehtml SOURCE
Un corps de texte suffisamment grand Agrave minima 14px sur mobile (deacutepend de la typographie)
X
Un contenu lisible
Korben
httpkorbeninfoSOURCE
Le survol du curseur nrsquoexiste pas sur mobile
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Une augmentation fulgurante
StatCounter
httpgsstatcountercom SOURCE
Une augmentation fulgurante
Mediameacutetrie
SOURCE
The mobile moment
Luke Wroblewski
httpwwwlukewcomffentryasp1841 SOURCE
The mobile moment
Adwords laquo Building for the next moment raquo - 5 mai 2015
httpadwordsblogspotfr201505building-for-next-momenthtml SOURCE
laquo And at these times consumers are increasingly picking up their
smartphones for answers In fact more Google searches take place
on mobile devices than on computers in 10 countries including the
US and Japan This presents a tremendous opportunity for marketers
to reach people throughout all the new touchpoints of a consumerrsquos
path to purchase raquo
Des supports diffeacuterents
Saisie Ecran Configuration Connexion
Ordinateur Clavier sourisGrande - tregraves grande
taille(gt 10)
Outils puissants Stable (Ethernet WIFI fibre hellip)
Tablette Ecran tactile clavier (optionnel)
Taille moyenne(sans compter lrsquoiPad
Pro)(7 agrave 12)
Outils moins puissants
Stable (WIFI fibre hellip)
Smartphone Ecran tactile clavier numeacuterique
Petite taille(lt6)
Outils moins puissants
Aleacuteatoire
Des utilisations diffeacuterentes
Utilisation Environnement
Ordinateur Utilisation prolongeacutee assis sur un bureau Stable
Tablette Utilisation informelle sur le canapeacute ou au lit Relativement stable
Smartphone Bregraveves salves drsquoactiviteacutes dans des lieux divers au fil de la journeacutee
Aleacuteatoire
Des utilisations agrave des moments diffeacuterents
httpsreaditlaterlistcomblog201101is-mobile-affecting-when-we-read SOURCE
Desktop un environnement - geacuteneacuteralement - bienveillant
Mobile un environnement - parfois - hostile
La taille compte (comme quoi)
Des curseurs diffeacuterents
Desktop (souris)
Mobile (doigt)
1 pixel (ou presque)
Plusieurs pixels
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Espacer les eacuteleacutements cliquables
Lien
B O U T O N gt 7mm
gt 2mm
B O U T O N
OK
Lien
B O U T O N
KO
B O U T O N
LienLien
Ameacuteliorer la lisibiliteacute du texte
Des paragraphes trop larges reacuteduisent la lisibiliteacute Compter en moyenne 60 caractegraveres par ligne
Wikipeacutedia - JRR Tolkien
httpsfrwikipediaorgwikiJ_R_R_TolkienSOURCE
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Le texte justifieacute sur des petites largeurs reacuteduit la lisibiliteacute
X
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Un contenu lisible
URSSAF
httpswwwurssaffrportailhomehtml SOURCE
Un corps de texte suffisamment grand Agrave minima 14px sur mobile (deacutepend de la typographie)
X
Un contenu lisible
Korben
httpkorbeninfoSOURCE
Le survol du curseur nrsquoexiste pas sur mobile
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Une augmentation fulgurante
Mediameacutetrie
SOURCE
The mobile moment
Luke Wroblewski
httpwwwlukewcomffentryasp1841 SOURCE
The mobile moment
Adwords laquo Building for the next moment raquo - 5 mai 2015
httpadwordsblogspotfr201505building-for-next-momenthtml SOURCE
laquo And at these times consumers are increasingly picking up their
smartphones for answers In fact more Google searches take place
on mobile devices than on computers in 10 countries including the
US and Japan This presents a tremendous opportunity for marketers
to reach people throughout all the new touchpoints of a consumerrsquos
path to purchase raquo
Des supports diffeacuterents
Saisie Ecran Configuration Connexion
Ordinateur Clavier sourisGrande - tregraves grande
taille(gt 10)
Outils puissants Stable (Ethernet WIFI fibre hellip)
Tablette Ecran tactile clavier (optionnel)
Taille moyenne(sans compter lrsquoiPad
Pro)(7 agrave 12)
Outils moins puissants
Stable (WIFI fibre hellip)
Smartphone Ecran tactile clavier numeacuterique
Petite taille(lt6)
Outils moins puissants
Aleacuteatoire
Des utilisations diffeacuterentes
Utilisation Environnement
Ordinateur Utilisation prolongeacutee assis sur un bureau Stable
Tablette Utilisation informelle sur le canapeacute ou au lit Relativement stable
Smartphone Bregraveves salves drsquoactiviteacutes dans des lieux divers au fil de la journeacutee
Aleacuteatoire
Des utilisations agrave des moments diffeacuterents
httpsreaditlaterlistcomblog201101is-mobile-affecting-when-we-read SOURCE
Desktop un environnement - geacuteneacuteralement - bienveillant
Mobile un environnement - parfois - hostile
La taille compte (comme quoi)
Des curseurs diffeacuterents
Desktop (souris)
Mobile (doigt)
1 pixel (ou presque)
Plusieurs pixels
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Espacer les eacuteleacutements cliquables
Lien
B O U T O N gt 7mm
gt 2mm
B O U T O N
OK
Lien
B O U T O N
KO
B O U T O N
LienLien
Ameacuteliorer la lisibiliteacute du texte
Des paragraphes trop larges reacuteduisent la lisibiliteacute Compter en moyenne 60 caractegraveres par ligne
Wikipeacutedia - JRR Tolkien
httpsfrwikipediaorgwikiJ_R_R_TolkienSOURCE
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Le texte justifieacute sur des petites largeurs reacuteduit la lisibiliteacute
X
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Un contenu lisible
URSSAF
httpswwwurssaffrportailhomehtml SOURCE
Un corps de texte suffisamment grand Agrave minima 14px sur mobile (deacutepend de la typographie)
X
Un contenu lisible
Korben
httpkorbeninfoSOURCE
Le survol du curseur nrsquoexiste pas sur mobile
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
The mobile moment
Luke Wroblewski
httpwwwlukewcomffentryasp1841 SOURCE
The mobile moment
Adwords laquo Building for the next moment raquo - 5 mai 2015
httpadwordsblogspotfr201505building-for-next-momenthtml SOURCE
laquo And at these times consumers are increasingly picking up their
smartphones for answers In fact more Google searches take place
on mobile devices than on computers in 10 countries including the
US and Japan This presents a tremendous opportunity for marketers
to reach people throughout all the new touchpoints of a consumerrsquos
path to purchase raquo
Des supports diffeacuterents
Saisie Ecran Configuration Connexion
Ordinateur Clavier sourisGrande - tregraves grande
taille(gt 10)
Outils puissants Stable (Ethernet WIFI fibre hellip)
Tablette Ecran tactile clavier (optionnel)
Taille moyenne(sans compter lrsquoiPad
Pro)(7 agrave 12)
Outils moins puissants
Stable (WIFI fibre hellip)
Smartphone Ecran tactile clavier numeacuterique
Petite taille(lt6)
Outils moins puissants
Aleacuteatoire
Des utilisations diffeacuterentes
Utilisation Environnement
Ordinateur Utilisation prolongeacutee assis sur un bureau Stable
Tablette Utilisation informelle sur le canapeacute ou au lit Relativement stable
Smartphone Bregraveves salves drsquoactiviteacutes dans des lieux divers au fil de la journeacutee
Aleacuteatoire
Des utilisations agrave des moments diffeacuterents
httpsreaditlaterlistcomblog201101is-mobile-affecting-when-we-read SOURCE
Desktop un environnement - geacuteneacuteralement - bienveillant
Mobile un environnement - parfois - hostile
La taille compte (comme quoi)
Des curseurs diffeacuterents
Desktop (souris)
Mobile (doigt)
1 pixel (ou presque)
Plusieurs pixels
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Espacer les eacuteleacutements cliquables
Lien
B O U T O N gt 7mm
gt 2mm
B O U T O N
OK
Lien
B O U T O N
KO
B O U T O N
LienLien
Ameacuteliorer la lisibiliteacute du texte
Des paragraphes trop larges reacuteduisent la lisibiliteacute Compter en moyenne 60 caractegraveres par ligne
Wikipeacutedia - JRR Tolkien
httpsfrwikipediaorgwikiJ_R_R_TolkienSOURCE
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Le texte justifieacute sur des petites largeurs reacuteduit la lisibiliteacute
X
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Un contenu lisible
URSSAF
httpswwwurssaffrportailhomehtml SOURCE
Un corps de texte suffisamment grand Agrave minima 14px sur mobile (deacutepend de la typographie)
X
Un contenu lisible
Korben
httpkorbeninfoSOURCE
Le survol du curseur nrsquoexiste pas sur mobile
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
The mobile moment
Adwords laquo Building for the next moment raquo - 5 mai 2015
httpadwordsblogspotfr201505building-for-next-momenthtml SOURCE
laquo And at these times consumers are increasingly picking up their
smartphones for answers In fact more Google searches take place
on mobile devices than on computers in 10 countries including the
US and Japan This presents a tremendous opportunity for marketers
to reach people throughout all the new touchpoints of a consumerrsquos
path to purchase raquo
Des supports diffeacuterents
Saisie Ecran Configuration Connexion
Ordinateur Clavier sourisGrande - tregraves grande
taille(gt 10)
Outils puissants Stable (Ethernet WIFI fibre hellip)
Tablette Ecran tactile clavier (optionnel)
Taille moyenne(sans compter lrsquoiPad
Pro)(7 agrave 12)
Outils moins puissants
Stable (WIFI fibre hellip)
Smartphone Ecran tactile clavier numeacuterique
Petite taille(lt6)
Outils moins puissants
Aleacuteatoire
Des utilisations diffeacuterentes
Utilisation Environnement
Ordinateur Utilisation prolongeacutee assis sur un bureau Stable
Tablette Utilisation informelle sur le canapeacute ou au lit Relativement stable
Smartphone Bregraveves salves drsquoactiviteacutes dans des lieux divers au fil de la journeacutee
Aleacuteatoire
Des utilisations agrave des moments diffeacuterents
httpsreaditlaterlistcomblog201101is-mobile-affecting-when-we-read SOURCE
Desktop un environnement - geacuteneacuteralement - bienveillant
Mobile un environnement - parfois - hostile
La taille compte (comme quoi)
Des curseurs diffeacuterents
Desktop (souris)
Mobile (doigt)
1 pixel (ou presque)
Plusieurs pixels
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Espacer les eacuteleacutements cliquables
Lien
B O U T O N gt 7mm
gt 2mm
B O U T O N
OK
Lien
B O U T O N
KO
B O U T O N
LienLien
Ameacuteliorer la lisibiliteacute du texte
Des paragraphes trop larges reacuteduisent la lisibiliteacute Compter en moyenne 60 caractegraveres par ligne
Wikipeacutedia - JRR Tolkien
httpsfrwikipediaorgwikiJ_R_R_TolkienSOURCE
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Le texte justifieacute sur des petites largeurs reacuteduit la lisibiliteacute
X
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Un contenu lisible
URSSAF
httpswwwurssaffrportailhomehtml SOURCE
Un corps de texte suffisamment grand Agrave minima 14px sur mobile (deacutepend de la typographie)
X
Un contenu lisible
Korben
httpkorbeninfoSOURCE
Le survol du curseur nrsquoexiste pas sur mobile
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Des supports diffeacuterents
Saisie Ecran Configuration Connexion
Ordinateur Clavier sourisGrande - tregraves grande
taille(gt 10)
Outils puissants Stable (Ethernet WIFI fibre hellip)
Tablette Ecran tactile clavier (optionnel)
Taille moyenne(sans compter lrsquoiPad
Pro)(7 agrave 12)
Outils moins puissants
Stable (WIFI fibre hellip)
Smartphone Ecran tactile clavier numeacuterique
Petite taille(lt6)
Outils moins puissants
Aleacuteatoire
Des utilisations diffeacuterentes
Utilisation Environnement
Ordinateur Utilisation prolongeacutee assis sur un bureau Stable
Tablette Utilisation informelle sur le canapeacute ou au lit Relativement stable
Smartphone Bregraveves salves drsquoactiviteacutes dans des lieux divers au fil de la journeacutee
Aleacuteatoire
Des utilisations agrave des moments diffeacuterents
httpsreaditlaterlistcomblog201101is-mobile-affecting-when-we-read SOURCE
Desktop un environnement - geacuteneacuteralement - bienveillant
Mobile un environnement - parfois - hostile
La taille compte (comme quoi)
Des curseurs diffeacuterents
Desktop (souris)
Mobile (doigt)
1 pixel (ou presque)
Plusieurs pixels
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Espacer les eacuteleacutements cliquables
Lien
B O U T O N gt 7mm
gt 2mm
B O U T O N
OK
Lien
B O U T O N
KO
B O U T O N
LienLien
Ameacuteliorer la lisibiliteacute du texte
Des paragraphes trop larges reacuteduisent la lisibiliteacute Compter en moyenne 60 caractegraveres par ligne
Wikipeacutedia - JRR Tolkien
httpsfrwikipediaorgwikiJ_R_R_TolkienSOURCE
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Le texte justifieacute sur des petites largeurs reacuteduit la lisibiliteacute
X
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Un contenu lisible
URSSAF
httpswwwurssaffrportailhomehtml SOURCE
Un corps de texte suffisamment grand Agrave minima 14px sur mobile (deacutepend de la typographie)
X
Un contenu lisible
Korben
httpkorbeninfoSOURCE
Le survol du curseur nrsquoexiste pas sur mobile
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Saisie Ecran Configuration Connexion
Ordinateur Clavier sourisGrande - tregraves grande
taille(gt 10)
Outils puissants Stable (Ethernet WIFI fibre hellip)
Tablette Ecran tactile clavier (optionnel)
Taille moyenne(sans compter lrsquoiPad
Pro)(7 agrave 12)
Outils moins puissants
Stable (WIFI fibre hellip)
Smartphone Ecran tactile clavier numeacuterique
Petite taille(lt6)
Outils moins puissants
Aleacuteatoire
Des utilisations diffeacuterentes
Utilisation Environnement
Ordinateur Utilisation prolongeacutee assis sur un bureau Stable
Tablette Utilisation informelle sur le canapeacute ou au lit Relativement stable
Smartphone Bregraveves salves drsquoactiviteacutes dans des lieux divers au fil de la journeacutee
Aleacuteatoire
Des utilisations agrave des moments diffeacuterents
httpsreaditlaterlistcomblog201101is-mobile-affecting-when-we-read SOURCE
Desktop un environnement - geacuteneacuteralement - bienveillant
Mobile un environnement - parfois - hostile
La taille compte (comme quoi)
Des curseurs diffeacuterents
Desktop (souris)
Mobile (doigt)
1 pixel (ou presque)
Plusieurs pixels
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Espacer les eacuteleacutements cliquables
Lien
B O U T O N gt 7mm
gt 2mm
B O U T O N
OK
Lien
B O U T O N
KO
B O U T O N
LienLien
Ameacuteliorer la lisibiliteacute du texte
Des paragraphes trop larges reacuteduisent la lisibiliteacute Compter en moyenne 60 caractegraveres par ligne
Wikipeacutedia - JRR Tolkien
httpsfrwikipediaorgwikiJ_R_R_TolkienSOURCE
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Le texte justifieacute sur des petites largeurs reacuteduit la lisibiliteacute
X
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Un contenu lisible
URSSAF
httpswwwurssaffrportailhomehtml SOURCE
Un corps de texte suffisamment grand Agrave minima 14px sur mobile (deacutepend de la typographie)
X
Un contenu lisible
Korben
httpkorbeninfoSOURCE
Le survol du curseur nrsquoexiste pas sur mobile
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Des utilisations diffeacuterentes
Utilisation Environnement
Ordinateur Utilisation prolongeacutee assis sur un bureau Stable
Tablette Utilisation informelle sur le canapeacute ou au lit Relativement stable
Smartphone Bregraveves salves drsquoactiviteacutes dans des lieux divers au fil de la journeacutee
Aleacuteatoire
Des utilisations agrave des moments diffeacuterents
httpsreaditlaterlistcomblog201101is-mobile-affecting-when-we-read SOURCE
Desktop un environnement - geacuteneacuteralement - bienveillant
Mobile un environnement - parfois - hostile
La taille compte (comme quoi)
Des curseurs diffeacuterents
Desktop (souris)
Mobile (doigt)
1 pixel (ou presque)
Plusieurs pixels
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Espacer les eacuteleacutements cliquables
Lien
B O U T O N gt 7mm
gt 2mm
B O U T O N
OK
Lien
B O U T O N
KO
B O U T O N
LienLien
Ameacuteliorer la lisibiliteacute du texte
Des paragraphes trop larges reacuteduisent la lisibiliteacute Compter en moyenne 60 caractegraveres par ligne
Wikipeacutedia - JRR Tolkien
httpsfrwikipediaorgwikiJ_R_R_TolkienSOURCE
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Le texte justifieacute sur des petites largeurs reacuteduit la lisibiliteacute
X
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Un contenu lisible
URSSAF
httpswwwurssaffrportailhomehtml SOURCE
Un corps de texte suffisamment grand Agrave minima 14px sur mobile (deacutepend de la typographie)
X
Un contenu lisible
Korben
httpkorbeninfoSOURCE
Le survol du curseur nrsquoexiste pas sur mobile
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Utilisation Environnement
Ordinateur Utilisation prolongeacutee assis sur un bureau Stable
Tablette Utilisation informelle sur le canapeacute ou au lit Relativement stable
Smartphone Bregraveves salves drsquoactiviteacutes dans des lieux divers au fil de la journeacutee
Aleacuteatoire
Des utilisations agrave des moments diffeacuterents
httpsreaditlaterlistcomblog201101is-mobile-affecting-when-we-read SOURCE
Desktop un environnement - geacuteneacuteralement - bienveillant
Mobile un environnement - parfois - hostile
La taille compte (comme quoi)
Des curseurs diffeacuterents
Desktop (souris)
Mobile (doigt)
1 pixel (ou presque)
Plusieurs pixels
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Espacer les eacuteleacutements cliquables
Lien
B O U T O N gt 7mm
gt 2mm
B O U T O N
OK
Lien
B O U T O N
KO
B O U T O N
LienLien
Ameacuteliorer la lisibiliteacute du texte
Des paragraphes trop larges reacuteduisent la lisibiliteacute Compter en moyenne 60 caractegraveres par ligne
Wikipeacutedia - JRR Tolkien
httpsfrwikipediaorgwikiJ_R_R_TolkienSOURCE
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Le texte justifieacute sur des petites largeurs reacuteduit la lisibiliteacute
X
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Un contenu lisible
URSSAF
httpswwwurssaffrportailhomehtml SOURCE
Un corps de texte suffisamment grand Agrave minima 14px sur mobile (deacutepend de la typographie)
X
Un contenu lisible
Korben
httpkorbeninfoSOURCE
Le survol du curseur nrsquoexiste pas sur mobile
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Des utilisations agrave des moments diffeacuterents
httpsreaditlaterlistcomblog201101is-mobile-affecting-when-we-read SOURCE
Desktop un environnement - geacuteneacuteralement - bienveillant
Mobile un environnement - parfois - hostile
La taille compte (comme quoi)
Des curseurs diffeacuterents
Desktop (souris)
Mobile (doigt)
1 pixel (ou presque)
Plusieurs pixels
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Espacer les eacuteleacutements cliquables
Lien
B O U T O N gt 7mm
gt 2mm
B O U T O N
OK
Lien
B O U T O N
KO
B O U T O N
LienLien
Ameacuteliorer la lisibiliteacute du texte
Des paragraphes trop larges reacuteduisent la lisibiliteacute Compter en moyenne 60 caractegraveres par ligne
Wikipeacutedia - JRR Tolkien
httpsfrwikipediaorgwikiJ_R_R_TolkienSOURCE
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Le texte justifieacute sur des petites largeurs reacuteduit la lisibiliteacute
X
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Un contenu lisible
URSSAF
httpswwwurssaffrportailhomehtml SOURCE
Un corps de texte suffisamment grand Agrave minima 14px sur mobile (deacutepend de la typographie)
X
Un contenu lisible
Korben
httpkorbeninfoSOURCE
Le survol du curseur nrsquoexiste pas sur mobile
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Desktop un environnement - geacuteneacuteralement - bienveillant
Mobile un environnement - parfois - hostile
La taille compte (comme quoi)
Des curseurs diffeacuterents
Desktop (souris)
Mobile (doigt)
1 pixel (ou presque)
Plusieurs pixels
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Espacer les eacuteleacutements cliquables
Lien
B O U T O N gt 7mm
gt 2mm
B O U T O N
OK
Lien
B O U T O N
KO
B O U T O N
LienLien
Ameacuteliorer la lisibiliteacute du texte
Des paragraphes trop larges reacuteduisent la lisibiliteacute Compter en moyenne 60 caractegraveres par ligne
Wikipeacutedia - JRR Tolkien
httpsfrwikipediaorgwikiJ_R_R_TolkienSOURCE
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Le texte justifieacute sur des petites largeurs reacuteduit la lisibiliteacute
X
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Un contenu lisible
URSSAF
httpswwwurssaffrportailhomehtml SOURCE
Un corps de texte suffisamment grand Agrave minima 14px sur mobile (deacutepend de la typographie)
X
Un contenu lisible
Korben
httpkorbeninfoSOURCE
Le survol du curseur nrsquoexiste pas sur mobile
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Mobile un environnement - parfois - hostile
La taille compte (comme quoi)
Des curseurs diffeacuterents
Desktop (souris)
Mobile (doigt)
1 pixel (ou presque)
Plusieurs pixels
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Espacer les eacuteleacutements cliquables
Lien
B O U T O N gt 7mm
gt 2mm
B O U T O N
OK
Lien
B O U T O N
KO
B O U T O N
LienLien
Ameacuteliorer la lisibiliteacute du texte
Des paragraphes trop larges reacuteduisent la lisibiliteacute Compter en moyenne 60 caractegraveres par ligne
Wikipeacutedia - JRR Tolkien
httpsfrwikipediaorgwikiJ_R_R_TolkienSOURCE
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Le texte justifieacute sur des petites largeurs reacuteduit la lisibiliteacute
X
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Un contenu lisible
URSSAF
httpswwwurssaffrportailhomehtml SOURCE
Un corps de texte suffisamment grand Agrave minima 14px sur mobile (deacutepend de la typographie)
X
Un contenu lisible
Korben
httpkorbeninfoSOURCE
Le survol du curseur nrsquoexiste pas sur mobile
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
La taille compte (comme quoi)
Des curseurs diffeacuterents
Desktop (souris)
Mobile (doigt)
1 pixel (ou presque)
Plusieurs pixels
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Espacer les eacuteleacutements cliquables
Lien
B O U T O N gt 7mm
gt 2mm
B O U T O N
OK
Lien
B O U T O N
KO
B O U T O N
LienLien
Ameacuteliorer la lisibiliteacute du texte
Des paragraphes trop larges reacuteduisent la lisibiliteacute Compter en moyenne 60 caractegraveres par ligne
Wikipeacutedia - JRR Tolkien
httpsfrwikipediaorgwikiJ_R_R_TolkienSOURCE
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Le texte justifieacute sur des petites largeurs reacuteduit la lisibiliteacute
X
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Un contenu lisible
URSSAF
httpswwwurssaffrportailhomehtml SOURCE
Un corps de texte suffisamment grand Agrave minima 14px sur mobile (deacutepend de la typographie)
X
Un contenu lisible
Korben
httpkorbeninfoSOURCE
Le survol du curseur nrsquoexiste pas sur mobile
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Des curseurs diffeacuterents
Desktop (souris)
Mobile (doigt)
1 pixel (ou presque)
Plusieurs pixels
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Espacer les eacuteleacutements cliquables
Lien
B O U T O N gt 7mm
gt 2mm
B O U T O N
OK
Lien
B O U T O N
KO
B O U T O N
LienLien
Ameacuteliorer la lisibiliteacute du texte
Des paragraphes trop larges reacuteduisent la lisibiliteacute Compter en moyenne 60 caractegraveres par ligne
Wikipeacutedia - JRR Tolkien
httpsfrwikipediaorgwikiJ_R_R_TolkienSOURCE
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Le texte justifieacute sur des petites largeurs reacuteduit la lisibiliteacute
X
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Un contenu lisible
URSSAF
httpswwwurssaffrportailhomehtml SOURCE
Un corps de texte suffisamment grand Agrave minima 14px sur mobile (deacutepend de la typographie)
X
Un contenu lisible
Korben
httpkorbeninfoSOURCE
Le survol du curseur nrsquoexiste pas sur mobile
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Espacer les eacuteleacutements cliquables
Lien
B O U T O N gt 7mm
gt 2mm
B O U T O N
OK
Lien
B O U T O N
KO
B O U T O N
LienLien
Ameacuteliorer la lisibiliteacute du texte
Des paragraphes trop larges reacuteduisent la lisibiliteacute Compter en moyenne 60 caractegraveres par ligne
Wikipeacutedia - JRR Tolkien
httpsfrwikipediaorgwikiJ_R_R_TolkienSOURCE
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Le texte justifieacute sur des petites largeurs reacuteduit la lisibiliteacute
X
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Un contenu lisible
URSSAF
httpswwwurssaffrportailhomehtml SOURCE
Un corps de texte suffisamment grand Agrave minima 14px sur mobile (deacutepend de la typographie)
X
Un contenu lisible
Korben
httpkorbeninfoSOURCE
Le survol du curseur nrsquoexiste pas sur mobile
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Des curseurs diffeacuterents
Les bateaux mouches
httpwwwbateaux-mouchesfrfrSOURCE
Espacer les eacuteleacutements cliquables
Lien
B O U T O N gt 7mm
gt 2mm
B O U T O N
OK
Lien
B O U T O N
KO
B O U T O N
LienLien
Ameacuteliorer la lisibiliteacute du texte
Des paragraphes trop larges reacuteduisent la lisibiliteacute Compter en moyenne 60 caractegraveres par ligne
Wikipeacutedia - JRR Tolkien
httpsfrwikipediaorgwikiJ_R_R_TolkienSOURCE
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Le texte justifieacute sur des petites largeurs reacuteduit la lisibiliteacute
X
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Un contenu lisible
URSSAF
httpswwwurssaffrportailhomehtml SOURCE
Un corps de texte suffisamment grand Agrave minima 14px sur mobile (deacutepend de la typographie)
X
Un contenu lisible
Korben
httpkorbeninfoSOURCE
Le survol du curseur nrsquoexiste pas sur mobile
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Espacer les eacuteleacutements cliquables
Lien
B O U T O N gt 7mm
gt 2mm
B O U T O N
OK
Lien
B O U T O N
KO
B O U T O N
LienLien
Ameacuteliorer la lisibiliteacute du texte
Des paragraphes trop larges reacuteduisent la lisibiliteacute Compter en moyenne 60 caractegraveres par ligne
Wikipeacutedia - JRR Tolkien
httpsfrwikipediaorgwikiJ_R_R_TolkienSOURCE
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Le texte justifieacute sur des petites largeurs reacuteduit la lisibiliteacute
X
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Un contenu lisible
URSSAF
httpswwwurssaffrportailhomehtml SOURCE
Un corps de texte suffisamment grand Agrave minima 14px sur mobile (deacutepend de la typographie)
X
Un contenu lisible
Korben
httpkorbeninfoSOURCE
Le survol du curseur nrsquoexiste pas sur mobile
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Ameacuteliorer la lisibiliteacute du texte
Des paragraphes trop larges reacuteduisent la lisibiliteacute Compter en moyenne 60 caractegraveres par ligne
Wikipeacutedia - JRR Tolkien
httpsfrwikipediaorgwikiJ_R_R_TolkienSOURCE
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Le texte justifieacute sur des petites largeurs reacuteduit la lisibiliteacute
X
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Un contenu lisible
URSSAF
httpswwwurssaffrportailhomehtml SOURCE
Un corps de texte suffisamment grand Agrave minima 14px sur mobile (deacutepend de la typographie)
X
Un contenu lisible
Korben
httpkorbeninfoSOURCE
Le survol du curseur nrsquoexiste pas sur mobile
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Le texte justifieacute sur des petites largeurs reacuteduit la lisibiliteacute
X
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Un contenu lisible
URSSAF
httpswwwurssaffrportailhomehtml SOURCE
Un corps de texte suffisamment grand Agrave minima 14px sur mobile (deacutepend de la typographie)
X
Un contenu lisible
Korben
httpkorbeninfoSOURCE
Le survol du curseur nrsquoexiste pas sur mobile
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Ameacuteliorer la lisibiliteacute du texte
Dorigati
httpwwwdorigatiiten SOURCE
Un contenu lisible
URSSAF
httpswwwurssaffrportailhomehtml SOURCE
Un corps de texte suffisamment grand Agrave minima 14px sur mobile (deacutepend de la typographie)
X
Un contenu lisible
Korben
httpkorbeninfoSOURCE
Le survol du curseur nrsquoexiste pas sur mobile
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Un contenu lisible
URSSAF
httpswwwurssaffrportailhomehtml SOURCE
Un corps de texte suffisamment grand Agrave minima 14px sur mobile (deacutepend de la typographie)
X
Un contenu lisible
Korben
httpkorbeninfoSOURCE
Le survol du curseur nrsquoexiste pas sur mobile
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Un contenu lisible
Korben
httpkorbeninfoSOURCE
Le survol du curseur nrsquoexiste pas sur mobile
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Le survol du curseur nrsquoexiste pas sur mobile
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Deacutelit de mode
httpwwwdelitdemodecom SOURCE
Touch me now
Le sous menu est inaccessible sur mobile le clic sur un onglet du menu charge une nouvelle page sur tous les supports
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Cdiscount
httpwwwcdiscountcom SOURCE
Touch me now
Sur mobile le clic drsquoun menu ne change plus la page mais ouvre le sous menu
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Les sites web doivent eacutevoluer
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Un exemple avec Mail Chimp2001 2016
Mail Chimp httpmailchimpcom
UX Timeline httpuxtimelinecomSOURCE
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Comment ecirctre preacutesent sur
ces supports
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Plusieurs solutions existent
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
laquo Application native raquo
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Comscore laquo The US Mobile App Report raquo - 21 aoucirct 2014
httpwwwcomscorecomInsightsPresentations-and-Whitepapers2014The-US-Mobile-App-ReportSOURCE
laquo Application native raquo
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
laquo Application native raquo
bull Utilise au maximum les caracteacuteristiques de lrsquoappareil (accegraves aux contacts aux paramegravetres etc)
bull Des applications tregraves performantes
bull Une utilisation optimiseacutee pour le support
Les plus
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
bull Demande une validation sur certaines plateformes de teacuteleacutechargement
bull Des languages diffeacuterents en fonction des plateformes de teacuteleacutechargement
bull Doit ecirctre teacuteleacutechargeacutee sur une plateforme
bull Les mises agrave jour doivent parfois ecirctre valideacutees par lrsquoutilisateur
Les moins
laquo Application native raquo
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Site deacutedieacute
BlaBlaCar - version desktop
httpswwwblablacarfr SOURCE
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Site deacutedieacute
BlaBlaCar - version mobile
httpsmblablacarfr SOURCE
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Site deacutedieacute
bull Du contenu optimiseacute pour chaque version
bull Une expeacuterience utilisateur optimiseacutee pour chaque version
bull Des performances optimiseacutees
bull Une url diffeacuterente pour chaque version
Les plus
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Site deacutedieacute
bull Du contenu dupliqueacute non SEO friendly
bull Une mise agrave jour lourde
bull Une orientation vers la bonne version pas toujours pertinente
Les moins
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Responsive web design
httpmonsitecom
Well the way they make shows is they make one show That shows called a pilot Then they show that show to the who make shows and on the strength of that one show they decide if theyre going to make more shows Some pilots get picked and become television programs Some dont become nothing She starred in one of the ones that became nothing =
+ +
Un seul code source
Plusieurs reacutesolutions
Une seule urlUn seul contenu
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Responsive web design
Youtube
httpswwwyoutubecomwatchv=yfBJKtUAwIQ SOURCE
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
bull Pas de contenu dupliqueacute (duplicate content)
bull Un seul code source
bull Maintenance simplifieacutee
bull Coucirct plus inteacuteressant qursquoun deacuteveloppement speacutecifique sur chaque version
Les plus
Responsive web design
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
bull Sites souvent moins performants
bull Accegraves aux caracteacuteristiques du support limiteacutes
Les moins
Responsive web design
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Quelle(s) solution(s) choisir
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Plusieurs solutions possibles
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Plusieurs solutions possibles
Leboncoin
httpwwwleboncoinfr SOURCE
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Doit surtout ecirctre deacutefinie par les attentes des utilisateurs
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Responsive web design
allons plus loinhellip
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Le responsive web design nrsquoest pas
qursquoune histoire de repositionnement
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Brad Frost Web - Beyond Media Queries An Anatomy of an Adaptive Web Design Smashing Confeacuterence - 2012
httpsvimeocom55076713 SOURCE
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Le contenu avant tout
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Le contenu avant tout
Publiciteacute pour lrsquoapplication
Header
Publiciteacute
Contenu
Teacuteleacutestar
httptelestarfr SOURCE
X
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Le contenu avant tout
Caisse eacutepargne
httpswwwcaisse-epargnefr SOURCE
X
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Le contenu avant tout
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Le contenu avant tout
Publiciteacute pour lrsquoapplication (fixe)
Header (fixe)
Geacuteolocalisation (fixe)
Contenu
Les Pages Jaunes
httpwwwpagesjaunesfr SOURCE
X
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Un contenu directement visible
Hirondelle USA
httphirondelleusaorg SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Un contenu directement visible
Hirondelle USA - Where We Work
httphirondelleusaorgour-partners SOURCE
X
Deacutebut du contenu
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Un contenu directement visible
Semaine digitale de Bordeaux
httpcitedigitalebordeauxfr SOURCE
Deacutebut du contenu
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Adapter le contenu
Arngren
httpwwwarngrennet SOURCE
X
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Arngren
httpwwwarngrennet SOURCE
XPrioriser le contenu
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Steacutephanie Walter
httpswwwstephaniewalterfrSOURCE
Prioriser le contenu
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Prioriser le contenu
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Prioriser le contenu
contenu secondaire
contenu secondaire
contenu secondaire
Libeacuteration - vue desktop
httpwwwliberationfr SOURCE
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Prioriser le contenu
Libeacuteration - vue mobile
httpwwwliberationfr SOURCE
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Optimiser lrsquoaffichage
Libeacuteration
httpwwwliberationfr SOURCE
Affichage desktop Affichage mobile
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Une meacutethode efficace
le mobile first
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
ou commencer par concevoir et deacutevelopper sur les plus petites reacutesolutions
Mobile first
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Mobile first
bull Un site souvent plus clair plus lisible
bull Des fonctionnaliteacutes filtreacutees seules les plus importantes doivent rester
bull Une performance ameacutelioreacutee
bull Un code plus clair
Les plus
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Mobile first
Steacutephanie Walter - inspireacute de Brad Frost Web
httpsblogstephaniewalterfrfreebies-illustration-strategie-responsive-mobile-first SOURCE
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Les points de ruptures entre deux affichages
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Les points de ruptures
Capital Public Radio
httpwwwcapradioraffleorg SOURCE
Largeur des eacutecrans0px 320px 600px 800px
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Chaque support a ses dimensions
Screen Sizes
httpscreensizes SOURCE
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Il est essentiel de
ne pas choisir les points de ruptures en fonction des supports mais
en fonction du contenu
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Un processus de creacuteation
diffeacuterent
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Processus standardPreacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
De nouvelles contraintes performance experience utilisateurs multi supports etc
Des meacutetiers plus collaboratifs
=
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Preacuteparation
AnalyseDeacutefinition du besoin Cahier des charges
Benchmark Utilisateurs cibles
Ergonomie
Zoning Wireframes
Deacutefinition et hieacuterarchisation du contenu Arborescence Tendances graphiques Charte graphique Speacutecifications techniques et fonctionnelles
Recette
Tests Debug
Graphisme
Maquettes graphiques
Inteacutegration
Templates HTMLDeacuteveloppement
Deacuteveloppement de lrsquoapplication
Mise en ligne
Mise en ligne Suivi
Un processus plus flexible
Tests
Tests
Tests
Tests
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Creacuteer des prototypes
Prototype de lrsquoagence Heroku - pour le site American Association for Homecare
httpaafh-cssherokuappcomwireframes SOURCE
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Utiliser une meacutethode de travail plus agile
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Une meacutethode agile le scrum
Stand-up quotidien
Sprint (souvent 2 semaines)
Projet LotsProduit
fini
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Mais comment tester
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Console Chrome sur le site Iutopi
httpwwwiutopicom SOURCE
Test sur le navigateur
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Resizer
httpdesigngooglecomresizer SOURCE
Test sur des sites speacutecialiseacutes
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
BrowserStack
httpswwwbrowserstackcom SOURCE
Test sur des emulateurs
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Luke Wroblewski - directeur produit Google
httpwwwlukewcom SOURCE
Test sur les supports cibles
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Performance
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Comment se charge une page web
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Ordinateur utilisateur
Serveur DNS
Serveur web
Base de donneacutees
1
2
3
4
1 Envoi de la requecircte http (http
monsitecom)
2 Transformation du domaine en adresse IP
(http1270021)
3 Compilation du serveur de lrsquoheacutebergeur
4 Renvoi du site sur le navigateur client
Etape 1 reacutecupeacuteration du document HTML
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Etape 2 creacuteation du DOM et chargement des ressources
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Etape 3 mise en forme du document
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Etape 4 chargement des polices
et des derniegraveres ressources
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Un constat apregraves 3 secondes plus de 50 des
utilisateurs ont quitteacute le site
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Imaginons nous sommes en deacuteplacement et souhaitons
- veacuterifier des horaires de train - reacuteserver une chambre
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Connexion 2G (450kbs)
60 requecirctes effectueacutees
473 Kb chargeacutees
1019 secondes (chargement agrave 100)
Voyage SNCF
Voyage-sncf
httpvoyages-sncfmobi SOURCE
243 sec 383 sec pas de texte
593 sec 961 sec aiumle reflow
996 sec eacutetat final
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Connexion 3G (750kbs)
70 requecirctes effectueacutees
17Mb chargeacutees
1921 secondes (chargement agrave 100)
AirBnb
AIrBnb
httpswwwairbnbfr SOURCE
436 sec 680 sec pas de texte
737 sec 1029 sec aiumle reflow
1046 sec eacutetat final
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Un web de plus en plus
obegravese
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Des pages tregraves lourdes
Restaurant Le Duc
httprestaurantleduccom SOURCE
88 Mb de donneacutees teacuteleacutechargeacutees
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Lrsquoeacutevolution du poids des pages
HTTP Archive
httphttparchiveorg SOURCE
Deacutecembre 2010 Mars 2016
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
et mecircme si vous lrsquoavezhellip
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
helliptous les utilisateurs nrsquoont pas la fibre pensons-y
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Comment ameacuteliorer ce chargement
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Limiter le nombre de
requecirctes
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Requecirctes aux chargement
bull Reacuteunifier les images (sprites)
bull Utiliser des fonts icocircnes
bull Limiter le nombre de plugins utiliseacutes
bull Concatener les ressources
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Charger les meacutedias agrave la demande
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
fenecirctre navigateur (viewport)
Page
Images chargeacutees
Image en cours de chargement
Images non chargeacutees
Scroll
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Trop crsquoest trop
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Limiter le nombre de deacutependance
bull CMS (Content Management System) WordPress Joomla Prestashop Magenta hellip
bull Frameworks Bootstrap Ink Skeleton hellip
bull Plugins
bull Librairies jQuery VanillaJS hellip
bull Thegravemes
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Les deacutependances
bull Eacuteleacutements directement fonctionnel
bull Mises agrave jours
bull Gain drsquoargent
bull Gain de temps
Les plus
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
bull Failles de seacutecuriteacutes
bull Conflits entre deacutependances
bull Maintenance plus complexe
bull Perte de performance
Les moins
Les deacutependances
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Eviter le reflow
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Le reflow est un processus permettant de recalculer les positions et
dimensions drsquoun eacuteleacutement Ce calcul a un impact sur
le reste de la page
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Un exemple
Estelle Blog Mode
httpwwwestelleblogmodecom SOURCE
Chargement agrave 50 Chargement agrave 100
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Afin drsquoeacuteviter le reflow il faut
preacutevoir la place des eacuteleacutements
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Un exemple
Amazon
httpswwwamazonfr SOURCE
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Les images
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Choisir le bon format
Type drsquoimage Format
Photo jpeg
Logo jpeg png svg
Icocircne font icon png 8 gif svg
Icocircne avec transparence font icon png 24 gif (ne gegravere pas lrsquoopaciteacute) svg
Image animeacutee svg gif animeacute
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Bien compresser les images
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Les eacutecrans full HDhellip hellip des reacutesolutions pouvant deacutepasser les 300dpi
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Utiliser des images vectorielles
Wikipeacutedia - Scalable Vector Graphics
httpsfrwikipediaorgwikiScalable_Vector_Graphics SOURCE
Attention le svg nrsquoest pas compatible sur tous les navigateurs
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Ou drsquoautres meacutethodes
bull Utiliser des images 2x plus grandes mais reacuteduites (attention au poids)
bull Utiliser lrsquoeacuteleacutement HTML ltpicturegt
bull Utiliser lrsquoattribut HTML srcset
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Les typographies une longue histoirehellip
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Historiquement
les navigateurs web utilisent un nombre restreint de typographies
Georgia
ArialArial Black
Helvetica
PalatinoTimes New Roman
Comic sans MS
ImpactTahoma
Trebuchet MS
Verdana Courrier New
Courrier
Monaco
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Depuis les anneacutees 2010
le web peut utiliser de nouvelles polices
Font Smith
httpwwwfsmillbankcom SOURCE
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Mais
bull Est parfois trop lourde (performance)
bull Nrsquoa pas le mecircme rendu en fonction des navigateurs eacutecrans
bull Nrsquoest pas compatible sur tous les navigateurs
bull Est chargeacutee agrave la fin du CSSOM
Une typo non native comporte des inconveacutenients
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
laquo System fonts can be beautiful
Webfonts are not a requirement for great typographyraquo
Adam Morse
httpmrmrsiowriting20160317webfonts SOURCE
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Il faut donc
limiter lrsquoutilisation des typographies
non systegraveme
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
lrsquoHTML5 apporte de nouvelles
API (Interface Application de Programmation)
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
La Geacuteolocalisation
Jardiland
httpwwwjardilandcom SOURCE
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Le WebGL
Firefox Hello
httpswwwmozillaorgfrSOURCE
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
hellip et plein drsquoautres
etc
Notification
Plein eacutecrans
Historique de navigation 3D
Accegraves agrave la luminositeacute du support
Accegraves agrave la batterie du support
Hors connexion
Accegraves aux meacutedias (micro webcam) du support
Web storage
Canvas
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Certaines anciennes versions de
navigateurs persistent
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Connaicirctre les navigateurs cibles et leurs versions
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Quand cela est possible
eacutevoluer vers les derniegraveres versions de languageshellip
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
helliptout en restant navigable sur les vieux navigateurs
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Cdiscount - sur Internet Explorer 7
httpwwwcdiscountcom SOURCE
NB Internet Eplorer 7 - 8 et 9 sont officiellement obsolegravetes
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Creacuteer une icocircne de favoris (favicon) visible sur tous les supports
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Un geacuteneacuterateur de favicon
Real Favicon Generator
httprealfavicongeneratornet SOURCE
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
visible sur tous desktophellip
Thomas Catinaud
httpthomascatinaudcom SOURCE
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
hellipet sur mobile (toutes plateformes)
Thomas Catinaud
httpthomascatinaudcom SOURCE
Possibiliteacute de rajouter des sites sur les panneaux drsquoeacutecrans mobiles
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Pour aller plus loin
E-COD vous propose de suivre la formation laquo inteacutegrateur
frontend raquo du 25 avril au 28 juin 2016
Drsquoautres modules courts de formation continue sont possibles sur
diffeacuterentes theacutematiques Reacutefeacuterencement e-reacuteputation e-commerce reacuteseaux sociauxhellip
Renseignements ecodformation-laccom ou 05 56 79 50 43
Merci
Merci
Related Documents
