Si l’importance d’être présent sur les terminaux mobiles est aujourd’hui grandement répandue, il n’est pas toujours facile de savoir comment passer le cap. A l’heure où tout le monde veut son application, où les sites mobiles dédiés se multiplient et où l’avancée des navigateurs, l’arrivée du HTML5 et CSS3 permettent la création de site en responsive design, comment s’y retrouver ?

1. Mobile W.A.R
Web mobile, Applications et
Responsive design
Olivier Rocques Nicolas Hoffmann
Web : http://www.orocques.net/ Web : http://www.nicolas-hoffmann.net/
Twitter : @_dAttA_ Twitter : @Nico3333fr
http://www.chambe-carnet.com/

2. Mobile W.A.R

Présentation (brève) des orateurs

Quelques définitions

Des choix selon les contextes

Des exemples de réalisations

3. Mobile W.A.R
BONSOIR !
Et bienvenue.

4. Mobile W.A.R, définitions

Web Mobile ?
<= Smartphones

5. Mobile W.A.R, définitions

Web Mobile ?
Tablettes =>

6. Mobile W.A.R, définitions

Web Mobile ?
Un paysage
TRES varié !
Et pas seulement...

7. Mobile W.A.R, définitions

Design fixe, fluide, élastique

Responsive et son petit vocabulaire

Desktop first / Mobile first

Web Apps, Applications natives

8. Mobile W.A.R, définitions
Des questions sur ces définitions ?

9. Mobile W.A.R, contextes

Cas d'un site vitrine, peu de contenus
Ex : http://www.propulsion.ch/

10. Mobile W.A.R, contextes

Cas d'un ayant beaucoup de contenu (navigation à
plusieurs niveaux, etc.)

11. Mobile W.A.R, contextes

Cas d'un ayant beaucoup de contenu (navigation à
plusieurs niveaux, etc.)

12. Mobile W.A.R, contextes

Site avec un service et une partie institutionnelle

13. Mobile W.A.R, contextes
Des questions, des remarques ?

14. Mobile W.A.R, contextes

Vieux site, table-layout, code obsolète
Un bon exemple de site avec un code tout pourri ? ;)
(on ne veut pas balancer...)

15. Mobile W.A.R, contextes

Site complexe, avec des interactions utilisateurs

Site proposant des outils/services supplémentaires et
spécifiques aux supports mobiles

16. Mobile W.A.R, contextes

Jeu en 3D avec des effets graphiques avancés

17. Mobile W.A.R, contextes

Vers l'avenir : services multi-plateformes

Des questions à se poser (publicité ?)

Des problématiques nouvelles à traiter (retina,
performances, etc.)

18. Mobile W.A.R, contextes
D'autres questions ? ;)

19. Mobile W.A.R, exemples
http://mediaqueri.es/

20. Mobile W.A.R, exemples
http://www.csm-sa.ch/

21. Mobile W.A.R, exemples
http://www.optimum-selection.ch/

22. Mobile W.A.R, exemples
En cours de développement...

23. Mobile W.A.R, exemples
http://www.degustationsdemarion.com/

24. Mobile W.A.R, exemples

http://www.alsacreations.fr/

http://css-tricks.com/

Etc.

25. Mobile W.A.R, exemples
http://kiwiparty.nicolas-hoffmann.net/

26. Mobile W.A.R, exemples
Web App Sensha

27. Mobile W.A.R, exemples

28. Mobile W.A.R, exemples
Igobelins

29. Mobile W.A.R, exemples
Web app avec jQtouch

30. Mobile W.A.R, the end

31. Mobile W.A.R, compléments

http://openweb.eu.org/articles/adapter_site_smartphones

http://www.simpleweb.fr/2012/02/10/lapproche-mobile-first-adoptee-par-amazon-en-inde

http://www.balsamiq.com/

http://frenchweb.fr/atelier-frenchweb-strategie-mobile-web-ou-app-60711/

http://blogs.adobe.com/shadow/

http://www.alsacreations.com/

http://www.nicolas-hoffmann.net/source/1473-exemple-responsive-webdesign-css-
accessibilite-webperfs.html

http://jquerymobile.com/demos/1.1.0/

http://www.sencha.com/

http://phonegap.com/

http://googlewebmastercentral.blogspot.fr/2012/06/recommendations-for-building-
smartphone.html