Catégorie : Développement web

La création de contenus pour votre site et votre stratégie inbound marketing, est exigeante. Il s’agit même d’un éternel recommencement. Certains articles ne vieilliront jamais, ou presque. D’autres vont vous demander un peu plus d’efforts.

50 millisecondes, c’est le temps dont vous disposez pour impressionner un visiteur sur votre site web. Vous l’aurez compris, vous devez faire simple, mais efficace ! Au-delà de la première impression, le site doit également fournir une interface et une expérience utilisateur intuitives pour retenir l’internaute et stimuler les conversions. Avec les nouvelles technologies et les contraintes du marché, il est crucial de connaître les dernières tendances en matière de webdesign. Alors, comment mettre à jour le design de votre site internet ? Voici 5 idées à adopter ! 1. S’inspirer d’autres sites web L’une des meilleures sources d’inspiration reste les autres. Prenez note de leurs choix de mise en page, des transitions de page, des schémas de couleurs, de la typographie et d’autres éléments de conception. Allez encore plus loin en observant vos concurrents pour voir ce qui séduit (ou pas) leurs clients. Adoptez les bonnes pratiques que vous avez repérées et surtout, proposez une meilleure interface pour attirer plus de trafic (et le conserver). 2. Penser à utiliser un CMS Les systèmes de gestion de contenu (CMS) et les plateformes e-commerce transforment la création des sites internet. Grâce à une ergonomie intuitive, vous pouvez créer facilement un design professionnel. Par ailleurs, les CMS présentent une bibliothèque de thèmes personnalisables qui reprennent les tendances actuelles. Cela vous donne une excellente base de travail. De plus, ces outils proposent de nombreuses extensions pour enrichir l’interface client avec de nouvelles fonctionnalités. Si vous souhaitez remettre votre site internet au goût du jour, l’utilisation de ces plateformes est une excellente idée ! 3. Combiner modernisme et charte graphique professionnelle Que vous mettiez à jour un site web ou que vous en conceviez un nouveau, les éléments graphiques tels que les combinaisons de couleurs et la typographie jouent un rôle majeur dans le design. Tout d’abord, vous devez définir un style qui correspond à votre entreprise : rétro, vintage, contemporain, cartoon, minimaliste… Idéalement, ce style devra se retrouver dans votre charte graphique et vos coloris. N’oubliez jamais que votre site web est un prolongement de votre marque. 4. Améliorer les performances du site Plus de la moitié des visiteurs quitteront votre site si le chargement prend plus de trois secondes. De plus, la vitesse de la page est primordiale pour le SEO. Si vous avez l’intention de revoir le design de votre site, c’est le moment d’optimiser ses performances. Pour réduire le temps de chargement, vous pouvez : Compresser et redimensionner les images sur vos pages Éviter d’accumuler les plugins et les widgets Utiliser des plateformes de stockage externe ou CDN Utiliser la mise en cache Opter pour le format AMP 5. Optimiser pour tous les écrans avec un design réactif Un design réactif consiste à concevoir une page web qui peut se redimensionner et se reformater en fonction de l’appareil utilisé par un visiteur. Non seulement cela améliore l’expérience utilisateur pour les mobinautes, mais cela peut également augmenter votre classement dans les moteurs de recherche. La mise à jour du design s’avère être un moment opportun pour créer une version mobile parfaitement calibrée aux enjeux actuels. Profitez-en pour dépouiller vos pages de toutes fioritures, pour miser sur les icônes et les textes courts, mais complets. Le design de votre site web représente la personnalité de votre marque. Avec une conception soignée, votre entreprise sera reconnue comme professionnelle. Par ailleurs, le webdesign joue un rôle prépondérant dans la conversion des visiteurs. Si vous voulez augmenter votre acquisition de leads, pensez-y ! Pour améliorer l’interface de votre site web, faites appel à un professionnel freelance en postant une annonce gratuitement sur duoexpertise.com.

