Kaliop                                                        Laisser ce bloc vide LE RESPONSIVE WEB DESIGN Votre visibili...
Quelques chiffres                                                      Laisser ce bloc videEn 2013  Les mobiles génèreron...
Contexte                                                      Laisser ce bloc vide  800x1280 768x1024                     ...
Contexte                                                               Laisser ce bloc videET DEMAIN ?                    ...
Problématique                                                Laisser ce bloc videPREMIÈRE SOLUTION :Développer autant de s...
Le principe                                                  Laisser ce bloc vide      Le Responsive Web Design (RWD) est ...
Le principe                                  Laisser ce bloc vide   Utiliser une grille ergonomique flexible   Avoir des...
Le principe              Laisser ce bloc vide
Le principe                                Laisser ce bloc vide   Les mêmes contenus sur lensemble des    supports   Une...
Kaliop.fr            Laisser ce bloc vide
Projets réalisés                          Laisser ce bloc vide Saint-Etienne Tourisme
Projets réalisés                   Laisser ce bloc vide Espace Sentein
Projets réalisés                                Laisser ce bloc vide Ordre des Experts-Comptables
Bientôt…           Laisser ce bloc vide
Quel impact ?                                                       Laisser ce bloc vide Il faut travailler en amont sur ...
Quel impact ?                                                   Laisser ce bloc vide Faire un développement front-end ant...
Quel impact ?                                                                             Laisser ce bloc vide            ...
Google                           Laisser ce bloc vide         Google recommande aux webmaster           de suivre les bonn...
Conclusion                                             Laisser ce bloc videEconomies   Gain de                  Meilleures...
Conclusion             Laisser ce bloc vide
LE RESPONSIVE WEBDESIGN : VOTRE VISIBILITÉ WEB OPTIMALE SUR TOUS LES SUPPORTS MOBILES D'AUJOURD'HUI ET DE DEMAIN
LE RESPONSIVE WEBDESIGN : VOTRE VISIBILITÉ WEB OPTIMALE SUR TOUS LES SUPPORTS MOBILES D'AUJOURD'HUI ET DE DEMAIN
LE RESPONSIVE WEBDESIGN : VOTRE VISIBILITÉ WEB OPTIMALE SUR TOUS LES SUPPORTS MOBILES D'AUJOURD'HUI ET DE DEMAIN
Prochain SlideShare
Chargement dans…5
×

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

2 540 vues

Publié le

0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

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

Aucune remarque pour cette diapositive

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

×