• Articles
• admin

Alors que nous lançons de nouveaux projets, il est facile d’oublier la mise à jour des blogs et sites Web plus anciens. Dans cet article, je veux présenter 30 idées solides que vous pouvez rapidement mettre en œuvre pour rendre votre site Web beaucoup plus convivial. Tous ne sont pas basés uniquement sur la conception frontale. Je discuterai également des techniques de codage HTML5 populaires qui peuvent aider les analyseurs Web et les araignées à catégoriser vos données de manière appropriée.

Tous les sites Web n’auront pas besoin d’être mis à jour, et pas avec toutes les techniques disponibles dans cet article. Ces idées sont là pour amener les développeurs à réfléchir en termes de design et à la façon de rendre les sites Web plus jolis. Il est maintenant plus facile que jamais de créer des mises en page de sites Web évolutives et réactives qui ont fière allure sur n’importe quel écran numérique, alors passons à la rénovation de nos sites.

1. Tests UX

Je suis coupable de ne pas toujours exécuter de tests sur les lancements de mon site Web, mais dans la mesure du possible, c’est l’une de mes activités préférées. Vous pouvez en apprendre beaucoup sur les interactions typiques des utilisateurs en étudiant comment ils jouent avec votre site Web. Les études d’expérience utilisateur peuvent être menées uniquement via des outils tels que Google Analytics ou à l’aide d’autres ressources tierces.

Les avantages potentiels que vous pouvez trouver sont énormes. Les tests d’expérience utilisateur sont utiles aux développeurs Web pour savoir quelles zones de leur site Web sont ennuyeuses, cassées ou pourraient être améliorées. Pensez à utiliser non seulement des outils numériques, mais également vos amis et collègues. Écouter de vrais commentaires humains sur votre site Web peut fournir des résultats que vous ne pouviez pas obtenir à travers un écran d’ordinateur.

2. Espace

Nous pouvons considérer les espaces comme la quantité d’espace entre les éléments de votre page. Certains utilisateurs ne se soucieront pas d’une mise en page à l’étroit s’ils sont déjà habitués à cela. Mais considérez votre public cible et considérez combien d’entre eux ne sont pas aussi alphabétisés en informatique que la jeune génération.

Vous pouvez déterminer les zones nécessitant un espacement supplémentaire grâce à des tests A/B divisés et à la rétention des commentaires des utilisateurs. Ou juste l’aile et voir ce que vous pouvez trouver!

3. Polices Web

Les polices web dynamiques permettent aux concepteurs de créer des pages Web sans se limiter aux familles de polices typiques. Cette tendance est devenue de plus en plus populaire maintenant que la plupart des internautes moyens sont sur une connexion DSL / T1 / Fibre optique décente. L’inclusion de références à des feuilles de style de polices tierces ne produira plus de décalage majeur dans vos vitesses DL.

Le meilleur fournisseur de polices est probablement Google Webfonts. Vous pouvez accéder à l’application même si vous n’avez pas de compte Google, bien qu’il y ait des avantages à vous inscrire. Le processus de configuration complet ne prend que 3 étapes et vous pouvez exécuter des polices Google personnalisées sur votre site Web en quelques minutes.

4. Ombres CSS3

Lorsque je parle d’utiliser des ombres pour améliorer votre mise en page, je fais en fait référence à deux propriétés distinctes. Le toujours populaire box-shadow est vraiment cool pour les divs et les boîtes dans votre mise en page. L’ajout de cet effet sur vos boîtes de conteneur, d’emballage ou de page intérieure fournira un effet 3D amincissant à votre page Web.

Mais il convient également de considérer la propriété text-shadow CSS3 pour la typographie qui saute de la page. Apple est l’une des premières entreprises à implémenter massivement des ombres de texte tout autour de leur mise en page. Vous pouvez créer un effet intimidant en ajoutant des ombres de texte opposées à la couleur de vos polices (ombres blanches pour le texte sombre, ombres noires pour le texte clair).

5. Textures & Motifs répétitifs

