SlideShare une entreprise Scribd logo
1  sur  49
RESPONSIVE
WEB DESIGN
7 rue de Bucarest 75008 Paris - +33 1 73 00 28 00 – contact@backelite.com - www.backelite.com
2

Agence leader pour un monde tactile

2
SPÉCIFICITÉS
DU RWD
BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013

3
DÉFINITION
Présenter un site unique à des navigateurs web utilisés sur n’importe quel type
de terminal : PC, tablette, mobile voire d’autres.
Une adaptation de la mise en page et des éléments optimale suivant l’espace
d’affichage du navigateur.
Un seul contenu pour tous les terminaux, une seule arborescence de pages.
Penser résolution de mise en page plutôt que terminal.
Cette adaptation est faite sur le terminal client par du code CSS et JavaScript.

BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013

4
STARBUCKS.COM

BACKELITE - RESPONSIVE WEB DESIGN - 12 DÉCEMBRE 2013

Outil de simulation RWD : ami.responsivedesign.is

5
UN COUP D’ŒIL AUX TERMINAUX : SMARTPHONES
Les smartphones phares d’hier :
Ecrans de moins de 4 pouces
Résolutions d’écran autour de 320px

Résolution utilisée pour la mise en page (CSS pixels) : de
320px à 384px

Et ceux d’aujourd’hui :
Ecrans de 4 à 6,3 pouces
Résolutions d’écran de 720px à 1080px
Résolution utilisée pour la mise en page (CSS pixels) : de
320px à 384px
Densité de pixels supérieure, permettant l’utilisation
d’images « retina »
Les tailles et les résolutions d’écrans plus importantes des terminaux récents ne
nécessitent pas de traitement particulier pour la mise en page du site, seulement
pour les images. Mais les variations, même légères, exigent une mise en page fluide.
BACKELITE - RESPONSIVE WEB DESIGN - 12 DÉCEMBRE 2013

6
POINTS DE BASCULE
CSS3 Media Queries
= Breakpoints
= Point de rupture
= Point de bascule

Exemple :

Le RWD consiste à prévoir différentes mises en page : celles-ci sont activées suivant
l’espace disponible. Les navigateurs s’insèrent dans une des zones définies par les
points de bascule qui utilisent la fonctionnalité CSS3 Media Queries.
Les points de bascule majeurs signifient des changements de mise en page
conséquents, les mineurs sont utilisés pour des ajustements.
BACKELITE - RESPONSIVE WEB DESIGN - 12 DÉCEMBRE 2013

Source : infographie Splio, 2012

7
POINTS DE BASCULE
CSS3 Media Queries
= Breakpoints
= Point de rupture
= Point de bascule

Exemple :

On ne gère généralement pas les
résolutions inférieures à 320px
(largeur d’un iPhone).
BACKELITE - RESPONSIVE WEB DESIGN - 12 DÉCEMBRE 2013

En général, le site web
ne se redimensionne
plus de façon fluide à
partir d’une certaine
résolution : on centre
ensuite le contenu.

On remarque que la zone autour du point de rupture
situé à 768px peut gérer les smartphones en mode
paysage et les tablettes en mode portrait
=> On ne pas se baser sur la résolution pour identifier le
type de terminal
Source : infographie Splio, 2012

8
L’ENJEU D’UN SITE RESPONSIVE
Concevoir une expérience optimale
pour l’environnement cible (terminaux, OS, navigateurs et résolutions)
qui s’adaptera au mieux dans les autres cas
qui s’adaptera au mieux sur les terminaux de demain

Autres points contribuant au contexte
le contexte d’utilisation (posture)
performance (vitesse/type de connexion, terminal)
le mode d’interaction (souris, clavier, tactile, télécommande…)

BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013

9
RESPONSIVE WEB DESIGN
LA COMPATIBILITÉ

IE6
IE7
Exclus du RWD
< 0,5%
0,7%

IE8
RWD dégradé
9,6%

IE9+

5+
3.6+
RWD-ready

Sur mobile, les plateformes supportées commencent à Android 2.3, Windows
Phone 7.5 et BlackBerry 7.

La compatibilité cible est donc un facteur déterminant
pour l’évaluation de la pertinence d’un projet RWD.
BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013

Source : chiffres monde nov ‘13, Statcounter

10
PERFORMANCE
Performance effective (temps de chargement total de la page et de ses
ressources)

Performance ressentie (laps de temps écoulé jusqu’à l’affichage de la
première partie de la page, plus important que la performance effective
pour capter l’attention de l’utilisateur)

Intégration avec infrastructure existante : cache, CDN…

Source : Etude Akamai menée sur
500 sites Responsive mi-2013
BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013

11
AUTRES APPROCHES
Approche adaptive, Responsive Server-Side (RESS)
Côté serveur
Gain de performance
Adaptations plus profondes
Détection du User-Agent
Rarement utilisé pour un site unique visant tous les types de terminaux
Adaptations mineures possibles côté client

BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013

12
SITE UNIQUE VS MULTI-SITES
RWD et le RESS sont applicables à n’importe quel
type de site
La stratégie de contenu doit être le critère de choix

Les coûts de développement et de maintenance
sont également à prendre en compte

BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013

13
ANTICIPER L’IMPACT D’UNE MIGRATION
VERS LE RESPONSIVE
Analyse de l’audience et des statistiques du site existant
-

Impact potentiel de la compatibilité non-universelle du Responsive (encore plus suivant le
type de site : e-commerce, institutionnel, etc.)
Peut donner des indications ou des priorités sur la cible principale

Compatibilité de l’éco-système
-

Quel back-office ?
Quelle régie de pub ?
Quel prestataire de paiement ?
Evaluation de la compatibilité de chaque tiers avec une approche Responsive

Adapter tôt sa solution d’analytics au RWD ou en changer
-

Fonctionnalité de regroupement par résolution ou par user-agent
Être capable d’évaluer les évolutions de chaque canal séparément pour comparer
aux dispositifs historiques

BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013

14
QUELQUES EXEMPLES CONCRETS

