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

1. RESPONSIVE WEBDESIGN
BEST PRACTICES
FEWEB / mardi 5 mars 2013
Grégoire Hoin @gregone
Benoît Vrins @exibit

2. 1
Il n'est pas de vent favorable
pour celui qui ne sait où il va.
- SENEQUE

3. CONTEMPORARY
COMMUNICATION
@spade_be
spade.be

4. GUE/NGL
http://guengl.eu/

5. La Ligue de l’Enseignement
http://ligue-enseignement.be/

6. 2
RWD = ADAPTÉ POUR
TOUS LES PROJETS?

7. RWD VS. NATIF

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. RWD VS. SITE MOBILE

10. • UA sniffing
• Structure des URL
• Split du focus technologique
• Split du focus utilisateur

11. ?
WEBVIEW OU SITE MOBILE:
VOUS UTILISEZ AUSSI DES
TECHNIQUES SIMILAIRES

12. 3
IMPLICATIONS DANS LA
GESTION DE PROJET

13. Soyez prêts à changer
d’habitudes.
Ne vous reposez pas sur vos
acquis.

14. Nos méthodes ne sont plus
toutes adaptées.
C’est l’occasion de les faire
évoluer.

15. L’expertise en Responsive
n’existe pas (encore).
Ré-apprenons, tous ensemble.

16. #FAIL
Apprenez par l’erreur
(et celles des autres).
Soyez prêts à travailler un peu
plus au début.

17. 4
CONTENU & PRIORITÉS

19. “ Si votre design fonctionne
pour les extrêmes, l'entre-deux
sera déjà résolu
”-Tom Kelley (IDEO)

20. Avec l’augmentation des tailles
d’écrans, et les layouts fixes,
nous nous sommes habitués à
remplir.

21. Allez à l’essentiel.
Les variations de tailles vont
vous aider à forcer les choix.
Valable aussi auprès des clients

22. Exemple :

23. 5
IA & UX

24. DESIGN ≠ PSD ≠ WIREFRAME

25. L’experience que l’on conçoit,
c’est le site web que l’utilisateur
final voit et utilise.

26. Préparez vous à changer vos
délivrables...

27. Prototypez en HTML/CSS
si possible.

28. Si vous faites des wireframes
statiques, prévisualisez au moins
les extrêmes.

29. Passez du mockup au HTML/
CSS plus tôt dans le process.

30. Ou designez dans le browser

31. ?
WEB APP OU GROS PROJET ?
STYLEGUIDE !

32. SMACSS ( & OOCSS, ...)

33. FRAMEWORK CSS
+ GRILLE FLUIDE

34. LES FRAMEWORKS CSS
Complets (UI) :
• Bootstrap (ex-twitter)
• Foundation (ZURB)
• InuitCSS,... et bien d’autres

35. LES FRAMEWORKS CSS
Grille uniquement:
• Golden Grid
• LESS Framework
• ...

36. LES FRAMEWORKS CSS
Le vôtre?
Grille: 61 lignes de CSS (non-minifiée)

37. 6
DEVELOPPER
“MOBILE FIRST”

38. Exemple:
Contenu
En mobile, un lien
vers du contenu
additionnel:

39. Desktop: Contenu additionnel chargé en AJAX

40. Lire plus sur le sujet:
http://filamentgroup.com/lab/
ajax_includes_modular_content/

41. https://github.com/filamentgroup/Ajax-Include-Pattern/

42. OPTIMISATIONS

43. OPTIMISATIONS

44. Aller plus loin

45. MERCI
@gregone
@exibit
spade.be