Il existe de nombreux sites Web qui peuvent se contenter d’utiliser des schémas de couleurs standard. Mais pour que votre site Web se démarque vraiment de la foule, vous pouvez envisager d’ajouter des textures et de répéter des tuiles dans votre arrière-plan. L’une des applications Web gratuites les plus cool est Noise Texture Generator qui peut fonctionner sur n’importe quel navigateur.

Choisissez simplement la couleur BG et la quantité de bruit que vous souhaitez utiliser, puis cette application créera dynamiquement une image d’arrière-plan carrelée. Si vous recherchez des motifs et des carreaux, je recommanderais des motifs subtils. Ils ont une énorme collection de textures utilisables que vous pouvez télécharger gratuitement.

6. Arrière-plans dégradés CSS3

Pendant que nous discutons des arrière-plans, je devrais évoquer les dégradés CSS3 toujours populaires. Ceux-ci offrent aux développeurs Web un avantage énorme en les empêchant d’utiliser Adobe Photoshop pour les arrière-plans Web. Et ces dégradés peuvent fonctionner sur plus que le corps, appliqués sur les barres de navigation et les pieds de page et d’autres zones importantes de votre mise en page.

7. Boostrap

Le Bootstrap de Twitter est probablement le plus grand framework d’interface utilisateur frontend pour les développeurs Web. Cela inclut les boutons, les entrées de formulaire, les liens, les colonnes et des tonnes d’autres objets de page préformatés. L’utilisation la plus courante de Bootstrap se trouve dans les pages de destination pour les nouvelles applications.

Mais les développeurs open source utilisent également Bootstrap lors de la création de pages de démonstration pour les bibliothèques, plugins ou mini scripts qu’ils publient.

Je pense que Bootstrap a tellement grandi qu’il peut être appliqué à n’importe quel site Web de nos jours. Cependant, les développeurs qui trouvent le plus grand avantage utilisent Bootstrap comme un remplacement rapide pour déployer leurs propres conceptions d’interface utilisateur. Considérez cette bibliothèque frontend la prochaine fois que vous lancerez une page Web avec un seul objectif concret: page de destination, démo de produit, site Web d’application mobile, etc.

Liés:

• Mise en route avec Twitter Bootstrap
• Bootstrap 201: Plugin de fenêtre modale

8. HTML5 Kickstart

La plupart des développeurs Web n’ont pas encore entendu parler de HTML5 Kickstart créé par 99Lime. Il s’agit d’une autre bibliothèque d’interface utilisateur frontend qui se concentre davantage sur l’esthétique du design que sur les mises en page HTML5 courantes. Mais il existe des exemples de code pour générer les deux à la pelle. Vous pouvez choisir parmi des ensembles d’éléments prédéterminés tels que des boutons de dégradé et des menus déroulants. Je ne dirais pas que cela a la même popularité que Bootstrap, mais encore une fois qu’est-ce que ça fait?

Si vous avez le temps et la patience, je recommanderais simplement de faire un test rapide à cette bibliothèque. Créez une petite disposition de bac à sable et voyez si vous appréciez le sentiment par défaut de chaque élément d’interface utilisateur. Kickstart n’est certainement pas pour tous les projets, mais il peut être un gain de temps important lorsqu’il est pris dans une impasse.

9. jQuery UI

Les animations, les curseurs et les éléments de fondu s’exécutent généralement hors de la bibliothèque jQuery. C’est la bibliothèque JavaScript open source la plus courante pour les développeurs frontend, mais elle dispose également d’une bibliothèque jQuery UI. Les développeurs négligent cela, pensant qu’il ne peut pas fournir beaucoup en échange des KO supplémentaires.

Mais en incluant la bibliothèque d’interface utilisateur, vous pouvez mettre à jour l’appel easing pour toutes les animations de page dynamiques. Cela signifie que vous pouvez personnaliser le type d’animation jQuery pour tous les menus déroulants, les éléments en fondu, les diaporamas défilants et tout le reste dynamique.

Le site Web de jQueryUI dispose d’une page de démonstration où vous pouvez tester les nombreuses variantes et voir si vous aimez des types d’animation spécifiques.

Liés:

• Comment styliser l’accordéon de l’interface utilisateur jQuery
• Contrôleur de volume avec le curseur de l’interface utilisateur jQuery
• Personnalisation et Thématisation du Sélecteur de date de l’interface utilisateur jQuery
• Glisser-déposer avec l’interface utilisateur jQuery Triable

