SlideShare une entreprise Scribd logo
1  sur  81
ENJEUX – SOLUTIONS - MÉTHODOLOGIE
AGENDA

1 Constat : La grande fragmentation
2 Comment s’armer face à tous ses écrans
3 Les enjeux design et conception
4 La méthodologie
5 Les enjeux techniques du responsive
6 Le choix du responsive
7 Conclusion
LE PAYSAGE DU WEB A CHANGÉ
LES RAPPORTS DE FORCE ONT CHANGÉ EN 2 ANS

50
45
40
35
30
25

IE
Chrome
Firefox

20

Safari

Opera
15

Other

10
5
0

statcounter.com
LES RAPPORTS DE FORCE ONT CHANGÉ EN 2 ANS

50
45
40

Chrome

35
30
25
20

Internet
Explorer

IE
Chrome
Firefox
Safari

Opera
15

Other

10
5
0

statcounter.com
LE TRAFIC SMARTPHONE PRESQUE DOUBLÉ EN 1 AN

20%
18%
16%
14%
12%
10%
8%

Mobile

6%

4%
2%
0%

statcounter.com
LE TRAFIC SMARTPHONE PRESQUE DOUBLÉ EN 1 AN

20%
18%
16%
14%

On peut anticiper que la part de marché du
12%
smartphone mondial va passer les 20% en fin
10%
d’année
8%

Mobile

6%

4%
2%
0%

statcounter.com
Hier encore,
Le marché tournait autour de 3 résolutions
principales :
•
•
•

UN ORDINATEUR,
UN IPHONE,
UN IPAD …
APPLE ET SON ÉCRAN RETINA
a lancé la course au dpi* et à la finesse
des écrans
LE NOMBRE DE RÉSOLUTIONS SE VOIT DONC MULTIPLIÉ

*Dot Per Inch
APPLE LANCE LA COURSE AU DPI : LE RETINA

iPad

iPad Retina
RÉSOLUTIONS ÉCOSYSTÈME IOS

5

RÉSOLUTIONS
opensignalmaps
2012 – 2013
Le nombre de terminaux Android a progressé
de façon incontestable
ANDROID DÉPASSE IOS AU NIVEAU MONDIAL

45
40
35
30

Android

25

iOS
Nokia/ Symbian

20

Samsung
15
10

JUILLET
2012

BlackBerry OS
Autre
Sony Ericsson

5
0

statcounter.com
UN NOMBRE DE TERMINAUX CONSIDÉRABLE EST SOUS ANDROID

opensignalmaps
ET UN NOMBRE DE RÉSOLUTIONS AD-HOC

231
RÉSOLUTIONS
opensignalmaps
DE NOUVEAUX FORMATS
SONT APPARUS
Ils redéfinissent les catégories existantes de terminaux.
LA « PHABLET » : EST-CE UNE TABLETTE? UN SMARTPHONE?
PEU IMPORTE !
Désormais,
On ne doit plus catégoriser ni parler de résolution,
on doit penser en TAILLES D’ÉCRANS
LA PERFORMANCE DES SMARTPHONES AU CŒUR DU SUJET

Firefox OS
• Bon support HTML5
• Petit écran
• Petit processeur

Samsung Galaxy Y
• Android 2.3 – 2011
• Petit écran
La durée de vie
et la qualité des terminaux
sont très aléatoires !
Rien ne nous informe sur les mises à jours de certains terminaux,
Android 2.3 datant de 2010 équipe encore 30% des
smartphonesAndroid du marché
Le paysage du WEB en 2015

…?
DES ÉCRANS PLUS GRANDS
DES PLUS PETITS
DES … DIFFÉRENTS
DES ÉCRANS PARTOUT, TOUT LE TEMPS
LA SEULE CHOSE
DONT ON PEUT ÊTRE SÛR.

IL Y A LE WEB

SMARTPHONES
TABLETTE
DESKTOP
TÉLÉ
ETC …

Et on devra traiter la plupart des supports de la même
façon.
QUELLES SONT NOS ARMES ?
CHANGER NOTRE MODE DE SUPPORT

DU
SUPPORT
NAVIGATEUR

AU
SUPPORT
FORMAT

Le support navigateur,
c’est faire en sorte que le code s’adapte au browser

Le support format,
c’est faire en sorte que le browser sélectionne la partie du code qui lui
est adressée
UN NOUVEAU PATTERN DE CONCEPTION
Un consensus sur un pattern de conception a été trouvé :

LE RESPONSIVE WEB DESIGN
Design Fluide

RWD

Taille de texte
adaptée
Réorganisation du
layout

Un fonctionnement par paliers de tailles d’écrans
« ANCIENS SUPPORTS »
LE POINT COMMUN ENTRE :
• Internet Explorer 7-8
• Android 2.3
• iOS < 5

Des navigateurs archaïques,
mais qu’on doit supporter car ils représentent encore
une grosse part du marché.

Mais COMMENT ?
AMÉLIORATION PROGRESSIVE
Développer en respectant les standards W3C

1 Certaines fonctionnalités des nouveaux navigateurs seront

2

simulées sur les plus anciens (ex : Flash pour balise
Vidéo, Javascript pour les animations,…)
Certaines subtilités graphiques ou motion ne seront pas présentes
(coins arrondis, motion, text-shadows,…)

Une expérience optimale pour les derniers navigateurs et les
mobiles performants
Une expérience fonctionnelle pour les autres

Un fonctionnement par paliers de fonctionnalités
UN SUPPORT PAR PALIERS

IL S’AGIT DE DÉFINIR DES PALIERS :
• de tailles d’écrans
• de fonctionnalités

Les paliers sont liés à la technicité du sujet.
Voici un exemple sur un site présentant beaucoup de
motion
UN EXEMPLE DE SUPPORT PAR PALIERS
TECHNIQUEMENT ?
Comment détecter les paliers techniquement :
Paliers fonctionnels :
• Modernizr (Librairie JS permettant de détecter les

nouvelles fonctionnalités JS)
• Détection du User-Agent (dernier recours)
Si on souhaite baisser intentionnellement le fonctionnel (ex: les
animations sur Android 2.3 qui les supporte mais mal )
Gestion des évènements spécifiques à certains support

Paliers de résolutions :
• CSS Media-queries (nouveauté CSS3 implémentée par les

derniers browsers)
Les anciens browsers (desktop) n’ont pas besoin de supporter
ces résolutions et bénéficieront d’une CSS par défaut
LES ENJEUX DESIGN
DÉFINIR

LA

UN LANGAGE

MAQUETTE
PSD

COMMUN

LA
NAVIGATION
LE LANGAGE DU RESPONSIVE
On définie donc des paliers sur lesquels on va appliquer des layouts* de
présentation

Small

Medium

Large

X-large

*gabarits
DIFFÉRENTS LAYOUT
MOSTLY FLUID

COLUMN DROP

LAYOUT SHIFTER

OFF CANVAS

source lukew
L’ABSENCE DE DESIGN STATIQUE
Les techniques de
Design ont évolué :
• On peut définir le palier

minimum
et le palier maximum
• On crée des éléments
plus
que des mises en pages
• On passe d’un design
statique
à une maquette HTML
vivante

Le RWD est en opposition avec le principe de pixel perfect
LA NAVIGATION
La stratégie de navigation reste un choix important.
Plusieurs pattern existent avec leurs avantages et
inconvénients.
1/ Volet
Pour
•
•
•

Espace
Design
Pattern
Facebook

Contre
•
•

