responsive web design

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