Rendre accessible au mobile son application

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 ?


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’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


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


http://www.spip-contrib.net/iTwX-Mobile

http://www.spip-contrib.net/iTwX-Mobile






http://www.spip-contrib.net/cimobile-plugin-detection-et-aiguillage-des-telephones















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







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


http://ami.responsivedesign.is/

Tester


http://quirktools.com/screenfly/ Firefox :

Menu / Développement Web / Vue adaptative (Ctrl + Maj + M)

http://quirktools.com/screenfly/

Frameworks CSS : Système de grilles

http://foundation.zurb.com/

http://getbootstrap.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æ

[email protected]

www.technologiae.org

photo

Documents

Rendre accessible au mobile son application