Rendre accessible au mobile son application

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 ?

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

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

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

APPLICATIONS / SITE MOBILE ?

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

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

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

VERSION MOBILE OU SITE
ADAPTATIF

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

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

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

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

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

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

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

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

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

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

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

Tester
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/

Deux approches

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
}

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

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

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

Rendre accessible au mobile son application

Contenu connexe

Tendances

En vedette

Similaire à Rendre accessible au mobile son application

Plus de ACPcef

Rendre accessible au mobile son application