Catégories
Plugin et site web

Les astuces et solutions de conception Web les plus populaires de tous les temps

Nous, concepteurs de sites Web, avons toujours été un groupe astucieux. S'il y a un aspect ou une fonctionnalité spécifique que nous devons atteindre, nous pouvons généralement reconstituer une solution. C’est le cas même quand il n’existe pas de norme ou d’outil spécifique pour nous guider. C'est là que le concept du hack de conception Web entre en jeu.

Les hacks sont des méthodes créatives, souvent détournées, pour faire en sorte qu'un site Web ressemble ou fonctionne d'une certaine manière. Parfois, ils ont une connotation négative. Par exemple, les mises en page basées sur des tableaux HTML ont été à juste titre tournées en dérision comme n'étant pas accessibles aux lecteurs d'écran. Mais tous les hacks ne sont pas mauvais.

En effet, elles sont déployées par nécessité de repousser les limites du possible. Le Web a toujours eu ses limites et les concepteurs ont utilisé des hacks pour essayer de les contourner.

Avec cela, jetons un coup d'œil à certains des hacks de conception Web les plus utiles et les plus répandus des années passées, inspirés par un Discussion sur Twitter avec des collègues designers. Bien qu’ils ne détiennent pas nécessairement une bougie aux normes que nous avons aujourd’hui, ils étaient la salle des célébrités à leur époque.

La boîte à outils du concepteur Web

Téléchargements illimités: 1 000 000+ modèles Web, thèmes, plugins, éléments de conception et bien plus encore!

Mises en page: tableaux HTML et flotteurs CSS

Nos premières sélections iront ensemble dans ce temple de la renommée virtuelle. Bien que leur utilisation maximale respective soit à des années d'intervalle, ils étaient essentiellement utilisés pour accomplir la même chose: des dispositions multicolonnes.

Tableaux HTML

Avant l'arrivée de CSS sur la scène, les premières pages Web étaient une affaire à une seule colonne. Il n'y avait ni remplissage ni marges, ni moyen standard de placer le contenu dans des colonnes horizontales. Autrement dit, jusqu'à ce qu'une âme entreprenante décide d'utiliser des tables à cette fin.

Bien sûr, les tableaux HTML étaient censés contenir des données tabulaires – pas des mises en page. Mais ils étaient en fait un moyen efficace de faire le travail jusqu'à ce que CSS arrive.

Flotteurs CSS

Les tableaux présentaient de nombreux inconvénients, notamment les problèmes d'accessibilité susmentionnés. Ils ont également mis du temps à s'afficher dans le navigateur. Ainsi, lorsque les flotteurs CSS ont été introduits, cela a été considéré comme un changeur de jeu pour les concepteurs de sites Web.

Les flottants n'étaient pas du balisage HTML. Ils étaient donc plus accessibles et pouvaient augmenter les performances. Toutes les dispositions soudaines et multicolonnes étaient possibles via CSS et pouvaient mieux s'adapter à des choses comme la taille de l'écran.

Cependant, les flotteurs ne nous ont pas amenés jusqu'à la terre promise. Si vous vouliez que les colonnes soient de hauteur égale, un hack clearfix supplémentaire devait être implémenté.

Chacun de ces éléments est également toujours très utile aujourd'hui lorsqu'il est utilisé conformément à sa destination d'origine. Mais pour les mises en page, leurs journées sont heureusement terminées.

Esquisse d'une interface utilisateur de site Web.

Espacement des éléments: espaces insécables ( ) et Spacer.gif

Les concepteurs Web soucieux du détail ont souvent cherché des moyens d'espacer les éléments jusqu'au pixel exact. Encore une fois, ce n'était pas si facile à l'époque. Ainsi, l'espace insécable (& nbsp;) et spacer.gif ont été utilisés pour mieux contrôler l'espacement.

Espace non-cassant ( )

Vous voulez déplacer un élément horizontalement, mais sans le centrer ou l'aligner à droite? Ajouter quelques espaces insécables ferait l'affaire.

Cependant, ce n'était pas une science aussi exacte. La taille réelle de chaque espace dépend de la famille de polices et de la taille de police. Et même en tenant compte de ces différences, ce hack peut toujours avoir un aspect différent selon le navigateur et le système d'exploitation qu'un visiteur utilise.

