Slide 1

Slide 1 text

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 [email protected] Si vous avez aimé ce e conférence, je vous invite à suivre mon nouveau projet via Twi er : @WeAreRaccoon