10. Photos BG extravagantes

Il existe de nos jours d’innombrables sites Web qui ont utilisé l’effet d’image d’arrière-plan en plein écran. Si vous pouvez trouver un échantillon de photo haute résolution qui aurait l’air bien comme image d’arrière-plan, cette technique peut valoir la peine d’être ajoutée à votre mise en page. Les grands arrière-plans font un excellent travail pour attirer l’attention de votre utilisateur tout en impliquant le genre de votre site Web.

Si vous recherchez une solution rapide, consultez le plugin jQuery Backstretch. Cela ne nécessite qu’une seule ligne de code pour que vos nouveaux arrière-plans soient mis à l’échelle correctement et de manière responsable en utilisant n’importe quelle résolution. Mais pour les développeurs qui sont contre les méthodes JavaScript, je recommande la technique d’image CSS3 fullpage publiée sur CSS-Tricks.

11. Icônes de menu

Pour attirer davantage l’attention des visiteurs, il peut être utile d’inclure une petite icône dans votre page Web. Les liens de menu standard sont souvent suffisants pour fonctionner correctement et aider les utilisateurs à naviguer entre les pages.

Cependant, je suis souvent impressionné de voir des icônes personnalisées conçues pour chaque lien de menu. Vous pouvez trouver des tonnes d’ensembles d’icônes gratuits qui seraient parfaits dans votre zone de navigation supérieure, votre barre latérale ou votre pied de page.

12. Schéma de couleurs mis à jour

Je ne veux pas vraiment changer la conception globale de votre schéma de couleurs, mais plutôt y ajouter de nouvelles couleurs. Après avoir exécuté la même mise en page pendant des mois après des mois, il est agréable de mettre à jour des zones plus petites et d’attraper les visiteurs réguliers par surprise.

Certains éléments d’intérêt peuvent inclure des liens d’ancrage, des en-têtes, des arrière-plans et des barres d’outils. Envisagez d’utiliser des outils en ligne tels que Color Scheme Designer pour améliorer votre trajectoire.

13. Prise en charge améliorée du navigateur

Il est difficile de créer un site Web entièrement pris en charge par tous les principaux navigateurs existants. Bien que très peu de gens utilisent Internet Explorer 6, il apparaît encore dans quelques-uns de mes rapports Google Analytics. Les développeurs qui recherchent des idées peuvent envisager de faire un petit essai de tests de navigateur.

Les navigateurs grand public les plus importants incluent la dernière version d’IE9, Mozilla Firefox, Opera, Chrome, Safari et éventuellement Camino / SeaMonkey. Mais Internet Explorer 6-8 sont également encore largement utilisés par les entreprises et les laboratoires informatiques plus anciens. Vous pouvez exécuter des tests de rendu rapides à l’aide du logiciel IETester. De même, IE8 dispose d’un mode d’outil de développement dans lequel vous pouvez basculer vers des moteurs de rendu plus anciens pour le débogage.

14. Typographie ajustée

Vous constaterez peut-être que vos anciennes mises en page utilisent toujours efficacement les styles de texte, mais ce n’est pas toujours le cas. Je pense que la grande typographie s’intégrera beaucoup plus facilement dans les mises en page. Sans oublier qu’il est plus facile à lire et prendra plus de place sur des résolutions d’écran plus grandes.

L’idée de « typographie ajustée » consiste à styliser le texte pour qu’il s’adapte parfaitement à votre site Web. Vous pouvez parcourir quelques pages et mettre à jour ces styles en 10 à 15 minutes.

15. Partage sur les réseaux sociaux

Maintenant, je suis sûr que la plupart des développeurs connaissent les badges de partage utilisés sur les sites de réseaux sociaux populaires. Facebook, Twitter, Reddit, Pinterest, Dzone et de nombreux autres réseaux externes fournissent des codes que vous pouvez intégrer à votre site Web. Ensuite, les visiteurs peuvent partager votre lien sur ces réseaux sans avoir à quitter votre site Web.

