mon site en version mobile

24
André Gentit MON SITE EN VERSION MOBILE Novembre 2012

Upload: clic-en-berry

Post on 25-Dec-2014

436 views

Category:

Documents


1 download

DESCRIPTION

Intervention dans le cadre de la Webschool de Bourges, session mobilité. Mon site en version Mobile :pourquoi ? Comment ?

TRANSCRIPT

Page 1: Mon site en version mobile

André Gentit

MON SITE

EN VERSION MOBILE Novembre 2012

Page 2: Mon site en version mobile

André Gentit André Gentit

POURQUOI ?

Page 5: Mon site en version mobile

André Gentit André Gentit

Les mobinautes

Source : http://fr.slideshare.net/agencedagobert/

Page 6: Mon site en version mobile

André Gentit André Gentit

Page 7: Mon site en version mobile

André Gentit André Gentit

Page 8: Mon site en version mobile

André Gentit

Le développement du m-commerce

Source : http://www.warrendunlop.com/

Page 9: Mon site en version mobile

André Gentit

Le développement du m-commerce

Source : http://www.warrendunlop.com/

Page 10: Mon site en version mobile

André Gentit André Gentit

M-commerce

Page 11: Mon site en version mobile

André Gentit

NOEL 2013

Page 12: Mon site en version mobile

André Gentit André Gentit

Taux de pénétration des QR codes

Page 13: Mon site en version mobile

André Gentit André Gentit

COMMENT ?

Page 14: Mon site en version mobile

André Gentit André Gentit

10 bonnes pratiques pour un site mobile

Source : http://www.google.com

Page 15: Mon site en version mobile

André Gentit André Gentit

Page 16: Mon site en version mobile

André Gentit

Un site mobile doit

• Répondre à l’attente des utilisateurs tant au niveau

ergonomique que des fonctionnalités

• Elle doit proposer une fonctionnalité principale et non une

profusion d’options

• Proposer des innovations visuelles ou ergonomiques.

• Les interfaces épurées sont très en vogue…

• S’adapter à la taille de l’écran qui le lit !

Page 17: Mon site en version mobile

André Gentit

Les techniques

• Un framework comme Jquery mobile

• Détection Javascript

• Responsive design

• Plugins

• Wordpress (mobilize, Wptouch, Mobilepress)

• Spip (cimobile, iTwX, iSpip)

• Etc…

Page 18: Mon site en version mobile

André Gentit

Responsive design

Page 20: Mon site en version mobile

André Gentit

Facile ?

Il vous faudra comprendre :

• les Media Queries • @media screen and (min-width: 800px)

• @media screen and (min-width: 1024px) and (max-width: 1280px)

• @media screen and (orientation:landscape)

• Le concept du viewport

• La densité des pixels

• La capacité des mobiles à

vous berner !

• Gérer l’affichage des polices

• Gérer la taille et le poids des

images

Page 21: Mon site en version mobile

André Gentit

En résumé

Page 22: Mon site en version mobile

André Gentit

Autre solution

• Les plateformes de génération de sites mobiles

Page 24: Mon site en version mobile

André Gentit

A très bientôt…

FIN