Présentation aux professeurs de la TIM du Cégep Ste-Foy sur l'application concrète du responsive.

1. Conception des interfaces
responsive pour le web
Explorer les techniques ou méthodes de
travail pour la production graphique et
explorer les possibilités du responsive.
Tristan L’Abbé
Designer et Associé chez Heliom

2. http://bit.ly/VgtDfo

5. CONCEP TI ON
I NT ÉG RA TION D ES I GN

6. ?
Questions

7. MOBILE
F L E X I B L E L AY O U T
M A X-W I D T H HTML5
WEB
MEDIAQUERIES
CSS3
PROGRESSIVE
ADAPTIVE DESIGN ENHANCEMENT
FLEXIBLE GRID SEO
RESPONSIVE DESIGN

8. CO NCEPTION

11. La Presse

12. Wikipedia

13. Youtube

14. Facebook

15. Twitter

16. Dribbble

17. Mashable

18. Google

19. TIM

21. ?
Par où
commencer?

22. Ce qu’on sait

23. B UDG ET
É CH ÉA N C E S
M ÉD I AS D I SP ON I BL ES
CO N TE NU AC TU E L
CO MPÉ T I TI O N

24. Accueil Stages Twitter
Actualités Infos employeurs Facebook
À l’agenda International LinkedIn
Projets des étudiants Témoignages (7)
ATE
Formation Futur étudiant • Employeur
Admission Séquence des stages
Avez-vous le profil? Responsables des stages
Équipe
Grille de cours Diplômés
Étudiant d’un jour Diplômés (±25)
Nom, Projets, Compétences,
Perspectives Profil, Forces
Études universitaires Diplômés 2002 à 2012
Témoignages (2)
Programmes universitaires Contact
Professions Formulaire
Témoignages (12) Coordination
Métiers Adresse

25. Ce qu’on planifie

26. BUT
CI BL E
T EC H N OLOG I ES
ME SS AG E
CO N TE NU

27. B UDG ET
É CH ÉA N C E S
M ÉD I AS D I SP ON I BL ES
CO N TE NU AC TU E L
CO MPÉ T I TI O N

28. BUT
CI BL E
T EC H N OLOG I ES
ME SS AG E
CO N TE NU

29. C ONT ENU ≠ T E XT E

30. DESK TO P F IR S T MO B IL E F I R S T
C ON T E N T FI R S T

31. FOR M E
C O NT EN U

32. C O NT EN U
FOR M E

33. Plan de page

34. PAGE Accueil
OBJECTIF Encourager les futurs étudiants à s’inscrire par
la découverte du programme et de ses défis.
MESSAGE CLÉ Enseignement de qualité dans le domaines des
technologies de l’information.
PRIORITÉ 1 Encourager l’étudiant à faire une demande
d’admission.
PRIORITÉ 2 Proposer des stagiaires de qualité aux
employeurs de la région.

35. PAGE Formation
OBJECTIF Présenter la diversité de la formation et les
multiples défis à relever.
MESSAGE CLÉ La formation est variée et actuelle.
PRIORITÉ 1 Faciliter la demande d’admission par un
processus clair.
PRIORITÉ 2 Présenter le collectif d’enseignants

36. Contenu

37. A CCU EIL F O R M AT I O N
«En vedette» Profs
Galerie de projets Grille de cours
… Processus d’admission
Contact coordination
…

38. PEN S E R M O B I LE
SI MPLIF IER AVA NT DE S U PPR I M ER
“ S H O R T & S WE E T ”

39. Bâtir un système

40. SO L I DE
FLE X I B LE
CL AIR

41. Patterns

42. bradfrost.github.com/this-is-responsive

43. Atelier

44. DESIGN

45. À proscrire en 2013

46. 960PX
LO R EM I P S UM
I PHON E .P SD, I PA D.P S D, DE S K TO P.P S D
LO R EM I P S UM

47. À faire en 2013

48. T YP O G R A PH I E
16 P X M I N IM UM PO U R T E XT E CO U R A N T
“TO UC H-R E A DY ”
LE M O I N S D’ I MAG ES P O S S I BL E
O P TI MIS AT IO N R E TI N A

49. ?
Par youssé
quessé qu’on
commence?

50. Cibler les contraintes

51. MED I A S
PUB LI C I T É
CO N T ENU
T YPO

52. Isoler les problèmes

53. LO GO
N AVIG ATI O N
H I ÉRA R CH I E D E CO N T ENU
V I SU E LS
PI E D D E PAGE

54. Inspiration

55. T YPO
CO UL EU R S
T RA IT E ME N T V I S UE L

56. T T

58. Lien
LIEN
Lien

59. Typographie

62. ?
Comment travailler
sans avoir la ou les
polices installées

63. typecast.com

64. Formats

65. 320 ?
768 ?
1 28 0 ?

66. Polices d’ icônes

68. Atelier

69. INTÉGRATION

70. Prototype HTML

71. Frameworks CSS

72. TWIT T ER B OOTS TR A P
LE SS F RA M E WO R K
1 1 40 C S S GR I D
SKE LETO N
…

73. %

74. TARG ET ÷ CO N T EX T = R ES U LT

75. Media Queries

76. Mobile First

78. Merci!
@_Tristan
@heliomqc
heliom.ca