222 Rond point Ernest Garnier Immeuble Arche Jacques Cœur

34000 Montpellier04 99 13 68 60

Challenge Digiworld Summit 2012 Montpellier le 09/04/2023

1 KALIOP.COM

LE RESPONSIVE WEB DESIGNVotre visibilité web optimale sur tous les supports mobiles d’aujourd’hui et de demain

Le 09/04/2023

Quelques chiffres

2

En 2013 Les mobiles

génèreront plus de visites que les ordinateurs

En 2015 1,9 millions

d'internaute via une plateforme mobile

1.6 millions d'internaute via un PC

Le 09/04/2023

Le contexte

3

ORIENTATIONS

portrait paysage

SUPPORTS

Tablette

ordinateurTV

RÉSOLUTIONS

1024x1280

800x1280 768x1024

USAGES

média1080x1920

mobileMini PC

mobilité Rapidit

é

Le 09/04/2023

Le contexte

4

1680x1050

TVDesktopNetbooksTabletteSmartphone

1680x1050

768x1024

1024x768

1024x768

480x320

320x480

1280x810

ET DEMAIN ?

Le 09/04/2023

Problématique

5

Première solution : developper autant de site que de supports d'utilisation "cible"

Version haute

résolution

Version basse

résolution

VersionSmartphone

Versiontablette

Quels seront les formats de demain ???

STOPER L’EMMORAGIE ET REPENSER SA STRATEGIE

222 Rond point Ernest Garnier Immeuble Arche Jacques Cœur

34000 Montpellier04 99 13 68 60

6 KALIOP.COM

LE RESPONSIVE WEBDESIGN

Présentation

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.

Le 09/04/2023 7

Principe

Le 09/04/2023 8

Utiliser une grille ergonomique flexible

Avoir des médias flexibles

Le contenu s’adapte à la taille de l’écran

Principe

Le 09/04/2023 9

Présentation

Le 09/04/2023 10

Le 09/04/2023

A retenir

Le responsive webdesign c'est…

Les mêmes contenus sur l'ensemble des supports

Une seule adresse pour tous les supports

Un seul code à maintenir et tester

11

222 Rond point Ernest Garnier Immeuble Arche Jacques Cœur

34000 Montpellier04 99 13 68 60

12 KALIOP.COM

EXEMPLES

www.kaliop.com

Le 09/04/2023 13

OT Saint Etienne

Le 09/04/2023 14

Ordre des experts comtpables

Le 09/04/2023 15

Bientôt…

Le 09/04/2023 16

222 Rond point Ernest Garnier Immeuble Arche Jacques Cœur

34000 Montpellier04 99 13 68 60

17 KALIOP.COM

QUEL COUT ?Coût de déploiement et de maintenance

Le déploiement

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

Le 09/04/2023 18

Le déploiement

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

Le 09/04/2023 19

Support et maintenance de 3 versions

Une maintenance simplifiée

Architecture sur mesure Architecture Responsive

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

Version Responsive

Contenus communs

Affichage “light

mobile”

Affichage “light

Tablette”Affichage

Full …

Support et maintenance d’une seule version

Le 09/04/2023 20

222 Rond point Ernest Garnier Immeuble Arche Jacques Cœur

34000 Montpellier04 99 13 68 60

21 KALIOP.COM

AVANTAGES

Google

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

Le 09/04/2023 22

Bénéfices

Le 09/04/2023 23