Petit récapitulatif de la soirée Webschool Orléans du 17 mars 2015 à la CCI Loiret sur le thème du Responsive Design.

1. Responsive design, pourquoi et comment y aller ?
RESPONSIVE WEBDESIGN
Pourquoi et comment y aller ?

2. Responsive design, pourquoi et comment y aller ?
ads-COM en 3 mots

3. Responsive design, pourquoi et comment y aller ?
NOS MÉTIERS
COMMUNICATION DIGITALE
• contenu
• design
• webmarketing
DÉVELOPPEMENT WEB
• conception & programmation
• mobilité
• assistance technique
INFRASTRUCTURE & RÉSEAUX
• hébergement
• nom de domaine
• mails

4. Responsive design, pourquoi et comment y aller ?
ADS-COM EN 3 MOTS / HISTORIQUE & EQUIPE
HISTORIQUE
& ACTIVITÉ
• Création en 1997
• Web-agency/SSII
• 3 pôles :
• Communication digitale
• Développement web
• Infrastructure et réseau
HOMMES
& TECHNOLOGIES
• 20 collaborateurs
• Outillage webmarketing
• Technologies variées :
• CMS open source
• Mobilité
• Solutions e-commerce

5. Responsive design, pourquoi et comment y aller ?
Responsive design,
oui mais pourquoi ?
 La mobilité en quelques chiffres
 Le responsive design en 2 mots
 Le responsive design par l’exemple
 Les avantages
 Contraintes & limites
 Questions réponses
Responsive design,
oui mais comment ?
Atelier de sensibilisation à la mise en œuvre du
responsive design au travers d’un outil génial.

6. Responsive design, pourquoi et comment y aller ?
La mobilité en quelques chiffres

7. Responsive design, pourquoi et comment y aller ?
Le marketing mobile et l’accès au site quel que soit le terminal de connexion
devient un enjeu majeur de la communication digitale…
LA MOBILITÉ EN QUELQUES CHIFFRES / L’ÉVOLUTION
0
500
1000
1500
2000
2500
2007 2008 2009 2010 2011 2012 2013 2014 2015
Utilisateurs d’internet sur mobile et ordinateur de bureau
Utilisateurs ordinateur de bureau Utilisateurs internet mobile2
L’ÉVOLUTION DU MARKETING MOBILE

8. Responsive design, pourquoi et comment y aller ?
LA MOBILITÉ EN FRANCE
LA MOBILITÉ EN QUELQUES CHIFFRES / LA MOBILITÉ EN FRANCE
0
10
20
30
40
50
60
70
80
Ordinateur
portable
Smartphone Téléphone
portable
standard
Tablette Netbook Liseuse Phablette Montre
connectée
Traqueur
Fitness
Lunettes
intelligentes
Taux d’équipement
2012 2013 2014
Les français sont multi-équipés :
ils ont accès à 2,85 appareils en moyenne

9. Responsive design, pourquoi et comment y aller ?
LA MOBILITÉ EN QUELQUES CHIFFRES / BTOC ET BTOB
LA MOBILITÉ, À TOUT ÂGE ?
7%
18%
27%22%
19%
7%
Profil des mobinautes
65 ans et +
50-64 ans
35-49 ans
25-34 ans
18-24 ans
13-17 ans
Profil des mobinautes français. © Médiamétrie/Netratings

10. Responsive design, pourquoi et comment y aller ?
LA MOBILITÉ EN QUELQUES CHIFFRES / TABLETTES
LE BOOM DES TABLETTES
0
10
20
30
40
50
60
70
80
90
Q1
2012
Q1
2012
Q2
2012
Q3
2012
Q4
2012
Q1
2013
Q2
2013
Q3
2013
Q4
2013
Q1
2014
Q2
2014
Q3
2014
Q4
2014
Ventes mondiales de tablettes de 2012 à 2014
Millions d'unités
Source IDC – via ZDNet.fr/chiffres-cles

11. Responsive design, pourquoi et comment y aller ?
LA MOBILITÉ EN QUELQUES CHIFFRES / BTOC ET BTOB
SITE GRAND PUBLIC SITE BTOB
desktop
mobile
tablet
Enfin, les habitudes de navigation évoluent en fonction du type de site et
des publics cibles.

12. Responsive design, pourquoi et comment y aller ?
LA MOBILITÉ EN QUELQUES CHIFFRES / LES USAGES
90% DES UTILISATEURS GARDENT LEUR SMARTPHONE SUR EUX 24H/24H
• Le mobile (web mobile et applis) est un canal privilégié…
• 24h/24h près de soi – 17h/24h allumé
• Plus personnel et précieux qu’un porte-monnaie
• Connecté en continu et utilisé n’importe où et n’importe quand
• …largement adopté
• 20 millions d’utilisateurs actifs en France dont 35 à 50% de quotidiens
• et spécifique
• Répondant à des besoins et usages différents du web classique

13. Responsive design, pourquoi et comment y aller ?
LA MOBILITÉ EN QUELQUES CHIFFRES / L’EXPÉRIENCE UTILISATEUR
L’EXPÉRIENCE UTILISATEUR
50% globalement insatisfaits de leur expérience Internet sur mobile :
• Pour 38% le site ne répond pas à leurs attentes ou est mal adapté au mobile
• Pour 18% le site ne fonctionne pas
• Pour 15% il est trop lent
• Pour 13% le site mobile n’existe pas
Pourtant, les mobinautes sont généralement moins exigeants…..

14. Responsive design, pourquoi et comment y aller ?
LES GRANDS PRINCIPES / COMMENT CA MARCHE
QU’EST CE QUE LE RESPONSIVE DESIGN ?
Ce sont des techniques et technologies pour adapter un site de manière optimale au
terminal utilisé.
L’internaute peut ainsi consulter un site web avec le même confort visuel sans utiliser
le défilement horizontal ou le zoom avant/arrière.
Attention de ne pas confondre responsive design et design liquide !
Design liquide Responsive design

15. Responsive design, pourquoi et comment y aller ?
Le responsive design par l’exemple

16. Responsive design, pourquoi et comment y aller ?
Un exemple de site non responsive design : www.larep.fr

17. Responsive design, pourquoi et comment y aller ?
http://www.zdnet.fr/

18. Responsive design, pourquoi et comment y aller ?
http://www.elysee.fr/

19. Responsive design, pourquoi et comment y aller ?
http://www.microsoft.com/

20. Responsive design, pourquoi et comment y aller ?
http://bebloom.com/

21. Responsive design, pourquoi et comment y aller ?
http://www.costic.com/

22. Responsive design, pourquoi et comment y aller ?
http://www.hoteldelabeille.com/

23. Responsive design, pourquoi et comment y aller ?
Le responsive design, les grands principes

24. Responsive design, pourquoi et comment y aller ?
UN CONTENU WEB EST LIQUIDE
VERSEZ-LE DANS UNE TASSE, IL DEVIENT LA TASSE
VERSEZ-LE DANS UNE THÉIÈRE, IL DEVIENT LA THÉIÈRE
VERSEZ-LE DANS UNE BOUTEILLE, IL DEVIENT LA BOUTEILLE

25. Responsive design, pourquoi et comment y aller ?
LES GRANDS PRINCIPES / LES POINTS DE RUPTURE
L’ART DE LA RUPTURE
Techniquement, le Responsive Design se base sur des breakpoints,
points de rupture en français qui correspondent aux résolutions d’écran.
≥1200PX ≥ 992PX ≥768PX ≤768PX
Ordinateur
Écran large
-
Télé connectée
Tablette
paysage
-
Petit ordinateur
Tablette
portrait
Fablette
-
Smartphone
paysage
Smartphone
portrait

