Sommaire 1/ Grille 2/ Specs globales 3/ Specs HP 4/ Specs Questions 5/ Specs Offre 6/ Specs Faq 7/ Comportements interactifs
1/ Grille et breakpoints Desktop : <1200px Mobile : <640px Tablette : 1200px>...<640px
2/ Specs Globales Global > couleur de textes : #ffffff ou #000000 ou #ff6600 Global desktop : > Texte footer : 18pts / Helvetica neue Std / Roman > Texte bulle orange : 28pts / Helvetica neue Std / Bold > Texte boutons : 18pts / Helvetica neue Std / Bold Global tablette : > Texte bulle orange : 44pts / Helvetica neue Std / Bold > Texte boutons orange : 54pts / Helvetica neue Std / Bold > texte boutons liseret blanc : 27pts / helvetica neue Std / bold Global mobile : > Texte boutons orange : 41pts / Helvetica neue Std / Bold > texte boutons liseret blanc : 26pts / helvetica neue Std / bold
3/ Specs HP Desktop : 1920px Jusqu'à 1200px : > Background rezise selon résolution. Reste centré sur x et y. > Taille de boite noire de bouge pas, texte non plus. Le tout reste centré. (comportement systématique sur toutes les pages du site.) > La bulle reste de la même taille et coulisse sur axe des x pour rester à 100px du bord de droite. Elle ne doit jamais être coupée par le bord haut de la page. Taille de texte de bulle inchangé. > footer : «footer_desktop.psd». Les icônes FB et Twitter suivent le bord gauche de l'écran. Le logo suit le bord droit. > Gros texte centre : helvetica neue std / 38pts / bold > Petit texte : helvetica neue std / 23pts / bold Mobile : Tablette : Jusqu'à 640px : > Background resizé et cropé sur les cotés gauches et droite. > Largeur boite noire = 10/12. Le tout reste centré sur x et y. (comportement systématique sur toutes les pages du site.) > La bulle disparaît. > footer : «footer_mobile.psd» Entre 640 et 1200 px : > Background resizé et cropé sur les cotés gauches et droite. > Largeur boite noire = 10/12. Le tout reste centré sur x et y. (comportement systématique sur toutes les pages du site.) > La bulle reste de la même taille et coulisse sur axe des x pour rester à 100px du bord de droite. Elle ne doit jamais être coupée par le bord haut de la page. Taille de texte de bulle inchangé. > footer : «footer_tablette.psd» Sur ce modèle, les icônes FB et Twitter suivent le bord gauche de l'écran. Le logo suit le bord droit.
4/ Specs Questions Desktop : Tablette : Mobile : Jusqu'à 1200px : > Resize homothétique des images cliquables et de leurs textes. > simple crop à droite et à gauche dans la bande noire pour la question. > question : helvetica neue std / 42pts / bold > réponse : helvetica neue std / 60pts / bold Entre 640 et 1200px : > Largeur d'images différents (voir maquette) Suit la grille /12 colones. > question : helvetica neue std / 55pts / bold > réponse : helvetica neue std / 64pts / bold En dessous de 640px : > Formats des réponses vertical, en bloc les unes sous les autres. Voir maquette. > question : helvetica neue std / 35pts / bold > réponse : helvetica neue std / 60pts / bold
5/ Specs Offre Desktop : Tablette : Mobile : > Specs similaires à celles de HP (plus haut) Sauf pour les textes (voir sur maquette). > Activer la grille sur maquette pour voir placements de blocs/champs/btns...
6/ Specs FAQ Desktop : Tablette : Mobile : > Specs similaires à celles de HP (plus haut) Sauf pour les textes (voir sur maquette). > Activer la grille sur maquette pour voir placements de blocs/champs/btns... > Au clic sur une question, la boite s'ouvre pour laisser apparaître la réponse. Au clic sur une nouvelle question, la précédente boite se ferme et la nouvelle s'ouvre. Si la réponse est plus longue que la hauteur de l'écran, on scroll. Sur tous les devices, le footer reste ferré à sa place.
7/ Comportements interactifs Btn HP : > Au rollover, le bouton devint blanc et le texte passe en orange #ff6600 > Au rollover, la case prend un filtre noir opacité 40%