le responsive webdesign : votre visibilitÉ web optimale sur tous les supports mobiles...
DESCRIPTION
TRANSCRIPT
![Page 1: LE RESPONSIVE WEBDESIGN : VOTRE VISIBILITÉ WEB OPTIMALE SUR TOUS LES SUPPORTS MOBILES D'AUJOURD'HUI ET DE DEMAIN](https://reader035.vdocuments.site/reader035/viewer/2022070302/548198c6b479590f0d8b4582/html5/thumbnails/1.jpg)
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
![Page 2: LE RESPONSIVE WEBDESIGN : VOTRE VISIBILITÉ WEB OPTIMALE SUR TOUS LES SUPPORTS MOBILES D'AUJOURD'HUI ET DE DEMAIN](https://reader035.vdocuments.site/reader035/viewer/2022070302/548198c6b479590f0d8b4582/html5/thumbnails/2.jpg)
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
![Page 3: LE RESPONSIVE WEBDESIGN : VOTRE VISIBILITÉ WEB OPTIMALE SUR TOUS LES SUPPORTS MOBILES D'AUJOURD'HUI ET DE DEMAIN](https://reader035.vdocuments.site/reader035/viewer/2022070302/548198c6b479590f0d8b4582/html5/thumbnails/3.jpg)
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
é
![Page 4: LE RESPONSIVE WEBDESIGN : VOTRE VISIBILITÉ WEB OPTIMALE SUR TOUS LES SUPPORTS MOBILES D'AUJOURD'HUI ET DE DEMAIN](https://reader035.vdocuments.site/reader035/viewer/2022070302/548198c6b479590f0d8b4582/html5/thumbnails/4.jpg)
Le 09/04/2023
Le contexte
4
1680x1050
TVDesktopNetbooksTabletteSmartphone
1680x1050
768x1024
1024x768
1024x768
480x320
320x480
1280x810
ET DEMAIN ?
![Page 5: LE RESPONSIVE WEBDESIGN : VOTRE VISIBILITÉ WEB OPTIMALE SUR TOUS LES SUPPORTS MOBILES D'AUJOURD'HUI ET DE DEMAIN](https://reader035.vdocuments.site/reader035/viewer/2022070302/548198c6b479590f0d8b4582/html5/thumbnails/5.jpg)
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
![Page 6: LE RESPONSIVE WEBDESIGN : VOTRE VISIBILITÉ WEB OPTIMALE SUR TOUS LES SUPPORTS MOBILES D'AUJOURD'HUI ET DE DEMAIN](https://reader035.vdocuments.site/reader035/viewer/2022070302/548198c6b479590f0d8b4582/html5/thumbnails/6.jpg)
222 Rond point Ernest Garnier Immeuble Arche Jacques Cœur
34000 Montpellier04 99 13 68 60
6 KALIOP.COM
LE RESPONSIVE WEBDESIGN
![Page 7: LE RESPONSIVE WEBDESIGN : VOTRE VISIBILITÉ WEB OPTIMALE SUR TOUS LES SUPPORTS MOBILES D'AUJOURD'HUI ET DE DEMAIN](https://reader035.vdocuments.site/reader035/viewer/2022070302/548198c6b479590f0d8b4582/html5/thumbnails/7.jpg)
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
![Page 8: LE RESPONSIVE WEBDESIGN : VOTRE VISIBILITÉ WEB OPTIMALE SUR TOUS LES SUPPORTS MOBILES D'AUJOURD'HUI ET DE DEMAIN](https://reader035.vdocuments.site/reader035/viewer/2022070302/548198c6b479590f0d8b4582/html5/thumbnails/8.jpg)
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
![Page 9: LE RESPONSIVE WEBDESIGN : VOTRE VISIBILITÉ WEB OPTIMALE SUR TOUS LES SUPPORTS MOBILES D'AUJOURD'HUI ET DE DEMAIN](https://reader035.vdocuments.site/reader035/viewer/2022070302/548198c6b479590f0d8b4582/html5/thumbnails/9.jpg)
Principe
Le 09/04/2023 9
![Page 10: LE RESPONSIVE WEBDESIGN : VOTRE VISIBILITÉ WEB OPTIMALE SUR TOUS LES SUPPORTS MOBILES D'AUJOURD'HUI ET DE DEMAIN](https://reader035.vdocuments.site/reader035/viewer/2022070302/548198c6b479590f0d8b4582/html5/thumbnails/10.jpg)
Présentation
Le 09/04/2023 10
![Page 11: LE RESPONSIVE WEBDESIGN : VOTRE VISIBILITÉ WEB OPTIMALE SUR TOUS LES SUPPORTS MOBILES D'AUJOURD'HUI ET DE DEMAIN](https://reader035.vdocuments.site/reader035/viewer/2022070302/548198c6b479590f0d8b4582/html5/thumbnails/11.jpg)
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
![Page 12: LE RESPONSIVE WEBDESIGN : VOTRE VISIBILITÉ WEB OPTIMALE SUR TOUS LES SUPPORTS MOBILES D'AUJOURD'HUI ET DE DEMAIN](https://reader035.vdocuments.site/reader035/viewer/2022070302/548198c6b479590f0d8b4582/html5/thumbnails/12.jpg)
222 Rond point Ernest Garnier Immeuble Arche Jacques Cœur
34000 Montpellier04 99 13 68 60
12 KALIOP.COM
EXEMPLES
![Page 13: LE RESPONSIVE WEBDESIGN : VOTRE VISIBILITÉ WEB OPTIMALE SUR TOUS LES SUPPORTS MOBILES D'AUJOURD'HUI ET DE DEMAIN](https://reader035.vdocuments.site/reader035/viewer/2022070302/548198c6b479590f0d8b4582/html5/thumbnails/13.jpg)
www.kaliop.com
Le 09/04/2023 13
![Page 14: LE RESPONSIVE WEBDESIGN : VOTRE VISIBILITÉ WEB OPTIMALE SUR TOUS LES SUPPORTS MOBILES D'AUJOURD'HUI ET DE DEMAIN](https://reader035.vdocuments.site/reader035/viewer/2022070302/548198c6b479590f0d8b4582/html5/thumbnails/14.jpg)
OT Saint Etienne
Le 09/04/2023 14
![Page 15: LE RESPONSIVE WEBDESIGN : VOTRE VISIBILITÉ WEB OPTIMALE SUR TOUS LES SUPPORTS MOBILES D'AUJOURD'HUI ET DE DEMAIN](https://reader035.vdocuments.site/reader035/viewer/2022070302/548198c6b479590f0d8b4582/html5/thumbnails/15.jpg)
Ordre des experts comtpables
Le 09/04/2023 15
![Page 16: LE RESPONSIVE WEBDESIGN : VOTRE VISIBILITÉ WEB OPTIMALE SUR TOUS LES SUPPORTS MOBILES D'AUJOURD'HUI ET DE DEMAIN](https://reader035.vdocuments.site/reader035/viewer/2022070302/548198c6b479590f0d8b4582/html5/thumbnails/16.jpg)
Bientôt…
Le 09/04/2023 16
![Page 17: LE RESPONSIVE WEBDESIGN : VOTRE VISIBILITÉ WEB OPTIMALE SUR TOUS LES SUPPORTS MOBILES D'AUJOURD'HUI ET DE DEMAIN](https://reader035.vdocuments.site/reader035/viewer/2022070302/548198c6b479590f0d8b4582/html5/thumbnails/17.jpg)
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
![Page 18: LE RESPONSIVE WEBDESIGN : VOTRE VISIBILITÉ WEB OPTIMALE SUR TOUS LES SUPPORTS MOBILES D'AUJOURD'HUI ET DE DEMAIN](https://reader035.vdocuments.site/reader035/viewer/2022070302/548198c6b479590f0d8b4582/html5/thumbnails/18.jpg)
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
![Page 19: LE RESPONSIVE WEBDESIGN : VOTRE VISIBILITÉ WEB OPTIMALE SUR TOUS LES SUPPORTS MOBILES D'AUJOURD'HUI ET DE DEMAIN](https://reader035.vdocuments.site/reader035/viewer/2022070302/548198c6b479590f0d8b4582/html5/thumbnails/19.jpg)
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
![Page 20: LE RESPONSIVE WEBDESIGN : VOTRE VISIBILITÉ WEB OPTIMALE SUR TOUS LES SUPPORTS MOBILES D'AUJOURD'HUI ET DE DEMAIN](https://reader035.vdocuments.site/reader035/viewer/2022070302/548198c6b479590f0d8b4582/html5/thumbnails/20.jpg)
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
![Page 21: LE RESPONSIVE WEBDESIGN : VOTRE VISIBILITÉ WEB OPTIMALE SUR TOUS LES SUPPORTS MOBILES D'AUJOURD'HUI ET DE DEMAIN](https://reader035.vdocuments.site/reader035/viewer/2022070302/548198c6b479590f0d8b4582/html5/thumbnails/21.jpg)
222 Rond point Ernest Garnier Immeuble Arche Jacques Cœur
34000 Montpellier04 99 13 68 60
21 KALIOP.COM
AVANTAGES
![Page 22: LE RESPONSIVE WEBDESIGN : VOTRE VISIBILITÉ WEB OPTIMALE SUR TOUS LES SUPPORTS MOBILES D'AUJOURD'HUI ET DE DEMAIN](https://reader035.vdocuments.site/reader035/viewer/2022070302/548198c6b479590f0d8b4582/html5/thumbnails/22.jpg)
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
![Page 23: LE RESPONSIVE WEBDESIGN : VOTRE VISIBILITÉ WEB OPTIMALE SUR TOUS LES SUPPORTS MOBILES D'AUJOURD'HUI ET DE DEMAIN](https://reader035.vdocuments.site/reader035/viewer/2022070302/548198c6b479590f0d8b4582/html5/thumbnails/23.jpg)
Bénéfices
Le 09/04/2023 23