Sur certains blogs ou magazines web, vous remarquerez que ces badges vous suivront en faisant défiler la page. C’est une excellente technique car vous pouvez souvent les faire planer juste à l’extérieur de la zone du corps où ils ne bloquent aucun contenu important. Je recommande également de parcourir notre publication sur les barres d’outils des médias sociaux qui peuvent avoir un effet similaire.

16. Discussion utilisateur

Si vous utilisez un CMS comme WordPress ou Drupal, vous avez la possibilité d’inclure des formulaires de commentaires par défaut. Cependant, lors de la création de pages Web statiques, vous devez configurer votre propre système de base de données pour imiter cette fonctionnalité. Mais avec l’essor de la technologie open source, les développeurs peuvent désormais mettre en œuvre de meilleures solutions telles que Disqus.

En utilisant cette méthode, vous n’êtes pas constamment en train de nettoyer le spam et les indésirables de la zone de discussion. Les utilisateurs qui n’ont pas déjà de compte Disqus peuvent se connecter rapidement à l’aide de profils de réseaux sociaux populaires ou s’inscrire directement depuis votre page. Même les utilisateurs de WordPress qui en ont marre d’Akismet peuvent basculer en utilisant le plugin Disqus Comment System.

17. Élargissez la zone du pied de page

La plupart des mises en page de sites Web plus petites seront très conservatrices avec la section du bas du pied de page. Cela peut inclure des informations de base sur les droits d’auteur et quelques liens de page principale. Mais les tendances modernes de la conception Web soutiennent l’idée de grands pieds de page avec beaucoup de liens méta.

Ceux-ci sont couramment vus dans les startups et les sites Web de grandes entreprises avec de nombreuses informations supplémentaires. N’essayez certainement pas de forcer cela dans une mise en page à laquelle il n’appartient pas, mais cela vaut la peine d’être envisagé si l’ouverture d’une plus grande zone de pied de page peut améliorer l’expérience de votre site Web.

18. Images réactives

Les images dynamiques fluides et réactives des pages Web sont devenues une tendance en elles-mêmes. Il est maintenant presque ridicule d’avoir toujours vos images définies à des largeurs fixes, sortant de l’emballage du conteneur lorsque les fenêtres sont redimensionnées. La technique la plus courante consiste à appliquer width: 100% en utilisant CSS sur tous les éléments img.

Mais vous pouvez également envisager d’autres méthodes open source qui peuvent s’avérer utiles dans une liaison. ResponsiveImg est l’un de ces plugins jQuery avec une très petite taille de fichier. Incluez-le simplement dans votre page et exécutez le code d’une seule ligne ciblant toutes les images de la page. C’est un excellent ajout aux mises en page mobiles qui utilisent toujours du contenu basé sur un ordinateur de bureau.

19. Accessibilité du menu

Je ne dirais pas que c’est quelque chose que vous devriez constamment essayer de mettre à jour dans vos mises en page, mais c’est quelque chose que les développeurs et les concepteurs ne comprennent pas la première fois. Je pense qu’il vaut la peine de revoir vos systèmes de navigation et de réfléchir s’il existe de meilleures façons d’implémenter des liens de sous-menus.

Les barres latérales et les zones de contenu contiennent souvent des menus en accordéon car il y a suffisamment de place verticalement. Mais pensez aux barres de navigation horizontales avec des menus déroulants ou des sous-menus coulissants. Tant que vos liens de menu sont rapides et faciles d’accès, il ne devrait pas y avoir de problèmes parmi votre base d’utilisateurs.

20. Microformats Sémantiques /Microdonnées

Les microformats et la spécification de microdonnées plus récente sont utilisés pour étendre les métadonnées à l’intérieur de votre code HTML. Ces attributs fournissent des informations supplémentaires sur votre contenu et son lien avec d’autres contenus de la page. Et finalement, ces résultats aident Google à déterminer le classement de votre site Web pour les mots clés individuels, et dans d’autres moteurs tels que la recherche d’images et de vidéos.

La version documentée la plus prise en charge des microdonnées est appelée Schema.org . Leur site Web fournit toutes les informations dont vous aurez besoin pour revenir en arrière et modifier votre contenu HTML avec un balisage de schéma sémantique. Cette syntaxe de schéma est soutenue et prise en charge par tous les principaux moteurs de recherche, et évoluera probablement dans le futur de la conception de métadonnées sémantiques.

