LE RESPONSIVE WEBDESIGN : VOTRE VISIBILITÉ WEB OPTIMALE SUR TOUS LES SUPPORTS MOBILES D'AUJOURD'HUI ET DE DEMAIN

2,464 views
2,320 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,464
On SlideShare
0
From Embeds
0
Number of Embeds
602
Actions
Shares
0
Downloads
24
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

LE RESPONSIVE WEBDESIGN : VOTRE VISIBILITÉ WEB OPTIMALE SUR TOUS LES SUPPORTS MOBILES D'AUJOURD'HUI ET DE DEMAIN

  1. 1. Kaliop Laisser ce bloc vide LE RESPONSIVE WEB DESIGN Votre visibilité web optimale sur tous les supports mobiles d’aujourd’hui et de demain
  2. 2. Quelques chiffres Laisser ce bloc videEn 2013 Les mobiles génèreront plus de visites que les ordinateurs
  3. 3. Contexte Laisser ce bloc vide 800x1280 768x1024 mobilité 1024x1280 1080x1920 social Rapidité média RÉSOLUTIONS USAGES SUPPORTS ORIENTATIONS ordinateur TV Mini PC Tablette portrait paysage mobile
  4. 4. Contexte Laisser ce bloc videET DEMAIN ? 1680x1050 1280x810 1024x768 768x1024 1024x768 480x320 320x480 Smartphone Tablette Netbooks Desktop TV
  5. 5. Problématique Laisser ce bloc videPREMIÈRE SOLUTION :Développer autant de site que de supports dutilisation "cible" Version Version Version Version haute basse Smartpho tablette résolution résolution ne Quels seront les  formats STOPER L’EMMORAGIE ET de demain ??? REPENSER SA STRATEGIE
  6. 6. Le principe Laisser ce bloc vide Le Responsive Web Design (RWD) est un ensemble de principes/méthodes permettant de rendre un site web adaptable à chaque terminal afin dapporter la meilleure expérience utilisateur, quel que soit le contexte de visualisation.
  7. 7. Le principe Laisser ce bloc vide Utiliser une grille ergonomique flexible Avoir des médias flexibles Le contenu s’adapte à la taille de l’écran
  8. 8. Le principe Laisser ce bloc vide
  9. 9. Le principe Laisser ce bloc vide Les mêmes contenus sur lensemble des supports Une seule adresse pour tous les supports Un seul code à maintenir et tester
  10. 10. Kaliop.fr Laisser ce bloc vide
  11. 11. Projets réalisés Laisser ce bloc vide Saint-Etienne Tourisme
  12. 12. Projets réalisés Laisser ce bloc vide Espace Sentein
  13. 13. Projets réalisés Laisser ce bloc vide Ordre des Experts-Comptables
  14. 14. Bientôt… Laisser ce bloc vide
  15. 15. Quel impact ? Laisser ce bloc vide Il faut travailler en amont sur :  Conception éditoriale : tous les contenus accessibles sur tous les supports  Conception ergonomique : une interface qui s’adapte en temps réel et qui utilise les boutons d’actions qui doivent fonctionner dans toutes les circonstances  Conception graphique : une charte qui se décline et aligné sur une « grille » fluide
  16. 16. Quel impact ? Laisser ce bloc vide Faire un développement front-end anticipant les principaux cas de figure Réaliser un contrôle qualité plus étenduQuel impact planning et financier ? Augmentation du temps / de coûts de 30% de chacune de ces étapes
  17. 17. Quel impact ? Laisser ce bloc vide Architecture sur mesure Version Version Version Architecture mobile tablette ordinateur Responsive Contenu Contenu Contenu “spécifique “spécifique “spécifique tablette” ordinateur” Version Responsive mobile” Contenus communs Affichage Affichage Affichage “light mobile” “light Tablette” Full Affichage Affichage “light Affichage “light … Support et maintenance mobile” Full Tablette” de 3 versions Support et maintenance d’une seule version
  18. 18. Google Laisser ce bloc vide Google recommande aux webmaster de suivre les bonnes pratiques du responsive webdesign en utilisant le même code HTML pour toutes les utilisations en adaptant seulement les CSS
  19. 19. Conclusion Laisser ce bloc videEconomies Gain de Meilleures Tous les SEO Optimisé temps performances Navigateurs supportés
  20. 20. Conclusion Laisser ce bloc vide

×