Contenu
- Avantages de la conception avec du code
- Les données d'abord
- Bonté mobile gratuitement
- Trouver une langue commune
- Apprenez plus vite
- Itération rapide
- Temps de lancement plus rapide
- Pourquoi HTML5?
- L'attribut magique des données
- CSS3 - c'est le nouveau Photoshop
- Sass + Compass: magiquement délicieux
- jQuery: oh, oui tu peux
- Cadres
- Dernières pensées
Cet article a été publié pour la première fois dans le numéro 235 du magazine .net, le magazine le plus vendu au monde pour les concepteurs et les développeurs Web.
Je n’ai jamais été un grand fan de faire plus de travail que nécessaire. J'ai tendance à évaluer les méthodes et les outils en fonction de leur capacité à me rendre, ou mon équipe, plus efficace. À quelle vitesse nous amènent-ils à un produit fonctionnel? Dans quelle mesure communiquent-ils efficacement? Restent-ils en dehors de notre chemin?
Au fil des ans, j’ai ajusté mon processus de conception et mes outils. J'imagine que je continuerai de le faire. C’est la nature de la conception pour la technologie et le Web. Cette industrie est en constante évolution; notre processus et nos outils doivent également évoluer.
HTML5 et CSS3 facilitent la transition d'une plus grande partie du processus de conception en amont - loin de Photoshop et plus vers un design vivant et respirant. Des outils tels que Foundation, Bootstrap et jQuery permettent de déplacer davantage votre processus de conception vers un code plus accessible.
Avantages de la conception avec du code
Premièrement, je ne recommande pas de supprimer Photoshop ou tout autre éditeur de conception visuelle de votre flux de travail. Au lieu de cela, je me concentrerai sur les avantages de la transition de cette conception dans le code le plus tôt possible.
Les données d'abord
Ce que j’ai toujours aimé dans la conception HTML, c’est qu’elle encourage la réflexion dans une perspective axée sur les données. En revanche, en utilisant des programmes de dessin tels qu'Illustrator, OmniGraffle ou Balsamiq, vous commencez avec une boîte et la remplissez de données.
En HTML, vous construisez le DOM (modèle d'objet de document), un peu comme la construction d'une table des matières. C’est un retour à une véritable conception d’informations avec des hiérarchies significatives. HTML5 va encore plus loin avec l'ajout de nouveaux éléments sémantiques: article, section, en-tête, aparté, pied de page, etc. Cette approche axée sur les données se marie parfaitement avec les conceptions réactives et mobiles d'abord.
Bonté mobile gratuitement
Si vous lisez ceci, vous concevez probablement pour mobile. Et il y a de fortes chances que vous deviez concevoir un formulaire ou deux. Avec HTML5, vous avez de la chance. Avant HTML5, vos types d'entrée étaient à peu près un champ de texte ou de mot de passe. HTML5 a introduit un certain nombre de types d'entrée supplémentaires, notamment:
input type = "email"> input type = "tel"> input type = "url"> input type = "date"> input type = "date-heure">
Ce qui est vraiment génial à propos de ces types d’entrées supplémentaires et uniques, c’est que les navigateurs mobiles sur iOS et Android les reconnaissent et échangent automatiquement un clavier contextuel - sans plug-ins jQuery ou hacks spéciaux requis. Oh, et si votre navigateur ne sait pas ce qu’un type d'entrée = "email"> est, alors il est juste par défaut une entrée de texte.
Trouver une langue commune
«C’est formidable de voir comment nos concepteurs et développeurs peuvent travailler dans le même langage» - John Drago, développeur d’applications chez Inflection.
Voyez si cela vous semble familier. Je suis dans une salle de conférence avec une demi-douzaine de développeurs d'applications côté serveur qui peuvent coder des cercles autour de moi en Ruby, Python, Java ou .NET. Je suis le seul designer. Certaines de mes suggestions sont initialement rejetées comme étant trop compliquées à mettre en œuvre. Je me dirige vers le tableau blanc et commence à écrire du HTML et du CSS sur le tableau pour savoir comment le design pourrait être implémenté. Soudainement, le ton de la conversation change et l'un des développeurs dit à contrecœur: "Eh bien, oui - si nous procédons de cette façon, cela pourrait fonctionner."
Transférer davantage mon processus de conception dans le code a amélioré les conversations avec les développeurs. Il y a une couche supplémentaire de respect gagné en sachant comment créer vos conceptions dans le code. Vous n’avez pas besoin d’être un expert pour gagner ce respect. Bien que mes compétences en HTML et CSS soient solides, mes compétences en JavaScript sont au mieux médiocres. Et je n'hésite pas à l'admettre. Pourtant, lorsque nous travaillons avec des développeurs frontaux ou côté serveur, le fait que nous puissions parler dans un langage commun, ou nous rencontrer à mi-chemin, est un énorme avantage.
Apprenez plus vite
Alors que les wireframes et les composites visuels peuvent aider à la planification, ces artefacts statiques sont théoriques. Combien de fois avez-vous essayé d'expliquer une interaction à quelqu'un, pour lui faire répondre: "Je suppose que je vais devoir le voir." Plus tôt vous arrivez à un prototype, quelque chose avec lequel les gens peuvent interagir, plus vite vous pouvez expérimenter la conception et voir si les idées fonctionnent.
Itération rapide
À quand remonte la dernière fois qu'un design final livré en production correspondait exactement à votre composition Photoshop? Presque jamais. Avec la conception de produits numériques, le changement se produit constamment. De plus, des changements tels que l'augmentation de la taille de vos en-têtes de 22pt à 24pt sur quelques dizaines d'écrans peuvent prendre des heures dans Photoshop. Les objets intelligents vous offrent un certain niveau de conception orientée objet dans Photoshop. Malheureusement, la plupart des concepteurs visuels que je connais n'utilisent pas suffisamment les objets intelligents. Avec CSS, parce qu'il encourage une approche plus systématique de la conception, les changements typographiques prennent quelques minutes au lieu d'heures.
Qu'en est-il du changement des dégradés linéaires sur tous vos boutons? Ou la taille d'une frontière? Que diriez-vous de passer des coins carrés à des coins arrondis 2px? Dans Photoshop, cela peut prendre des heures et vous devez encore le coder. La possibilité de concevoir dans le code permet d'éviter le retour en arrière dans Photoshop pour itérer sur la conception visuelle. Lorsque vous déplacez ces modifications en amont dans le code, en utilisant CSS3 et Sass (que je couvrirai plus loin dans cet article), elles peuvent se produire en temps réel et ne prendre que quelques minutes.
Temps de lancement plus rapide
Au fil des ans, au fur et à mesure que je transformais davantage mon flux de travail de conception en amont vers le code, j'ai constaté une réelle amélioration - une réduction d'environ 20 à 30% du temps de mise sur le marché. Plus je fais cela, moins je passe de temps à dupliquer les efforts. Je passe moins de cycles dans Photoshop ou Fireworks, puis je répète le travail dans le code.
À un moment donné, la conception doit s'interfacer avec un type de backend, qu'il s'agisse d'un CMS, d'une application Rails ou autre. Comme la majeure partie de mon travail de conception est dans le code, l'intégration se produit le plus tôt possible. Il y a quelques années, un de mes clients, PointRoll, est passé du prototype à la production en cinq jours.
Pourquoi HTML5?
HTML5 est plus simple que les versions précédentes de HTML. Prenons par exemple la déclaration de type de document. Dans les versions précédentes de HTML, le DOCTYPE ressemblait à quelque chose comme ça:
! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/ xhtml11.dtd">
Et il y avait six versions différentes. Heureusement le HTML5 DOCTYPE ressemble à ça:
! DOCTYPE HTML>
Sérieusement. C'est ça. Étonnamment simple.
Lors de la création d'une page HTML standard, il existe un certain nombre d'éléments communs, tels qu'un en-tête, une zone de contenu principale, une barre latérale et un pied de page. Je suis sûr que vous avez déjà vu quelque chose comme ça:
div id = "header> div id =" nav "> / div> / div> div id =" main "> div id =" sidebar "> / div> / div> div id =" footer "> / div>
Rien d'extraordinaire là-bas. Mais une fois rempli de contenu, ce modèle se transforme en soupe div. En revanche, avec les nouveaux éléments sémantiques de HTML5, vous obtenez quelque chose de beaucoup plus simple et plus facile à analyser, comme ceci:
header> nav> / nav> / header> article> side> / apart> / article> footer> / footer>
Regarde ça. Quelque chose qui a du sens.
L'attribut magique des données
HTML5 est livré avec un autre crochet génial qui vous donne la possibilité de créer votre propre signification sémantique: le Les données-. Auparavant, si vous vouliez attribuer quelque chose de significatif à un élément DOM, vous étiez limité aux ID, aux classes et aux rôles.
Malheureusement, les identifiants doivent être uniques. Les cours sont universels (yippee!), Mais leur utilisation peut rapidement se transformer en désordre. Les rôles sont un atout sous-utilisé qui donne une signification significative à ARIA. Récemment, j’ai utilisé des données pour une plate-forme d’analyse de suivi des événements que nous développons chez Inflection.Nous sommes de grands fans de tester nos conceptions. Lorsque vous travaillez sur des applications ou des pages qui présentent une grande interactivité, nous souhaitons avoir des informations plus précises sur l'engagement client au sein de la page.
Entrer le Les données-. Avec lui, vous pouvez attribuer, transmettre et accrocher dans un modèle de signification «définissez votre propre». Ainsi, par exemple, vous pouvez faire ceci:
input type = "button" data-id = "facebook" dataregion = "main" data-event = "register"> input type = "button" data-id = "twitter" dataregion = "main" data-event = "register "> input type =" button "data-id =" linkedin "dataregion =" main "data-event =" register ">
Nous pouvons attacher un auditeur avec JavaScript à la page et chaque fois qu'un client survole ou clique sur ce bouton, nous pouvons suivre cette activité. Au lieu de ne pouvoir suivre que cette personne enregistrée via OAuth avec Twitter, nous pouvons voir qu'elle a survolé Facebook, puis Twitter, puis LinkedIn, puis a finalement décidé de choisir Twitter pour son modèle OAuth.
Imaginez étendre cela à un site comme Pinterest, ou au nouveau design de Myspace où les clients glissent et déposent des tuiles pour les réorganiser en fonction de leur intérêt. Ou peut-être masquer les tuiles qui ne les intéressent pas. Les données- L'attribut vous permet d'attacher ou d'attribuer une couche supplémentaire de signification sémantique aux éléments que vous pouvez définir. Pour les sites et les applications qui dépendent fortement d'Ajax, cela ouvre des opportunités illimitées.
CSS3 - c'est le nouveau Photoshop
CSS3 a apporté un tout nouveau niveau de conception de l'apparence et de la convivialité qui nécessitait autrefois des images d'arrière-plan, des tranches et la tristement célèbre technique des «portes coulissantes». Heureusement, tout cela appartient au passé.
Jetons un coup d'œil à la création d'un bouton fantaisie avec un dégradé linéaire, des coins arrondis, une ombre de texte qui lui donne un bel effet de pression sur les lettres et une lueur au survol. L'apprentissage de ces techniques ira un long chemin. Chacun d'eux peut être utilisé indépendamment, ou dans diverses combinaisons pour tirer à peu près n'importe quelle sensation visuelle actuelle sur le Web aujourd'hui.
Tout d'abord, apportons quelques ajustements à la valeur par défaut bouton> et type d'entrée = "soumettre"> éléments. En supposant que vous utilisez l'une des réinitialisations CSS standard, nous allons simplement ajouter un peu de dimensionnement et de respiration.
/ * Boutons de boutons, dont les boutons ont été obtenus. ======================================= * * / bouton, entrée [type = "soumettre"] {hauteur: 2.7em; rembourrage: .4em .7em; hauteur de ligne: 1,9; }
Protip: Les boutons et les entrées soumis peuvent être difficiles à redéfinir. J'ai trouvé en ajustant la hauteur de ligne à 1,6 ou plus, vous pouvez éviter le piratage d'avoir besoin d'un div ou d'une étendue supplémentaire à l'intérieur du bouton> étiqueter.
Maintenant que nous avons «résolu» notre problème de bouton, nous pouvons créer un .btn classe pour nous donner un joli bouton propre avec des coins arrondis, un dégradé linéaire, un contour et ce look typographique.
.btn {affichage: bloc en ligne; bordure: 1px solide # d4d4cc; -moz-border-radius: 4px; -webkit-border-radius: 4px; rayon de la bordure: 4px; rembourrage: .4em .7em; arrière-plan: # edeff2; arrière-plan: -webkit-gradient (linéaire, 0% 0%, 0% 100%, de (#fefefe), couleur-stop (0.55, # edeff2), à (# e4e6e9)); arrière-plan: -moz-linear-gradient (centre en haut, #fefefe, # edeff2 55%, # e4e6e9); -moz-box-shadow: rgba (160, 172, 187, .7) 0 0 .2em 0; -webkit-box-shadow: rgba (160, 172, 187, .7) 0 0 .2em 0; boîte-ombre: rgba (160, 172, 187, .7) 0 0 .2em 0; couleur: # 6c7786; taille de la police: 1,1em; ombre de texte: #fefefe 1px 0 1px; hauteur de ligne: 1,375em; curseur: pointeur; }
Et puis un bel effet de survol avec une lueur subtile en utilisant le boîte ombre méthode:
.btn: hover, .btn: focus {-moz-box-shadow: # 129ceb 0px 0px 2px; -webkit-box-shadow: # 129ceb 0 0 2px; boîte-ombre: # 129ceb 0 0 2px; arrière-plan: # e6e9eb; arrière-plan: -webkit-gradient (linéaire, 0% 0%, 0% 100%, de (# f7f7f7), couleur-stop (0.55, # f6f6f7), à (# e6e9eb)); arrière-plan: -moz-lineargradient (centre en haut, # f7f7f7, # f6f6f7 55%, # e6e9eb); couleur: # 45484b; ombre de texte: rgb (255,255,255) 1px 1px 0; couleur de la bordure: # c9c9c0; }
Maintenant, je ne suis pas un grand fan de l’écriture du code de dégradé linéaire. C’est long et déroutant. Comme vous pouvez le constater, je n’ai inclus que la version pour -moz, -webkitet le modèle standard. Si vous souhaitez inclure les versions -o et -ms, vous devrez doubler le code.
Il existe deux autres options. L'un est un générateur CSS3; il en existe plusieurs disponibles sur le web, dont ColorZilla. Mais si vous voulez améliorer un peu votre jeu, pensez à plonger dans Sass: combiné avec Compass, c'est une aubaine.
Sass + Compass: magiquement délicieux
Vous pouvez arrêter d'espérer une édition licorne CSS4. C'est ici et ça s'appelle Sass + Compass. Sass signifie Syntactically Awesome Stylesheets: vous héritez de tous les avantages traditionnels de CSS3 avec les joies supplémentaires des variables, mixins, extendeurs et autres goodies.
J'ai récemment remanié un fichier CSS de 5000 lignes contenant plus de 30 variations sur la même nuance de bleu. Avec Sass, j'ai remplacé toutes les variantes par ce code:
couleur: $ bleu;
En définissant $ bleu dans mon _variables.scss fichier, je peux créer une couleur par défaut que chaque fichier CSS ou SCSS peut référencer. Quiconque écrit du CSS peut utiliser $ bleu et ne pas avoir à vous soucier de l'utilisation d'une pipette, de la recherche d'un code hexadécimal ou d'une couleur RVB, RVBA ou HSL.
Vous vous souvenez de ce code de gradient linéaire? Au lieu d'écrire plusieurs lignes de code, que diriez-vous de ceci:
@include background (gradient linéaire (# b1cfdc, # 7a9cac));
Laissez Sass et Compass faire le gros du travail et générer la syntaxe correcte pour vous: c'est fait. Supposons que vous souhaitiez une version plus foncée ou plus claire d’une couleur. Vous pouvez déplacer la pipette dans Photoshop ou simplement utiliser les commandes éclaircir / assombrir dans Sass:
@include background (gradient linéaire (assombrir ($ litegray, 2%), assombrir ($ blanc cassé, 5%)));
Cela créera un dégradé linéaire avec un 2% assombri $ gris clair et 5% assombri blanc. Voil! Vous n’avez même pas besoin des codes HEX ou RVB.
jQuery: oh, oui tu peux
J'ai une confession à faire. JavaScript utilisé pour m'intimider. Ensuite, j'ai trouvé jQuery. Je ne prétendrai pas être un gourou de JavaScript, mais je suis convaincu que je peux réaliser à peu près n'importe quel type de transition ou fonction dont j'ai besoin pour utiliser jQuery.
Prenons, par exemple, la possibilité d'afficher une entrée de numéro de téléphone secondaire à l'écran en cliquant sur un lien Ajouter un nouveau numéro. En utilisant jQuery, vous écrivez simplement ceci:
// - Révélation progressive - // $ ('. New-number'). Click (function () {$ ('. Alt-number'). FadeIn ('fast');});
Vous cherchez quelque chose de plus avancé? Il existe probablement un plug-in pour cela. Les comportements de base sont faciles et les comportements complexes sont accessibles avec jQuery.
Cadres
Deux des frameworks les plus robustes aujourd'hui sont Foundation et Bootstrap. Maintenant, avant de rejeter les frameworks CSS, laissez-moi vous demander quelque chose. Utilisez-vous jQuery? Ruby on Rails? Django? Tous les cadres.
Tout comme jQuery et RoR, Foundation et Bootstrap sont nés de la reconnaissance du fait qu'il y a un bon nombre de choses que nous faisons encore et encore (comme les réinitialisations, la typographie, les grilles, les formulaires, les boutons, la navigation et les listes). Foundation et Bootstrap offrent tous deux la prise en charge des conceptions réactives grâce à l'utilisation de classes d'assistance. Les deux sont bien documentés et ont été testés sur route, vous pouvez donc les utiliser en toute confiance.
Une différence clé entre les deux: Bootstrap est basé sur le système LESS pour le prétraitement CSS, alors que Foundation est basé sur Sass. Je préfère Sass à LESS en raison de ses capacités supplémentaires, mais Sass et LESS écrasent le CSS traditionnel en morceaux.
Une dernière réflexion sur les frameworks. Pour ceux qui ne veulent pas hériter du gonflement supplémentaire de la structure de quelqu'un d'autre, envisagez d'en choisir une existante et de la dépouiller jusqu'à la base, ou d'en choisir quelques-unes pour créer la vôtre. Quoi qu'il en soit, il n'y a vraiment aucune raison de repartir de zéro à chaque fois.
Dernières pensées
Vous voulez un meilleur contrôle sur la façon dont votre conception se révèle finalement? Déplacez plus de processus en amont vers le code. HTML5 apporte enfin du sens au DOM. Bon débarras aux absurdités DOCTYPEs et divitis. CSS3 est le nouveau Photoshop: dégradés linéaires, borderradius et box-shadows FTW! Et avec des outils tels que Bootstrap, Foundation, Sass et jQuery, déplacer la conception en amont vers le code n'a jamais été aussi simple.
Découvrez 55 exemples étonnants de HTML5 sur Creative Bloq.