Ce n’est un secret pour personne : les sites web allégés s’affichent plus vite que les sites surchargés. Ne laissez pas de CSS inutile alourdir vos projets Web ; il existe une panoplie d’outils pour vous aider à supprimer les CSS orphelins et ainsi améliorer la performance globale de votre site Web. Qu’est-ce qu’un CSS inutilisé ? Quel que soit votre niveau d’expérience en tant que développeur, il y a de fortes chances que votre site Web contienne des CSS n’ayant aucun impact sur les éléments de page actuels. Par exemple, les frameworks comme Bootstrap sont livrés avec des dizaines de styles CSS dont vous n’avez probablement pas besoin. Si vous avez ajouté une fonctionnalité au cours du développement et que vous l’avez supprimée par la suite, il se peut qu’il y ait encore des règles associées à cette fonctionnalité dans vos feuilles de style. Garder ces CSS ne fait qu’ajouter du poids à vos pages, pour rien. Pourquoi c’est important ? Puisque le CSS définit comment le contenu d’un document HTML est affiché, le navigateur de l’utilisateur doit télécharger et analyser tous les fichiers CSS externes avant de pouvoir commencer le rendu du contenu. Par conséquent, plus une page Web contient de CSS, plus les utilisateurs doivent attendre longtemps pour voir quoi que ce soit sur leur écran. L’intégration de petites feuilles de style CSS directement dans votre fichier HTML et la minimisation de vos feuilles de style externes peuvent aider à optimiser le temps de chargement, mais la suppression de ces CSS est une stratégie bien plus efficace pour améliorer la performance globale du site. La combinaison de ces méthodes garantit que les utilisateurs voient le contenu aussi rapidement que leur connexion le permet. En plus de ralentir votre site Web, l’excès de CSS peut causer des maux de tête aux développeurs. Comment faire pour supprimer le CSS orphelin Première option : supprimer à la main Si vous utilisez Chrome, l’onglet DevTools possède un outil pratique qui vous permet de voir quel code est exécuté sur une page sur ce qui ne l’est pas. Pour accéder à cet outil, suivez les étapes ci-dessous : Ouvrir Chrome DevTools Ouvrir le menu de commande avec : cmd + shift + p (ou ctrl + maj + p) Taper « Coverage » et cliquez sur l’option « Instrument coverage ». Sélectionner un fichier CSS dans l’onglet Sources. Tout CSS qui se trouve à côté d’une ligne verte continue signifie que le code a été exécuté. Une ligne rouge signifie qu’il n’a pas été exécuté. Une ligne de code qui est à la fois rouge et verte, signifie que seule une partie du code sur cette ligne est exécutée. Attention, ce n’est pas parce qu’un style n’est pas utilisé sur une page qu’il ne l’est pas ailleurs, donc vous devrez vérifier plusieurs pages de votre site et garder l’œil sur les règles qui continuent à apparaître sur la liste rouge. Vous pouvez le faire en copiant et en enregistrant les résultats de chaque audit dans un document Google Sheets. Les lignes qui apparaissent le plus souvent peuvent probablement être enlevées en toute sécurité. La plupart des développeurs ont mieux à faire que de supprimer les règles CSS inutilisées une par une. C’est pourquoi il existe une variété d’outils conçus pour automatiser le processus. Seconde option : supprimer avec des outils Voici un aperçu des outils les plus populaires conçus pour aider les développeurs Web à supprimer les CSS inutilisés de leurs projets Web : 1. UnusedCSS Le nom simple est indicatif de la convivialité de ce programme. Il suffit de mettre l’URL de votre site Web dans UnusedCSS et de le laisser faire tout le travail. En plus d’identifier et de supprimer les règles CSS inutilisées, il vous indique combien de mémoire vous avez économisée. Vous pouvez essayer gratuitement UnusedCSS, mais vous devez payer un abonnement mensuel pour télécharger vos fichiers CSS nettoyés. Les membres Premium peuvent programmer des optimisations CSS automatiques et avoir accès à d’autres fonctionnalités ; il est à noter qu’UnusedCSS ne fonctionne qu’avec des sites Web live, donc ce n’est pas utile pendant une phase de test. 2. PurifyCSS PurifyCSS est un outil gratuit qui supprime les CSS inutilisés de vos fichiers HTML, PHP, JavaScript et CSS avant leur mise en ligne. Par contre, vous devez spécifier manuellement les fichiers à analyser un par un, ce qui rend le processus quelque peu fastidieux. Plutôt que de modifier vos fichiers originaux, PurifyCSS génère un nouveau fichier avec le CSS optimisé. Comme cet outil ne fonctionne pas avec les sites Web live, vous devrez l’utiliser dans un environnement de développement. 3. PurgeCSS PurgeCSS a été inspiré par PurifyCSS, mais son utilisation est un peu plus simple et intuitive. Il fonctionne en comparant votre contenu à vos fichiers CSS et en supprimant les sélecteurs qui n’ont pas de correspondance. Le seul inconvénient est que vous devez manuellement whitelister les CSS ne se trouvant pas dans les chemins spécifiés : un vrai casse-tête si votre site Web utilise certains plugins. Vous n’avez plus aucune excuse de ne pas alléger vos feuilles de style ! Et si vous souhaitez optimiser davantage votre site web vous pourrez trouver le professionnel qu’il vous faut sur duoexpertise.com.