[chambé-carnet] mobile w.a.r : web mobile, applications et responsive design

blue_half_circle_with_transparency

Mobile W.A.R

Web mobile, Applications et
Responsive design

http://www.chambe-carnet.com/

Olivier RocquesWeb : http://www.orocques.net/Twitter : @_dAttA_

Nicolas HoffmannWeb : http://www.nicolas-hoffmann.net/Twitter : @Nico3333fr

Mobile W.A.R

Prsentation (brve) des orateurs

Quelques dfinitions

Des choix selon les contextes

Des exemples de ralisations

Mobile W.A.R

BONSOIR !

Et bienvenue.

Mobile W.A.R, dfinitions

Web Mobile ?


Web Mobile ?

Un paysageTRES vari !

Et pas seulement...


Design fixe, fluide, lastique

Responsive et son petit vocabulaire

Desktop first / Mobile first

Web Apps, Applications natives


Des questions sur ces dfinitions ?

Mobile W.A.R, contextes

Cas d'un site vitrine, peu de contenus

Ex : http://www.propulsion.ch/


Cas d'un ayant beaucoup de contenu (navigation plusieurs niveaux, etc.)


Cas d'un ayant beaucoup de contenu (navigation plusieurs niveaux, etc.)


Site avec un service et une partie institutionnelle


Des questions, des remarques ?


Vieux site, table-layout, code obsolte

Un bon exemple de site avec un code tout pourri ? ;)

(on ne veut pas balancer...)


Site complexe, avec des interactions utilisateurs

Site proposant des outils/services supplmentaires et spcifiques aux supports mobiles

C:\Users\Prezenz\Desktop\facebook_logo.jpgC:\Users\Prezenz\Desktop\instgram.jpg


Jeu en 3D avec des effets graphiques avancs


Vers l'avenir : services multi-plateformes

Des questions se poser (publicit ?)

Des problmatiques nouvelles traiter (retina, performances, etc.)


D'autres questions ? ;)

Mobile W.A.R, exemples

http://mediaqueri.es/


http://www.csm-sa.ch/


http://www.optimum-selection.ch/


En cours de dveloppement...


http://www.degustationsdemarion.com/


http://www.alsacreations.fr/

http://css-tricks.com/

Etc.


http://kiwiparty.nicolas-hoffmann.net/


Web App Sensha



Igobelins


Web app avec jQtouch

Mobile W.A.R, the end

Mobile W.A.R, complments

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

Cliquez pour diter le format du texte-titre

Cliquez pour diter le format du plan de texte

Second niveau de plan

Troisime niveau de plan

Quatrime niveau de plan

Cinquime niveau de plan

Sixime niveau de plan

Septime niveau de plan

Huitime niveau de plan

Neuvime niveau de plan

Click to edit Master title style

Click to edit Master subtitle style


Click to edit Master text stylesSecond level

Third level

Fourth level

Fifth level


Click to edit Master text styles



Third level

Fourth level

Fifth level


Third level

Fourth level

Fifth level




Third level

Fourth level

Fifth level



Third level

Fourth level

Fifth level




Third level

Fourth level

Fifth level






Second level

Third level

Fourth level

Fifth level



Second level

Third level

Fourth level

Fifth level


[chambé-carnet] mobile w.a.r : web mobile, applications et responsive design

Technology