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

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

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

QUELQUES RAPPELS

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

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

Le Responsive Web Design 
 n’est pas la solution unique

UNE RÉALITÉ PLUSIEURS STRATÉGIES

• • •

STRATÉGIE RESPONSIVE RETRO-FITTING

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

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

STRATÉGIE MOBILE FIRST

Le contenu est accessible
quelque soit la plateforme

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

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

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

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

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

On met en ligne un site mobile-first HTML en parallèle du site desktop existant Crédit photo : Alan English CPA

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

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

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

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

Prioriser ses contenus 
 pour prioriser l’affichage

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

Quelle place pour les experts SEO
dans ces projets ?

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

RÉINVENTONS
LES MODÈLES

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

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

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

LA PUBLICITÉ EN LIGNE : TOUT CASSER POUR RECOMMENCER

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

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

Adaptez vos choix publicitaires aux contraintes de vos utilisateurs

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

&

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

Google aime le 
 Responsive Web Design

Responsive Design is Google’s 
 recommended design pattern.

«  » 

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

Une seule URL pour chaque contenu

Un seul code source identique pour toutes les situations

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

Les stratégies content first ou mobile first

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

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

Accelerated Mobile Pages : une fausse bonne idée ?

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