26. Responsive design, pourquoi et comment y aller ?
LES GRANDS PRINCIPES / COMMENT CA MARCHE
LE RESPONSIVE DESIGN, COMMENT ÇA MARCHE ?
En responsive design, la page en tant que telle reste la même. Ce qui évoluent, ce sont
les feuilles de style (CSS) qui gèrent la mise en page.
Pour cela, on utilise les media-queries (norme CSS3).
Les média-queries permettent de spécifier des règles d’affichage propre à chaque
périphérique de consultation :
écran, imprimante, projecteur… Mais aussi propre à chaque résolution d’écran.

27. Responsive design, pourquoi et comment y aller ?
LE RESPONSIVE DESIGN EN 2 MOTS / RESPONSIVE DÉGRADATION
RESPONSIVE DEGRADATION
La Responsive degradation est la première manière de mettre en œuvre le
Responsive Design.
Cela consiste à conserver l’ergonomie du site sur écran large et à masquer
progressivement les éléments sur les écrans plus petits.

28. Responsive design, pourquoi et comment y aller ?
LE RESPONSIVE DESIGN EN 2 MOTS / MOBILE FIRST
L’APPROCHE MOBILE FIRST
La conception Mobile-first, c’est d’abord penser un site web pour les mobiles.
Le principe : se focaliser d’abord sur les contenus et services primordiaux.
Ces éléments se verront enrichis sur les terminaux grands.

29. Responsive design, pourquoi et comment y aller ?
Avantages et inconvénients

30. Responsive design, pourquoi et comment y aller ?
Bénéfices pour l’internaute
• Une navigation adaptée reprenant les contrôles classiques des différents
terminaux
• L’utilisateur n’a pas à utiliser les fonctions de zoom
• Le site s’ajuste à n’importe quel écran
• Accessibilité : Aucune application tierce à télécharger
• Liens externe : une adresse de page unique pour les liens entrants
• Réseaux sociaux : une seule adresse pour les partages, « likes », « tweets »
AVANTAGES ET INCONVÉNIENT / POUR L’INTERNAUTE

31. Responsive design, pourquoi et comment y aller ?
Bénéfices pour le propriétaire du site
• Une audience plus vaste
• De meilleurs taux de conversion
• Un site mieux référencés sur les moteurs de recherche, Google en tête
• Des campagnes webmarketing plus simples à gérer
• Un seul site : des frais de création et de maintenance optimisées
• Des mesures d’audience simplifiées
• Pouvoir aller plus simplement vers des sites accessibles en mode déconnecté
AVANTAGES ET INCONVÉNIENT / POUR L’ANNONCEUR

32. Responsive design, pourquoi et comment y aller ?
LES INCONVÉNIENTS
• Les temps de téléchargement peuvent être plus longs
tout particulièrement pour les images
• Les phases de maquettage
demandent plus de temps et un meilleurs connaissance du média
• Le développement est plus complexe
et demandent une plus grande expertise : HTML5, CSS3, Javascript
• Les tests
doivent être réalisés sur l’ensemble des terminaux
• Plus contraignant
d’un point de vue créativité car chaque bloc de l’écran est modulable
Pour palier à cela des solutions émergent comme le RESS qui consiste à envoyer des
fragments de la page web en fonction des différents navigateurs web utilisés.
AVANTAGES ET INCONVÉNIENT / LES CONTRAINTES

33. Responsive design, pourquoi et comment y aller ?
LE RESPONSIVE DESIGN ET MOBILITÉ LA SEULE SOLUTION ?
En dehors du responsive design, d’autres solutions permettent de répondre au
besoin de mobilité :
• Les application mobiles natives
• Les site mobiles
• Les webapp
Avec le temps, les sites mobiles et les webapp tendent à se rejoindre tant d’un
point de vue fonctionnelle que technique.
AVANTAGES ET INCONVÉNIENT / LES CONTRAINTES

