Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

RWD - Best practices par Gregoire Hoin et Benoit Vrins

1 046 vues

Publié le

Présentation des bonnes pratiques Responsive par Grégoire Hoin et Benoît Vrins - http://www.spade.be

Publié dans : Technologie
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici

RWD - Best practices par Gregoire Hoin et Benoit Vrins

  1. 1. RESPONSIVE WEBDESIGN BEST PRACTICES FEWEB / mardi 5 mars 2013 Grégoire Hoin @gregone Benoît Vrins @exibit
  2. 2. 1Il nest pas de vent favorablepour celui qui ne sait où il va.- SENEQUE
  3. 3. CONTEMPORARYCOMMUNICATION @spade_be spade.be
  4. 4. GUE/NGLhttp://guengl.eu/
  5. 5. La Ligue de l’Enseignementhttp://ligue-enseignement.be/
  6. 6. 2RWD = ADAPTÉ POURTOUS LES PROJETS?
  7. 7. RWD VS. NATIF
  8. 8. • Plateformes multiples: iOS, Android, Window Phone, ...• Besoins de fonctionnalités Natives, puissance de calcul?• Support et Evolution• Positionnement et Marketing sur l’AppStore
  9. 9. RWD VS. SITE MOBILE
  10. 10. • UA sniffing• Structure des URL• Split du focus technologique• Split du focus utilisateur
  11. 11. ?WEBVIEW OU SITE MOBILE:VOUS UTILISEZ AUSSI DES TECHNIQUES SIMILAIRES
  12. 12. 3IMPLICATIONS DANS LA GESTION DE PROJET
  13. 13. Soyez prêts à changerd’habitudes.Ne vous reposez pas sur vosacquis.
  14. 14. Nos méthodes ne sont plustoutes adaptées.C’est l’occasion de les faireévoluer.
  15. 15. L’expertise en Responsiven’existe pas (encore).Ré-apprenons, tous ensemble.
  16. 16. #FAILApprenez par l’erreur(et celles des autres).Soyez prêts à travailler un peuplus au début.
  17. 17. 4CONTENU & PRIORITÉS
  18. 18. “ Si votre design fonctionnepour les extrêmes, lentre-deuxsera déjà résolu ”-Tom Kelley (IDEO)
  19. 19. Avec l’augmentation des taillesd’écrans, et les layouts fixes,nous nous sommes habitués àremplir.
  20. 20. Allez à l’essentiel.Les variations de tailles vontvous aider à forcer les choix. Valable aussi auprès des clients
  21. 21. Exemple :
  22. 22. 5IA & UX
  23. 23. DESIGN ≠ PSD ≠ WIREFRAME
  24. 24. L’experience que l’on conçoit,c’est le site web que l’utilisateurfinal voit et utilise.
  25. 25. Préparez vous à changer vosdélivrables...
  26. 26. Prototypez en HTML/CSSsi possible.
  27. 27. Si vous faites des wireframesstatiques, prévisualisez au moinsles extrêmes.
  28. 28. Passez du mockup au HTML/CSS plus tôt dans le process.
  29. 29. Ou designez dans le browser
  30. 30. ?WEB APP OU GROS PROJET ? STYLEGUIDE !
  31. 31. SMACSS ( & OOCSS, ...)
  32. 32. FRAMEWORK CSS + GRILLE FLUIDE
  33. 33. LES FRAMEWORKS CSSComplets (UI) :• Bootstrap (ex-twitter)• Foundation (ZURB)• InuitCSS,... et bien d’autres
  34. 34. LES FRAMEWORKS CSSGrille uniquement:• Golden Grid• LESS Framework• ...
  35. 35. LES FRAMEWORKS CSS Le vôtre? Grille: 61 lignes de CSS (non-minifiée)
  36. 36. 6 DEVELOPPER“MOBILE FIRST”
  37. 37. Exemple:ContenuEn mobile, un lienvers du contenuadditionnel:
  38. 38. Desktop: Contenu additionnel chargé en AJAX
  39. 39. Lire plus sur le sujet:http://filamentgroup.com/lab/ajax_includes_modular_content/
  40. 40. https://github.com/filamentgroup/Ajax-Include-Pattern/
  41. 41. OPTIMISATIONS
  42. 42. OPTIMISATIONS
  43. 43. Aller plus loin
  44. 44. MERCI @gregone @exibit spade.be

×