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éveloppe...
Modèle de présentation Technologiae 3
Technologiæ
 Un groupe de travail sur l’Église et les NTIC
 14 membres
 Des compé...
Et vous ?
 Qui a un téléphone portable ?
 Qui a un smartphone ?
 Iphone ?
 Android ?
 Blackberry ?
 Windows Mobile ?...
Etat des lieux
 TAUX DE PENETRATION SMARTPHONE EN EUROPE DE 60% À
HORIZON 2015(SOURCE MORGAN STANLEY RESEARCH JUIN 2012)
...
Smartphone ?
24 MILLIONS
DE FRANÇAIS POSSÉDENT
UN SMARTPHONE
57%
UTILISENT LEUR
SMARTPHONE TOUS
LES JOURS
22 MILLIONS
D’UT...
Site mobile ?
58%
DES VISITEURS ARRIVENT
SUR UN SITE VIA UN
APPAREIL NOMADE
61%
DES VISITEURS VIA
MOBILE QUITTENT LE
SITE ...
Tablettes ?
28%
DE CROISSANCE DE
VENTES DE TABLETTES
PAR ANS, 121 MILLIONS
EN 2012
416 MILLIONS
VENTES PRÉVUE EN 2016,
PLU...
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 na...
Site Mobile ?
Avantages
 Simple changement de
style du site (Coût réduit)
 Compatible avec tous
les smartphones
(récents...
Verdict ?
Appli vs site
 Faire systématiquement une version mobile de son site
 Développer une application mobile (si) :...
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 Sma...
Faire une version spéciale du site :
Par url : m.monsite.com ou
monsite.com/mobile
 + Affiche un contenu
optimisé
 + Avo...
Responsive Web Design
 Même contenu juste réarrangé pour mobile ou web.
 - Peut tirer vers le bas votre interface
 - Af...
Plugins du CMS
 Template spécifique
 Détection automatique du navigateur
 Optimisation des ressources (réductions des
i...
Wordpress
 WPTouch :
 Détection du mobile
 Adaptation des images
 Template personnalisable par type de mobile
 Instal...
SPIP
1) ITwX mobile
Squelette tout fait
Iphone, Android, Blackberry
Compatible avec d’autres plugins
http://twxdesign.com/...
Joomla
 Détection du mobile
 Adaptation des images
 Template personnalisable par type de mobile
 Configuration
 http:...
Feuille de style CSS : Responsive Design
 Personnalisation du design
 Simple à faire si l’on connait le CSS
 Pas d’opti...
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
(Ctr...
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%;
}
}
...
Application Smartphone 30
Points de ruptures
Type Taille minimum
Smartphone (Portrait) 320 px
Smartphone (Paysage) 480 px
Tablette 7’ (Portrait) 768...
Contenu
 Mais il est important d’avoir un contenu mobile
adapté !
 Tout sur la hauteur : Défilement vertical
 Images ré...
Modèle de présentation Technologiae 33
Merci !
Patrice de Saint Steban
Technologiæ
patrice@technologiae.org
www.technologi...
Prochain SlideShare
Chargement dans…5
×

Rendre accessible au mobile son application

713 vues

Publié le

0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
713
Sur SlideShare
0
Issues des intégrations
0
Intégrations
4
Actions
Partages
0
Téléchargements
7
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Rendre accessible au mobile son application

  1. 1. Responsive Design Rendre accessible son site au mobile et au tablette 23/01/2011 Application Smartphone1
  2. 2. 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
  3. 3. 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
  4. 4. 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
  5. 5. Etat des lieux  TAUX DE PENETRATION SMARTPHONE EN EUROPE DE 60% À HORIZON 2015(SOURCE MORGAN STANLEY RESEARCH JUIN 2012) Application Smartphone 5
  6. 6. 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
  7. 7. 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
  8. 8. 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
  9. 9. APPLICATIONS / SITE MOBILE ? Application Smartphone 923/01/2011
  10. 10. Application Smartphone 1023/01/2011 Facebook présent sur toutes les plateformes
  11. 11. 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
  12. 12. 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
  13. 13. 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
  14. 14. VERSION MOBILE OU SITE ADAPTATIF Application Smartphone 14
  15. 15. Version mobile  Il est important maintenant d’avoir une version mobile Application Smartphone 15
  16. 16. Plusieurs approches  Faire une version spéciale du site :  Adaptation de l’écran (Responsive Web Design) Application Smartphone 16
  17. 17. 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
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. Ordinateur / Portable / Tablette / Smartphone  Changer simplement l’agencement des blocs Application Smartphone 24
  25. 25. Exemple Pour faire cette capture : http://ami.responsivedesign.is/# Application Smartphone 25
  26. 26. Tester Application Smartphone 26 http://quirktools.com/screenfly/ Firefox : Menu / Développement Web / Vue adaptative (Ctrl + Maj + M)
  27. 27. Frameworks CSS : Système de grilles  http://foundation.zurb.com/  http://getbootstrap.com/ Application Smartphone 27
  28. 28. Deux approches Application Smartphone 28
  29. 29. 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
  30. 30. Application Smartphone 30
  31. 31. 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
  32. 32. 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
  33. 33. Modèle de présentation Technologiae 33 Merci ! Patrice de Saint Steban Technologiæ patrice@technologiae.org www.technologiae.org photo

×