Responsive Design
Rendre accessible son site au mobile et au
tablette
23/01/2011
Application Smartphone1

Patrice de Saint Steban
 École EPITA
 Ingénieur en Informatique : Société SFEIR
 Application web
 Java/GWT
 Développeur
 Expert
 Travaille à la CEF sur le projet EgliseInfo (Refonte du site
MessesInfo)
 Application mobile android : MessesInfo et EgliseInfo
 Membre de Technologiæ
Application Smartphone 223/01/2011

Modèle de présentation Technologiae 3
Technologiæ
 Un groupe de travail sur l’Église et les NTIC
 14 membres
 Des compétences diversifiées :
 stratégie, organisation, management
 communication, marketing, médias sociaux
 informatique, systèmes d’information
 un site internet : www.technologiae.org
 Des actions au service de l’Église
 Veille
 Conseil
 Formation

Et vous ?
 Qui a un téléphone portable ?
 Qui a un smartphone ?
 Iphone ?
 Android ?
 Blackberry ?
 Windows Mobile ?
 Autre ?
 Qui a un site accessible en mobile ?
Application Smartphone 423/01/2011

Etat des lieux
 TAUX DE PENETRATION SMARTPHONE EN EUROPE DE 60% À
HORIZON 2015(SOURCE MORGAN STANLEY RESEARCH JUIN 2012)
Application Smartphone 5

Smartphone ?
24 MILLIONS
DE FRANÇAIS POSSÉDENT
UN SMARTPHONE
57%
UTILISENT LEUR
SMARTPHONE TOUS
LES JOURS
22 MILLIONS
D’UTILISATEURS WEB
MOBILE
77%
NE SORTENT JAMAIS SANS
LEUR SMARTPHONE
Application Smartphone 6

Site mobile ?
58%
DES VISITEURS ARRIVENT
SUR UN SITE VIA UN
APPAREIL NOMADE
61%
DES VISITEURS VIA
MOBILE QUITTENT LE
SITE LORSQU’IL N’EST
PAS OPTIMISÉ
96%
DES SITES SONT NON
OPTIMISÉS POUR LE
MOBILE
48%
QUITTENT LE SITE AVEC
UNE MAUVAISE IMAGE
Application Smartphone 7

Tablettes ?
28%
DE CROISSANCE DE
VENTES DE TABLETTES
PAR ANS, 121 MILLIONS
EN 2012
416 MILLIONS
VENTES PRÉVUE EN 2016,
PLUS QUE DE PC
77%
DES UTILISATEURS DE
TABLETTE DECLARENT
REDUIRE L’USAGE DE
LEUR PC
6 MILLIONS
DE TABLETTES DEVRAIENT
ÊTRE VENDUES EN
FRANCE EN 2013
Application Smartphone 8

APPLICATIONS / SITE MOBILE ?
Application Smartphone 923/01/2011

Application Smartphone 1023/01/2011
Facebook présent sur toutes les plateformes

Application Mobile
Avantages
 Application installable
 On ne l’oublie pas
 On la trouve facilement
 Fonctionnalités natives
 Notifications / Push
 Plus ludique / Plus
communicatif / Plus Rapide
Inconvénients
 Faire une appli par système
(iPhone, Android, Windows
Mobile, etc…)
 Coût
Application Smartphone 11

Site Mobile ?
Avantages
 Simple changement de
style du site (Coût réduit)
 Compatible avec tous
les smartphones
(récents)
 HTML5 (Géolocalisation, Vidéo)
 Plugins automatique
pour les CMS
Inconvénients
 Il faut connaitre le site
 Plus lent
Application Smartphone 12

Verdict ?
Appli vs site
 Faire systématiquement une version mobile de son site
 Développer une application mobile (si) :
 Utilisations de fonctionnalités avancées
 Monétisation
 Services ajoutés par rapport au site
 Usage mobile (géolocalisation, usage récurrent, hors ligne)
 Marketing
 => Mutualisation des applications
Application Smartphone 1323/01/2011

