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. Quelques chiffres
Laisser ce bloc vide
En 2013
Les mobiles génèreront plus de visites que les ordinateurs

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. Contexte
Laisser ce bloc vide
ET DEMAIN ?
1680x1050
1280x810
1024x768
768x1024
1024x768
480x320
320x480
Smartphone Tablette Netbooks Desktop
TV

5. Problématique
Laisser ce bloc vide
PREMIÈRE SOLUTION :
Développer autant de site que de supports d'utilisation "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. 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 d'apporter la meilleure expérience
utilisateur, quel que soit le contexte de visualisation.

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. Le principe
Laisser ce bloc vide

9. Le principe
Laisser ce bloc vide
Les mêmes contenus sur l'ensemble des
supports
Une seule adresse pour tous les
supports
Un seul code à maintenir et tester

10. Kaliop.fr
Laisser ce bloc vide

11. Projets réalisés
Laisser ce bloc vide
Saint-Etienne Tourisme

12. Projets réalisés
Laisser ce bloc vide
Espace Sentein

13. Projets réalisés
Laisser ce bloc vide
Ordre des Experts-Comptables

14. Bientôt…
Laisser ce bloc vide

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. 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 étendu
Quel impact planning et financier ?
Augmentation du temps / de coûts de 30% de chacune de ces étapes

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. 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. Conclusion
Laisser ce bloc vide
Economies Gain de Meilleures Tous les
SEO Optimisé
temps performances Navigateurs
supportés

20. Conclusion
Laisser ce bloc vide