Confusant
Compatibilité
LA NAVIGATION
La stratégie de navigation reste un choix important.
Plusieurs pattern existent avec leurs avantages et
inconvénients.
2/ Bascule
Pour
•
•
•

Contexte
Design
Compatibilité

Contre
•
•

Javascript
Performance
LA NAVIGATION
La stratégie de navigation reste un choix important.
Plusieurs pattern existent avec leurs avantages et
inconvénients.
3/ Liste de sélection
Pour
•
•
•

Espace
Identifiable
Compatibilité

Contre
•
•
•

Design
Confusant
Javascript
RESPONSIVE

VS.

PROJET
LE RESPONSIVE IMPLIQUE
UNE MÉTHODOLOGIE ADAPTÉE
Les différents enjeux du Responsive Web Design impliquent une
phase de conception importante.
Ceci afin de pérenniser la réflexion et d’anticiper au mieux les
prochaines innovations, sans sacrifier le fonctionnel et l’utilisateur
final.
Elle permettra d’analyser le besoin exact, de prioriser les
éléments à afficher ou non sur les différents périphériques ou
encore de déterminer quel « layout » RWD adopter.
Cette conception peut se répartir de la manière suivante :

DÉFINITION DE
L’ARCHITECTURE
RESPONSIVE ET
L’ADAPTABILITÉ

IDENTIFICATION
DES IMPACTS
TECHNIQUES

PROTOTYPAGE

TESTS
UTILISATEURS
MÉTHODOLOGIE PROJET
DÉFINITION DE
L’ARCHITECTURE
RESPONSIVE ET
L’ADAPTABILITÉ
Etude des usages
sur les différents
L
devices

L

WS

Analyse du
parcours
utilisateur
Priorisation
fonctionnelle

Segmentation
marketing cibles AX
L benchmark, CRM

Matérialisation des
parcours client et
L
personae

L

Périmètre
fonctionnel
et éditorial

IDENTIFICATION
DES IMPACTS
TECHNIQUES

PROTOTYPAGE

TESTS
UTILISATEURS

Impacts techniques
avec le back & le
WS
CMS client

Analyse de la
pertinence du
contenus selon le
WS
contexte

Test sur prototype
cliquable
WS

Impact SEO

Wireframes des
fonctionnalités
adaptées

Analyse des
résultats et
adaptations

L

L

Impact Analytics

Modélisation des
différents
L patterns, mobile first

Impact tracking

Développement d’un
prototype HTML
L

L

L

WS

L
livrables
WS

workshops
MÉTHODOLOGIE PROJET
UNE ÉQUIPE MODULAIRE DÉDIÉE AUX EXPÉRIENCES
MULTIPLES, TRAVAILLANT DE FAÇON COLLABORATIVE

Product Owner

Chef de projet

Développeurs front

Consultant UX

Directeur Artistique

Creative Technologist

Expert Analytics

Expert Mobile

Développeurs back
CROQUIS RESPONSIVE

Desktop

Tablette

Smartphone
PROCESSUS DE VALIDATION GRAPHIQUE
La validation des croquis puis
du prototype aboutit à
des PSD

MAQUETTES
PSD

PROTO HTML

CROQUIS

Pour correspondre
au cycle actuel
PROCESSUS DE VALIDATION GRAPHIQUE
On peut imaginer un processus itératif.
C’est ce vers quoi l’industrie tend.

CROQUIS

PROTO HTML

Binôme :

 Créatif
 Développeur
PSD
CONCEPTION : ONE MORE THING ?
Il faut bien choisir sa cible
• Smartphone ≠ Smartphone, un iPhone 4 ne doit pas

être traité comme un Galaxy S4.
• Un projet responsive est un projet web, les
smartphones anciens ne peuvent pas suivre malgré
toutes les optimisations

Les formats évoluent, il vaut mieux ne pas trop figer
ses paliers de rendu.
• L’apparition des phablets ou du 5S et son écran

allongé démontrent qu’il faut rester ouvert à la
variation des points de ruptures au cours du projet.

• Ex: iPhone 5 en mode paysage
LES ENJEUX TECHNIQUES
LES

WEB

MÉDIAS

PERFORMANCE

DES
PARCOURS
FONCTIONNELS
DIFFÉRENTS

GESTION

LA

DU CONTENU

RECETTE
LES MÉDIAS
LE PRINCIPAL ENJEU DES MEDIAS :

ADRESSER LES BONNES IMAGES
1ÈRE SOLUTION /

UTILISER LE USER-AGENT (BROWSER SNIFFING)
La liste de user-agents ou la base de donnée
sera-t-elle toujours à jour ?
Pouvons-nous penser que un device = une taille d’écran ?
Fonctionnalité Galaxy & bientôt Android : split view
Les tablettes chinoises qui masquent leur user agent 
Les tablettes Windows 8, les laptops win7/ win8
Les technologies de déportation d’écran : Airplay, Allshare, Smartglass, ..
LES MÉDIAS
LE PRINCIPAL ENJEU DES MEDIAS :

ADRESSER LES BONNES IMAGES
1ÈRE SOLUTION /

UTILISER LE USER-AGENT (BROWSER SNIFFING)
La liste de user-agents ou la base de donnée
sera-t-elle toujours à jour ?

Seul le client connaît sa résolution au
moment de son usage
Pouvons-nous penser que un device = une taille d’écran ?

!

Fonctionnalité Galaxy & bientôt Android : split view
Les tablettes chinoises qui masquent leur user agent 
Les tablettes Windows 8, les laptops win7/ win8
Les technologies de déportation d’écran : Airplay, Allshare, Smartglass, ..
LES IMAGES, LE VRAI CHALLENGE DU FLUIDE
RÉSOLUTION
ECRAN

QUALITÉ DE
L’IMAGE

Laptop
en fibre
Télévision 4k
en bas débit
Galaxy Note 2
en 4g

Netbook
en wifi
Windows surface
en 3g

Iphone 5
en edge

BANDE
PASSANTE
LES IMAGES, LE VRAI CHALLENGE DU FLUIDE
RÉSOLUTION
ECRAN

QUALITÉ DE
L’IMAGE

Laptop
en fibre
Télévision 4k
en bas débit
Galaxy Note 2
en 4g

!

Résolutions d’écrans &
capacité réseau
ne sont désormais plus liés Netbook
en wifi
Windows surface
en 3g

Iphone 5
en edge

BANDE
PASSANTE
LES POINTS D’ACTION
Deux problématiques à travailler :
1

LA
BONNE IMAGE
PAR DEVICE

2

Utilisation native de l’api
w3c network information asap

1

LE
CHARGEMENT

Mise en place d’un polyfill
de détection de bande passante

Participation à la réflexion w3c autour de
l’implémentation de la balise picture et d’autres
solutions

2

Support du RETINA par le pattern 2x

3

Pas de double hit de téléchargement
SÉLECTION DE LA BONNE IMAGE
Le w3c et ses participants
évoquent trois pistes encore à l’état de brouillon

PICTURE
ELEMENT

SRC SET

SRC N

CLIENTS
HINT
NOS ORIENTATIONS À DATE
PICTURE
ELEMENT

SRC SET

SRC N

CLIENTS
HINT

Aucune solution n’est implémentée par les navigateurs pour le moment.
Il s’agit de trouver celle qui paraît la plus pertinente et d’utiliser/réaliser un
polyfill.
Les contraintes habituelles doivent être respectées
SEO
ACCESSIBILITÉ
PERFORMANCE