VERSION MOBILE OU SITE
ADAPTATIF
Application Smartphone 14

Version mobile
 Il est important maintenant d’avoir
une version mobile
Application Smartphone 15

Plusieurs approches
 Faire une version spéciale du site :
 Adaptation de l’écran (Responsive Web Design)
Application Smartphone 16

Faire une version spéciale du site :
Par url : m.monsite.com ou
monsite.com/mobile
 + Affiche un contenu
optimisé
 + Avoir une meilleur
expérience mobile
 + Plugin de CMS disponible
 - Développer un nouveau
site, un nouveau
template/squelette
 - Il faut connaitre l’URL
Par détection automatique du
mobile
 Il faut permettre de
basculer de l’un à l’autre
 - Possible erreurs de
détections
Application Smartphone 17

Responsive Web Design
 Même contenu juste réarrangé pour mobile ou web.
 - Peut tirer vers le bas votre interface
 - Afficher trop d’informations sur les mobiles
 - Complexité du développement
Application Smartphone 18

Plugins du CMS
 Template spécifique
 Détection automatique du navigateur
 Optimisation des ressources (réductions des
images)
 Redimensionnement du contenu.
 Interface adapté à l’écran (gros bouton,
défilement verticale)
 Simple et automatique
Application Smartphone 19

Wordpress
 WPTouch :
 Détection du mobile
 Adaptation des images
 Template personnalisable par type de mobile
 Installez et ça marche !
 http://wordpress.org/extend/plugins/wptouch
Application Smartphone 20

SPIP
1) ITwX mobile
Squelette tout fait
Iphone, Android, Blackberry
Compatible avec d’autres plugins
http://twxdesign.com/itwx-mobile-v3
2 ) Ci-mobile : http://www.spip-contrib.net/cimobile-plugin-
detection-et-aiguillage-des-telephones
Détection et Aiguillage vers des squelettes mobile
Application Smartphone 21

Joomla
 Détection du mobile
 Adaptation des images
 Template personnalisable par type de mobile
 Configuration
 http://extensions.joomla.org/extensions/mobile/mobile-
display/11722
 http://www.mobilejoomla.com
Application Smartphone 22

Feuille de style CSS : Responsive Design
 Personnalisation du design
 Simple à faire si l’on connait le CSS
 Pas d’optimisation des images et du contenu
Application Smartphone 23

Ordinateur / Portable / Tablette / Smartphone
 Changer simplement l’agencement des blocs
Application Smartphone 24

Exemple
Pour faire cette capture : http://ami.responsivedesign.is/#
Application Smartphone 25

Tester
Application Smartphone 26
http://quirktools.com/screenfly/ Firefox :
Menu / Développement Web / Vue adaptative
(Ctrl + Maj + M)

Frameworks CSS : Système de grilles
 http://foundation.zurb.com/
 http://getbootstrap.com/
Application Smartphone 27

Deux approches
Application Smartphone 28

Responsive Web Design
@media screen and (max-width: 640px) {
//Definition des classes mobiles
.contenu {
width: 100%;
}
}
@media screen and (min-width: 641px) {
//Definition des classes tablettes
}
Application Smartphone 29

Application Smartphone 30

Points de ruptures
Type Taille minimum
Smartphone (Portrait) 320 px
Smartphone (Paysage) 480 px
Tablette 7’ (Portrait) 768 px
Tablette 10’ (Portrait) 768 px
Tablette 10’ (Paysage) 1024 px
Ecran large (Desktop) 1200 px
Application Smartphone 31

Contenu
 Mais il est important d’avoir un contenu mobile
adapté !
 Tout sur la hauteur : Défilement vertical
 Images réduites
 Texte raccourcis
 Géolocalisé
 Vidéo HTML5 (Youtube gère automatiquement)
 Contenu spécifique
Application Smartphone 32

Modèle de présentation Technologiae 33
Merci !
Patrice de Saint Steban
Technologiæ
patrice@technologiae.org
www.technologiae.org
photo