responsive web design
DESCRIPTION
TRANSCRIPT
Présentation du Responsive Web design
Janvier 2012
Sophie ImbachResponsable du pôle projet
2
Vous souhaitez réaliser une nouvelle version de votre site en 2012 ?
– Quelles sont les questions « expériences utilisateurs » à se poser ?
2
3
Un nouveau site en 2012 ?
3
Orientations
portrait paysage
Supports
Tablette
ordinateur TV
Résolutions
1024x1280
240x320768x1024
Performance
Bas débit
Nouveau site
1024x800
mobileMini PC
Mobilité
Très haut débitÉcran tactile
4
2 options possibles en 2012 :
– Option 1 : Architecture sur mesure
– Option 2 : Architecture Responsive
4
5
Version mobile
Version tablette
Version ordinateur
Contenu“spécifique
mobile”
Contenu“spécifique
tablette”
Contenu“spécifique ordinateur”
Affichage “light mobile”
Affichage “light Tablette”
Affichage Full
Option 1 : Architecture sur mesure
Nouveau site
Support et maintenance de 3 versions
Chaque version aura ses propres spécificités en terme de graphisme, ergonomie, contenus
Chaque version aura son adresse :– www.kaliop.com– tablette.kaliop.com – mobile.kaliop.com
6
Option 1 : Architecture responsive
6
Nouveau site
Version Responsive
Contenus communs
Affichage “light
mobile”
Affichage “light
Tablette”
Affichage Full …
Support et maintenance d’une seule version
Une seule version du site pour tous les supports
Une seule adresse
Une qualité d’affichage maintenue
7
Option 2 : Responsive webdesign
Alors c’est quoi cette solution de webdesign « tout en un » ?
« Une conception d’interfaces Web permettant de rendre un site réactif et adaptable à l’internaute, à son matériel et au logiciel qu’il utilise. »
Le site doit s’adapter aux différents supports d’affichage (ergonomie & graphisme)
Les contenus seront les mêmes sur l’ensemble des supports
7
8
Quelles sont les répercussions sur la réalisation d’un site ?
– Conception ?– Compétences ?– Planning ?– Maintenance ?
8
9
Option 2 : Responsive webdesign
Il faut donc travaille en amont sur :– Conception éditoriale : tous les contenus accessibles sur
tous les supports– Conception ergonomique : une interface qui s’adapte en
temps réel– Conception graphique : une charte qui se décline
Faire un développement front-end anticipant les principaux cas de figure
Réaliser un contrôle qualité plus étendu
Quel impact planning ?Augmentation du temps de 30% de chacune de ces étapes
9
1010
Exemple du nouveau site www.kaliop.com
1111
Exemple du nouveau site www.kaliop.com