RESPONSIVE WEB DESIGN :
OUI, MAIS PAS N’IMPORTE COMMENT !
Damien Senger · @iamhiwelo · SEO Camp’us 2016 · Paris
Slide 2
Slide 2 text
et ça, c’est moi :)
Damien Senger
je suis designer & développeur web
je suis passionné par la typographie web & WordPress
j’ai créé mon studio hiwelo. et je travaille chez Alsacréations
@iamhiwelo
Slide 3
Slide 3 text
QUELQUES
RAPPELS
Slide 4
Slide 4 text
La « situation de mobilité » :
cela ne veut plus rien dire…
Slide 5
Slide 5 text
L’internet mobile a dépassé en usage
l’internet desktop
Slide 6
Slide 6 text
Le Responsive Web Design
n’est pas la solution unique
Slide 7
Slide 7 text
• •
UNE RÉALITÉ
PLUSIEURS STRATÉGIES
Slide 8
Slide 8 text
STRATÉGIE
RESPONSIVE RETRO-FITTING
Slide 9
Slide 9 text
On prend l’existant et on l’adapte
pour le faire entrer dans le format mobile
Crédit photo : zoetnet
Slide 10
Slide 10 text
Le contenu n’est pas adapté au mobile…
gros soucis de performance à l’horizon !
Crédit photo : Chris Keating
Slide 11
Slide 11 text
STRATÉGIE
MOBILE FIRST
Slide 12
Slide 12 text
Le contenu est accessible
quelque soit la plateforme
Slide 13
Slide 13 text
Impose une réflexion globale
sur les contenus attendus et pertinents
Slide 14
Slide 14 text
Création d’une interface efficace
adaptée aux contraintes du mobile
Slide 15
Slide 15 text
Au cœur du Mobile First :
l’amélioration progressive
Crédit photo : HannahLeePhotography
Slide 16
Slide 16 text
Crédit photo : Marcus Lyra
STRATÉGIE
RESPONSIVE M-DOT SITE
Slide 17
Slide 17 text
Un choix intéressant pour faciliter
l’expérimentation et limiter la prise de risque
Crédit photo : Paul
Slide 18
Slide 18 text
On met en ligne un site mobile-first HTML
en parallèle du site desktop existant
Crédit photo : Alan English CPA
Slide 19
Slide 19 text
Petit à petit, on développe les breakpoints
du site mobile vers les écrans les plus larges
Crédit photo : podluzny
Slide 20
Slide 20 text
Être prestataire dans ce type de projet :
flexibilité, itération & vision long terme
Crédit photo : Davy Landman
Slide 21
Slide 21 text
Budgétisation de ces projets :
éviter que le projet cesse en cours de route
Slide 22
Slide 22 text
UNE STRATÉGIE MOBILE :
CELA NE S’IMPROVISE PAS !
Crédit photo : David Kasparek
Slide 23
Slide 23 text
Prioriser ses contenus
pour prioriser l’affichage
Slide 24
Slide 24 text
Réfléchir ses breakpoints
en fonction du contenu
Crédit photo : Luc Legay
Slide 25
Slide 25 text
Quelle place pour les experts SEO
dans ces projets ?
Slide 26
Slide 26 text
Définir des objectifs de performance
pour trancher en cas de conflit :
design / développement / SEO
Slide 27
Slide 27 text
RÉINVENTONS
LES MODÈLES
*
Slide 28
Slide 28 text
Gestion de projet :
la fin du modèle en cascade
Slide 29
Slide 29 text
Au cœur du Responsive Web Design :
la flexibilité et l’itération
Crédit photo : timlewisnm
Slide 30
Slide 30 text
Le Responsive Web Design c’est aussi
la fin de la sacro-sainte maquette web
le pixel pe ect n’a plus aucun sens aujourd’hui…
Crédit photo : visualpun.ch
Slide 31
Slide 31 text
LA PUBLICITÉ EN LIGNE :
TOUT CASSER POUR RECOMMENCER
Slide 32
Slide 32 text
Bannière, contenus, etc. :
réfléchir cross-platform
Slide 33
Slide 33 text
La publicité ne doit pas entraver
l’accès aux contenus, surtout sur mobile
Slide 34
Slide 34 text
Adaptez vos choix publicitaires
aux contraintes de vos utilisateurs
Slide 35
Slide 35 text
Crédit photo : Trevor Devine
RESPONSIVE
RÉFÉRENCEMENT
&
Slide 36
Slide 36 text
SEO : Les experts, c’est vous !
Soyez en discussion permanente avec
les designers & développeurs
Crédit photo : Ross Mayfield
Slide 37
Slide 37 text
Google aime le
Responsive Web Design
Slide 38
Slide 38 text
Responsive Design is Google’s
recommended design pattern.
«
»
Slide 39
Slide 39 text
POURQUOI GOOGLE AIME-T-IL LE
RESPONSIVE WEB DESIGN ?
Slide 40
Slide 40 text
Une seule URL pour chaque contenu
Slide 41
Slide 41 text
Un seul code source identique
pour toutes les situations
Slide 42
Slide 42 text
Cela réduit les erreurs de navigation
Crédit photo : Tadson Bussey
Slide 43
Slide 43 text
Les stratégies content first ou mobile first
mettent en avant votre contenu
(et donc sa qualité ou pas ;) )
Slide 44
Slide 44 text
ENFIN, UN PETIT COUP D’ŒIL
À L’ACTUALITÉ
Slide 45
Slide 45 text
Accelerated Mobile Pages :
une fausse bonne idée ?
Slide 46
Slide 46 text
MERCI DE VOTRE ATTENTION :)
Damien Senger
@iamhiwelo
hi@hiwelo.co
Si vous avez aimé ce e conférence,
je vous invite à suivre mon nouveau projet via Twi er :
@WeAreRaccoon