rendre accessible au mobile son application
TRANSCRIPT
Responsive Design
Rendre accessible son site au mobile et au tablette
23/01/2011
Application Smartphone 1
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 2 23/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 4 23/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 9 23/01/2011
Application Smartphone 10 23/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 13 23/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æ
www.technologiae.org
photo