En 2011, il n'y avait pas de blog ou de magazine de conception Web dans le monde qui n'utilisait pas? HTML5? ou? CSS3? dans au moins quelques titres. Nous avons longuement discuté des nouvelles possibilités offertes par ces technologies, discuté inlassablement des obstacles qu’elles présentaient et avons eu beaucoup de plaisir à créer des démonstrations avec un support de navigateur embarrassant.
Bien que CSS3 et HTML5 soient toujours au sommet de nos listes de discussion, j'ai décidé de regarder autour de vous et de voir quels autres termes et mots à la mode sont des sujets majeurs pour 2012. Lisez la suite pour voir ce que les concepteurs Web vantent et discutent à propos de ces journées. En chemin, vous trouverez plus de cinquante excellents articles à découvrir qui vous donneront une idée de chaque sujet.
RWD
Au cas où vous ne l'auriez pas entendu, nous appelons Responsive Web Design? RWD? à présent. C’est la façon la plus courte et la plus cool de le dire, alors montez à bord avant de vous embarrasser en éliminant la version longue et archaïque lors de votre prochaine conférence de conception Web. Vous pourriez aussi bien porter un t-shirt Plone.
RWD est sans aucun doute l’un des sujets les plus en vogue actuellement dans le développement Web. En effet, cela représente vraiment un changement de paradigme majeur qui modifie fondamentalement la façon dont nous abordons les projets de conception Web.
Y a-t-il trop de battage publicitaire autour de RWD? J'ai certainement vu de nombreux commentateurs dans mon propre travail chanter cette chanson. Cependant, en tant que l’une des solutions leaders d’ouverture du Web pouvant être optimisée pour autant d’appareils que possible sans créer de sites personnalisés pour chacun, j’estime personnellement qu’elle mérite l’attention.
L’inconvénient est que les concepteurs Web en ont déjà fait un slogan marketing majeur, qu’ils sachent vraiment comment l’appliquer avec succès dans un contexte réel ou non. Méfiez-vous des excès de confiance dans ce domaine, il s’agit d’une nouvelle technique et nous sommes encore en train d’apprendre à quoi cela ressemblera à long terme.
Discussion RWD
- Conception Web réactive (pièce séminale)
- Guide du débutant pour la conception Web réactive
- Comment construire une galerie de vignettes réactive
- 5 modèles de conception Web réactifs vraiment utiles
- Responsive Web Design: Qu'est-ce que c'est et comment l'utiliser
Points d'arrêt (ou RWD agnostique de périphérique)
Il existe de nombreux sous-termes dans le domaine RWD qui attirent beaucoup d'attention: requêtes des médias, type de réponse, etc. Un des points qui a déclenché une tonne de conversations et même de débats est "points de rupture".
L'idée de RWD est fondamentalement simple: utilisez un CSS intelligent pour redéfinir la mise en page d'un site à différents points d'arrêt prédéfinis. La grande question à laquelle cela conduit est évidente: "Quels points de contrôle devrais-je utiliser?"
La solution populaire consiste à rechercher les largeurs de périphérique les plus courantes et à les concevoir spécifiquement. Vous définissez donc une requête multimédia pour l'iPad orienté verticalement, l'iPad orienté horizontalement, l'iPhone vertical, l'iPhone horizontal, etc. Au lieu de cela, vous trouverez un bon compromis générique et ciblerez trois domaines principaux: le bureau, les tablettes et les téléphones.
J'ai récemment publié un article expliquant pourquoi nous devrions cesser de penser à des largeurs de périphérique spécifiques et commencer à utiliser RWD pour créer des sites qui fonctionnent littéralement à toutes les largeurs imaginables dans des limites raisonnables. Cela semble difficile, mais dans la pratique, ce n’est vraiment pas plus de travail que les autres méthodes. Je l'ai appelé? Conception sensible au contenu? car il permet au contenu de déterminer lui-même les points d'arrêt, et non les tailles de périphérique courantes. D'autres sites ont depuis écrit sur la même idée avec peut-être un meilleur nom,? Device Agnostic? RWD. Aujourd'hui, j'ai trouvé un article de Marc Drummond publié bien avant que je discute de techniques similaires avec le terme succinct "points de rupture naturels".
Indépendamment de ce que vous appelez cela, ce débat illustre parfaitement le point que j'ai exposé dans la dernière section: le RWD n’est en aucun cas une pratique parfaitement définie à ce stade. De nouvelles méthodes et idées surgissent continuellement et vous pouvez vous attendre à voir beaucoup plus de discussions sur le point de rupture cette année.
Discussion sur les points d'arrêt
- Conception sensible: pourquoi vous le faites mal
- Approche agnostique par périphérique pour la conception Web réactive
- Les points d'arrêt par défaut de la conception Web réactive sont morts
- Repenser les points d'arrêt dans la conception réactive
SVG
Apple a décidé que l'avenir de l'informatique serait meilleur avec une meilleure résolution. Qu'on le veuille ou non, l'industrie volonté suivez cette décision (laissez tous les commentaires haineux d’Apple que vous aimez, ça va toujours arriver, les gens). Apple est en train de pousser? Retina? affiche sur l’ensemble de sa gamme iOS (iPhone, iPad, iPod Touch) et d’autres grands fabricants d’appareils sont déjà en train de déterminer comment ils vont assortir ou surpasser cette technologie.
Pour les concepteurs Web, il s'agit d'une boîte de Pandore méchante. C’est déjà assez grave que nous devions concevoir des tonnes d’écrans de différentes tailles. Nous allons maintenant couronner le tout en modifiant de façon importante la densité de pixels. Les images de résolution supérieure soulèvent toutes sortes de problèmes en ce qui concerne la taille du fichier, comment et quand servir différentes images à différents périphériques, etc.
SVG, ou Scaleable Vector Graphics, est l’un des principaux logiciels de sauvegarde que nous recherchons. Il vous permet en principe d’incorporer les types d’images que vous créez dans Adobe Illustrator dans une page Web. L'avantage ici est que, puisque les graphiques sont construits en tant que vecteurs, ils sont infiniment évolutifs et auront l'air absolument parfaits sur tout périphérique imaginé par la Silicon Valley.
- Prêt ou pas, voici HD Web Design
- Résolution Indépendance Avec SVG
- 20 utilisations SVG qui feront tomber votre mâchoire
- Jouer avec SVG Design
- Utilisation de SVG pour des arrière-plans flexibles, évolutifs et amusants
Préprocesseurs
La rigueur du mouvement des normes Web a conduit à une industrie de la conception Web assez rigide où vous suivez les règles ou faites face aux conséquences.Cette rigidité était profondément ancrée dans une idée radicale: et s’il existait un meilleur moyen de coder? Il y a des aspects du CSS, du JavaScript et même de la syntaxe HTML qui sont vraiment nuls, alors pourquoi ne pas trouver le moyen de les abandonner sans abandonner les normes qui ont fait du Web ce qu'il est aujourd'hui? De plus, pourquoi devons-nous attendre qu'un groupe d'experts ajoute les fonctionnalités que nous souhaitons dans nos langues préférées? Pourquoi ne pouvons-nous pas le faire nous-mêmes?
Entrez dans le monde des préprocesseurs. Certains rebelles sauvages et fous ont mis en place ces systèmes grâce auxquels vous pouvez supprimer les normes de codage au fur et à mesure que vous écrivez, puis exécuter votre code via un nettoyeur magique qui spécifie une syntaxe valide. Imaginez CSS et JavaScript sans la nécessité délicate de points-virgules et de crochets, ou HTML sans ces balises de fermeture gênantes. De plus, imaginez écrire moins de code et en faire plus que jamais auparavant (pouvez-vous dire des variables CSS?).
Il y a quelques années, la plupart de ces pré-processeurs ont été accueillis avec un accueil peu chaleureux et un dédain total pour les autres. La dernière partie de l’année dernière, cependant, pour une raison quelconque, ils ont vraiment bien marché. Soudainement, les pré-processeurs constituent la tendance la plus en vogue.
Si vous ne l'avez pas déjà fait, il est temps de rencontrer les préprocesseurs qui font sensation. Sass, LESS et Stylus étendent le CSS avec d’excellentes fonctionnalités telles que les variables, les combinaisons, les opérations mathématiques et même une simplification drastique de la syntaxe. Les fans de Sass devraient également consulter un autre projet des mêmes personnes qui repense radicalement la création HTML: HAML. Si vous êtes un expert en JavaScript, ne cherchez pas plus loin que CoffeeScript pour vous épargner des centaines de lignes de code.
Discussion pré-processeur
- Sass vs LESS vs Stylus: Shootout de préprocesseur
- Gagnez du temps en écrivant votre code HTML avec Haml
- 10 MOINS CSS exemples que vous devriez voler pour vos projets
- Super Sweet CSS Effets de texte 3D avec Sass et LESS
- MOINS CSS a plus avec 1.2.0
- Bercer avec CoffeeScript
- Écrire de meilleurs scripts JavaScript avec CoffeeScript: notions de base
- Entrez dans MOINS: le langage de feuille de style programmable
Pinterest est le nouveau site social le plus branché du Web. Il a absolument explosé en popularité au cours de la dernière année et semble être toujours dans une ascension continue. Ce qui est intéressant, c’est que Pinterest est connu pour son public particulièrement féminin, dont la plupart semblent être obsédés par l’accrochage de photos de Ryan Gosling enveloppées dans des lumières de Noël ou de chiots. Alors pourquoi diable je l'ai répertorié comme mot à la mode de conception de sites Web?
Il y a deux raisons à cela. La première est qu'une grande partie du succès de Pinterest peut probablement être attribuée à sa conception, ce qui modifie la façon dont les concepteurs conçoivent les sites basés sur des galeries. Comme je l'ai indiqué précédemment, la combinaison d'une disposition de style Maçonnerie avec un défilement infini crée une expérience utilisateur simplement addictive qui peut voler des heures de votre vie. Votre première véritable plongée dans Pinterest se terminera probablement par le fait que vous leviez les yeux de votre écran et que vous vous demandiez en quelle année nous sommes et depuis combien de temps vous êtes sous ce mauvais sort.
Outre l'étude de cas de conception intéressante, Pinterest est progressivement accepté par tous les types d'utilisateurs, pas seulement par les utilisateurs de Gosling. Les concepteurs constituent un créneau d’utilisateurs qui commence vraiment à trouver une place sur ce site. Nous sommes visuels et Pinterest nous fournit une plate-forme fantastique pour enregistrer et partager l'inspiration visuelle. Vous n'avez pas besoin de chercher plus loin que notre propre compte pour voir que cela est vrai (fin de l'auto-prise éhontée).
Discussion Pinterest
- Addictive UX: Pourquoi Pinterest est si incroyable?
- Utiliser Pinterest pour Design Inspiration
- Comment Pinterest a changé la conception Web
- Pinterest est une Web Bonanza pour les concepteurs
- 3 façons percutantes que les concepteurs Web peuvent utiliser Pinterest
CS6
Adobe est pratiquement incomparable dans sa capacité à inciter les concepteurs éclatés à débourser régulièrement des sommes inimaginables. Le développement continu de Adobe Creative Suite signifie que vous avez besoin de beaucoup de ressources pour pouvoir suivre la technologie de pointe. Cela est particulièrement vrai dans le monde des blogs de design. Si je publie un tutoriel sur Photoshop et commets l'erreur d'utiliser quelque chose d'aussi ancien que CS3, je ne serai plus gêné.
Adobe est sur le point de faire basculer votre monde une fois de plus avec CS6, la prochaine itération majeure de Creative Suite. Je sais que certains d'entre vous roulent des yeux et se plaignent de ne juste J'ai acheté CS5, et je partage votre peine, mais la bonne nouvelle est qu'Adobe apporte effectivement des améliorations à grande échelle avec chaque version.
La frénésie à propos de CS6 est à son plus haut niveau depuis qu'Adobe a publié un aperçu bêta gratuit de Photoshop. De nouvelles fonctionnalités impressionnantes incluent une interface remodelée (sombre est désormais une option), des styles de type similaires aux styles de paragraphe d'Illustrator et InDesign, une galerie de flou qui facilite beaucoup la simulation de profondeur de champ et d'inclinaison, un outil de rognage repensé, la recherche de calques, masques de groupe de couches et beaucoup plus. Ne même pas la peine de résister, vous savez que vous le voulez.
Discussion CS6
- Améliorations de Photoshop CS6
- Top 7 des fonctionnalités de Photoshop CS6
- Tutoriel de Photoshop CS6 Blur Gallery
- Adobe Photoshop CS6 Beta Hits 500 000 téléchargements
- Notre premier regard sur Photoshop CS6
Les motifs
C’est une question intéressante que vous pouvez mal interpréter au début. Par? Motifs? Je ne parle pas de plaid, de damier ou de tout motif visuel ressemblant à une texture répétitive. Au lieu de cela, je fais référence à l'analyse systématique de la conception Web et de la manière dont elle est généralement accomplie, tant du point de vue visuel que du point de vue du code.
Si vous venez de répondre avec un gros, "hein" alors permettez-moi de vous expliquer.L'année dernière, j'ai écrit un article intitulé 10 exemples de mise en page de site Web Rock Solid, dans lequel je discutais des modèles de mise en page populaires vus dans d'innombrables sites sur le Web et des raisons pour lesquelles ils fonctionnent bien. Celles-ci n'ont rien à voir avec la couleur, la texture, la typographie ou tout autre élément spécifique, mais regardez plutôt la couche de base absolue du dessin sur laquelle le reste est construit.
Ce sujet s’étend également au codage. Le site Web Pears présente des modèles typiques d’appariement HTML et CSS pour des éléments de conception courants tels que les menus de navigation, les pieds de page et les grilles de vignettes.
La reconnaissance, l’analyse et le partage de modèles sont une tendance qui ne cesse de s’éclaircir et je prévois que sa popularité continuera de croître, en particulier du fait que Responsive Web Design encourage de nouveaux paradigmes et pratiques en matière de codage et de mise en page.
Discussion de modèle
- Modèles de navigation réactifs
- 5 modèles de conception Web réactifs vraiment utiles
- Modèles de disposition multi-périphérique
- Modèles de conception JavaScript essentiels
- Avantages et inconvénients de 6 modèles de mise en page CSS
Préfixes du vendeur
Nous utilisons tous CSS3 depuis assez longtemps pour nous habituer ou en avoir marre de la folie des préfixes de vendeurs spécifiques au navigateur. Lorsque vous utilisez quelque chose d'assez nouveau dans CSS, vous devez probablement le répéter encore et encore pour tous les navigateurs possibles. Les dégradés CSS sont un exemple parfait de la folie qui règne. Voici le code recommandé pour implémenter un simple dégradé de deux couleurs:
Fou fou? Certains disent que c'est une bonne chose pour le Web, d'autres disent que c'est carrément toxique. Bien que nous utilisions des préfixes depuis un moment, la chaleur dans ce débat a été soudain mise à rude épreuve. Tout le monde a une opinion différente sur la raison pour laquelle les préfixes aident ou font mal et il semble qu'un consensus ou même des suggestions solides pour un meilleur système ne soient pas en vue.
Discussion sur le préfixe
- Chaque fois que vous appelez une fonctionnalité propriétaire? CSS3 ,? un chaton meurt
- La situation du préfixe du vendeur
- Les préfixes de fournisseur ne sont pas adaptés aux développeurs (Paul Irish)
- TL; DR sur le drama de préfixe de vendeur (Chris Coyier)
- Préfixes des vendeurs - sur le point d'aller vers le sud
- Grande question: les préfixes de vendeurs font-ils du mal au Web?
- Les préfixes de vendeurs CSS menacent d’Open Web
Amélioration progressive
L'ancienne amélioration progressive vs dégradation progressive? le débat n'est pas nouveau. Pour la plupart, il semble que nous ayons tous commencé par une dégradation progressive, puis une amélioration progressive en tant que méthode sans doute supérieure.
Le mouvement d'amélioration progressive a suscité des tonnes de discussions et d'idées au cours des deux dernières années. Des sujets tels que? Mobile en premier? la conception englobe l'amélioration progressive comme le meilleur moyen de garantir que le plus grand nombre de personnes possible profite du Web dans toute la mesure du possible.
La question pour 2012 est, "Qu'est-ce qui vient ensuite?" Est-il possible que les concepts inhérents à l'amélioration progressive freinent le Web plutôt que de le faire avancer? Devrions-nous faire évoluer nos idées ou peut-être même abandonner cette pratique? Consultez les articles ci-dessous pour connaître les dernières nouvelles du débat.
Discussion d'amélioration progressive
- L'amélioration progressive est un obstacle au progrès
- L'amélioration progressive est plus pertinente que jamais
- Amélioration progressive massivement mobile | Votre site est-il convivial pour l’avenir?
- Progressive Enhancement 2.0 - Nicholas Zakas
- Amélioration progressive: tout ce que vous devez savoir est ici
Gamification
Le Saint Graal de tout type de conception est l’engagement. C'est ce que nous visons tous dans chaque projet dans lequel nous nous lançons. En fin de compte, nous voulons que les gens fassent l'expérience, s'amusent et, espérons-le, reviennent même dans nos projets.
Plusieurs tendances sont apparues qui promettent de détenir la clé de cette créature insaisissable, mais le favori actuel est la gamification. Le concept qui en découle est plutôt basique: les gens adorent les jeux, transformons donc tout en jeu. Il suffit de regarder Foursquare pour voir un exemple efficace. Ces personnes voulaient créer une application qui vous permettrait de partager votre arrivée à n’importe quel endroit. C'était un concept intéressant, mais comment inciter les gens à utiliser l'application? Quel est l'incitatif?
La réponse: faites-en un jeu! En vous enregistrant, vous gagnez des badges (pixels sans valeur, mais bons pour se vanter de pouvoir). En tant qu'utilisateur qui fréquente le plus un lieu, vous êtes le maire, ce qui peut vous faire gagner des réductions et des prix dans le monde réel. Il existe même un tableau des leaders qui vous indique chaque jour votre classement par rapport à vos amis. Il s'avère que la concurrence engendre l'interaction.
Cette idée conduit à repenser radicalement tous les types de sites Web, d'applications et de réseaux sociaux. De nouvelles startups font leur apparition par dizaines qui promettent de jouer un nouveau domaine que personne n’a encore prétendu diriger.Au niveau micro, les entreprises existantes cherchent à gamifier de petites parties de leur site ou de leur application pour rendre le monde passionnant. La gamification conduira-t-elle à un glissement à long terme vers un Web plus amusant ou s'agit-il simplement d'une tendance éphémère qui disparaîtra plus rapidement que ce que vous pouvez dire, Gowalla?
Discussion de gamification
- Gamification - Des pépites de sagesse ou de l'or?
- L'avenir de la conception Web, c'est l'engagement
- Les avantages et les inconvénients de la gamification
- Marketing en ligne et gamification par conception
Qu'est-ce que j'ai raté?
Je suis sûr qu'au moins quelques-uns des sujets ci-dessus correspondent bien à ce que vous avez pensé, discuté et / ou inquiété récemment. Laissez un commentaire ci-dessous et dites-nous lequel de ceux-ci vous a le plus préoccupé et de quel côté vous êtes dans les nombreux débats décrits ci-dessus.
Cette liste de dix sujets ne fait aucun doute à peine effleurer la surface des concepts de conception web chauds pour le moment. Informez-nous de tous les autres mots à la mode que vous avez beaucoup entendus récemment et de ce que vous en pensez.
Sources d'images: Yutaka Tsutano et Phil Roeder