Share
Étaient vraiment chanceux de travailler dans une industrie comme celle du web. De nos jours, nous avons énormément de nouveaux conseils, techniques et méthodes de travail tout le temps. Nous sommes également très chanceux d’être à une époque où, avec l’introduction de ces nouvelles technologies, nos navigateurs Web peuvent (pour la plupart) être assez rapides à rattraper. Nous pouvons donc intégrer ces nouvelles technologies à nos conceptions ( et haletant, même dans le travail du client!) plus que jamais.
CSS3 est l'une de ces nouvelles technologies (légèrement) géniales. Parallèlement, de nombreuses choses nous ont facilité la vie, tant pour les concepteurs que pour les développeurs. Au fur et à mesure que nos navigateurs s'améliorent, nous pouvons être plus aventureux avec nos idées et designs que nous créons..
Cependant, nous sommes également à une époque où nous concevons plus d'utilisateurs, de périphériques, de navigateurs et de technologies que jamais auparavant. Avant l'âge du smartphone, de la tablette et du réfrigérateur connecté à Internet, il n'existait en réalité qu'un moyen d'accéder à Internet. à travers un ordinateur normal. Et la résolution d'écran la plus courante pendant un temps était 640px x 480px, ou 800px x 600px!
De nos jours, nous avons des milliers d’appareils, de tailles d’écrans et de contextes différents auxquels nous devons répondre. Si nous ne tenons compte que des écrans et de la taille des écrans, nous avons des milliers d’appareils mobiles (téléphones mobiles, smartphones, tablettes, netbooks, etc.), écrans Retina, écrans standard, écrans haute définition, petits et grands écrans, etc. alors, alors beaucoup plus.
Bien que cela puisse être vraiment difficile, le nombre de choses que nous devons prendre en charge ne peut que grandir, c'est donc quelque chose que nous devons adapter et apprendre..
Et qu'est-ce que cela signifie pour notre processus? Il est impossible de tester votre site Web sur chaque appareil créé sur lequel votre site pourrait éventuellement être consulté. Au lieu de cela, nous devons effectivement changer notre processus pour le mieux. Je suis sûr qu'en tant que développeur, vous avez dû le faire vous-même, et c'est la même chose qu'un designer..
Nous devrons peut-être prendre des mesures supplémentaires pour améliorer notre processus de conception pour le mieux. Par exemple, il est plus facile d’itérer plus rapidement des idées de conception pour la typographie (par exemple) dans le navigateur. Quoi que ce soit, je peux garantir que votre processus devra peut-être être légèrement ajusté.
Bien que CSS3 semble plus récent, avec l’adoption de nombreuses techniques CSS3 populaires utilisées au cours des dernières années, les premières versions de CSS3 remontaient à 1999; il y a quatorze ans!
Contrairement aux spécifications CSS précédentes (telles que CSS2), CSS3 était divisé en plusieurs modules - et à la mi-2012, il y avait plus de cinquante modules publiés. Quatre d'entre elles en particulier ont été publiées sous forme de recommandations. Le module a fait l'objet de nombreuses révisions et tests avant d'être recommandé pour une utilisation complète. Les quatre modules CSS3 recommandés par le W3C sont:
D'autres modules, tels que «Arrière-plan et bordures», «Disposition multicolonne», «Disposition de boîte flexible», sont actuellement au niveau «Recommandation du candidat», où le W3C est satisfait des caractéristiques significatives de ce module..
À ce niveau, on pense que les implémentations (par les navigateurs, par exemple) devraient supprimer les préfixes de navigateur en place. Les autres modules examinés incluent «Animations CSS», «Transformations CSS» et «Effets de filtre CSS», mais ils ont tous le statut «Brouillon» (comme beaucoup d'autres modules!) Et ne sont donc pas aussi prêt comme ceux avec le statut CR.
Cependant, à côté des quatre principaux modules recommandés par le W3C, il existe de nombreuses techniques CSS3 populaires que nous voyons souvent dans nos sites Web aujourd'hui. Ceux-ci inclus:
Regardons chacun de ceux-ci plus en détail.
L'introduction des dégradés CSS a signifié qu'au lieu d'utiliser un arrière-plan d'image pour créer un aspect particulier sur un site Web, vous pouvez utiliser CSS3 à la place des navigateurs modernes..
C'est formidable, car cela permet d'économiser le poids des pages et de minimiser les performances en ne demandant pas autant d'images..
Le rayon de la frontière signifie que nous pouvons désormais inclure des angles arrondis pour les navigateurs modernes dans nos conceptions sans avoir à recourir à des images pour chacun. Et imaginez si vous aviez une image d'arrière-plan avec une bordure, un coin arrondi, un dégradé et une ombre - ce genre de choses était un cauchemar dans le passé, alors qu'elles sont maintenant plus faciles à implémenter pour les navigateurs qui les prennent en charge..
Si vous êtes chanceux, vous aurez des clients qui comprennent également l'amélioration progressive, sinon vous pouvez les expliquer et les éduquer. Dans le monde actuel, où de nombreuses personnes possèdent des smartphones, des tablettes et des ordinateurs (ou une combinaison de ces technologies et davantage), les gens devraient s'attendre à comprendre que les sites Web ne sont pas tous conçus pour fonctionner de la même manière sur chaque appareil ou écran sur lequel ils le visualisent. Dans une certaine mesure, ils comprendront que certains visuels esthétiques se dégradent gracieusement pour les autres navigateurs. Les coins arrondis étant l'un d'entre eux!
Avec l'introduction de l'ombre de la boîte CSS3, nous pouvons maintenant avoir des ombres portées pour nos éléments de la boîte. Nous pouvons également utiliser une version texte (texte-ombre, si vous ne pouvez pas le deviner) pour notre contenu..
Vous avez également le choix d’avoir à la fois un dégradé intégré ou standard, ce qui signifie que nous pouvons - oui, vous l’avez deviné - abandonner une fois de plus l’utilisation des images pour ces styles..
CSS3 nous a également présenté la possibilité de référencer plusieurs images d’arrière-plan dans notre code. C’est formidable, car cela signifie que nous pouvons nous amuser davantage en superposant des éléments d’arrière-plan pour créer des effets fantaisistes que nous aurions autrement eu du mal à recréer en CSS ou avec une seule image d’arrière-plan..
Enfin, à partir d'IE9 et avec tous les autres navigateurs modernes, nous n'avons plus besoin de créer une petite image d'arrière-plan transparente et reproductible.!
Cela suffisait à me faire aimer utiliser CSS3, et signifie simplement que nous pouvons être libres d'utiliser la transparence dans nos conceptions là où nous le jugeons approprié.
Les animations et les transformations sont géniales; avec les transitions, ils nous aident à ajouter beaucoup plus d'interactivité à nos sites Web. Bien que ceux-ci puissent être difficiles à afficher dans nos conceptions, c'est certainement un moyen d'utiliser CSS3 à notre avantage pour donner vie aux sites Web..
L'inclusion de la règle @ font-face pour CSS3 a été brillante pour les concepteurs, car cela signifiait que nous pouvions être un peu plus expérimentaux dans la typographie que nous utilisons dans nos conceptions. En substance, l’utilisation des polices Web a donné aux concepteurs beaucoup plus de liberté pour exprimer leur créativité par le biais de leur travail..
Les polices Web sont excellentes, car elles nous offrent un nouveau moyen de créer des sites Web époustouflants. Il existe une telle variété de choix pour les polices que nous pouvons maintenant utiliser sur nos sites Web, si ce n’est par centaines, voire par milliers..
Tous ne seront pas excellents, et il y en a certainement plus qui sont favorisés par beaucoup, mais il y a tellement de gemmes que vous pouvez trouver dans vos conceptions qui ont l'air tout simplement chouettes comparées à certaines des polices plus anciennes et sécurisées pour le Web..
Les polices Web nous offrent également un moyen plus sûr de travailler de manière responsable avec nos conceptions réactives. Vous souvenez-vous du jour où les en-têtes "fantaisistes" ont été créées avec des polices de remplacement (qui n'étaient pas considérées comme sécurisées pour le Web) et ont été placées en tant qu'images ou arrière-plans d'image? Les polices Web permettent d'abandonner cette pratique en toute sécurité, sachant que nous aurons de beaux sites Web avec des polices entièrement accessibles et adaptables..
Avec l'introduction des polices Web et @ font-face, quelques services sont apparus qui nous aident à implémenter des polices Web sur nos sites Web. Ces services incluent:
Et même avec si peu de services, il existe de nombreuses façons de les implémenter dans votre processus de développement. Certains utilisent JavaScript et d'autres utilisent du CSS pur pour charger les polices. Mais qu'en est-il du flux de travail des concepteurs; comment peut travailler avec le web les polices fonctionnent dans des maquettes statiques?
En fait, c'est un peu délicat, car il n'y a pas beaucoup de façons d'intégrer les polices Web que vous utilisez au logiciel graphique que vous pourriez utiliser. Typekit a récemment annoncé son intention d’intégrer Desktop Sync à Adobe Creative Cloud et a commencé à le déployer pour certains utilisateurs..
En raison de l'acquisition de Typekit par Adobe, ils sont désormais parfaitement synchronisés avec Photoshop, Illustrator et tous les autres produits Adobe, ce qui est une excellente nouvelle pour les concepteurs..
En dehors de cela, il n’ya pas d’autre moyen d’intégrer facilement les polices Web que nous avons choisi d’utiliser dans nos maquettes, à moins d’acheter la version standard «de bureau» de la police séparément de la police Web. Si vous ne recherchez pas un site Web pour la marque, cela peut alors devenir un peu coûteux et difficile à gérer..
Une autre option que vous avez lorsque vous travaillez avec la typographie est de vous lancer assez rapidement dans le navigateur. soit en travaillant avec un service tel que Typecast, comme expliqué dans les précédentes sections Typographie de cette série, ou en achetant les polices Web sur votre service préféré et en observant comment elles réagissent avec votre contenu dans une version prototypée de votre conception.
Quel que soit votre choix de travailler avec des polices Web dans votre conception, vous pouvez être assuré que vos utilisateurs bénéficieront d'un résultat final plus créatif et plus esthétique et dont vous pourrez être fier..
Les icônes sont une grande chose pour le moment; Une bonne chose qui se passe dans le monde des «tendances». Je pense que les icônes et les images qui peuvent tomber sous cette étiquette, par exemple un logo, sont un excellent outil pour guider vos utilisateurs dans un site Web. Utilisés à côté du texte, ils peuvent constituer un excellent outil visuel..
Cependant, dans un monde où nous devons nous assurer que les images et les présentations fonctionnent correctement avec autant de périphériques et de tailles d'écran, nous devons nous assurer que nos icônes et nos images fonctionnent bien dans tous les domaines et sont davantage prévisibles. Heureusement, il existe plusieurs options qui peuvent nous aider à nous assurer de le faire..
La belle PNG (qui nous permettait d'inclure un arrière-plan transparent dans une image et non un fichier DIF louche) est un moyen infaillible de travailler avec des icônes sur vos sites Web..
Mais n'oublie pas; si vous souhaitez proposer de belles images à une foule de Retina, vous aurez besoin d'une sorte de sauvegarde CSS ou JavaScript pour vous en assurer..
Travailler avec des PNG ne devrait pas souvent changer quoi que ce soit dans votre flux de travail. Vous pouvez simplement enregistrer toutes les images que vous avez créées à la taille requise et les enregistrer directement à partir de Photoshop..
Les PNG fonctionnent également bien pour la réduction, tant que vous réduisez. Si vous devez redimensionner une image (ce qui se produit parfois lorsque vous passez d'une fenêtre d'affichage plus grande à une fenêtre d'affichage plus petite), le format PNG sera souvent pixellisé et flou, ce que vous voudrez évidemment éviter..
Ce dernier point sur PNG nous amène rapidement à l’option SVG que nous avons pour nos icônes. Tant que vous avez une image à base de vecteurs (créée dans Adobe Illustrator, par exemple) - et non à base de raster, comme dans Adobe Photoshop par exemple -, vous pouvez enregistrer cette image au format SVG..
En tant que développeur, vous êtes susceptible de comprendre SVG et les différentes manières de les implémenter dans votre site Web. Si vous ne le faites pas, SVG est un moyen de mettre en œuvre une évolutif graphique dans la conception de votre site Web. De cette façon, vous n'aurez plus à vous soucier du rendu graphique pixélisé ou flou lors du redimensionnement ou de la mise à l'échelle. Au lieu de cela, il s'étirera parfaitement à la taille requise.
Cela fonctionne très bien pour les logos, les icônes, tout ce qui peut nécessiter une mise à l'échelle que vous avez déjà au format vectoriel ou que vous pouvez facilement recréer dans ce format, si nécessaire. Lorsque vous concevez et enregistrez vos images SVG, je vous recommande de toujours travailler à la taille optimale dont vous avez besoin la plupart du temps. De cette façon, votre navigateur ne doit effectuer que quelques travaux pour redimensionner et redimensionner le logo dans des circonstances particulières et pas toujours..
Comme nous le savons déjà, les polices Web sont infiniment évolutives et peuvent parfaitement fonctionner sur nos sites Web dans les navigateurs actuels. Certaines personnes très intelligentes ont été capables de combiner les deux polices Web et icônes pour faire des polices web icône ou symbole. Tout comme Wingdings, ceux-ci ont souvent plus de sens et de contexte lorsqu'ils sont utilisés qu'une simple icône.
Il y a des arguments pour et contre les polices Web sous forme d'icônes: certains disent que charger une police entière pour n'utiliser que plusieurs ligatures n'est pas judicieux, car cela ajoutera beaucoup de poids à la page et influencera les performances..
Bien que cela puisse être difficile à éviter avec les polices Web de symboles commerciaux que vous avez achetées, il sont des outils pour créer vos propres polices Web, où vous pouvez éviter cela et ne créer qu'une police avec les icônes dont vous avez besoin. Certains disent également que vous pouvez perdre une partie du contexte avec les polices Web car ils utilisent parfois seulement une lettre pour afficher l'icône. Cependant, certaines personnes intelligentes, telles que les utilisateurs de Symbolset, utilisent des mots-clés pour les polices, ce qui permet d'ajouter un peu plus de contexte à l'icône que vous avez..
Et vous avez trois options pour utiliser les icônes dans vos conceptions. le choix est maintenant à vous! La plupart des options ajouteront légèrement à votre flux de travail de conception d'une manière ou d'une autre, mais c'est à vous de voir quel processus convient le mieux à votre flux de travail..
Accentsconagua