Responsive design, pourquoi et comment y aller ?
RESPONSIVE WEBDESIGN
Pourquoi et comment y aller ?
Responsive design, pourquoi et comment y aller ?
ads-COM en 3 mots
Responsive design, pourquoi et comment y aller ?
NOS MÉTIERS
COMMUNICATION DIGITALE
• contenu
• design
• webmarketing
DÉVE...
Responsive design, pourquoi et comment y aller ?
ADS-COM EN 3 MOTS / HISTORIQUE & EQUIPE
HISTORIQUE
& ACTIVITÉ
• Création ...
Responsive design, pourquoi et comment y aller ?
Responsive design,
oui mais pourquoi ?
 La mobilité en quelques chiffres...
Responsive design, pourquoi et comment y aller ?
La mobilité en quelques chiffres
Responsive design, pourquoi et comment y aller ?
Le marketing mobile et l’accès au site quel que soit le terminal de conne...
Responsive design, pourquoi et comment y aller ?
LA MOBILITÉ EN FRANCE
LA MOBILITÉ EN QUELQUES CHIFFRES / LA MOBILITÉ EN F...
Responsive design, pourquoi et comment y aller ?
LA MOBILITÉ EN QUELQUES CHIFFRES / BTOC ET BTOB
LA MOBILITÉ, À TOUT ÂGE ?...
Responsive design, pourquoi et comment y aller ?
LA MOBILITÉ EN QUELQUES CHIFFRES / TABLETTES
LE BOOM DES TABLETTES
0
10
2...
Responsive design, pourquoi et comment y aller ?
LA MOBILITÉ EN QUELQUES CHIFFRES / BTOC ET BTOB
SITE GRAND PUBLIC SITE BT...
Responsive design, pourquoi et comment y aller ?
LA MOBILITÉ EN QUELQUES CHIFFRES / LES USAGES
90% DES UTILISATEURS GARDEN...
Responsive design, pourquoi et comment y aller ?
LA MOBILITÉ EN QUELQUES CHIFFRES / L’EXPÉRIENCE UTILISATEUR
L’EXPÉRIENCE ...
Responsive design, pourquoi et comment y aller ?
LES GRANDS PRINCIPES / COMMENT CA MARCHE
QU’EST CE QUE LE RESPONSIVE DESI...
Responsive design, pourquoi et comment y aller ?
Le responsive design par l’exemple
Responsive design, pourquoi et comment y aller ?
Un exemple de site non responsive design : www.larep.fr
Responsive design, pourquoi et comment y aller ?
http://www.zdnet.fr/
Responsive design, pourquoi et comment y aller ?
http://www.elysee.fr/
Responsive design, pourquoi et comment y aller ?
http://www.microsoft.com/
Responsive design, pourquoi et comment y aller ?
http://bebloom.com/
Responsive design, pourquoi et comment y aller ?
http://www.costic.com/
Responsive design, pourquoi et comment y aller ?
http://www.hoteldelabeille.com/
Responsive design, pourquoi et comment y aller ?
Le responsive design, les grands principes
Responsive design, pourquoi et comment y aller ?
UN CONTENU WEB EST LIQUIDE
VERSEZ-LE DANS UNE TASSE, IL DEVIENT LA TASSE
...
Responsive design, pourquoi et comment y aller ?
LES GRANDS PRINCIPES / LES POINTS DE RUPTURE
L’ART DE LA RUPTURE
Techniqu...
Responsive design, pourquoi et comment y aller ?
LES GRANDS PRINCIPES / COMMENT CA MARCHE
LE RESPONSIVE DESIGN, COMMENT ÇA...
Responsive design, pourquoi et comment y aller ?
LE RESPONSIVE DESIGN EN 2 MOTS / RESPONSIVE DÉGRADATION
RESPONSIVE DEGRAD...
Responsive design, pourquoi et comment y aller ?
LE RESPONSIVE DESIGN EN 2 MOTS / MOBILE FIRST
L’APPROCHE MOBILE FIRST
La ...
Responsive design, pourquoi et comment y aller ?
Avantages et inconvénients
Responsive design, pourquoi et comment y aller ?
Bénéfices pour l’internaute
• Une navigation adaptée reprenant les contrô...
Responsive design, pourquoi et comment y aller ?
Bénéfices pour le propriétaire du site
• Une audience plus vaste
• De mei...
Responsive design, pourquoi et comment y aller ?
LES INCONVÉNIENTS
• Les temps de téléchargement peuvent être plus longs
t...
Responsive design, pourquoi et comment y aller ?
LE RESPONSIVE DESIGN ET MOBILITÉ LA SEULE SOLUTION ?
En dehors du respons...
Responsive design, pourquoi et comment y aller ?
RESPONSIVE DESIGN VS SITE MOBILE & WEBAPP
LE RESPONSIVE DESIGN LES SITES ...
Responsive design, pourquoi et comment y aller ?
RESPONSIVE DESIGN VS APPLICATION MOBILE NATIVE
LE RESPONSIVE DESIGN LES S...
Responsive design, pourquoi et comment y aller ?
Responsive design, oui mais comment ?
Responsive design, pourquoi et comment y aller ?
METTRE EN ŒUVRE LE RWD / BOOTSTRAP
BOOTSTRAP, UN RESPONSIVE FACILITATEUR
...
Responsive design, pourquoi et comment y aller ?
METTRE EN ŒUVRE LE RWD / LES GRILLES
LES GRILLES
La base de Bootstrap,
ce...
Responsive design, pourquoi et comment y aller ?
METTRE EN ŒUVRE LE RWD / LES MENUS
LES MENUS
Les menus sont pensé pour s’...
Responsive design, pourquoi et comment y aller ?
METTRE EN ŒUVRE LE RWD / LES FORMULAIRES
DES FORMULAIRES
Les formulaires ...
Responsive design, pourquoi et comment y aller ?
METTRE EN ŒUVRE LE RWD / LES WIDGETS
DES COMPOSANTS PRÊTS À L’EMPLOI
– Ca...
Responsive design, pourquoi et comment y aller ?
Je réponds à vos questions
VOTRE CONTACT
PIERRE-ANTOINE VIALLON
Responsab...
Prochain SlideShare
Chargement dans…5
×

