Quels outils utilisez-vous lors de la génération de balisage à partir de maquettes?

Question

Je m'efforce donc de passer le plus clair de mon temps sur le serveur d'applications, mais de temps en temps j'ai besoin de me salir les mains et de générer des balises/css/js à partir d'un maillage ou d'une maquette. En ce qui concerne les outils, j'ai trouvé que les navigateurshots et l'application Litmus étaient utiles et bien sûr, vm aussi pour vérifier les choses en direct dans ie- {6,7,8}. Sinon, je fais le gros du travail chez vim. Pour générer un nouveau balisage qui n'est pas lié à une conception de cible, je pense que certains des outils css comme sass me paraissent utiles mais je suis sceptique quant à leur utilité lorsqu'ils doivent générer un balisage pour correspondre à un design de photoshop.

Alors, quels conseils/outils gardez-vous dans votre ceinture utilitaire générant des balisages lorsque vous construisez des balisages solides à partir de conceptions?

Ma liste à ce jour:

• Browsershots
• Browserlab.adobe.com
• Haml/Moins/Sass (non utilisé, mais explorera probablement)

Answer 1

J'utilise le 960 Grid System (avec la réinitialisation de Meyer et la réinitialisation de texte). Je conçois mes mises en page dans photoshop de telle sorte que je puisse utiliser le système de grille 960. Cela ne nécessite pas de mises en page boxy, mais cela nécessite de la réflexion et de l'ordre par opposition aux distances arbitraires entre les éléments graphiques, etc.

Mon code est toujours écrit à la main; Je ne fais pas confiance au logiciel pour pense pour moi. De cette façon, j'ai un contrôle complet sur ce qui se passe. Je n'utilise jamais de hacks IE seulement. Si je ne peux pas faire ce que je veux d'une façon, j'en chercherai une autre. Hacks met une forme d'instabilité dans un design/layout/fonctionnalité, et je ne suis pas un grand fan de ça. Je lance tous les navigateurs modernes, avec IETester pour tester IE6, mais je suis certain que je vais bientôt abandonner le support pour IE6. Vous ne pouvez résoudre ses problèmes PNG que si vous voulez placer votre moniteur contre le mur.

Et mon outil numéro un, StackOverflow. Sans les esprits merveilleux et les personnalités altruistes, je serais tout seul pour résoudre tous les problèmes que je rencontre. C'est une idée déprimante.

Answer 2

• TextMate/Firebug/MAMP Pro est ma trousse d'outils générale
• remet à zéro CSS (Eric Meyer et Aardvark.legs sont mes favoris)
• xScope
• machines virtuelles dans diverses combinaisons pour soutenir A-grade browsers
• Smush.it et YSlow en général
• Le concepts of OO CSS

Puisqu'il me sera peut-être encore demandé d'utiliser le hack CSS occasionnel, je construirai normalement mon CSS en plusieurs passes. Couleurs en premier, suivi de la typographie, suivi de la mise en page. Tout vérifier (en particulier IE6) après chaque passage. Mieux vaut étouffer les problèmes dans l'œuf plutôt que d'essayer de tout suivre plus tard!

Bien que ce ne soit pas nécessairement lié au balisage, jQuery et TYPOlight sont des économiseurs de temps inestimables.Je ne déploie jamais de site sans CMS en place. L'après-midi supplémentaire pour mettre en place un site de travail dans TYPOlight et former le client sauve des jours de maux de tête de mise à jour à long terme.