Pour le moment nous avons testé et éprouvé sur nos projets la solution
« picture element » qui nous a donné satisfaction.
Mais la communauté s’engage de plus en plus sur la solution src N
LES VIDÉOS
L’utilisation de la balise HTML5 vidéo induit un
nombre conséquent de types de sources.
Navigateur / Device

Formats Vidéo

Encodage Audio

Chrome

MP4*, WebM

AAC, MP3, Vorbis

Firefox

MP4, WebM

AAC, MP3, Vorbis

Internet Explorer 9+

MP4

AAC, MP3

Safari

MP4

AAC, MP3

iOS

MP4

AAC, MP3

Android

MP4

AAC, MP3

Opéra

WebM

Vorbis
* Chrome a annoncé qu’ils allait arrêter
le support du MP4 mais ne l’ont jamais fait
LES VIDÉOS

DES PLATEFORMES
existent et adressent déjà les différents écrans.
C’est à ces plateformes d’adresser les problématiques de
mobilité liées aux différences de formats et à la bande passante
PERFORMANCE

L’ENJEU MAJEUR EST D’ARRIVER À :
• Un site en responsive web design mais qui prend en compte les

exigences du public mobile
• Une vitesse de chargement des pages exemplaire
• Un ressenti utilisateur idéal

LA PERFORMANCE WEB EST AU CŒUR D’UNE BONNE EXPÉRIENCE UTILISATEUR
PERFORMANCE
Viewport

Optimiser ce que l’utilisateur
voit :
• LazyLoad des images au scroll
• Chargement des blocs à la

volée

Un kit HTML, JS, CSS léger

Les blocs sont non visibles, donc
inactifs et les images ne sont pas
chargées

et adapté au mobile
Ne pas hésiter à abaisser le
rendu des devices lents
Compresser les scripts

COMPRESSER LES IMAGES
PERFORMANCE, KPI
DES INDICATEURS TECHNIQUES CLÉS DE PERFORMANCE

Start Render (time to glass)
Le moment précis où la page commence à s’afficher et le contenu texte est
disponible.

Page Load
Moment où la page et ses contenus sont entièrement chargés (tous les
scripts et toutes les images)

Il vaut mieux privilégier l’optimisation du start-render qui permet d’offrir
une performance ressentie optimale à l’utilisateur.
Au cours de la navigation les autres éléments se chargent.
DES PARCOURS ADAPTÉS
Les medias-queries adaptent la forme,
pas le fonctionnel
EX

Un tunnel d’achat sur smartphone
ne doit pas avoir les mêmes champs et
les mêmes étapes
que sur ordinateur

IL S’AGIT DONC D’ADAPTER LE PARCOURS AU DEVICE

RESS / RESPONSIVE & SERVER-SIDE COMPONENTS
RESS : FONCTIONNEMENT

SERVEUR
DÉTECTION UA
LA CONTRIBUTION

Les outils de contribution, CMS, doivent s’adapter au
responsive web design :
LE CMS DOIT PERMETTRE
• D’adresser des visuels adaptés à chacun des écrans
• De les redimensionner
• De gérer les vidéos provenant de plateformes externes
• De gérer les différences fonctionnelles
• D’adapter le contenu
• De visualiser sur les différents formats
UN PETIT MOT SUR LE SEO

Que pense Google
du responsive web design ?

https://developers.google.com/webmasters/smartphone-sites/
LA RECETTE
LA RECETTE
C’EST ÇA CHEZ EKINO…
LA RECETTE CÔTÉ DEV

AUTOMATISER pour éviter les régressions

Mettre en place une couverture de tests unitaires côté JS/CSS
• Karma & Jasmine

Mettre des tests de navigation
• PhantomJS + Casper
• Sélénium

Automatiser les tests de rendu multi device :
• testSwarm
LES OUTILS DU CHEF DE PROJET
 Des « bookmarklets » responsive
• Resizer
• Etc…

 Un outil permettant de forcer le User-Agent
• Chrome tools
• Plugins firefox

 Les simulateurs
• Android (installer le SDK)
• iOS (être sous Mac OSX et installer Xcode)

 Des machines virtuelles
• VirtualBox + Modern.ie (une bonne solution gratuite et cross OS)

DES SMARTPHONES, pour les tests finaux
• Rien ne remplace le test sur mobile, notamment pour juger de la

performance et des problématiques spécifique à l’accélération 3D
ou aux évènements
LE CHOIX DU RESPONSIVE
UN SITE RESPONSIVE OU ADAPTIVE ?

RESPONSIVE
WEB DESIGN
Le contenu est fluide et réagit pour
s’adapter à n’importe quelle taille
d’écran et type de format.
UN SITE RESPONSIVE OU ADAPTIVE ?

ADAPTIVE
WEB DESIGN
Le contenu va être modifié selon des
formats et types d’écrans prédéfinis.
IL FAUT PENSER À L’USAGE

“

La première chose que vous devez faire
est d’oublier les buzzwords et autre jargon
et vous concentrer sur les besoins réels
de votre entreprise.
Christina Warren

http://mashable.com/2013/08/06/responsive-vs-native-app/
UN SITE RESPONSIVE OU ADAPTIVE ?
Le responsive, ce n’est pas qu’adapter du contenu à un
écran mobile

Un site mobile nécessitant un fonctionnel particulièrement
différent de celui présent sur le site desktop ne devrait pas
être en RWD
• Géolocalisation

Un site très lourd de type RIA ne devrait pas se retrouver tel
quel sur mobile
• Facebook

• Gmail

Un site dont le contenu doit être adapté au support ne se
prête pas au RWD
• Ligne éditoriale spécifique au mobile
DU FLUIDE POUR LE SMARTPHONE

Ne pas faire de responsive
ne signifie pas pour autant
un layout fixe.

≠

Un site mobile doit être adapté à tous
les mobiles et orientations et utilisera
donc certains aspects du package
« responsive »
• Medias-queries pour adapter polices et

