View
1.364
Download
0
Category
Preview:
DESCRIPTION
Citation preview
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 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
Recommended