Responsive Web Design : oui mais pas n'importe comment !

A presentation at SEO Campus in April 2016 in Paris, France by Damien Senger

Slide 1

Slide 1

RESPONSIVE WEB DESIGN : OUI, MAIS PAS N’IMPORTE COMMENT ! Damien Senger ·
@ iamhiwelo · SEO Camp’us 2016 ·
Paris

Slide 2

Slide 2

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

QUELQUES RAPPELS

Slide 4

Slide 4

La « situation de mobilité » : cela ne veut plus rien dire…

Slide 5

Slide 5

L’internet mobile a dépassé en usage 
 l’internet desktop

Slide 6

Slide 6

Le Responsive Web Design 
 n’est pas la solution unique

Slide 7

Slide 7

UNE RÉALITÉ PLUSIEURS STRATÉGIES

• • •

Slide 8

Slide 8

STRATÉGIE RESPONSIVE RETRO-FITTING

Slide 9

Slide 9

On prend l’existant et on l’adapte
pour le faire entrer dans le format mobile Crédit photo : zoetnet

Slide 10

Slide 10

Le contenu n’est pas adapté au mobile… gros soucis de performance à l’horizon ! Crédit photo : Chris Keating

Slide 11

Slide 11

STRATÉGIE MOBILE FIRST

Slide 12

Slide 12

Le contenu est accessible
quelque soit la plateforme

Slide 13

Slide 13

Impose une réflexion globale 
 sur les contenus attendus et pertinents

Slide 14

Slide 14

Création d’une interface efficace adaptée aux contraintes du mobile

Slide 15

Slide 15

Au cœur du Mobile First : l’amélioration progressive Crédit photo : HannahLeePhotography

Slide 16

Slide 16

Crédit photo : Marcus Lyra STRATÉGIE RESPONSIVE M-DOT SITE

Slide 17

Slide 17

Un choix intéressant pour faciliter l’expérimentation et limiter la prise de risque Crédit photo : Paul

Slide 18

Slide 18

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

Petit à petit, on développe les breakpoints du site mobile vers les écrans les plus larges Crédit photo : podluzny

Slide 20

Slide 20

Être prestataire dans ce type de projet : flexibilité, itération & vision long terme Crédit photo : Davy Landman

Slide 21

Slide 21

Budgétisation de ces projets : éviter que le projet cesse en cours de route

Slide 22

Slide 22

UNE STRATÉGIE MOBILE : CELA NE S’IMPROVISE PAS ! Crédit photo : David Kasparek

Slide 23

Slide 23

Prioriser ses contenus 
 pour prioriser l’affichage

Slide 24

Slide 24

Réfléchir ses breakpoints 
 en fonction du contenu Crédit photo : Luc Legay

Slide 25

Slide 25

Quelle place pour les experts SEO
dans ces projets ?

Slide 26

Slide 26

Définir des objectifs de performance pour trancher en cas de conflit : design / développement / SEO

Slide 27

Slide 27

RÉINVENTONS
LES MODÈLES

Slide 28

Slide 28

Gestion de projet : la fin du modèle en cascade

Slide 29

Slide 29

Au cœur du Responsive Web Design : la flexibilité et l’itération Crédit photo : timlewisnm

Slide 30

Slide 30

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

LA PUBLICITÉ EN LIGNE : TOUT CASSER POUR RECOMMENCER

Slide 32

Slide 32

Bannière, contenus, etc. : réfléchir cross-platform

Slide 33

Slide 33

La publicité ne doit pas entraver 
 l’accès aux contenus, surtout sur mobile

Slide 34

Slide 34

Adaptez vos choix publicitaires aux contraintes de vos utilisateurs

Slide 35

Slide 35

Crédit photo : Trevor Devine RESPONSIVE RÉFÉRENCEMENT

&

Slide 36

Slide 36

SEO : Les experts, c’est vous ! Soyez en discussion permanente avec 
 les designers & développeurs Crédit photo : Ross Mayfield

Slide 37

Slide 37

Google aime le 
 Responsive Web Design

Slide 38

Slide 38

Responsive Design is Google’s 
 recommended design pattern.

«  » 

Slide 39

Slide 39

POURQUOI GOOGLE AIME-T-IL LE RESPONSIVE WEB DESIGN ?

Slide 40

Slide 40

Une seule URL pour chaque contenu

Slide 41

Slide 41

Un seul code source identique pour toutes les situations

Slide 42

Slide 42

Cela réduit les erreurs de navigation Crédit photo : Tadson Bussey

Slide 43

Slide 43

Les stratégies content first ou mobile first

mettent en avant votre contenu (et donc sa qualité ou pas ;) )

Slide 44

Slide 44

ENFIN, UN PETIT COUP D’ŒIL À L’ACTUALITÉ

Slide 45

Slide 45

Accelerated Mobile Pages : une fausse bonne idée ?

Slide 46

Slide 46

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