21. Réorganiser les liens de navigation

Pour certains sites Web, l’exécution d’une navigation de contenu fixe peut ne pas être un réel problème. Mais j’ai trouvé dans certains sites Web ou portefeuilles d’entreprises plus importants que certains liens de navigation ont trop de priorité. Et de même, il y a des articles qui peuvent rarement être trouvés! Prenez le temps de parcourir votre site Web et de vous comporter comme si vous étiez un autre visiteur.

Considérez quels liens vous intéressent le plus, et éventuellement tous les liens que vous aimeriez voir ajoutés. Ceux-ci peuvent inclure un bref historique de votre site Web, des informations sur l’équipe, des coordonnées, des problèmes de confidentialité, des communiqués de presse, etc. Cela peut également aider à recueillir les commentaires des utilisateurs et à voir s’il existe des corrélations entre leurs souhaits et la demande de pages nouvelles ou mises à jour.

22. Lien

Si votre site Web publie de très longues pages de contenu, il s’agit d’un élément indispensable de votre mise en page. Les liens de défilement vers le haut se trouvent presque partout ces jours-ci. Les utilisateurs ne pensent pas à appuyer sur la touche Home et cela peut être ennuyeux de faire défiler tout le chemin vers le haut. Le meilleur emplacement pour ce lien est flottant à côté de votre conteneur, ou assis en bas de page comme nous l’avons mis en œuvre sur Hongkiat.

23. Personnaliser les balises de code / pré

Lors de la première création d’une feuille de style de site Web, de nombreux développeurs négligeront les éléments de page typiques. Les en-têtes et les paragraphes sont très courants, mais qu’en est-il des balises pré-tags ou des balises de code en ligne? Ceux-ci sont utilisés pour encapsuler la syntaxe du code source préformaté comme vous le verriez dans un fichier texte / NFO. Certains sites Web n’ont pas besoin de ces éléments, mais il est toujours considéré comme une bonne pratique de les coiffer au cas où.

24. Ajout d’attributs de Largeur / Hauteur d’image

Maintenant, cette tâche peut facilement prendre un certain temps, en fonction du nombre d’images que vous devrez parcourir. Mais si vous trouvez des images dans votre site Web sans largeur / hauteur définie, il peut être utile de les mettre à jour.

Généralement, les images dépourvues de ces attributs s’affichent sous la forme d’un carré de 1×1 px avant de se charger intégralement. Cela fera sauter vos pages Web et votre barre de défilement lorsque de nouvelles images sont chargées. Encore une fois, cela ne sera pas utile pour tout le monde, mais il convient de le noter comme un fixateur rapide dans certains cas. Et il existe encore des techniques CSS pour les images réactives utilisant des attributs fixes.

25. Notifications JavaScript

Tout développeur ayant travaillé en JavaScript connaît les boîtes de dialogue typiques. Vous pouvez configurer une boîte d’alerte qui offre à l’utilisateur un bouton OK, affichant simplement des informations. Mais il existe également des alertes de confirmation avec des boutons oui / non ainsi que la boîte d’invite qui demande l’entrée de l’utilisateur.

Tous ces codes peuvent être personnalisés à l’aide d’alertify.js. Il s’agit d’une très petite bibliothèque open source pour concevoir vos propres boîtes d’alerte frontend. Il est très rapide à configurer et facile à personnaliser si vous devez faire correspondre vos propres styles CSS.

26. Requêtes multimédias réactives

Cela peut ne pas sembler un peu de code rapide à ajouter, mais cela ne prend vraiment pas beaucoup de temps. Les requêtes réactives peuvent être ajoutées à votre feuille de style existante ou à une nouvelle feuille réactive.document css. De toute façon, vous pouvez rapidement configurer des styles récurrents pour gérer différentes tailles d’affichage à partir de moniteurs, de tablettes et de smartphones.

Les requêtes réactives n’ont pas toujours besoin de répondre pleinement à votre mise en page. Parfois, ceux-ci peuvent simplement masquer des morceaux de contenu, tels que votre barre latérale allongée ou votre pied de page plus grand. Vous pouvez ensuite afficher un mini pied de page entièrement réactif qui est à l’origine caché dans la disposition du bureau. Vous pouvez en savoir plus sur les requêtes multimédias dans notre collection de tutoriels Web réactifs.