organisation du layout
• Layout fluide pour gérer les différences
de formats entre mobile (Galaxy S4 vs.
Note 3 vs. iPhone 5s etc…
• Adaptives images pour offrir l’image
optimale par support
CONCLUSION
POUR RÉSUMER

1 Le responsive n’est pas un raccourci
2 Ce n’est pas une technologie, c’est une
méthodologie et des avancées techniques

3 Il implique une grosse phase de conception
4 Il a des enjeux techniques, qui sont parfois
insolubles

5 Il doit être implémenté sur un projet en toutes
connaissances de cause

6 RESS semble être un bon compromis pour
permettre des parcours fonctionnels idéaux partout
MERCI !

Ekino
157, rue Anatole France
92300 Levallois-Perret

@3k1n0
@NewsDuFront
www.ekino.com

Contenu connexe

Tendances

Responsive web design new14
Responsive web design new14Responsive web design new14
Responsive web design new14FullSIX Group
 
MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design USERADGENTS
 
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
 
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
 
L'évolution du web-design
L'évolution du web-designL'évolution du web-design
L'évolution du web-designOlivier Soros
 
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
 
Présentation Métier / Responsable Webdesign
Présentation Métier / Responsable WebdesignPrésentation Métier / Responsable Webdesign
Présentation Métier / Responsable Webdesigntakaclike
 
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
 
telmedia* : tendances digitales 2014, l'engagement émotionnel
telmedia* : tendances digitales 2014, l'engagement émotionneltelmedia* : tendances digitales 2014, l'engagement émotionnel
telmedia* : tendances digitales 2014, l'engagement émotionneltelmedia
 
Le référencement naturel en 2018
Le référencement naturel en 2018Le référencement naturel en 2018
Le référencement naturel en 2018Concept Image
 
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
 
MobiliteaTime #4 : Guide Pratique Apple TV
MobiliteaTime #4 : Guide Pratique Apple TVMobiliteaTime #4 : Guide Pratique Apple TV
MobiliteaTime #4 : Guide Pratique Apple TVUSERADGENTS
 
La Gestion de Projet Mobile
La Gestion de Projet MobileLa Gestion de Projet Mobile
La Gestion de Projet MobileSebastien Brison
 

Tendances (20)

Responsive web design new14
Responsive web design new14Responsive web design new14
Responsive web design new14
 
MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design
 
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
 
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
 
L'évolution du web-design
L'évolution du web-designL'évolution du web-design
L'évolution du web-design
 
Tendances Web Design 2015
Tendances Web Design 2015Tendances Web Design 2015
Tendances Web Design 2015
 
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
 
molka foods
molka foodsmolka foods
molka foods
 
Site Internet, les tendances en 2014
Site Internet, les tendances en 2014Site Internet, les tendances en 2014
Site Internet, les tendances en 2014
 
Présentation Métier / Responsable Webdesign
Présentation Métier / Responsable WebdesignPrésentation Métier / Responsable Webdesign
Présentation Métier / Responsable Webdesign
 
Atelier 5 - Que l'esprit de la bidouille soit avec vous - ET8
Atelier 5 - Que l'esprit de la bidouille soit avec vous - ET8Atelier 5 - Que l'esprit de la bidouille soit avec vous - ET8
Atelier 5 - Que l'esprit de la bidouille soit avec vous - ET8
 
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
 
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
 
telmedia* : tendances digitales 2014, l'engagement émotionnel
telmedia* : tendances digitales 2014, l'engagement émotionneltelmedia* : tendances digitales 2014, l'engagement émotionnel
telmedia* : tendances digitales 2014, l'engagement émotionnel
 
Histoire du webdesign
Histoire du webdesignHistoire du webdesign
Histoire du webdesign
 
Le référencement naturel en 2018
Le référencement naturel en 2018Le référencement naturel en 2018
Le référencement naturel en 2018
 
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
 
MobiliteaTime #4 : Guide Pratique Apple TV
MobiliteaTime #4 : Guide Pratique Apple TVMobiliteaTime #4 : Guide Pratique Apple TV
MobiliteaTime #4 : Guide Pratique Apple TV
 
La Gestion de Projet Mobile
La Gestion de Projet MobileLa Gestion de Projet Mobile
La Gestion de Projet Mobile
 

En vedette

Responsive Design and Information Architecture with Oracle Web Center Content...
Responsive Design and Information Architecture with Oracle Web Center Content...Responsive Design and Information Architecture with Oracle Web Center Content...
Responsive Design and Information Architecture with Oracle Web Center Content...Dmitri Khanine
 
Solution de transfert mobile - Formats d'échange
Solution de transfert mobile - Formats d'échangeSolution de transfert mobile - Formats d'échange
Solution de transfert mobile - Formats d'échangeOCTO Technology
 
External Data Provider an Headless Way to Share Content - Developers Meetup -...
External Data Provider an Headless Way to Share Content - Developers Meetup -...External Data Provider an Headless Way to Share Content - Developers Meetup -...
External Data Provider an Headless Way to Share Content - Developers Meetup -...Jahia Solutions Group
 
Mobile Website or Responsive Design? The Answer is NEITHER.
Mobile Website or Responsive Design? The Answer is NEITHER.Mobile Website or Responsive Design? The Answer is NEITHER.
Mobile Website or Responsive Design? The Answer is NEITHER.TWG
 
Perspective et enjeux du design.
Perspective et enjeux du design.Perspective et enjeux du design.
Perspective et enjeux du design.ツ Thomas Nicot
 
Responsive/Interactive Architecture Enriching Urban Spaces with Interactive/ ...
Responsive/Interactive ArchitectureEnriching Urban Spaces with Interactive/ ...Responsive/Interactive ArchitectureEnriching Urban Spaces with Interactive/ ...
Responsive/Interactive Architecture Enriching Urban Spaces with Interactive/ ...Shereen Khashaba
 
Implement SQL Server on an Azure VM
Implement SQL Server on an Azure VMImplement SQL Server on an Azure VM
Implement SQL Server on an Azure VMJames Serra
 
Web { Design Project } Management
Web { Design Project } ManagementWeb { Design Project } Management
Web { Design Project } ManagementDavid Roessli
 
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
 
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
 
Les défauts de WordPress pour le SEO
Les défauts de WordPress pour le SEOLes défauts de WordPress pour le SEO
Les défauts de WordPress pour le SEODaniel Roch - SeoMix
 

En vedette (13)

Responsive Design and Information Architecture with Oracle Web Center Content...
Responsive Design and Information Architecture with Oracle Web Center Content...Responsive Design and Information Architecture with Oracle Web Center Content...
Responsive Design and Information Architecture with Oracle Web Center Content...
 
Solution de transfert mobile - Formats d'échange
Solution de transfert mobile - Formats d'échangeSolution de transfert mobile - Formats d'échange
Solution de transfert mobile - Formats d'échange
 
External Data Provider an Headless Way to Share Content - Developers Meetup -...
External Data Provider an Headless Way to Share Content - Developers Meetup -...External Data Provider an Headless Way to Share Content - Developers Meetup -...
External Data Provider an Headless Way to Share Content - Developers Meetup -...
 
Mobile Website or Responsive Design? The Answer is NEITHER.
Mobile Website or Responsive Design? The Answer is NEITHER.Mobile Website or Responsive Design? The Answer is NEITHER.
Mobile Website or Responsive Design? The Answer is NEITHER.
 
Tendances du web design 2012
Tendances du web design 2012Tendances du web design 2012
Tendances du web design 2012
 
Perspective et enjeux du design.
Perspective et enjeux du design.Perspective et enjeux du design.
Perspective et enjeux du design.
 
Responsive/Interactive Architecture Enriching Urban Spaces with Interactive/ ...
Responsive/Interactive ArchitectureEnriching Urban Spaces with Interactive/ ...Responsive/Interactive ArchitectureEnriching Urban Spaces with Interactive/ ...
Responsive/Interactive Architecture Enriching Urban Spaces with Interactive/ ...
 
Implement SQL Server on an Azure VM
Implement SQL Server on an Azure VMImplement SQL Server on an Azure VM
Implement SQL Server on an Azure VM
 
Web { Design Project } Management
Web { Design Project } ManagementWeb { Design Project } Management
Web { Design Project } Management
 
Tendances Web Design 2017/2018
Tendances Web Design 2017/2018Tendances Web Design 2017/2018
Tendances Web Design 2017/2018
 
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
 
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 - ...
 
Les défauts de WordPress pour le SEO
Les défauts de WordPress pour le SEOLes défauts de WordPress pour le SEO
Les défauts de WordPress pour le SEO
 

Similaire à Responsive Web Design - Enjeux, Solutions, Méthodologie

Responsive Design : impact sur les processus de production
Responsive Design : impact sur les processus de productionResponsive Design : impact sur les processus de production
Responsive Design : impact sur les processus de productionL_Demontiers
 
Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Julien LE THUAUT
 
Responsive Web design - defimedia
Responsive Web design - defimediaResponsive Web design - defimedia
Responsive Web design - defimediadefimedia
 
Les solutions mobiles (potentiel et enjeux)
Les solutions mobiles (potentiel et enjeux)Les solutions mobiles (potentiel et enjeux)
Les solutions mobiles (potentiel et enjeux)SCALA
 
Comment optimiser sa stratégie web pour les tablettes ?
Comment optimiser sa stratégie web pour les tablettes ?Comment optimiser sa stratégie web pour les tablettes ?
Comment optimiser sa stratégie web pour les tablettes ?Idean France
 
Kit De Survie Techno et Web à l'usage des Entrepreneurs
Kit De Survie Techno et Web à l'usage des EntrepreneursKit De Survie Techno et Web à l'usage des Entrepreneurs
Kit De Survie Techno et Web à l'usage des EntrepreneursStéphanie Hertrich
 
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
 
Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?NiceToMeetYou
 
CMSday 2013 - Votre audience peut-elle encore se passer d'une version mobile ?
CMSday 2013 - Votre audience peut-elle encore se passer d'une version mobile ?CMSday 2013 - Votre audience peut-elle encore se passer d'une version mobile ?
CMSday 2013 - Votre audience peut-elle encore se passer d'une version mobile ?Smile I.T is open
 
Design adaptatif / Mobilité
Design adaptatif / MobilitéDesign adaptatif / Mobilité
Design adaptatif / MobilitéAndré Dubreuil
 
Développement HTML5 : les enjeux et best practices
Développement HTML5 : les enjeux et best practicesDéveloppement HTML5 : les enjeux et best practices
Développement HTML5 : les enjeux et best practicesLaFrenchMobile
 
Gtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogyGtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogySacha Leprêtre
 
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
 

Similaire à Responsive Web Design - Enjeux, Solutions, Méthodologie (20)

Responsive Design : impact sur les processus de production
Responsive Design : impact sur les processus de productionResponsive Design : impact sur les processus de production
Responsive Design : impact sur les processus de production
 
Plasticité2015 technovf
Plasticité2015 technovfPlasticité2015 technovf
Plasticité2015 technovf
 
Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013
 
Formation mobile-cross-platform
Formation mobile-cross-platformFormation mobile-cross-platform
Formation mobile-cross-platform
 
Responsive Web design - defimedia
Responsive Web design - defimediaResponsive Web design - defimedia
Responsive Web design - defimedia
 
Les solutions mobiles (potentiel et enjeux)
Les solutions mobiles (potentiel et enjeux)Les solutions mobiles (potentiel et enjeux)
Les solutions mobiles (potentiel et enjeux)
 
Comment optimiser sa stratégie web pour les tablettes ?
Comment optimiser sa stratégie web pour les tablettes ?Comment optimiser sa stratégie web pour les tablettes ?
Comment optimiser sa stratégie web pour les tablettes ?
 
Kit De Survie Techno et Web à l'usage des Entrepreneurs
Kit De Survie Techno et Web à l'usage des EntrepreneursKit De Survie Techno et Web à l'usage des Entrepreneurs
Kit De Survie Techno et Web à l'usage des Entrepreneurs
 
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
 
Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?
 
android.pdf
android.pdfandroid.pdf
android.pdf
 
Salon Use IT Lyon
Salon Use IT LyonSalon Use IT Lyon
Salon Use IT Lyon
 
CMSday 2013 - Votre audience peut-elle encore se passer d'une version mobile ?
CMSday 2013 - Votre audience peut-elle encore se passer d'une version mobile ?CMSday 2013 - Votre audience peut-elle encore se passer d'une version mobile ?
CMSday 2013 - Votre audience peut-elle encore se passer d'une version mobile ?
 
Design adaptatif / Mobilité
Design adaptatif / MobilitéDesign adaptatif / Mobilité
Design adaptatif / Mobilité
 
Développement HTML5 : les enjeux et best practices
Développement HTML5 : les enjeux et best practicesDéveloppement HTML5 : les enjeux et best practices
Développement HTML5 : les enjeux et best practices
 
Gtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogyGtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogy
 
Do you speak technique ?
Do you speak technique ?Do you speak technique ?
Do you speak technique ?
 
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
 

Plus de ekino

Microbox : Ma toolbox microservices - Julien Roy
Microbox : Ma toolbox microservices - Julien RoyMicrobox : Ma toolbox microservices - Julien Roy
Microbox : Ma toolbox microservices - Julien Royekino
 
Spring data : Une api, quinze possibilités - Julien Roy
Spring data : Une api, quinze possibilités - Julien RoySpring data : Une api, quinze possibilités - Julien Roy
Spring data : Une api, quinze possibilités - Julien Royekino
 
Se lancer dans l'aventure microservices avec Spring Cloud - Julien Roy
Se lancer dans l'aventure microservices avec Spring Cloud - Julien RoySe lancer dans l'aventure microservices avec Spring Cloud - Julien Roy
Se lancer dans l'aventure microservices avec Spring Cloud - Julien Royekino
 
Panorama des solutions mobile hybrides
Panorama des solutions mobile hybridesPanorama des solutions mobile hybrides
Panorama des solutions mobile hybridesekino
 
Le « RUN » (ou la Tierce Maintenance Applicative)
Le « RUN » (ou la Tierce Maintenance Applicative)Le « RUN » (ou la Tierce Maintenance Applicative)
Le « RUN » (ou la Tierce Maintenance Applicative)ekino
 
Kinect pour les développeurs Web
Kinect pour les développeurs WebKinect pour les développeurs Web
Kinect pour les développeurs Webekino
 
Industrialisation PHP - Canal+
Industrialisation PHP - Canal+Industrialisation PHP - Canal+
Industrialisation PHP - Canal+ekino
 
Symfony et Sonata Project chez Canal+
Symfony et Sonata Project chez Canal+ Symfony et Sonata Project chez Canal+
Symfony et Sonata Project chez Canal+ ekino
 
Expériencer les objets connectés
Expériencer les objets connectésExpériencer les objets connectés
Expériencer les objets connectésekino
 
Industrialise PHP ~ ZendCon Europe 2013
Industrialise PHP ~ ZendCon Europe 2013Industrialise PHP ~ ZendCon Europe 2013
Industrialise PHP ~ ZendCon Europe 2013ekino
 
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?Drupagora 2013 : Drupal8 et Symfony2, quel impact ?
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?ekino
 
Java GC - Pause tuning
Java GC - Pause tuningJava GC - Pause tuning
Java GC - Pause tuningekino
 
SnapyX
SnapyXSnapyX
SnapyXekino
 
HTML5 vu par Ekino
HTML5 vu par EkinoHTML5 vu par Ekino
HTML5 vu par Ekinoekino
 
OOM m'a tuer - Devoxx France 2012
OOM m'a tuer - Devoxx France 2012OOM m'a tuer - Devoxx France 2012
OOM m'a tuer - Devoxx France 2012ekino
 

Plus de ekino (15)

Microbox : Ma toolbox microservices - Julien Roy
Microbox : Ma toolbox microservices - Julien RoyMicrobox : Ma toolbox microservices - Julien Roy
Microbox : Ma toolbox microservices - Julien Roy
 
Spring data : Une api, quinze possibilités - Julien Roy
Spring data : Une api, quinze possibilités - Julien RoySpring data : Une api, quinze possibilités - Julien Roy
Spring data : Une api, quinze possibilités - Julien Roy
 
Se lancer dans l'aventure microservices avec Spring Cloud - Julien Roy
Se lancer dans l'aventure microservices avec Spring Cloud - Julien RoySe lancer dans l'aventure microservices avec Spring Cloud - Julien Roy
Se lancer dans l'aventure microservices avec Spring Cloud - Julien Roy
 
Panorama des solutions mobile hybrides
Panorama des solutions mobile hybridesPanorama des solutions mobile hybrides
Panorama des solutions mobile hybrides
 
Le « RUN » (ou la Tierce Maintenance Applicative)
Le « RUN » (ou la Tierce Maintenance Applicative)Le « RUN » (ou la Tierce Maintenance Applicative)
Le « RUN » (ou la Tierce Maintenance Applicative)
 
Kinect pour les développeurs Web
Kinect pour les développeurs WebKinect pour les développeurs Web
Kinect pour les développeurs Web
 
Industrialisation PHP - Canal+
Industrialisation PHP - Canal+Industrialisation PHP - Canal+
Industrialisation PHP - Canal+
 
Symfony et Sonata Project chez Canal+
Symfony et Sonata Project chez Canal+ Symfony et Sonata Project chez Canal+
Symfony et Sonata Project chez Canal+
 
Expériencer les objets connectés
Expériencer les objets connectésExpériencer les objets connectés
Expériencer les objets connectés
 
Industrialise PHP ~ ZendCon Europe 2013
Industrialise PHP ~ ZendCon Europe 2013Industrialise PHP ~ ZendCon Europe 2013
Industrialise PHP ~ ZendCon Europe 2013
 
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?Drupagora 2013 : Drupal8 et Symfony2, quel impact ?
Drupagora 2013 : Drupal8 et Symfony2, quel impact ?
 
Java GC - Pause tuning
Java GC - Pause tuningJava GC - Pause tuning
Java GC - Pause tuning
 
SnapyX
SnapyXSnapyX
SnapyX
 
HTML5 vu par Ekino
HTML5 vu par EkinoHTML5 vu par Ekino
HTML5 vu par Ekino
 
OOM m'a tuer - Devoxx France 2012
OOM m'a tuer - Devoxx France 2012OOM m'a tuer - Devoxx France 2012
OOM m'a tuer - Devoxx France 2012
 

Responsive Web Design - Enjeux, Solutions, Méthodologie

  • 1. ENJEUX – SOLUTIONS - MÉTHODOLOGIE
  • 2. AGENDA 1 Constat : La grande fragmentation 2 Comment s’armer face à tous ses écrans 3 Les enjeux design et conception 4 La méthodologie 5 Les enjeux techniques du responsive 6 Le choix du responsive 7 Conclusion
  • 3. LE PAYSAGE DU WEB A CHANGÉ
  • 4. LES RAPPORTS DE FORCE ONT CHANGÉ EN 2 ANS 50 45 40 35 30 25 IE Chrome Firefox 20 Safari Opera 15 Other 10 5 0 statcounter.com
  • 5. LES RAPPORTS DE FORCE ONT CHANGÉ EN 2 ANS 50 45 40 Chrome 35 30 25 20 Internet Explorer IE Chrome Firefox Safari Opera 15 Other 10 5 0 statcounter.com
  • 6. LE TRAFIC SMARTPHONE PRESQUE DOUBLÉ EN 1 AN 20% 18% 16% 14% 12% 10% 8% Mobile 6% 4% 2% 0% statcounter.com
  • 7. LE TRAFIC SMARTPHONE PRESQUE DOUBLÉ EN 1 AN 20% 18% 16% 14% On peut anticiper que la part de marché du 12% smartphone mondial va passer les 20% en fin 10% d’année 8% Mobile 6% 4% 2% 0% statcounter.com
  • 8. Hier encore, Le marché tournait autour de 3 résolutions principales : • • • UN ORDINATEUR, UN IPHONE, UN IPAD …
  • 9. APPLE ET SON ÉCRAN RETINA a lancé la course au dpi* et à la finesse des écrans LE NOMBRE DE RÉSOLUTIONS SE VOIT DONC MULTIPLIÉ *Dot Per Inch
  • 10. APPLE LANCE LA COURSE AU DPI : LE RETINA iPad iPad Retina
  • 12. 2012 – 2013 Le nombre de terminaux Android a progressé de façon incontestable
  • 13. ANDROID DÉPASSE IOS AU NIVEAU MONDIAL 45 40 35 30 Android 25 iOS Nokia/ Symbian 20 Samsung 15 10 JUILLET 2012 BlackBerry OS Autre Sony Ericsson 5 0 statcounter.com
  • 14. UN NOMBRE DE TERMINAUX CONSIDÉRABLE EST SOUS ANDROID opensignalmaps
  • 15. ET UN NOMBRE DE RÉSOLUTIONS AD-HOC 231 RÉSOLUTIONS opensignalmaps
  • 16. DE NOUVEAUX FORMATS SONT APPARUS Ils redéfinissent les catégories existantes de terminaux.
  • 17. LA « PHABLET » : EST-CE UNE TABLETTE? UN SMARTPHONE?
  • 18. PEU IMPORTE ! Désormais, On ne doit plus catégoriser ni parler de résolution, on doit penser en TAILLES D’ÉCRANS
  • 19. LA PERFORMANCE DES SMARTPHONES AU CŒUR DU SUJET Firefox OS • Bon support HTML5 • Petit écran • Petit processeur Samsung Galaxy Y • Android 2.3 – 2011 • Petit écran
  • 20. La durée de vie et la qualité des terminaux sont très aléatoires ! Rien ne nous informe sur les mises à jours de certains terminaux, Android 2.3 datant de 2010 équipe encore 30% des smartphonesAndroid du marché
  • 21. Le paysage du WEB en 2015 …?
  • 25. DES ÉCRANS PARTOUT, TOUT LE TEMPS
  • 26. LA SEULE CHOSE DONT ON PEUT ÊTRE SÛR. IL Y A LE WEB SMARTPHONES TABLETTE DESKTOP TÉLÉ ETC … Et on devra traiter la plupart des supports de la même façon.
  • 27. QUELLES SONT NOS ARMES ?
  • 28. CHANGER NOTRE MODE DE SUPPORT DU SUPPORT NAVIGATEUR AU SUPPORT FORMAT Le support navigateur, c’est faire en sorte que le code s’adapte au browser Le support format, c’est faire en sorte que le browser sélectionne la partie du code qui lui est adressée
  • 29. UN NOUVEAU PATTERN DE CONCEPTION Un consensus sur un pattern de conception a été trouvé : LE RESPONSIVE WEB DESIGN Design Fluide RWD Taille de texte adaptée Réorganisation du layout Un fonctionnement par paliers de tailles d’écrans
  • 30. « ANCIENS SUPPORTS » LE POINT COMMUN ENTRE : • Internet Explorer 7-8 • Android 2.3 • iOS < 5 Des navigateurs archaïques, mais qu’on doit supporter car ils représentent encore une grosse part du marché. Mais COMMENT ?
  • 31. AMÉLIORATION PROGRESSIVE Développer en respectant les standards W3C 1 Certaines fonctionnalités des nouveaux navigateurs seront 2 simulées sur les plus anciens (ex : Flash pour balise Vidéo, Javascript pour les animations,…) Certaines subtilités graphiques ou motion ne seront pas présentes (coins arrondis, motion, text-shadows,…) Une expérience optimale pour les derniers navigateurs et les mobiles performants Une expérience fonctionnelle pour les autres Un fonctionnement par paliers de fonctionnalités
  • 32. UN SUPPORT PAR PALIERS IL S’AGIT DE DÉFINIR DES PALIERS : • de tailles d’écrans • de fonctionnalités Les paliers sont liés à la technicité du sujet. Voici un exemple sur un site présentant beaucoup de motion
  • 33. UN EXEMPLE DE SUPPORT PAR PALIERS
  • 34. TECHNIQUEMENT ? Comment détecter les paliers techniquement : Paliers fonctionnels : • Modernizr (Librairie JS permettant de détecter les nouvelles fonctionnalités JS) • Détection du User-Agent (dernier recours) Si on souhaite baisser intentionnellement le fonctionnel (ex: les animations sur Android 2.3 qui les supporte mais mal ) Gestion des évènements spécifiques à certains support Paliers de résolutions : • CSS Media-queries (nouveauté CSS3 implémentée par les derniers browsers) Les anciens browsers (desktop) n’ont pas besoin de supporter ces résolutions et bénéficieront d’une CSS par défaut
  • 37. LE LANGAGE DU RESPONSIVE On définie donc des paliers sur lesquels on va appliquer des layouts* de présentation Small Medium Large X-large *gabarits
  • 38. DIFFÉRENTS LAYOUT MOSTLY FLUID COLUMN DROP LAYOUT SHIFTER OFF CANVAS source lukew
  • 39. L’ABSENCE DE DESIGN STATIQUE Les techniques de Design ont évolué : • On peut définir le palier minimum et le palier maximum • On crée des éléments plus que des mises en pages • On passe d’un design statique à une maquette HTML vivante Le RWD est en opposition avec le principe de pixel perfect
  • 40. LA NAVIGATION La stratégie de navigation reste un choix important. Plusieurs pattern existent avec leurs avantages et inconvénients. 1/ Volet Pour • • • Espace Design Pattern Facebook Contre • • Confusant Compatibilité
  • 41. LA NAVIGATION La stratégie de navigation reste un choix important. Plusieurs pattern existent avec leurs avantages et inconvénients. 2/ Bascule Pour • • • Contexte Design Compatibilité Contre • • Javascript Performance
  • 42. LA NAVIGATION La stratégie de navigation reste un choix important. Plusieurs pattern existent avec leurs avantages et inconvénients. 3/ Liste de sélection Pour • • • Espace Identifiable Compatibilité Contre • • • Design Confusant Javascript
  • 44. LE RESPONSIVE IMPLIQUE UNE MÉTHODOLOGIE ADAPTÉE Les différents enjeux du Responsive Web Design impliquent une phase de conception importante. Ceci afin de pérenniser la réflexion et d’anticiper au mieux les prochaines innovations, sans sacrifier le fonctionnel et l’utilisateur final. Elle permettra d’analyser le besoin exact, de prioriser les éléments à afficher ou non sur les différents périphériques ou encore de déterminer quel « layout » RWD adopter. Cette conception peut se répartir de la manière suivante : DÉFINITION DE L’ARCHITECTURE RESPONSIVE ET L’ADAPTABILITÉ IDENTIFICATION DES IMPACTS TECHNIQUES PROTOTYPAGE TESTS UTILISATEURS
  • 45. MÉTHODOLOGIE PROJET DÉFINITION DE L’ARCHITECTURE RESPONSIVE ET L’ADAPTABILITÉ Etude des usages sur les différents L devices L WS Analyse du parcours utilisateur Priorisation fonctionnelle Segmentation marketing cibles AX L benchmark, CRM Matérialisation des parcours client et L personae L Périmètre fonctionnel et éditorial IDENTIFICATION DES IMPACTS TECHNIQUES PROTOTYPAGE TESTS UTILISATEURS Impacts techniques avec le back & le WS CMS client Analyse de la pertinence du contenus selon le WS contexte Test sur prototype cliquable WS Impact SEO Wireframes des fonctionnalités adaptées Analyse des résultats et adaptations L L Impact Analytics Modélisation des différents L patterns, mobile first Impact tracking Développement d’un prototype HTML L L L WS L livrables WS workshops
  • 46. MÉTHODOLOGIE PROJET UNE ÉQUIPE MODULAIRE DÉDIÉE AUX EXPÉRIENCES MULTIPLES, TRAVAILLANT DE FAÇON COLLABORATIVE Product Owner Chef de projet Développeurs front Consultant UX Directeur Artistique Creative Technologist Expert Analytics Expert Mobile Développeurs back
  • 48. PROCESSUS DE VALIDATION GRAPHIQUE La validation des croquis puis du prototype aboutit à des PSD MAQUETTES PSD PROTO HTML CROQUIS Pour correspondre au cycle actuel
  • 49. PROCESSUS DE VALIDATION GRAPHIQUE On peut imaginer un processus itératif. C’est ce vers quoi l’industrie tend. CROQUIS PROTO HTML Binôme :  Créatif  Développeur PSD
  • 50. CONCEPTION : ONE MORE THING ? Il faut bien choisir sa cible • Smartphone ≠ Smartphone, un iPhone 4 ne doit pas être traité comme un Galaxy S4. • Un projet responsive est un projet web, les smartphones anciens ne peuvent pas suivre malgré toutes les optimisations Les formats évoluent, il vaut mieux ne pas trop figer ses paliers de rendu. • L’apparition des phablets ou du 5S et son écran allongé démontrent qu’il faut rester ouvert à la variation des points de ruptures au cours du projet. • Ex: iPhone 5 en mode paysage
  • 53. LES MÉDIAS LE PRINCIPAL ENJEU DES MEDIAS : ADRESSER LES BONNES IMAGES 1ÈRE SOLUTION / UTILISER LE USER-AGENT (BROWSER SNIFFING) La liste de user-agents ou la base de donnée sera-t-elle toujours à jour ? Pouvons-nous penser que un device = une taille d’écran ? Fonctionnalité Galaxy & bientôt Android : split view Les tablettes chinoises qui masquent leur user agent  Les tablettes Windows 8, les laptops win7/ win8 Les technologies de déportation d’écran : Airplay, Allshare, Smartglass, ..
  • 54. LES MÉDIAS LE PRINCIPAL ENJEU DES MEDIAS : ADRESSER LES BONNES IMAGES 1ÈRE SOLUTION / UTILISER LE USER-AGENT (BROWSER SNIFFING) La liste de user-agents ou la base de donnée sera-t-elle toujours à jour ? Seul le client connaît sa résolution au moment de son usage Pouvons-nous penser que un device = une taille d’écran ? ! Fonctionnalité Galaxy & bientôt Android : split view Les tablettes chinoises qui masquent leur user agent  Les tablettes Windows 8, les laptops win7/ win8 Les technologies de déportation d’écran : Airplay, Allshare, Smartglass, ..
  • 55. LES IMAGES, LE VRAI CHALLENGE DU FLUIDE RÉSOLUTION ECRAN QUALITÉ DE L’IMAGE Laptop en fibre Télévision 4k en bas débit Galaxy Note 2 en 4g Netbook en wifi Windows surface en 3g Iphone 5 en edge BANDE PASSANTE
  • 56. LES IMAGES, LE VRAI CHALLENGE DU FLUIDE RÉSOLUTION ECRAN QUALITÉ DE L’IMAGE Laptop en fibre Télévision 4k en bas débit Galaxy Note 2 en 4g ! Résolutions d’écrans & capacité réseau ne sont désormais plus liés Netbook en wifi Windows surface en 3g Iphone 5 en edge BANDE PASSANTE
  • 57. LES POINTS D’ACTION Deux problématiques à travailler : 1 LA BONNE IMAGE PAR DEVICE 2 Utilisation native de l’api w3c network information asap 1 LE CHARGEMENT Mise en place d’un polyfill de détection de bande passante Participation à la réflexion w3c autour de l’implémentation de la balise picture et d’autres solutions 2 Support du RETINA par le pattern 2x 3 Pas de double hit de téléchargement
  • 58. SÉLECTION DE LA BONNE IMAGE Le w3c et ses participants évoquent trois pistes encore à l’état de brouillon PICTURE ELEMENT SRC SET SRC N CLIENTS HINT
  • 59. NOS ORIENTATIONS À DATE PICTURE ELEMENT SRC SET SRC N CLIENTS HINT Aucune solution n’est implémentée par les navigateurs pour le moment. Il s’agit de trouver celle qui paraît la plus pertinente et d’utiliser/réaliser un polyfill. Les contraintes habituelles doivent être respectées SEO ACCESSIBILITÉ PERFORMANCE Pour le moment nous avons testé et éprouvé sur nos projets la solution « picture element » qui nous a donné satisfaction. Mais la communauté s’engage de plus en plus sur la solution src N
  • 60. LES VIDÉOS L’utilisation de la balise HTML5 vidéo induit un nombre conséquent de types de sources. Navigateur / Device Formats Vidéo Encodage Audio Chrome MP4*, WebM AAC, MP3, Vorbis Firefox MP4, WebM AAC, MP3, Vorbis Internet Explorer 9+ MP4 AAC, MP3 Safari MP4 AAC, MP3 iOS MP4 AAC, MP3 Android MP4 AAC, MP3 Opéra WebM Vorbis * Chrome a annoncé qu’ils allait arrêter le support du MP4 mais ne l’ont jamais fait
  • 61. LES VIDÉOS DES PLATEFORMES existent et adressent déjà les différents écrans. C’est à ces plateformes d’adresser les problématiques de mobilité liées aux différences de formats et à la bande passante
  • 62. PERFORMANCE L’ENJEU MAJEUR EST D’ARRIVER À : • Un site en responsive web design mais qui prend en compte les exigences du public mobile • Une vitesse de chargement des pages exemplaire • Un ressenti utilisateur idéal LA PERFORMANCE WEB EST AU CŒUR D’UNE BONNE EXPÉRIENCE UTILISATEUR
  • 63. PERFORMANCE Viewport Optimiser ce que l’utilisateur voit : • LazyLoad des images au scroll • Chargement des blocs à la volée Un kit HTML, JS, CSS léger Les blocs sont non visibles, donc inactifs et les images ne sont pas chargées et adapté au mobile Ne pas hésiter à abaisser le rendu des devices lents Compresser les scripts COMPRESSER LES IMAGES
  • 64. PERFORMANCE, KPI DES INDICATEURS TECHNIQUES CLÉS DE PERFORMANCE Start Render (time to glass) Le moment précis où la page commence à s’afficher et le contenu texte est disponible. Page Load Moment où la page et ses contenus sont entièrement chargés (tous les scripts et toutes les images) Il vaut mieux privilégier l’optimisation du start-render qui permet d’offrir une performance ressentie optimale à l’utilisateur. Au cours de la navigation les autres éléments se chargent.
  • 65. DES PARCOURS ADAPTÉS Les medias-queries adaptent la forme, pas le fonctionnel EX Un tunnel d’achat sur smartphone ne doit pas avoir les mêmes champs et les mêmes étapes que sur ordinateur IL S’AGIT DONC D’ADAPTER LE PARCOURS AU DEVICE RESS / RESPONSIVE & SERVER-SIDE COMPONENTS
  • 67. LA CONTRIBUTION Les outils de contribution, CMS, doivent s’adapter au responsive web design : LE CMS DOIT PERMETTRE • D’adresser des visuels adaptés à chacun des écrans • De les redimensionner • De gérer les vidéos provenant de plateformes externes • De gérer les différences fonctionnelles • D’adapter le contenu • De visualiser sur les différents formats
  • 68. UN PETIT MOT SUR LE SEO Que pense Google du responsive web design ? https://developers.google.com/webmasters/smartphone-sites/
  • 70. LA RECETTE C’EST ÇA CHEZ EKINO…
  • 71. LA RECETTE CÔTÉ DEV AUTOMATISER pour éviter les régressions Mettre en place une couverture de tests unitaires côté JS/CSS • Karma & Jasmine Mettre des tests de navigation • PhantomJS + Casper • Sélénium Automatiser les tests de rendu multi device : • testSwarm
  • 72. LES OUTILS DU CHEF DE PROJET  Des « bookmarklets » responsive • Resizer • Etc…  Un outil permettant de forcer le User-Agent • Chrome tools • Plugins firefox  Les simulateurs • Android (installer le SDK) • iOS (être sous Mac OSX et installer Xcode)  Des machines virtuelles • VirtualBox + Modern.ie (une bonne solution gratuite et cross OS) DES SMARTPHONES, pour les tests finaux • Rien ne remplace le test sur mobile, notamment pour juger de la performance et des problématiques spécifique à l’accélération 3D ou aux évènements
  • 73. LE CHOIX DU RESPONSIVE
  • 74. UN SITE RESPONSIVE OU ADAPTIVE ? RESPONSIVE WEB DESIGN Le contenu est fluide et réagit pour s’adapter à n’importe quelle taille d’écran et type de format.
  • 75. UN SITE RESPONSIVE OU ADAPTIVE ? ADAPTIVE WEB DESIGN Le contenu va être modifié selon des formats et types d’écrans prédéfinis.
  • 76. IL FAUT PENSER À L’USAGE “ La première chose que vous devez faire est d’oublier les buzzwords et autre jargon et vous concentrer sur les besoins réels de votre entreprise. Christina Warren http://mashable.com/2013/08/06/responsive-vs-native-app/
  • 77. UN SITE RESPONSIVE OU ADAPTIVE ? Le responsive, ce n’est pas qu’adapter du contenu à un écran mobile Un site mobile nécessitant un fonctionnel particulièrement différent de celui présent sur le site desktop ne devrait pas être en RWD • Géolocalisation Un site très lourd de type RIA ne devrait pas se retrouver tel quel sur mobile • Facebook • Gmail Un site dont le contenu doit être adapté au support ne se prête pas au RWD • Ligne éditoriale spécifique au mobile
  • 78. DU FLUIDE POUR LE SMARTPHONE Ne pas faire de responsive ne signifie pas pour autant un layout fixe. ≠ Un site mobile doit être adapté à tous les mobiles et orientations et utilisera donc certains aspects du package « responsive » • Medias-queries pour adapter polices et organisation du layout • Layout fluide pour gérer les différences de formats entre mobile (Galaxy S4 vs. Note 3 vs. iPhone 5s etc… • Adaptives images pour offrir l’image optimale par support
  • 80. POUR RÉSUMER 1 Le responsive n’est pas un raccourci 2 Ce n’est pas une technologie, c’est une méthodologie et des avancées techniques 3 Il implique une grosse phase de conception 4 Il a des enjeux techniques, qui sont parfois insolubles 5 Il doit être implémenté sur un projet en toutes connaissances de cause 6 RESS semble être un bon compromis pour permettre des parcours fonctionnels idéaux partout
  • 81. MERCI ! Ekino 157, rue Anatole France 92300 Levallois-Perret @3k1n0 @NewsDuFront www.ekino.com