Spacer.gif

Ce hack d'espacement plus précis est venu en créant une image .GIF transparente (souvent nommée spacer.gif) et en le plaçant dans une page. L'aspect intéressant était que, comme il s'agit d'une image transparente, les concepteurs pouvaient définir la hauteur et la largeur à n'importe quel pixel sans impact négatif sur l'apparence ou les performances.

CSS a rendu ces deux hacks obsolètes. Mais ne savez-vous pas que l'éditeur WordPress Gutenberg a un bloc Spacer qui fait à peu près la même chose? Cela montre simplement que le besoin est toujours là.

Redimensionnement des flèches.

Typographie: texte basé sur une image

Le besoin de celui-ci était assez simple. Le début du Web était essentiellement limité aux polices installées sur le système de l'utilisateur. Bien sûr, les concepteurs n'avaient aucun moyen de connaître toutes les polices auxquelles les utilisateurs avaient accès – à part les bases comme Times New Roman, Georgia, Arial et Helvetica.

Avec cela est venu le genre de terrible décision de créer des images pleines de texte dans Photoshop. Bien que cela permette l'utilisation de pratiquement toutes les polices, cela se faisait au détriment de l'accessibilité. De plus, l'utilisation d'une image à la place d'une balise de titre HTML a également perturbé la sémantique de la page, ce qui pourrait endommager le référencement.

Une personne tapant sur un ordinateur portable.

En-têtes collants et navigation: cadres

Les cadres HTML étaient peut-être en avance sur leur temps, car la plupart des tâches pour lesquelles nous les utilisions auparavant sont désormais effectuées via CSS et JavaScript.

Le concept était assez simple. Chaque «cadre» individuel dans une mise en page était en fait sa propre page. C'était un moyen facile de séparer un en-tête, un pied de page ou une navigation du reste du contenu du site. Une modification de la navigation, par exemple, signifiait une seule modification dans un seul fichier. C'est similaire à ce que les inclus côté serveur ont fait, mais avec quelques autres avantages de conception inclus.

Le principal d'entre eux était la possibilité de créer des en-têtes et une navigation «collants». Pendant que l'utilisateur faisait défiler le contenu, il pouvait toujours naviguer facilement sur le site.

Cette technique a atteint son objectif, mais elle était loin d'être idéale. Il n'était pas très adaptable en termes de différentes tailles d'écran et n'était pas non plus très bon pour le référencement. Il y avait également des problèmes de sécurité concernant le chargement potentiel d'un cadre à partir d'une URL néfaste.

Un assortiment de cadres photo.

Optimisation d'image: images découpées

Dans les jours précédant la disponibilité généralisée du haut débit, l'optimisation de l'image était vitale. Même une image de 50 Ko pourrait alourdir une page sur une connexion lente.

Le géant du logiciel Adobe a fourni une solution intéressante. Avec leur logiciel ImageReady, les concepteurs pouvaient découper une seule image en un nombre illimité de morceaux plus petits. Chaque tranche individuelle pourrait alors être optimisée, ce qui les rend théoriquement rapides à télécharger.

Mais ce n'est pas tout. Le logiciel pourrait alors exporter les tranches dans un tableau HTML. De là, vous pouvez copier et coller ce code HTML dans votre page.

Le problème avec cette technique était double. Tout d'abord, la mise en page du tableau peut prendre plus de temps pour le rendu, ce qui peut potentiellement tuer toute optimisation que vous avez réalisée. Deuxièmement, il pourrait être très difficile de le maintenir. L'ajout d'un élément de navigation à un grand graphique d'en-tête, par exemple, peut nécessiter de recommencer avec un tout nouvel ensemble de tranches – nécessitant ainsi des modifications de modèle.

Bien que l'optimisation d'image soit toujours importante, la large bande nous permet heureusement un peu plus de latitude avec les gros fichiers. Malgré cela, les versions modernes de Photoshop offrent toujours la découpe d'image et l'exportation HTML.

Une image en tranches dans Photoshop.

Placement d'Internet Explorer:

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *