Share
J'ai récemment eu le plaisir de passer deux semaines en Malaisie lors du Meetup Envato 2012. Quel endroit! Pendant notre séjour là-bas, j'en ai profité pour jeter un coup d'œil par-dessus les épaules de mes collègues, en recueillant des astuces et des astuces au cours de leur travail. Voici cinq astuces de conception de sites Web de l'équipe Envato que je pense que vous allez adorer…
Stu est un grand partisan de l'utilisation des préprocesseurs CSS, en particulier de Sass avec Compass. Au cours de la conférence Envato, il nous a expliqué comment il les a utilisés pour élaborer les thèmes du marché, ce qui démontre parfaitement l'efficacité de Sass lors de travaux sur de grands projets multi-sites..
Nos marchés sont tous des variantes du même thème:
Par exemple, une approche CSS standard vous obligerait (par exemple) à créer des feuilles de style de base destinées à contenir la plupart du style structurel, avec des feuilles de style supplémentaires permettant de modifier les couleurs et les graphiques de chaque site. Au mieux, vous conserveriez plusieurs copies de fichiers CSS très similaires (sinon identiques).
Pas si avec Sass. En écrivant un seul ensemble de feuilles de style SCSS de base (partiels), ainsi qu'un fichier de variables Sass pour chaque variante de site, la structure de votre projet ressemblerait davantage à ceci:
Les partiels sont des blocs de règles de style qui peuvent être inclus dans votre fichier principal. Ils peuvent également être réutilisés dans d'autres fichiers. En faisant précéder le nom de fichier d'un "_", les fichiers SCSS partiels ne seront pas compilés dans le CSS déployable, ils contribueront simplement aux fichiers de l'application que vous choisissez de créer..
Par exemple, vous pouvez avoir un fichier Sass qui dicte tous les styles de formulaire de votre projet. Vous nommez le fichier "_forms.scss" et vous l'amenez dans votre fichier d'application sans le trait de soulignement ni l'extension de fichier:
@import "formes";
"_Forms.css" ne sera pas généré, mais les règles de "_forms.scss" contribueront au fichier dans lequel vous l'avez inséré.
Vos fichiers variables définiront tous les aspects du thème pouvant être modifiés, tels que les couleurs des liens, les logos, etc. Ils peuvent ressembler à ceci, par exemple:
/ * variables themeforest * / $ link_color: # FFE59E;
Cette valeur peut ensuite être utilisée dans le fichier Sass de l’application principale ou dans les partiels importés:
a color: $ link_color;
Pour générer un tout nouveau thème, il vous suffit de modifier les variables d'un fichier (ou de les faire glisser dans un fichier _variables.scss différent). Pour modifier une fonctionnalité sur tous les thèmes, il vous suffit de gérer un fichier; le partiel où ce style particulier se produit.
Nous avons déjà introduit Sass et Compass sur Webdesigntuts +, alors jetez un œil si vous n’avez pas encore fait le saut..
Cameron a fait sa croisade personnelle pour faire tout nous sommes réactifs. Il a déjà laissé sa marque RWD sur les nouveaux sites de Rockable Press et de Creattica, et va bientôt exercer sa magie sur Tuts +…
Voici un bon conseil pour vous aider à visualiser vos mises en page Web, à plusieurs résolutions, en quelques secondes.
Obtenez-vous sur le site de Benjamin Keen où il a une grande JavaScript "Responsive Design Test Bookmarklet". Modifiez la taille des fenêtres que vous souhaitez tester, puis générez le bookmarklet..
Il ne vous reste plus qu'à faire glisser le lien fourni dans vos favoris. Chaque fois que vous consultez un site dans le navigateur, appuyez sur le bookmarklet et la mise en page apparaîtra dans toutes les résolutions.!
Mais attendez! Il y a plus! Cameron a fait un pas de plus et a attribué un raccourci clavier à ce bookmarklet; il lui suffit maintenant de taper la phrase appropriée (par exemple, "rwd") dans la barre d'adresse et le bookmarklet prend effet. Parfait si (comme moi) vous préférez ne pas afficher en permanence une barre d'outils de signets volumineuse.
Cameron utilisait Firefox, ce qui vous permet d’attribuer des raccourcis favoris aux signets grâce à sa fonction pratique de mots clés intelligents. Je travaille habituellement dans Chrome, qui manque cruellement de cette fonctionnalité. Cependant, il existe un moyen de contourner cela, car cela est possible d’attribuer des raccourcis clavier pour déclencher les moteurs de recherche. Ajoutons maintenant notre bookmarklet à Chrome de cette manière:
D'abord, cliquez avec le bouton droit sur la barre d'adresse et allez à "Editer les moteurs de recherche…"
Ensuite, vous aurez la possibilité d'ajouter un moteur de recherche ou une requête. Cela agira comme votre raccourci clavier, donc donnez-lui un nom (comme vous le souhaitez), attribuez une phrase (telle que "rwd" de Cameron), puis collez le bookmarklet JavaScript dans l'entrée finale..
Remarque: Votre bookmarklet devra être encodé en URL, assurez-vous qu'il ressemble à ceci:
Accentsconagua
javascript: document.write ('% 3C! DOCTYPE% 20html% 3E% 3Chtml% 3E% 3Chead% 3E% 3Cmeta% 20charset =% 22utf-8% 22% 3E… pas ça:
javascript: document.write ('… Erik Meyer a un outil pratique pour encoder les URL si vous en avez besoin.
Alors c'est tout! Rendez-vous sur la page sur laquelle vous travaillez, tapez le mot-clé dans votre barre d'adresse et bang! Test RWD instantané!
Pinterest pas assez macho pour vous? Délicieux aussi… (attendez-vous, les gens utilisent-ils encore de délicieux?) Besoin d'un moyen de marquer du contenu réel, de le sauvegarder sur votre Dropbox, et de vous inspirer visuellement de ce que les autres bookmarkings? Rodney estime qu'il n'y a rien de mieux que Gimme Bar:
L’interface modulaire sera familière à ceux d’entre vous qui épinglez et marquez avec d’autres services. Suivez, mettez en favori, sauvegardez, puis partagez à travers tous les canaux sociaux que vous avez connectés…
Découvrez ce que Rodney fait d'autre sur Twitter et Dribbble!
Voici la chose. quand j'ai demandé à Jacob un conseil, il m'a suggéré une extension de lorem ipsum, qui vous aidera à insérer du texte de remplissage dans vos conceptions..
Mais Jacob sans le savoir m’a enseigné une leçon précieuse et alternative lors de la conférence Envato: "Ne confiez pas votre iPad à Jess Hooper". Jess travaille au bureau de Melbourne et fait partie de l'équipe de révision. Elle a gentiment offert de s'occuper de mon iPad lorsqu'elle a quitté le groupe et est rentrée à l'hôtel une nuit.
Le jour suivant, alors que je me frayais un chemin dans la jungle malaisienne, cela se passait sur le portable de quelqu'un:
Un Tumblog dédié à mon iPad et à ses manigances ce jour fatidique.
Blague à part, Jacob est un designer très talentueux. Vous aurez vu son travail dans des endroits tels que million.envato.com et 1 000 sites à thèmes WordPress, ainsi que dans de nombreux sites Bundle et Rockable. Le conseil à retenir est:
Construire un Tumblog chaque fois que vous avez la chance.
C'est simple, rapide, amusant et vous pouvez mettre en pratique vos compétences en matière de thème. Jess, je vais te récupérer.
Regardez Jeff travailler et, même s'il ne vous enseigne pas, vous apprendrez de lui. Ce que j'ai ramassé de lui cette fois pourrait ne pas sembler être le plus gros gain de temps au monde, mais le voici:
Vous n'êtes pas obligé de fermer les balises des éléments de votre liste, laissez le navigateur le faire pour vous! *
* nullement obligatoire…
Cela semble un peu contre nature, un peu comme si vous omettiez les guillemets de vos attributs HTML:
mais détendez-vous, ça va. La prochaine fois que vous vous retrouvez à créer des éléments de liste, essayez de les faire comme ceci:
De nombreux aspects du balisage HTML que nous avons appris à considérer comme obligatoires sont en fait entièrement facultatifs. Nous avons tendance à penser que cela est invalide à cause de la façon dont la validation XHTML nous utilisait pour la battre. Si vous préférez partir balises sur, si cela vous fait gagner du temps, les abandonner. Les navigateurs sauront toujours ce que vous voulez dire.
La même chose est vraie de , et
Eh bien, j'espère que vous avez trouvé ces astuces aléatoires utiles à certains égards (je sais que je l'ai fait)…