27. Liens d’affiliation

Il y aura toujours des sites Web similaires en ligne pour créer du contenu lié à votre domaine. Il y a très rarement de nouvelles idées en cours de création; la plupart d’entre elles sont des ramifications et des parodies de contenu existant. Mais au lieu de transformer le web en compétition, pourquoi ne pas créer une ambiance conviviale? Si vous avez l’espace supplémentaire dans votre mise en page, envoyez quelques e-mails à des sites Web liés dans votre créneau (recherche Google) en demandant à vous affilier.

Vous pouvez échanger des liens et vous aider à vous échanger du trafic. Cela ouvre des portes aux nouveaux utilisateurs pour trouver votre site Web beaucoup plus rapidement, et pour voir que vous êtes également inclus dans la communauté d’autres sites Web. De plus, l’obtention de backlinks à partir de sites Web avec autorité dans Google ne peut qu’aider la crédibilité de votre domaine.

28. Polices à base d’icônes

Récemment, je lisais un article sur 24ways qui discutait des polices d’icônes et des attributs de données. Cela m’a amené à réfléchir à l’avenir de la conception Web et à la façon dont HTML / CSS a considérablement affecté le codage frontend. Les polices à base d’icônes sont parfaites pour un certain nombre de raisons, notamment les menus de navigation, les listes ordonnées / non ordonnées et même le contenu de page de base.

Beaucoup de ces polices peuvent être rapidement ajoutées à votre site Web en utilisant @font-face. Cela signifie que vous n’avez pas besoin de compter sur un service tiers comme Typekit pour héberger vos polices. Cela signifie également un style de conception plus sémantique plutôt que d’utiliser simplement des icônes PNG.

29. Ombres de boîte d’image

Si vous voulez garder les visiteurs sur votre page plus longtemps, vous devez offrir un contenu de qualité réelle. Cela peut déjà être le cas pour votre site Web, mais si vos styles sont fades, les gens regarderont ailleurs. L’atmosphère et l’esthétique sont énormes dans une bonne conception Web.

Je recommande de créer une classe d’image rapide qui enveloppe une bordure autour des images de votre page. Cela peut inclure une petite ombre à paupières avec des bordures et un rembourrage. Tout pour aider vos images à sauter de l’écran et à se démarquer dans les paragraphes de texte.

30. Feuilles de style alternatives

Considérez tous les différents styles de médias que vous devez inclure lors de la création d’une seule mise en page de site Web. Cela devrait bien paraître sur les moniteurs de bureau, les ordinateurs portables, les tablettes et peut-être même les smartphones. Et n’oubliez pas les supports de projection et d’impression, qui ne sont pas toujours pris en charge.

Si vous avez un large public qui utilise ces types de médias obscurs, je vous recommande de styliser vos propres feuilles de style alternatives. Ceux-ci peuvent être étiquetés en fonction du type de support tel que print.css, ou ajouté à vos feuilles de style existantes. S’il y a suffisamment de demande, vos visiteurs seront éternellement reconnaissants. Et honnêtement, il ne faut pas beaucoup de temps pour modifier la mise en page de votre site Web par défaut pour les imprimantes courantes.

Réflexions finales

Les concepteurs créatifs et surtout les développeurs Web frontend trouveront, espérons-le, quelques techniques utiles parmi cette liste. La plupart de ces idées ne devraient pas prendre plus de 1 à 2 heures à mettre en œuvre, alors que beaucoup peuvent être réalisées en aussi peu que 15 à 30 minutes.

Réévaluer la mise en page de votre site Web et la mettre à jour avec de nouvelles tendances de temps en temps est souvent une bonne idée, en particulier avec les nouvelles versions des propriétés CSS3 qui permettent des ombres de navigateur natives, des animations et des coins arrondis. Il s’agit d’une excellente collection d’idées qui valent le coup d’œil si vous avez besoin de mises à jour rapides.

De plus, si vous avez des questions ou des idées sur l’article, n’hésitez pas à partager avec nous dans la zone de discussion post.