34. Responsive design, pourquoi et comment y aller ?
RESPONSIVE DESIGN VS SITE MOBILE & WEBAPP
LE RESPONSIVE DESIGN LES SITES MOBILES
+
Une maintenance plus simple Totalement adaptés aux interfaces mobiles
Un retour sur investissement plus intéressant
L’expérience utilisateur peut être beaucoup plus
poussée
Des adresses de page unique Rapide à charger
D’avantage optimisé pour le référencement
naturel
Dédiés aux petits écrans
-
Le temps de téléchargement est long
La maintenance du site web mobile est séparée de
la maintenance du site classique
L’ergonomie doit être penser pour l’ensemble des
breackpoints
Le coût est plus élevé
Demande d’avantage de compétences techniques Le temps de développement est plus long
Une phase de test bien plus conséquente Une mise à jour régulière des devices est à prévoir
La créativité est plus limitée
LE RESPONSIVE DESIGN, LA BONNE SOLUTION ?

35. Responsive design, pourquoi et comment y aller ?
RESPONSIVE DESIGN VS APPLICATION MOBILE NATIVE
LE RESPONSIVE DESIGN LES SITES MOBILES
+
Une accessibilité plus simple Dédiés aux petits écrans
Des mises à jour facilité
Interaction sans commune mesure, comme les
jeux, les applications sportives…
Des technologies beaucoup plus répandues
Déjà installé sur le terminal, donc presque aucun
temps de téléchargement
Des coûts de développement moindre Push d’information très utiles
Disponible sur les store : AppStore, GooglePlay
-
Le temps de téléchargement est long.
La maintenance d’une application plus complexe :
compilation de l’application, dépôt sur les stores
Une expérience utilisateur potentiellement moins
riche
Le développement est plus complexe
Non accessible en mode déconnecté
La mise à jour du système d’exploitation peut
rendre l’application inopérante
LE RESPONSIVE DESIGN, LA BONNE SOLUTION ?

36. Responsive design, pourquoi et comment y aller ?
Responsive design, oui mais comment ?

37. Responsive design, pourquoi et comment y aller ?
METTRE EN ŒUVRE LE RWD / BOOTSTRAP
BOOTSTRAP, UN RESPONSIVE FACILITATEUR
Pour faciliter la mise en œuvre du responsive design, des cadres de
développement existent. Parmi ces cadres de travail, le framework
Bootstrap tient le haut du pavé.
Développé par les équipes de Twitter puis diffusé en Open Source, ce framework :
• Garantit la compatibilité multi-navigateur
• Intègre nativement le responsive design avec une approche « mobile first »
• Permet de gagner du temps en termes d’intégration technique
• Facilite les interventions de maintenance
• Donne accès à de nombreux widgetd HTML/JS : slideshow, menus, accordéon, base
d’icones, alerte infobulles…

38. Responsive design, pourquoi et comment y aller ?
METTRE EN ŒUVRE LE RWD / LES GRILLES
LES GRILLES
La base de Bootstrap,
ce sont le grilles.
Ces grilles subdivise la page en
12 colonnes.
En fonction de la résolution de
l’écran les blocs de contenus
vont occuper entre 1 et 12
colonnes

39. Responsive design, pourquoi et comment y aller ?
METTRE EN ŒUVRE LE RWD / LES MENUS
LES MENUS
Les menus sont pensé pour s’afficher de manière optimal quelque soit la résolution de
l’écran.

40. Responsive design, pourquoi et comment y aller ?
METTRE EN ŒUVRE LE RWD / LES FORMULAIRES
DES FORMULAIRES
Les formulaires causent souvent des difficultés sur smartphone.
Avec Bootstrap il sont tout particulièrement optimisé pour les mobinautes.

41. Responsive design, pourquoi et comment y aller ?
METTRE EN ŒUVRE LE RWD / LES WIDGETS
DES COMPOSANTS PRÊTS À L’EMPLOI
– Carrousels
– Menu en accordéon
– Infobulles
– Fenêtre modale
– Banque d’icones
– Boutons
– Menus de navigation
– Fil d’Ariane
– Pagination
– Labels
– Badges
– Galerie d’image
– Alertes

42. Responsive design, pourquoi et comment y aller ?
Je réponds à vos questions
VOTRE CONTACT
PIERRE-ANTOINE VIALLON
Responsable pôle communication
+33 (0)2 38 21 55 21
pierre-antoine.viallon@ads-com.fr
42