E-commerce : O’neill clothing (http://www.oneillclothing.com)
Redesign Responsive simple sur une base
Magento, aucune indication d’un site mobile existant.
Chiffre d’Affaires
Taux de transformation
iPhone : + 101,2%
iPhone : + 65,7%
Android : + 591,4%
Android : + 407,3%
Desktop + tablettes : + 41,1%
Desktop + tablettes : + 20,3%

Media : Time Inc. (http://www.time.com)
Site web mobile existant mais peu optimisé
Trafic tablette + smartphone : de 15 à 25% du trafic global
Nombre moyen de pages visitées sur mobile : + 23%
Bounce rate mobile : - 26%
Visiteurs uniques : + 15%
Temps passé sur une page : + 7,5%
BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013

15
CONTENT FIRST
BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013

16
LE RISQUE DE LA REFONTE
Copier-coller de l’existant…
Trop de texte
Trop d’images
Trop de fonctionnalités par page

…non adapté au mobile. Difficultés de :
Performance
Hiérarchisation
Repérage et navigation
Affichage des contenus (images)
Manipulation (saisie de formulaires)

BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013

17
COMMENT STRUCTURER LE CONTENU
Adopter une approche mobile-first

Hiérarchiser
Ne garder que l’essentiel
Découper / structurer le contenu
Limiter le nombre de fonctionnalités sur une même page

Adapter
L’accès à certaines fonctionnalités
L’affichage de certains contenus
La taille et le positionnement des éléments
Ne pas supprimer de contenu : le mobile ignore certains éléments (par ex les images de
fond)

BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013

18
ETAPES CLÉS
BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013

19
LE PROCESSUS ITÉRATIF IDÉAL PAR GABARIT
Gabarit 1
Validation
Stabilisation
Cadrage

Structure de
l’information

Conception
Wireframes

Prototypage

Validation
pour dév

Maquettes
graphiques

Intégration
Développement

Gabarit 2

Conception
Wireframes

BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013

Prototypage

20
LE BINÔME INTÉGRATEUR-GRAPHISTE
Dialoguer
Echanger avec l’intégrateur en phase de conception
Travailler avec l’intégrateur au fur et à mesure du montage pour affiner le
design si besoin

Tester très tôt
Tester le plus tôt et le plus souvent possible les maquettes intégrées sur
des terminaux et navigateurs représentatifs

S’adapter
Améliorer la méthode de conception au fil de l’eau
Capitaliser sur le montage des premiers gabarits finalisés pour décliner
ensuite (factorisation, réutilisation des composants)

BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013

21
D’UN FRAMEWORK RWD
À PHOTOSHOP
(ET VICE VERSA)
BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013

22
FRAMEWORKS
Zurb Foundation 5

Twitter Bootstrap 3

Oui (depuis v4)

Oui (depuis v3)

Fluide, 12 colonnes

Fluide, 12 colonnes

2

4

4 (en em)

3 (en px)

Composants/Widgets

Oui

Oui

Modulaire

Oui

Oui

Support d’IE8

Non

Oui

Framework CSS

SASS

LESS

Responsive images

Oui

Non

Mobile-first
Grille

Nb de modes de grille
Points de bascule par défaut

Approche « no framework »
Une combinaison de développements spécifiques et de composants spécialisés
Une « stack » spécifique et adaptée à un projet
Potentiellement plus difficile à mettre en place et à maintenir
BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013

23
WOPE

Une solution de développement pour
construire des sites web et mobiles universels
•

•
•

Une expérience utilisateur applicative grâce à
l’utilisation de JS/CSS3/HTML5
Une adaptation automatique pour tous les
mobiles et les tablettes
Outils de Responsive Web Design (février
2014) pour cibler également le desktop

Améliorez les performances de votre
site
•
•
•

Technologie unique côté serveur
Optimisation du code et retaillage des
images
Utilisation du cache

Et réduire les coûts
•
BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013

•

Utiliser vos équipes actuelles et votre savoir
faire
24
Gagnez du temps sur la partie test
WOPE 6

Gère désormais n’importe quel type de HTML
Une bibliothèque de widgets graphiques compatible PC
Un framework Responsive utilisant la grille fluide de
Twitter Bootstrap 3 customisée pour un meilleur rendu
sur desktop
Un outil automatisé d’optimisation des performances
d’un site Responsive : ressources, images
BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013

25
COMMENT APPRÉHENDER
DANS PHOTOSHOP…
Une structure HTML commune à différentes mises en page
Une grille générale de 12 colonnes
Une imbrication de composants structurés en 12 colonnes

Des mises en page flexibles
L’approche RWD et le choix d’un framework (Foundation 4 pour le cas pratique
galerieslafayette.com) oblige le graphiste à appréhender ces différents points
lors de la conception.

BACKELITE - RESPONSIVE WEB DESIGN - 12 DÉCEMBRE 2013

26
CAS PRATIQUE…
Le site Responsive Web Design des Galeries Lafayette
Ou… Tout ce que le graphiste doit garder en tête lors de la conception

BACKELITE - RESPONSIVE WEB DESIGN - 12 DÉCEMBRE 2013

27
UNE GRILLE DE 12 COLONNES

La grille est structurée en 12 colonnes, quelque soit la largeur de la page.
Construire la mise en page de chaque point de bascule en anticipant la fluidité de la mise
en page entre ces points.

> 1000 px

BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013

768 px – 1000 px

< 767 px

28
UNITÉ DE MESURE
= 1 COLONNE
Le graphiste doit prendre en compte
la colonne comme unité de
mesure dont la largeur varie en
fonction de la résolution
d’affichage. Adieu le
raisonnement en pixel.
On parle donc en nombre d’unités /
colonnes pour donner des
indications de mesure et de
placement dans X unités.
On garde le pixel lorsque l’on veut
une dimension très précise, en
particulier pour les padding

BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013

4 colonnes
Largeur 100%

4 colonnes
Aligné à gauche
4 colonnes
Aligné à droite

3 colonnes
Centré

3 colonnes
Centré

3 colonnes
Centré

3 colonnes
Centré

29
UNITÉ DE MESURE
= 1 COLONNE

Chaque composant est structuré en 12 colonnes.
Dans Photoshop, transformer chaque composant
structurant en objet dynamique pour le travailler de façon
indépendante et le diviser en 12 colonnes peut s’avérer
très utile.
Le plug-in GuideGuide est essentiel pour diviser facilement
chaque objet dynamique en 12 colonnes.

30
RESPECTER LE FLUX HTML
1

2

3

1
2

4

5

3

4
5

6

6
7

8

9

7
8

10

9
10

L’ordre des contenus doit être respecté sur les différentes mises en page.
Si l’on change le positionnement d’un élément sur mobile, cela aura un impact sur le
desktop et sur tablette, et vice versa.
BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013

31
FACTORISATION

desktop

mobile

Créer des bibliothèques de
composants pour garder une
cohérence dans la charte et
illustrer les adaptations
nécessaires de certains éléments
en passant d’une résolution à une
autre.

Ces bibliothèques peuvent être
classées par thème
(navigation, boutons, images, icôn
es…)

BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013

32
MISES EN PAGE FLEXIBLES :
ADAPTER LES POSITIONNEMENTS

BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013

33
MISES EN PAGE FLEXIBLES :
ADAPTER LES FORMES DES COMPOSANTS

Sur desktop

BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013

Sur mobile

34
MISES EN PAGE FLEXIBLES :
ADAPTER LES DIMENSIONS
Pour un terminal tactile, il est
nécessaire de prévoir des liens et
des boutons plus accessibles (plus
gros, plus espacés)
Une solution est de créer des boutons
plus gros pour les tablettes et le
mobile.
Il s’agit alors de trouver un juste
milieu entre des éléments qui ne
sembleront pas « grossiers » (car
grossis) sur desktop tout en
restant lisible et accessible sur
support tactile.
Surface moyenne
accessible au doigt
40 px
BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013

35
GESTION DES IMAGES
Les images concentrent toutes les problématiques liées au
RWD…
Résolution d’affichage et qualité
Lisibilité : sujet, texte intégré dans l’image
Direction artistique : recadrage, cropping
Balise img HTML mal adaptée, utiliser PictureFill
Problématique de SEO : la technique d’image Responsive doit rester performante
pour le référencement

La chaîne de production des images doit être revue dans
son intégralité
Format de l’image
Compressions et qualités optimisées
Dissociation du texte de l’image et affichage en CSS

BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013

36
LA RECETTE D’UN GABARIT
Valoriser la recette
Pendant et en fin de projet

Sur les plans créatifs et techniques
Par navigateur : les bugs sont souvent liés à la plateforme et la version d’OS
La plupart des utilisateurs utilisent le navigateur par défaut de leur terminal

Un environnement de recette adéquat
« War room » : réunions de recette et de correction immédiate par le binôme
développeur-graphiste
Laboratoire de test (collection de vrais terminaux mobiles pour tester les
comportements et anomalies propres à des terminaux spéciaux)
Délégation de l’exécution des tests (cellule de tests)

BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013

37
SEO
ET ANALYTICS
BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013

38
SEARCH ENGINE OPTIMIZATION (SEO)
« Google recommends webmasters follow the
industry best practice of using responsive web
design, namely serving the same HTML for all
devices. »
Google Webmaster Central blog, juin 2013

BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013

39
MESURE D’AUDIENCE ET STATISTIQUES (ANALYTICS)

BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013

40
MESURE D’AUDIENCE ET STATISTIQUES (ANALYTICS)

Google Nexus 4

iPhone 5

Google Galaxy Nexus
Sony Xperia Z
Samsung Galaxy SIII/SIV
iPhone 3/4

iPad

Données d’exemple

BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013

41
CONCLUSION
Privilégier une approche UX
Cadrage en amont
Réflexion sur les contenus et les utilisateurs
Approche pluridisciplinaire, travail collaboratif
Recette soignée

Le RWD perpétue la promesse d’universalité du
Web

BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013

42
Le meilleur de la mode adapté à tous les types d’écrans
http://www.galerieslafayette.com
BACKELITE

043
LE MEILLEUR DE LA MODE
ADAPTÉ À TOUS LES TYPES
D’ÉCRANS
Le groupe Galeries Lafayette est un acteur majeur du
commerce en France opérant dans les secteurs de la
mode, du luxe et de la beauté, de l’horlogerie
bijouterie, du loisir et de la maison, et de
l’alimentation.

BACKELITE

044
OBJECTIFS
CLÉS
• Refonte du site e-commerce
en Responsive Web Design pour une expérience
utilisateur homogène sur tous les écrans
• Renforcer l’image de modernité
des Galeries Lafayette
• Booster les ventes sur le canal digital

BACKELITE

LA RÉPONSE
DE BACKELITE
 Méthodologie UX, conception et réalisation de
gabarits clés
 Accompagnement dans la durée une fois le site
mis en ligne, et transfert de compétences
 Planning réactif
 Approche tarifaire optimisée
045
PRINCIPAUX
ENJEUX DU SITE
•
•
•
•
•

Accès rapide à l’ensemble du catalogue produit sur
tous les écrans
Consultation de fiches produit
Commande
Gestion cross-canal du panier
Accès au compte client

BACKELITE

046
RÉSULTATS

CA x3 sur tablette,
CA x4 sur mobile,
Taux de conversion en augmentation sur
desktop, et encore plus sur tablette et mobile

L’accompagnement de Backelite a tenu ses promesses, les
équipes ont tenu leurs engagements, voire un peu plus !
Thierry Leforestier, direction internet & e-commerce
Galeries Lafayette
NOS PLUS BELLES RÉFÉRENCES
Contactez nous
Backelite
7 rue de Bucarest 75008 Paris
Tél : 01 73 00 28 00
contact@backelite.com

Contenu connexe

Tendances

Responsive design, site mobile, Applications : comment faire le bon choix
Responsive design, site mobile, Applications : comment faire le bon choix Responsive design, site mobile, Applications : comment faire le bon choix
Responsive design, site mobile, Applications : comment faire le bon choix Pierre Priot
 
Introduction aux principes du Responsive Web Design
 Introduction aux principes du Responsive Web Design Introduction aux principes du Responsive Web Design
Introduction aux principes du Responsive Web DesignStrasWeb
 
Le responsive design : adapter ses contenus aux formats mobiles
Le responsive design : adapter ses contenus aux formats mobilesLe responsive design : adapter ses contenus aux formats mobiles
Le responsive design : adapter ses contenus aux formats mobilesBig5media
 
L'évolution du web-design
L'évolution du web-designL'évolution du web-design
L'évolution du web-designOlivier Soros
 
Mobile et Flashcode : Effet de mode ou moyens stratégiques ? | acti
Mobile et Flashcode : Effet de mode ou moyens stratégiques ? | actiMobile et Flashcode : Effet de mode ou moyens stratégiques ? | acti
Mobile et Flashcode : Effet de mode ou moyens stratégiques ? | actiacti
 
Les 10 Tendances Webdesign de 2014 by Vanksen
Les 10 Tendances Webdesign de 2014 by VanksenLes 10 Tendances Webdesign de 2014 by Vanksen
Les 10 Tendances Webdesign de 2014 by VanksenVanksen
 
Site Internet, les tendances en 2014
Site Internet, les tendances en 2014Site Internet, les tendances en 2014
Site Internet, les tendances en 2014Vincent Pereira
 
Webdesign sites web et mobiles-tendances 2015
Webdesign sites web et mobiles-tendances 2015Webdesign sites web et mobiles-tendances 2015
Webdesign sites web et mobiles-tendances 2015Olivier Dommange
 
Les tendances des site web en 2015
Les tendances des site web en 2015Les tendances des site web en 2015
Les tendances des site web en 2015Vincent Pereira
 
MobiliTeaTime #14 : L'Atomic Design
MobiliTeaTime #14 : L'Atomic DesignMobiliTeaTime #14 : L'Atomic Design
MobiliTeaTime #14 : L'Atomic DesignUSERADGENTS
 
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...SOAT
 
Responsive web design, enjeux et stratégies
Responsive web design, enjeux et stratégiesResponsive web design, enjeux et stratégies
Responsive web design, enjeux et stratégiesMehdi Kabab
 
Présentation Métier / Responsable Webdesign
Présentation Métier / Responsable WebdesignPrésentation Métier / Responsable Webdesign
Présentation Métier / Responsable Webdesigntakaclike
 
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - SoatA la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - SoatSOAT
 
Web responsive & E-Commerce : un seul site pour tous les devices ? (version bis)
Web responsive & E-Commerce : un seul site pour tous les devices ? (version bis)Web responsive & E-Commerce : un seul site pour tous les devices ? (version bis)
Web responsive & E-Commerce : un seul site pour tous les devices ? (version bis)altima°
 
MobiliteaTime #4 : Guide Pratique Apple TV
MobiliteaTime #4 : Guide Pratique Apple TVMobiliteaTime #4 : Guide Pratique Apple TV
MobiliteaTime #4 : Guide Pratique Apple TVUSERADGENTS
 

Tendances (20)

Responsive design, site mobile, Applications : comment faire le bon choix
Responsive design, site mobile, Applications : comment faire le bon choix Responsive design, site mobile, Applications : comment faire le bon choix
Responsive design, site mobile, Applications : comment faire le bon choix
 
Introduction aux principes du Responsive Web Design
 Introduction aux principes du Responsive Web Design Introduction aux principes du Responsive Web Design
Introduction aux principes du Responsive Web Design
 
Le responsive design : adapter ses contenus aux formats mobiles
Le responsive design : adapter ses contenus aux formats mobilesLe responsive design : adapter ses contenus aux formats mobiles
Le responsive design : adapter ses contenus aux formats mobiles
 
L'évolution du web-design
L'évolution du web-designL'évolution du web-design
L'évolution du web-design
 
Mobile et Flashcode : Effet de mode ou moyens stratégiques ? | acti
Mobile et Flashcode : Effet de mode ou moyens stratégiques ? | actiMobile et Flashcode : Effet de mode ou moyens stratégiques ? | acti
Mobile et Flashcode : Effet de mode ou moyens stratégiques ? | acti
 
Les 10 Tendances Webdesign de 2014 by Vanksen
Les 10 Tendances Webdesign de 2014 by VanksenLes 10 Tendances Webdesign de 2014 by Vanksen
Les 10 Tendances Webdesign de 2014 by Vanksen
 
Site Internet, les tendances en 2014
Site Internet, les tendances en 2014Site Internet, les tendances en 2014
Site Internet, les tendances en 2014
 
Webdesign sites web et mobiles-tendances 2015
Webdesign sites web et mobiles-tendances 2015Webdesign sites web et mobiles-tendances 2015
Webdesign sites web et mobiles-tendances 2015
 
molka foods
molka foodsmolka foods
molka foods
 
Les tendances des site web en 2015
Les tendances des site web en 2015Les tendances des site web en 2015
Les tendances des site web en 2015
 
MobiliTeaTime #14 : L'Atomic Design
MobiliTeaTime #14 : L'Atomic DesignMobiliTeaTime #14 : L'Atomic Design
MobiliTeaTime #14 : L'Atomic Design
 
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
 
Responsive web design, enjeux et stratégies
Responsive web design, enjeux et stratégiesResponsive web design, enjeux et stratégies
Responsive web design, enjeux et stratégies
 
Présentation Métier / Responsable Webdesign
Présentation Métier / Responsable WebdesignPrésentation Métier / Responsable Webdesign
Présentation Métier / Responsable Webdesign
 
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - SoatA la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
 
Web responsive & E-Commerce : un seul site pour tous les devices ? (version bis)
Web responsive & E-Commerce : un seul site pour tous les devices ? (version bis)Web responsive & E-Commerce : un seul site pour tous les devices ? (version bis)
Web responsive & E-Commerce : un seul site pour tous les devices ? (version bis)
 
Tendances Web Design 2017/2018
Tendances Web Design 2017/2018Tendances Web Design 2017/2018
Tendances Web Design 2017/2018
 
Les jeudis de la découverte
Les jeudis de la découverteLes jeudis de la découverte
Les jeudis de la découverte
 
MobiliteaTime #4 : Guide Pratique Apple TV
MobiliteaTime #4 : Guide Pratique Apple TVMobiliteaTime #4 : Guide Pratique Apple TV
MobiliteaTime #4 : Guide Pratique Apple TV
 
Histoire du webdesign
Histoire du webdesignHistoire du webdesign
Histoire du webdesign
 

En vedette

L'Apple Watch crée l'événement et bouscule le marché des smartwatches
L'Apple Watch crée l'événement et bouscule le marché des smartwatches  L'Apple Watch crée l'événement et bouscule le marché des smartwatches
L'Apple Watch crée l'événement et bouscule le marché des smartwatches Idean France
 
Séminaire gratuit : OBM 2.4 - nouveautés, intégration et cloud !
Séminaire gratuit : OBM 2.4 - nouveautés, intégration et cloud !Séminaire gratuit : OBM 2.4 - nouveautés, intégration et cloud !
Séminaire gratuit : OBM 2.4 - nouveautés, intégration et cloud !LINAGORA
 
Standards de gestion d'agenda et de planification
Standards de gestion d'agenda et de planificationStandards de gestion d'agenda et de planification
Standards de gestion d'agenda et de planificationLINAGORA
 
Présentation de la nouvelle version de Mozilla Thunderbird
Présentation de la nouvelle version de Mozilla ThunderbirdPrésentation de la nouvelle version de Mozilla Thunderbird
Présentation de la nouvelle version de Mozilla ThunderbirdLINAGORA
 
Séminaire Linagora : poste de travail Libre, décembre 2009
Séminaire Linagora : poste de travail Libre, décembre 2009Séminaire Linagora : poste de travail Libre, décembre 2009
Séminaire Linagora : poste de travail Libre, décembre 2009LINAGORA
 
Séminaire janvier 2011 - Le poste de travail libre : projets, réussites et pe...
Séminaire janvier 2011 - Le poste de travail libre : projets, réussites et pe...Séminaire janvier 2011 - Le poste de travail libre : projets, réussites et pe...
Séminaire janvier 2011 - Le poste de travail libre : projets, réussites et pe...LINAGORA
 
Séminaire juin 2011 - OBM
Séminaire juin 2011 - OBMSéminaire juin 2011 - OBM
Séminaire juin 2011 - OBMLINAGORA
 
Présentation du marché P2I UGAP « Support sur Logiciels Libres »
Présentation du marché P2I UGAP « Support sur Logiciels Libres »Présentation du marché P2I UGAP « Support sur Logiciels Libres »
Présentation du marché P2I UGAP « Support sur Logiciels Libres »LINAGORA
 
Séminaire février - OBM, nouvelle version 2.4
Séminaire février - OBM, nouvelle version 2.4 Séminaire février - OBM, nouvelle version 2.4
Séminaire février - OBM, nouvelle version 2.4 LINAGORA
 
LinSHARE : Serveur de partage sécurisé
LinSHARE : Serveur de partage sécuriséLinSHARE : Serveur de partage sécurisé
LinSHARE : Serveur de partage sécuriséLINAGORA
 
Livre-blanc-Cryptolog-contractualisation-en-ligne
Livre-blanc-Cryptolog-contractualisation-en-ligneLivre-blanc-Cryptolog-contractualisation-en-ligne
Livre-blanc-Cryptolog-contractualisation-en-ligneGautier Harmel
 
Industrialisez le développement et la maintenance de vos sites avec Drupal
Industrialisez le développement et la maintenance de vos sites avec DrupalIndustrialisez le développement et la maintenance de vos sites avec Drupal
Industrialisez le développement et la maintenance de vos sites avec DrupalLINAGORA
 
Seminaire 2010 : Réussir les nouveaux projets web innovants avec Drupal
Seminaire 2010 : Réussir les nouveaux projets web innovants avec DrupalSeminaire 2010 : Réussir les nouveaux projets web innovants avec Drupal
Seminaire 2010 : Réussir les nouveaux projets web innovants avec DrupalLINAGORA
 
La dématérialisation du conseil minicipal
La dématérialisation du conseil minicipalLa dématérialisation du conseil minicipal
La dématérialisation du conseil minicipalLINAGORA
 
Signature electronique CertSign
Signature electronique CertSignSignature electronique CertSign
Signature electronique CertSigncerteurope
 
Plates formes CLOM - importance des normes ouvertes et du logiciel libre
Plates formes CLOM - importance des normes ouvertes et du logiciel librePlates formes CLOM - importance des normes ouvertes et du logiciel libre
Plates formes CLOM - importance des normes ouvertes et du logiciel libreClaude Coulombe
 
Présentation Schéma Directeur Open Source au S2LQ 2015
Présentation Schéma Directeur Open Source au S2LQ 2015Présentation Schéma Directeur Open Source au S2LQ 2015
Présentation Schéma Directeur Open Source au S2LQ 2015Michel-Marie Maudet
 
De nouvelles plateformes technologiques pour les CLOM
De nouvelles plateformes technologiques pour les CLOMDe nouvelles plateformes technologiques pour les CLOM
De nouvelles plateformes technologiques pour les CLOMClaude Coulombe
 
Offre de demat d'Adullact projet
Offre de demat d'Adullact projet Offre de demat d'Adullact projet
Offre de demat d'Adullact projet LINAGORA
 

En vedette (20)

L'Apple Watch crée l'événement et bouscule le marché des smartwatches
L'Apple Watch crée l'événement et bouscule le marché des smartwatches  L'Apple Watch crée l'événement et bouscule le marché des smartwatches
L'Apple Watch crée l'événement et bouscule le marché des smartwatches
 
Séminaire gratuit : OBM 2.4 - nouveautés, intégration et cloud !
Séminaire gratuit : OBM 2.4 - nouveautés, intégration et cloud !Séminaire gratuit : OBM 2.4 - nouveautés, intégration et cloud !
Séminaire gratuit : OBM 2.4 - nouveautés, intégration et cloud !
 
Standards de gestion d'agenda et de planification
Standards de gestion d'agenda et de planificationStandards de gestion d'agenda et de planification
Standards de gestion d'agenda et de planification
 
Présentation de la nouvelle version de Mozilla Thunderbird
Présentation de la nouvelle version de Mozilla ThunderbirdPrésentation de la nouvelle version de Mozilla Thunderbird
Présentation de la nouvelle version de Mozilla Thunderbird
 
Séminaire Linagora : poste de travail Libre, décembre 2009
Séminaire Linagora : poste de travail Libre, décembre 2009Séminaire Linagora : poste de travail Libre, décembre 2009
Séminaire Linagora : poste de travail Libre, décembre 2009
 
Design d'Information
Design d'InformationDesign d'Information
Design d'Information
 
Séminaire janvier 2011 - Le poste de travail libre : projets, réussites et pe...
Séminaire janvier 2011 - Le poste de travail libre : projets, réussites et pe...Séminaire janvier 2011 - Le poste de travail libre : projets, réussites et pe...
Séminaire janvier 2011 - Le poste de travail libre : projets, réussites et pe...
 
Séminaire juin 2011 - OBM
Séminaire juin 2011 - OBMSéminaire juin 2011 - OBM
Séminaire juin 2011 - OBM
 
Présentation du marché P2I UGAP « Support sur Logiciels Libres »
Présentation du marché P2I UGAP « Support sur Logiciels Libres »Présentation du marché P2I UGAP « Support sur Logiciels Libres »
Présentation du marché P2I UGAP « Support sur Logiciels Libres »
 
Séminaire février - OBM, nouvelle version 2.4
Séminaire février - OBM, nouvelle version 2.4 Séminaire février - OBM, nouvelle version 2.4
Séminaire février - OBM, nouvelle version 2.4
 
LinSHARE : Serveur de partage sécurisé
LinSHARE : Serveur de partage sécuriséLinSHARE : Serveur de partage sécurisé
LinSHARE : Serveur de partage sécurisé
 
Livre-blanc-Cryptolog-contractualisation-en-ligne
Livre-blanc-Cryptolog-contractualisation-en-ligneLivre-blanc-Cryptolog-contractualisation-en-ligne
Livre-blanc-Cryptolog-contractualisation-en-ligne
 
Industrialisez le développement et la maintenance de vos sites avec Drupal
Industrialisez le développement et la maintenance de vos sites avec DrupalIndustrialisez le développement et la maintenance de vos sites avec Drupal
Industrialisez le développement et la maintenance de vos sites avec Drupal
 
Seminaire 2010 : Réussir les nouveaux projets web innovants avec Drupal
Seminaire 2010 : Réussir les nouveaux projets web innovants avec DrupalSeminaire 2010 : Réussir les nouveaux projets web innovants avec Drupal
Seminaire 2010 : Réussir les nouveaux projets web innovants avec Drupal
 
La dématérialisation du conseil minicipal
La dématérialisation du conseil minicipalLa dématérialisation du conseil minicipal
La dématérialisation du conseil minicipal
 
Signature electronique CertSign
Signature electronique CertSignSignature electronique CertSign
Signature electronique CertSign
 
Plates formes CLOM - importance des normes ouvertes et du logiciel libre
Plates formes CLOM - importance des normes ouvertes et du logiciel librePlates formes CLOM - importance des normes ouvertes et du logiciel libre
Plates formes CLOM - importance des normes ouvertes et du logiciel libre
 
Présentation Schéma Directeur Open Source au S2LQ 2015
Présentation Schéma Directeur Open Source au S2LQ 2015Présentation Schéma Directeur Open Source au S2LQ 2015
Présentation Schéma Directeur Open Source au S2LQ 2015
 
De nouvelles plateformes technologiques pour les CLOM
De nouvelles plateformes technologiques pour les CLOMDe nouvelles plateformes technologiques pour les CLOM
De nouvelles plateformes technologiques pour les CLOM
 
Offre de demat d'Adullact projet
Offre de demat d'Adullact projet Offre de demat d'Adullact projet
Offre de demat d'Adullact projet
 

Similaire à Responsive Web Design : best practices et retour d'expérience de Backelite et les Galeries Lafayette

Design adaptatif / Mobilité
Design adaptatif / MobilitéDesign adaptatif / Mobilité
Design adaptatif / MobilitéAndré Dubreuil
 
Bien Démarrer avec le Responsive Web Design
Bien Démarrer avec le Responsive Web DesignBien Démarrer avec le Responsive Web Design
Bien Démarrer avec le Responsive Web DesignGreg Hoin
 
DrupalCamp Paris 2013 : Sites mobiles avec Drupal
DrupalCamp Paris 2013 : Sites mobiles avec DrupalDrupalCamp Paris 2013 : Sites mobiles avec Drupal
DrupalCamp Paris 2013 : Sites mobiles avec DrupalActency
 
Performances Web Mobile
Performances Web MobilePerformances Web Mobile
Performances Web MobileWilly Leloutre
 
Mobile & Responsive Design: Rendez votre marque mobile
Mobile & Responsive Design: Rendez votre marque mobileMobile & Responsive Design: Rendez votre marque mobile
Mobile & Responsive Design: Rendez votre marque mobileWSI France
 
Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Julien LE THUAUT
 
Qu'est-ce que le Responsive Design.docx
Qu'est-ce que le Responsive Design.docxQu'est-ce que le Responsive Design.docx
Qu'est-ce que le Responsive Design.docxGeorges59
 
Les nouveaux challenges techniques pour le SEO
Les nouveaux challenges techniques pour le SEOLes nouveaux challenges techniques pour le SEO
Les nouveaux challenges techniques pour le SEOGroupe Neper
 
JavaScript Open Day - Migration Web To App
JavaScript Open Day - Migration Web To AppJavaScript Open Day - Migration Web To App
JavaScript Open Day - Migration Web To AppSébastien Ollivier
 
Cours de Web Design part.1
Cours de Web Design part.1Cours de Web Design part.1
Cours de Web Design part.1MC Casal
 
Réunion Club CML : Mobilité et Responsive design; définitions et enjeux
Réunion Club CML : Mobilité et Responsive design; définitions et enjeuxRéunion Club CML : Mobilité et Responsive design; définitions et enjeux
Réunion Club CML : Mobilité et Responsive design; définitions et enjeuxClub des Community Managers de Lyon
 
RWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben PieraertsRWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben PieraertsLa FeWeb
 
Responsive Web Design : back to basics
Responsive Web Design : back to basicsResponsive Web Design : back to basics
Responsive Web Design : back to basicsAlinoa
 
Webdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outilsWebdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outilsOlivier Dommange
 
Responsive WebDesign performant
Responsive WebDesign performantResponsive WebDesign performant
Responsive WebDesign performantRefficience
 
Nouvelles architectures de sites web et SEO
Nouvelles architectures de sites web et SEONouvelles architectures de sites web et SEO
Nouvelles architectures de sites web et SEOPhilippe YONNET
 

Similaire à Responsive Web Design : best practices et retour d'expérience de Backelite et les Galeries Lafayette (20)

Design adaptatif / Mobilité
Design adaptatif / MobilitéDesign adaptatif / Mobilité
Design adaptatif / Mobilité
 
Plasticité2015 technovf
Plasticité2015 technovfPlasticité2015 technovf
Plasticité2015 technovf
 
Bien Démarrer avec le Responsive Web Design
Bien Démarrer avec le Responsive Web DesignBien Démarrer avec le Responsive Web Design
Bien Démarrer avec le Responsive Web Design
 
DrupalCamp Paris 2013 : Sites mobiles avec Drupal
DrupalCamp Paris 2013 : Sites mobiles avec DrupalDrupalCamp Paris 2013 : Sites mobiles avec Drupal
DrupalCamp Paris 2013 : Sites mobiles avec Drupal
 
Performances Web Mobile
Performances Web MobilePerformances Web Mobile
Performances Web Mobile
 
Mobile & Responsive Design: Rendez votre marque mobile
Mobile & Responsive Design: Rendez votre marque mobileMobile & Responsive Design: Rendez votre marque mobile
Mobile & Responsive Design: Rendez votre marque mobile
 
Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013
 
Qu'est-ce que le Responsive Design.docx
Qu'est-ce que le Responsive Design.docxQu'est-ce que le Responsive Design.docx
Qu'est-ce que le Responsive Design.docx
 
Les nouveaux challenges techniques pour le SEO
Les nouveaux challenges techniques pour le SEOLes nouveaux challenges techniques pour le SEO
Les nouveaux challenges techniques pour le SEO
 
Drupal & Mobilité
Drupal & MobilitéDrupal & Mobilité
Drupal & Mobilité
 
JavaScript Open Day - Migration Web To App
JavaScript Open Day - Migration Web To AppJavaScript Open Day - Migration Web To App
JavaScript Open Day - Migration Web To App
 
Webdesign, UX et UCD #1
Webdesign, UX et UCD #1Webdesign, UX et UCD #1
Webdesign, UX et UCD #1
 
Cours de Web Design part.1
Cours de Web Design part.1Cours de Web Design part.1
Cours de Web Design part.1
 
Réunion Club CML : Mobilité et Responsive design; définitions et enjeux
Réunion Club CML : Mobilité et Responsive design; définitions et enjeuxRéunion Club CML : Mobilité et Responsive design; définitions et enjeux
Réunion Club CML : Mobilité et Responsive design; définitions et enjeux
 
Jquery Mobile vs Twitter Bootstrap
Jquery Mobile vs Twitter BootstrapJquery Mobile vs Twitter Bootstrap
Jquery Mobile vs Twitter Bootstrap
 
RWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben PieraertsRWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben Pieraerts
 
Responsive Web Design : back to basics
Responsive Web Design : back to basicsResponsive Web Design : back to basics
Responsive Web Design : back to basics
 
Webdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outilsWebdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outils
 
Responsive WebDesign performant
Responsive WebDesign performantResponsive WebDesign performant
Responsive WebDesign performant
 
Nouvelles architectures de sites web et SEO
Nouvelles architectures de sites web et SEONouvelles architectures de sites web et SEO
Nouvelles architectures de sites web et SEO
 

Plus de Idean France

Start with a Concept and Stop Designing like a Machine
Start with a Concept and Stop Designing like a MachineStart with a Concept and Stop Designing like a Machine
Start with a Concept and Stop Designing like a MachineIdean France
 
Design Systems : à votre marque, prêts, partez !
Design Systems : à votre marque, prêts, partez !Design Systems : à votre marque, prêts, partez !
Design Systems : à votre marque, prêts, partez !Idean France
 
Design systems : Bench et reco sur les outils
Design systems : Bench et reco sur les outilsDesign systems : Bench et reco sur les outils
Design systems : Bench et reco sur les outilsIdean France
 
La recette graphique
La recette graphiqueLa recette graphique
La recette graphiqueIdean France
 
Graph QL par Andy Gigon
Graph QL par Andy GigonGraph QL par Andy Gigon
Graph QL par Andy GigonIdean France
 
Cocoheads react native + redux par Nicolas Fontaine
Cocoheads   react native + redux par Nicolas FontaineCocoheads   react native + redux par Nicolas Fontaine
Cocoheads react native + redux par Nicolas FontaineIdean France
 
Meetup langages visuels - Backelite - novembre 2017
Meetup langages visuels - Backelite - novembre 2017Meetup langages visuels - Backelite - novembre 2017
Meetup langages visuels - Backelite - novembre 2017Idean France
 
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?Idean France
 
From Business to Buttons by Pierre Harlé
From Business to Buttons by Pierre HarléFrom Business to Buttons by Pierre Harlé
From Business to Buttons by Pierre HarléIdean France
 
RX Swift avril 2017 - David Yang
RX Swift avril 2017 - David YangRX Swift avril 2017 - David Yang
RX Swift avril 2017 - David YangIdean France
 
UI Design Trends for 2017
UI Design Trends for 2017UI Design Trends for 2017
UI Design Trends for 2017Idean France
 
Tendances du Design d'Interface 2017
Tendances du Design d'Interface 2017Tendances du Design d'Interface 2017
Tendances du Design d'Interface 2017Idean France
 
Rendering unit tests par Nicolas Fontaine
Rendering unit tests par Nicolas FontaineRendering unit tests par Nicolas Fontaine
Rendering unit tests par Nicolas FontaineIdean France
 
Sirikit par Julien Coudsi
Sirikit par Julien CoudsiSirikit par Julien Coudsi
Sirikit par Julien CoudsiIdean France
 
A developer who knows how to design by Audrey Hacq
A developer who knows how to design by Audrey HacqA developer who knows how to design by Audrey Hacq
A developer who knows how to design by Audrey HacqIdean France
 
CocoaPods par David Yang
CocoaPods par David YangCocoaPods par David Yang
CocoaPods par David YangIdean France
 
Messages Extensions par Nicolas Fontaine
Messages Extensions par Nicolas FontaineMessages Extensions par Nicolas Fontaine
Messages Extensions par Nicolas FontaineIdean France
 
Un développeur sachant designer par Audrey Hacq
Un développeur sachant designer par Audrey HacqUn développeur sachant designer par Audrey Hacq
Un développeur sachant designer par Audrey HacqIdean France
 
CA Layer / Core Animation {Cocoaheads Montpellier}
CA Layer / Core Animation {Cocoaheads Montpellier}CA Layer / Core Animation {Cocoaheads Montpellier}
CA Layer / Core Animation {Cocoaheads Montpellier}Idean France
 
Programmation Orientée Protocole {Cocoaheads Montpellier}
Programmation Orientée Protocole {Cocoaheads Montpellier}Programmation Orientée Protocole {Cocoaheads Montpellier}
Programmation Orientée Protocole {Cocoaheads Montpellier}Idean France
 

Plus de Idean France (20)

Start with a Concept and Stop Designing like a Machine
Start with a Concept and Stop Designing like a MachineStart with a Concept and Stop Designing like a Machine
Start with a Concept and Stop Designing like a Machine
 
Design Systems : à votre marque, prêts, partez !
Design Systems : à votre marque, prêts, partez !Design Systems : à votre marque, prêts, partez !
Design Systems : à votre marque, prêts, partez !
 
Design systems : Bench et reco sur les outils
Design systems : Bench et reco sur les outilsDesign systems : Bench et reco sur les outils
Design systems : Bench et reco sur les outils
 
La recette graphique
La recette graphiqueLa recette graphique
La recette graphique
 
Graph QL par Andy Gigon
Graph QL par Andy GigonGraph QL par Andy Gigon
Graph QL par Andy Gigon
 
Cocoheads react native + redux par Nicolas Fontaine
Cocoheads   react native + redux par Nicolas FontaineCocoheads   react native + redux par Nicolas Fontaine
Cocoheads react native + redux par Nicolas Fontaine
 
Meetup langages visuels - Backelite - novembre 2017
Meetup langages visuels - Backelite - novembre 2017Meetup langages visuels - Backelite - novembre 2017
Meetup langages visuels - Backelite - novembre 2017
 
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
 
From Business to Buttons by Pierre Harlé
From Business to Buttons by Pierre HarléFrom Business to Buttons by Pierre Harlé
From Business to Buttons by Pierre Harlé
 
RX Swift avril 2017 - David Yang
RX Swift avril 2017 - David YangRX Swift avril 2017 - David Yang
RX Swift avril 2017 - David Yang
 
UI Design Trends for 2017
UI Design Trends for 2017UI Design Trends for 2017
UI Design Trends for 2017
 
Tendances du Design d'Interface 2017
Tendances du Design d'Interface 2017Tendances du Design d'Interface 2017
Tendances du Design d'Interface 2017
 
Rendering unit tests par Nicolas Fontaine
Rendering unit tests par Nicolas FontaineRendering unit tests par Nicolas Fontaine
Rendering unit tests par Nicolas Fontaine
 
Sirikit par Julien Coudsi
Sirikit par Julien CoudsiSirikit par Julien Coudsi
Sirikit par Julien Coudsi
 
A developer who knows how to design by Audrey Hacq
A developer who knows how to design by Audrey HacqA developer who knows how to design by Audrey Hacq
A developer who knows how to design by Audrey Hacq
 
CocoaPods par David Yang
CocoaPods par David YangCocoaPods par David Yang
CocoaPods par David Yang
 
Messages Extensions par Nicolas Fontaine
Messages Extensions par Nicolas FontaineMessages Extensions par Nicolas Fontaine
Messages Extensions par Nicolas Fontaine
 
Un développeur sachant designer par Audrey Hacq
Un développeur sachant designer par Audrey HacqUn développeur sachant designer par Audrey Hacq
Un développeur sachant designer par Audrey Hacq
 
CA Layer / Core Animation {Cocoaheads Montpellier}
CA Layer / Core Animation {Cocoaheads Montpellier}CA Layer / Core Animation {Cocoaheads Montpellier}
CA Layer / Core Animation {Cocoaheads Montpellier}
 
Programmation Orientée Protocole {Cocoaheads Montpellier}
Programmation Orientée Protocole {Cocoaheads Montpellier}Programmation Orientée Protocole {Cocoaheads Montpellier}
Programmation Orientée Protocole {Cocoaheads Montpellier}
 

Responsive Web Design : best practices et retour d'expérience de Backelite et les Galeries Lafayette

  • 1. RESPONSIVE WEB DESIGN 7 rue de Bucarest 75008 Paris - +33 1 73 00 28 00 – contact@backelite.com - www.backelite.com
  • 2. 2 Agence leader pour un monde tactile 2
  • 3. SPÉCIFICITÉS DU RWD BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 3
  • 4. DÉFINITION Présenter un site unique à des navigateurs web utilisés sur n’importe quel type de terminal : PC, tablette, mobile voire d’autres. Une adaptation de la mise en page et des éléments optimale suivant l’espace d’affichage du navigateur. Un seul contenu pour tous les terminaux, une seule arborescence de pages. Penser résolution de mise en page plutôt que terminal. Cette adaptation est faite sur le terminal client par du code CSS et JavaScript. BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 4
  • 5. STARBUCKS.COM BACKELITE - RESPONSIVE WEB DESIGN - 12 DÉCEMBRE 2013 Outil de simulation RWD : ami.responsivedesign.is 5
  • 6. UN COUP D’ŒIL AUX TERMINAUX : SMARTPHONES Les smartphones phares d’hier : Ecrans de moins de 4 pouces Résolutions d’écran autour de 320px Résolution utilisée pour la mise en page (CSS pixels) : de 320px à 384px Et ceux d’aujourd’hui : Ecrans de 4 à 6,3 pouces Résolutions d’écran de 720px à 1080px Résolution utilisée pour la mise en page (CSS pixels) : de 320px à 384px Densité de pixels supérieure, permettant l’utilisation d’images « retina » Les tailles et les résolutions d’écrans plus importantes des terminaux récents ne nécessitent pas de traitement particulier pour la mise en page du site, seulement pour les images. Mais les variations, même légères, exigent une mise en page fluide. BACKELITE - RESPONSIVE WEB DESIGN - 12 DÉCEMBRE 2013 6
  • 7. POINTS DE BASCULE CSS3 Media Queries = Breakpoints = Point de rupture = Point de bascule Exemple : Le RWD consiste à prévoir différentes mises en page : celles-ci sont activées suivant l’espace disponible. Les navigateurs s’insèrent dans une des zones définies par les points de bascule qui utilisent la fonctionnalité CSS3 Media Queries. Les points de bascule majeurs signifient des changements de mise en page conséquents, les mineurs sont utilisés pour des ajustements. BACKELITE - RESPONSIVE WEB DESIGN - 12 DÉCEMBRE 2013 Source : infographie Splio, 2012 7
  • 8. POINTS DE BASCULE CSS3 Media Queries = Breakpoints = Point de rupture = Point de bascule Exemple : On ne gère généralement pas les résolutions inférieures à 320px (largeur d’un iPhone). BACKELITE - RESPONSIVE WEB DESIGN - 12 DÉCEMBRE 2013 En général, le site web ne se redimensionne plus de façon fluide à partir d’une certaine résolution : on centre ensuite le contenu. On remarque que la zone autour du point de rupture situé à 768px peut gérer les smartphones en mode paysage et les tablettes en mode portrait => On ne pas se baser sur la résolution pour identifier le type de terminal Source : infographie Splio, 2012 8
  • 9. L’ENJEU D’UN SITE RESPONSIVE Concevoir une expérience optimale pour l’environnement cible (terminaux, OS, navigateurs et résolutions) qui s’adaptera au mieux dans les autres cas qui s’adaptera au mieux sur les terminaux de demain Autres points contribuant au contexte le contexte d’utilisation (posture) performance (vitesse/type de connexion, terminal) le mode d’interaction (souris, clavier, tactile, télécommande…) BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 9
  • 10. RESPONSIVE WEB DESIGN LA COMPATIBILITÉ IE6 IE7 Exclus du RWD < 0,5% 0,7% IE8 RWD dégradé 9,6% IE9+ 5+ 3.6+ RWD-ready Sur mobile, les plateformes supportées commencent à Android 2.3, Windows Phone 7.5 et BlackBerry 7. La compatibilité cible est donc un facteur déterminant pour l’évaluation de la pertinence d’un projet RWD. BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 Source : chiffres monde nov ‘13, Statcounter 10
  • 11. PERFORMANCE Performance effective (temps de chargement total de la page et de ses ressources) Performance ressentie (laps de temps écoulé jusqu’à l’affichage de la première partie de la page, plus important que la performance effective pour capter l’attention de l’utilisateur) Intégration avec infrastructure existante : cache, CDN… Source : Etude Akamai menée sur 500 sites Responsive mi-2013 BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 11
  • 12. AUTRES APPROCHES Approche adaptive, Responsive Server-Side (RESS) Côté serveur Gain de performance Adaptations plus profondes Détection du User-Agent Rarement utilisé pour un site unique visant tous les types de terminaux Adaptations mineures possibles côté client BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 12
  • 13. SITE UNIQUE VS MULTI-SITES RWD et le RESS sont applicables à n’importe quel type de site La stratégie de contenu doit être le critère de choix Les coûts de développement et de maintenance sont également à prendre en compte BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 13
  • 14. ANTICIPER L’IMPACT D’UNE MIGRATION VERS LE RESPONSIVE Analyse de l’audience et des statistiques du site existant - Impact potentiel de la compatibilité non-universelle du Responsive (encore plus suivant le type de site : e-commerce, institutionnel, etc.) Peut donner des indications ou des priorités sur la cible principale Compatibilité de l’éco-système - Quel back-office ? Quelle régie de pub ? Quel prestataire de paiement ? Evaluation de la compatibilité de chaque tiers avec une approche Responsive Adapter tôt sa solution d’analytics au RWD ou en changer - Fonctionnalité de regroupement par résolution ou par user-agent Être capable d’évaluer les évolutions de chaque canal séparément pour comparer aux dispositifs historiques BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 14
  • 15. QUELQUES EXEMPLES CONCRETS E-commerce : O’neill clothing (http://www.oneillclothing.com) Redesign Responsive simple sur une base Magento, aucune indication d’un site mobile existant. Chiffre d’Affaires Taux de transformation iPhone : + 101,2% iPhone : + 65,7% Android : + 591,4% Android : + 407,3% Desktop + tablettes : + 41,1% Desktop + tablettes : + 20,3% Media : Time Inc. (http://www.time.com) Site web mobile existant mais peu optimisé Trafic tablette + smartphone : de 15 à 25% du trafic global Nombre moyen de pages visitées sur mobile : + 23% Bounce rate mobile : - 26% Visiteurs uniques : + 15% Temps passé sur une page : + 7,5% BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 15
  • 16. CONTENT FIRST BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 16
  • 17. LE RISQUE DE LA REFONTE Copier-coller de l’existant… Trop de texte Trop d’images Trop de fonctionnalités par page …non adapté au mobile. Difficultés de : Performance Hiérarchisation Repérage et navigation Affichage des contenus (images) Manipulation (saisie de formulaires) BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 17
  • 18. COMMENT STRUCTURER LE CONTENU Adopter une approche mobile-first Hiérarchiser Ne garder que l’essentiel Découper / structurer le contenu Limiter le nombre de fonctionnalités sur une même page Adapter L’accès à certaines fonctionnalités L’affichage de certains contenus La taille et le positionnement des éléments Ne pas supprimer de contenu : le mobile ignore certains éléments (par ex les images de fond) BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 18
  • 19. ETAPES CLÉS BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 19
  • 20. LE PROCESSUS ITÉRATIF IDÉAL PAR GABARIT Gabarit 1 Validation Stabilisation Cadrage Structure de l’information Conception Wireframes Prototypage Validation pour dév Maquettes graphiques Intégration Développement Gabarit 2 Conception Wireframes BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 Prototypage 20
  • 21. LE BINÔME INTÉGRATEUR-GRAPHISTE Dialoguer Echanger avec l’intégrateur en phase de conception Travailler avec l’intégrateur au fur et à mesure du montage pour affiner le design si besoin Tester très tôt Tester le plus tôt et le plus souvent possible les maquettes intégrées sur des terminaux et navigateurs représentatifs S’adapter Améliorer la méthode de conception au fil de l’eau Capitaliser sur le montage des premiers gabarits finalisés pour décliner ensuite (factorisation, réutilisation des composants) BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 21
  • 22. D’UN FRAMEWORK RWD À PHOTOSHOP (ET VICE VERSA) BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 22
  • 23. FRAMEWORKS Zurb Foundation 5 Twitter Bootstrap 3 Oui (depuis v4) Oui (depuis v3) Fluide, 12 colonnes Fluide, 12 colonnes 2 4 4 (en em) 3 (en px) Composants/Widgets Oui Oui Modulaire Oui Oui Support d’IE8 Non Oui Framework CSS SASS LESS Responsive images Oui Non Mobile-first Grille Nb de modes de grille Points de bascule par défaut Approche « no framework » Une combinaison de développements spécifiques et de composants spécialisés Une « stack » spécifique et adaptée à un projet Potentiellement plus difficile à mettre en place et à maintenir BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 23
  • 24. WOPE Une solution de développement pour construire des sites web et mobiles universels • • • Une expérience utilisateur applicative grâce à l’utilisation de JS/CSS3/HTML5 Une adaptation automatique pour tous les mobiles et les tablettes Outils de Responsive Web Design (février 2014) pour cibler également le desktop Améliorez les performances de votre site • • • Technologie unique côté serveur Optimisation du code et retaillage des images Utilisation du cache Et réduire les coûts • BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 • Utiliser vos équipes actuelles et votre savoir faire 24 Gagnez du temps sur la partie test
  • 25. WOPE 6 Gère désormais n’importe quel type de HTML Une bibliothèque de widgets graphiques compatible PC Un framework Responsive utilisant la grille fluide de Twitter Bootstrap 3 customisée pour un meilleur rendu sur desktop Un outil automatisé d’optimisation des performances d’un site Responsive : ressources, images BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 25
  • 26. COMMENT APPRÉHENDER DANS PHOTOSHOP… Une structure HTML commune à différentes mises en page Une grille générale de 12 colonnes Une imbrication de composants structurés en 12 colonnes Des mises en page flexibles L’approche RWD et le choix d’un framework (Foundation 4 pour le cas pratique galerieslafayette.com) oblige le graphiste à appréhender ces différents points lors de la conception. BACKELITE - RESPONSIVE WEB DESIGN - 12 DÉCEMBRE 2013 26
  • 27. CAS PRATIQUE… Le site Responsive Web Design des Galeries Lafayette Ou… Tout ce que le graphiste doit garder en tête lors de la conception BACKELITE - RESPONSIVE WEB DESIGN - 12 DÉCEMBRE 2013 27
  • 28. UNE GRILLE DE 12 COLONNES La grille est structurée en 12 colonnes, quelque soit la largeur de la page. Construire la mise en page de chaque point de bascule en anticipant la fluidité de la mise en page entre ces points. > 1000 px BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 768 px – 1000 px < 767 px 28
  • 29. UNITÉ DE MESURE = 1 COLONNE Le graphiste doit prendre en compte la colonne comme unité de mesure dont la largeur varie en fonction de la résolution d’affichage. Adieu le raisonnement en pixel. On parle donc en nombre d’unités / colonnes pour donner des indications de mesure et de placement dans X unités. On garde le pixel lorsque l’on veut une dimension très précise, en particulier pour les padding BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 4 colonnes Largeur 100% 4 colonnes Aligné à gauche 4 colonnes Aligné à droite 3 colonnes Centré 3 colonnes Centré 3 colonnes Centré 3 colonnes Centré 29
  • 30. UNITÉ DE MESURE = 1 COLONNE Chaque composant est structuré en 12 colonnes. Dans Photoshop, transformer chaque composant structurant en objet dynamique pour le travailler de façon indépendante et le diviser en 12 colonnes peut s’avérer très utile. Le plug-in GuideGuide est essentiel pour diviser facilement chaque objet dynamique en 12 colonnes. 30
  • 31. RESPECTER LE FLUX HTML 1 2 3 1 2 4 5 3 4 5 6 6 7 8 9 7 8 10 9 10 L’ordre des contenus doit être respecté sur les différentes mises en page. Si l’on change le positionnement d’un élément sur mobile, cela aura un impact sur le desktop et sur tablette, et vice versa. BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 31
  • 32. FACTORISATION desktop mobile Créer des bibliothèques de composants pour garder une cohérence dans la charte et illustrer les adaptations nécessaires de certains éléments en passant d’une résolution à une autre. Ces bibliothèques peuvent être classées par thème (navigation, boutons, images, icôn es…) BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 32
  • 33. MISES EN PAGE FLEXIBLES : ADAPTER LES POSITIONNEMENTS BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 33
  • 34. MISES EN PAGE FLEXIBLES : ADAPTER LES FORMES DES COMPOSANTS Sur desktop BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 Sur mobile 34
  • 35. MISES EN PAGE FLEXIBLES : ADAPTER LES DIMENSIONS Pour un terminal tactile, il est nécessaire de prévoir des liens et des boutons plus accessibles (plus gros, plus espacés) Une solution est de créer des boutons plus gros pour les tablettes et le mobile. Il s’agit alors de trouver un juste milieu entre des éléments qui ne sembleront pas « grossiers » (car grossis) sur desktop tout en restant lisible et accessible sur support tactile. Surface moyenne accessible au doigt 40 px BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 35
  • 36. GESTION DES IMAGES Les images concentrent toutes les problématiques liées au RWD… Résolution d’affichage et qualité Lisibilité : sujet, texte intégré dans l’image Direction artistique : recadrage, cropping Balise img HTML mal adaptée, utiliser PictureFill Problématique de SEO : la technique d’image Responsive doit rester performante pour le référencement La chaîne de production des images doit être revue dans son intégralité Format de l’image Compressions et qualités optimisées Dissociation du texte de l’image et affichage en CSS BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 36
  • 37. LA RECETTE D’UN GABARIT Valoriser la recette Pendant et en fin de projet Sur les plans créatifs et techniques Par navigateur : les bugs sont souvent liés à la plateforme et la version d’OS La plupart des utilisateurs utilisent le navigateur par défaut de leur terminal Un environnement de recette adéquat « War room » : réunions de recette et de correction immédiate par le binôme développeur-graphiste Laboratoire de test (collection de vrais terminaux mobiles pour tester les comportements et anomalies propres à des terminaux spéciaux) Délégation de l’exécution des tests (cellule de tests) BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 37
  • 38. SEO ET ANALYTICS BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 38
  • 39. SEARCH ENGINE OPTIMIZATION (SEO) « Google recommends webmasters follow the industry best practice of using responsive web design, namely serving the same HTML for all devices. » Google Webmaster Central blog, juin 2013 BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 39
  • 40. MESURE D’AUDIENCE ET STATISTIQUES (ANALYTICS) BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 40
  • 41. MESURE D’AUDIENCE ET STATISTIQUES (ANALYTICS) Google Nexus 4 iPhone 5 Google Galaxy Nexus Sony Xperia Z Samsung Galaxy SIII/SIV iPhone 3/4 iPad Données d’exemple BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 41
  • 42. CONCLUSION Privilégier une approche UX Cadrage en amont Réflexion sur les contenus et les utilisateurs Approche pluridisciplinaire, travail collaboratif Recette soignée Le RWD perpétue la promesse d’universalité du Web BACKELITE - RESPONSIVE WEB DESIGN - DÉCEMBRE 2013 42
  • 43. Le meilleur de la mode adapté à tous les types d’écrans http://www.galerieslafayette.com BACKELITE 043
  • 44. LE MEILLEUR DE LA MODE ADAPTÉ À TOUS LES TYPES D’ÉCRANS Le groupe Galeries Lafayette est un acteur majeur du commerce en France opérant dans les secteurs de la mode, du luxe et de la beauté, de l’horlogerie bijouterie, du loisir et de la maison, et de l’alimentation. BACKELITE 044
  • 45. OBJECTIFS CLÉS • Refonte du site e-commerce en Responsive Web Design pour une expérience utilisateur homogène sur tous les écrans • Renforcer l’image de modernité des Galeries Lafayette • Booster les ventes sur le canal digital BACKELITE LA RÉPONSE DE BACKELITE  Méthodologie UX, conception et réalisation de gabarits clés  Accompagnement dans la durée une fois le site mis en ligne, et transfert de compétences  Planning réactif  Approche tarifaire optimisée 045
  • 46. PRINCIPAUX ENJEUX DU SITE • • • • • Accès rapide à l’ensemble du catalogue produit sur tous les écrans Consultation de fiches produit Commande Gestion cross-canal du panier Accès au compte client BACKELITE 046
  • 47. RÉSULTATS CA x3 sur tablette, CA x4 sur mobile, Taux de conversion en augmentation sur desktop, et encore plus sur tablette et mobile L’accompagnement de Backelite a tenu ses promesses, les équipes ont tenu leurs engagements, voire un peu plus ! Thierry Leforestier, direction internet & e-commerce Galeries Lafayette
  • 48. NOS PLUS BELLES RÉFÉRENCES
  • 49. Contactez nous Backelite 7 rue de Bucarest 75008 Paris Tél : 01 73 00 28 00 contact@backelite.com