"Responsive Design" : Pourquoi et comment y aller ?

934 vues

Publié le

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

Publié dans : Mobile
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
934
Sur SlideShare
0
Issues des intégrations
0
Intégrations
7
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

"Responsive Design" : Pourquoi et comment y aller ?

  1. 1. Responsive design, pourquoi et comment y aller ? RESPONSIVE WEBDESIGN Pourquoi et comment y aller ?
  2. 2. Responsive design, pourquoi et comment y aller ? ads-COM en 3 mots
  3. 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. 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. 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. 6. Responsive design, pourquoi et comment y aller ? La mobilité en quelques chiffres
  7. 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. 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. 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. 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. 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. 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. 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. 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. 15. Responsive design, pourquoi et comment y aller ? Le responsive design par l’exemple
  16. 16. Responsive design, pourquoi et comment y aller ? Un exemple de site non responsive design : www.larep.fr
  17. 17. Responsive design, pourquoi et comment y aller ? http://www.zdnet.fr/
  18. 18. Responsive design, pourquoi et comment y aller ? http://www.elysee.fr/
  19. 19. Responsive design, pourquoi et comment y aller ? http://www.microsoft.com/
  20. 20. Responsive design, pourquoi et comment y aller ? http://bebloom.com/
  21. 21. Responsive design, pourquoi et comment y aller ? http://www.costic.com/
  22. 22. Responsive design, pourquoi et comment y aller ? http://www.hoteldelabeille.com/
  23. 23. Responsive design, pourquoi et comment y aller ? Le responsive design, les grands principes
  24. 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. 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. 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. 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. 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. 29. Responsive design, pourquoi et comment y aller ? Avantages et inconvénients
  30. 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. 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. 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. 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. 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. 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. 36. Responsive design, pourquoi et comment y aller ? Responsive design, oui mais comment ?
  37. 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. 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. 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. 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. 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. 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

×