24
André Gentit MON SITE EN VERSION MOBILE Novembre 2012

Mon site en version mobile

Embed Size (px)

DESCRIPTION

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

Citation preview

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