Comment faire un site web

0
14

Comment faire un site web

Vous êtes ici parce que vous aimeriez apprendre à créer un site Web. La création d'un site Web comporte plusieurs étapes, du choix de votre typographie au jeu de couleurs, à l'imagerie, à l'image de marque, à l'architecture du site et bien plus encore. Compte tenu de tout cela, il est compréhensible de ne pas savoir par où commencer.


Avant de penser aux phases de construction d'un site que j'ai mentionnées ci-dessus, vous devez décider sur quelle plateforme vous allez construire votre site Web.

Il y a une quinzaine d'années, j'ai appris à créer mon premier site Web, et j'ai été époustouflé par le fait qu'il était incroyablement indolore. Je vais vous montrer comment vous pouvez faire la même chose en peu de temps.

3 étapes simples pour apprendre
Comment faire un site web

étapes pour créer un site Web "width =" 700 "height =" 389 "src =" http://www.editionslunebleue.com/wp-content/uploads/2020/01/steps-to-making-a-website.jpg "class =" aligncenter size-full wp-image-4764 lazyload


Étape # 1: Choisir votre plate-forme de site Web

Si vous êtes un débutant essayant de comprendre à quel point il peut être facile de créer un site Web, vous avez de la chance! Tout le monde peut profiter de ce guide gratuit étape par étape.

La première étape consiste à choisir la plateforme que vous souhaitez utiliser.

Whoa Matt, ralentis! Qu'est-ce qu'une plateforme?

C'est un excellent point de départ. Vous voyez, quand Internet était encore un bébé, les sites Web ont été construits à partir de zéro en utilisant le codage HTML. Essayer de construire un site de cette façon a nécessité une formation insensée.

Sérieusement, la seule façon de construire un site comme celui-ci est de passer la majeure partie de sa vie à étudier le HTML dans un temple isolé de l'Himalaya.


Bluehost Banner "src =" http://www.editionslunebleue.com/wp-content/uploads/2020/01/620x203BW.png "class =" wp-image-6787 taille-plein aligncenter lazyload

Avance rapide jusqu'à aujourd'hui et créer soudainement un site Web n'est pas si mal. Avec l'essor des systèmes de gestion de contenu (CMS) comme WordPress, n'importe qui peut entrer dans le monde de la création de sites Web avec peu ou pas de formation. Tout ce dont vous avez besoin d'un bon guide (comme celui-ci).

Alors, quelle plateforme CMS devriez-vous choisir?

Prêt à augmenter le trafic avec une liste de diffusion?
Contact constant vous a couvert avec les outils et l'expertise dont vous avez besoin pour commencer. Découvrez leur essai gratuit aujourd'hui!

(Sponsorisé)

Quelles plateformes les meilleurs sites Web utilisent-ils?

WordPress est le choix préféré pour une plate-forme de site Web. Wix et Squarespace sont également des plates-formes populaires car elles offrent des générateurs par glisser-déposer et elles agiront comme votre hôte.

Alors que des plates-formes simples comme celles-ci offrent des méthodes tout aussi simples pour créer et éditer votre site, vous pourriez vous retrouver dépassé par les roues de formation et avoir besoin de plus de votre plate-forme.

Voici l'affaire:

WordPress est une plate-forme flexible qui pourrait aussi bien avoir des «options» que son deuxième prénom. Entre les thèmes, les plugins et l'éditeur riche en fonctionnalités, WordPress correspond à vos compétences et évolue avec vous.

Et c'est, mes amis, pourquoi les gens choisissent WordPress.

Découvrez ces données extraites de Builtwith:

tendances et données de la plate-forme du site Web "width =" 700 "height =" 434 "src =" http://www.editionslunebleue.com/wp-content/uploads/2020/01/Website-Platform-Trends.png "class =" aligncenter taille-plein wp-image-4759 lazyload

Le choix ultime: WordPress

WordPress est le meilleur choix dans l'ensemble, mais simplement en disant que cela ne va pas vous convaincre, alors examinons certaines des principales raisons pour lesquelles je le recommande toujours par rapport à toutes les autres plateformes CMS:

1. C'est totalement GRATUIT

L'utilisation de WordPress ne coûte pas un centime. Vous pouvez faire fonctionner votre site Web sans rien payer du tout. Vous aurez même également accès à des mises en page et à des outils gratuits.

2. Tout est facile à utiliser

Les plateformes CMS conviviales sont rares. WordPress est également le roi dans ce domaine. La configuration qu'il utilise est extrêmement similaire à Microsoft Word, donc si vous avez utilisé ce programme (qui ne l'a pas fait), vous vous sentirez comme chez vous avec WordPress.

WordPress propose également des outils appelés plugins qui ajoutent toutes sortes de fonctionnalités à votre site Web. Que vous conceviez les articles de blog parfaits ou un site Web d'entreprise, WordPress peut le faire pour vous.

3. Grand, petit, occupé ou silencieux, peu importe!

Vous commencerez petit comme n'importe quel autre site Web, mais soyez assuré que WordPress peut gérer tout ce que vous lui lancez lorsque vous évoluez vers le haut vers les étoiles. Saviez-vous que WordPress est utilisé par des entreprises comme Facebook, eBay, CNN et NASA?

4. Prise en charge des appareils mobiles

Avoir un site Web qui a fière allure sur les appareils mobiles est si important en ce moment si vous voulez que votre site Web ait une chance de se classer dans Google. En termes de SEO (Search Engine Optimization), c'est pratiquement un must.

Il est donc clair que WordPress est le meilleur choix pour les débutants et dans la plupart des cas, c'est aussi l'option parfaite pour les utilisateurs avancés.

Revoyons:

Choisir votre plateforme de site Web

  • Les 3 principales plateformes de sites Web sont WordPress, Joomla et Drupal.
  • WordPress est le plus populaire, permet des sites adaptés aux mobiles (idéal pour le référencement)
  • Drupal est idéal pour les développeurs Web expérimentés, mais pas pour les débutants.
  • Joomla est mieux utilisé pour les sites Web de commerce électronique.

Voici ce que vous devez faire dès maintenant:

  • Ne vous inquiétez pas du téléchargement de WordPress pour l'instant, cela se fera dans les étapes suivantes 🙂
  • Choisissez une plate-forme pour votre site Web. Je pense que WordPress est le meilleur et demi, mais la décision vous appartient.

Étape # 2: Achat d'un nom de domaine et hébergement

Pour démarrer votre site Web, vous allez avoir besoin de deux choses: a nom de domaine et hébergement. Pour les non-initiés, voici une explication rapide de ce que sont ces choses:

  • UNE nom de domaine est l'adresse Web que vous saisirez dans la barre de recherche pour accéder à votre site.
  • Votre Hébergement Web est l'entreprise que vous choisissez de mettre en ligne votre site Web et de le rendre accessible au public à toutes les heures de la journée, chaque jour de l'année.

Le choix de ces éléments est la décision la plus importante que vous prendrez en tant que propriétaire de site Web. Avant de passer au processus, vous devez savoir que les sites Web gratuits ne sont pas intelligents à long terme.

Qu'est-ce que j'entends par sites Web gratuits? Je parle d'endroits comme ceux-ci:

Ces sites vous donneront un site Web pour appeler le vôtre, mais ce n'est pas vraiment le vôtre. Non seulement ils le possèdent (et ont la possibilité de le fermer à tout moment), mais ils vous font également partager l'URL avec le titre de leur entreprise.

Sites Web auto-hébergés

  • Vous appartient entièrement
  • Monétiser et gagner de l'argent
  • Charge super rapide
  • Assistance 24/7
  • Personnalisation complète de la conception

Sites Web gratuits

  • Pas le vôtre (appartenant au fournisseur)
  • Peut être retiré à tout moment (sans préavis)
  • Le fournisseur mettra ses propres annonces sur votre site
  • Je ne peux pas gagner d’argent

«Hey Matt? Alors, où obtenez-vous votre hébergement? "

Je suis tellement content que vous ayez demandé, cher lecteur.

Mon choix exclusif d'hébergement est BlueHost, mais vous pouvez utiliser un large éventail de choix d'hébergement. Je travaille chez BlueHost depuis plusieurs années maintenant et je n'ai jamais eu de problème. Non seulement cela, mais je suis également extrêmement satisfait de leur service client.

Pour la plupart, je connaissais les cordes, mais chaque fois que je les appelais, elles étaient toujours courtoises et polies. En fait, je les aime tellement que je les recommande à mes lecteurs depuis que j'ai commencé sur Blast Blog.

Choisir votre nom de domaine

Bien que cela puisse sembler simple, votre nom de domaine fait partie intégrante de votre site Web. Vous voulez que les gens trouvent facilement votre site et se souviennent de son nom afin qu'ils puissent en parler à leurs amis, leur famille et leurs animaux de compagnie.

En bref, votre domaine doit comporter trois caractéristiques clés:

  • Pertinent pour votre entreprise ou votre site Web
  • Facile à retenir
  • Simple

Si vous êtes propriétaire d'une entreprise, la meilleure approche consiste à faire du domaine le nom de votre entreprise. Il en va de même pour le nom de votre blog, ou même votre propre nom fonctionnera également.

Gardez à l'esprit qu'il ne peut pas y avoir deux domaines identiques sur Internet, donc si votre première idée ne fonctionne pas, ce n'est pas votre faute. Vous choisirez également l'extension de votre domaine (.com, .net, .org). si la version .com est prise, vous pouvez essayer .net à la place.

Achat de domaine et d'hébergement

N'oubliez pas que les sites Web gratuits offrent une expérience limitée et ne sont pas utiles à la croissance et au succès à long terme. WordPress.com est le site gratuit et WordPress.org est la plateforme CMS auto-hébergée avec différentes options d'hébergement.

Voici ce que vous devez faire avant de passer à l'étape suivante:

  • Prenez le temps de réfléchir à quelques idées pour votre domaine qui reflètent votre entreprise ou votre site Web.
  • Configurez votre hébergement via www.Bluehost.com

Étape # 3: Configurer WordPress

L'installation de WordPress peut être facile, ou cela peut être vraiment, vraiment dur. C'est encore une autre raison pour laquelle je recommande toujours WordPress et, par extension, Web Hosting Hub. Voici les deux façons d'installer WordPress:

  • Installation en un clic (aussi simple que cela puisse paraître)
  • Installation manuelle (inutilement compliquée)

Souvent, le meilleur signe d'un bon fournisseur d'hébergement est l'existence d'une option en un clic pour installer un CMS comme WordPress, Joomla ou Drupal.

(intégré) https://www.youtube.com/watch?v=9s8aYsSNtjk (/ intégré)
Une fois que vous avez installé WordPress, vous pourrez vous connecter au tableau de bord qui ressemble à ceci:

introduction du tableau de bord wordpress "width =" 700 "height =" 320 "src =" http://www.editionslunebleue.com/wp-content/uploads/2020/01/Wordpress-Dashboard.jpg "class =" aligncenter size-full wp-image-4712 lazyload

Pour y arriver, tapez simplement votre URL avec la balise d'administration WordPress à la fin. Il ressemblera à ceci:

www.votredomaine.com/wp-admin

C'est ici que vous vous connecterez et verrez le tableau de bord illustré ci-dessus. Comme vous pouvez le voir, il y a beaucoup d'options à choisir. Commençons par choisir le thème de votre site Web.

Comment choisir votre thème

Le thème WordPress de base est très bien, mais nous sommes sur le point de monter le cadran à onze. WordPress propose une énorme quantité de modèles de conception pour donner à votre site une apparence qui correspond à vos besoins. La meilleure partie? Ces dessins sont incroyablement facile à installer.

En ce qui concerne WordPress, le mot du jour est facile. Rendez-vous sur votre tableau de bord et recherchez le Apparence bouton sur le côté gauche. Cliquez dessus, puis sur Thèmes. Allez-y et cliquez sur le bouton Ajouter un nouveau en haut de l'écran

Voici ce que vous devriez voir:

wordpress-themes "width =" 600 "height =" 395 "src =" http://www.editionslunebleue.com/wp-content/uploads/2020/01/wordpress-themes-min.jpg "class =" wp- image-3441 aligncenter lazyload

Maintenant, vous pouvez parcourir les options comme un enfant dans un magasin de bonbons. Il existe des options gratuites et premium que vous rencontrerez. Si vous souhaitez investir dans un thème, il existe de superbes options.

Si vous débutez, ne vous inquiétez pas de dépenser quoi que ce soit pour l'instant. Vous trouverez de nombreuses options gratuites. Lorsque vous naviguez, assurez-vous de prendre en compte les caractéristiques d'un excellent thème WordPress:

Les éléments d'un grand thème

  • Une option conviviale qui rend tout clair. La navigation sur votre site doit être rapide et facile pour les visiteurs.
  • Design agréable qui apparaît, mais ne vous fait pas mal aux yeux avec une surcharge de couleurs. Recherchez quelque chose de propre et simple.
  • Mobile responsive, je ne saurais trop insister sur cette partie. Votre site doit être superbe sur les appareils mobiles. N'oubliez pas, Google dispose d'un outil que vous pouvez utiliser pour vérifier. Un site non réactif tue votre classement et votre expérience utilisateur.
  • Assurez-vous qu'il n'a pas trop de codage ou de code mal écrit qui ralentit votre site
  • Il doit être facile à utiliser à l'arrière et optimisé pour le référencement. Assurez-vous également que le thème est régulièrement mis à jour et maintenu.

Une fois que vous avez trouvé le thème pour vous, cliquez sur le installer puis assurez-vous de cliquer également sur Activer sur la page suivante. Une chose importante à retenir également:

Changer de thème ne supprimera aucun de vos messages ou contenu!

Si vous devez changer de thème, ne vous inquiétez pas de la disparition de quelque chose. Maintenant que vous avez choisi l'apparence de votre site Web, passons à la création de contenu pour celui-ci, n'est-ce pas?

Comment ajouter de nouvelles pages

Avant de nous plonger dans le processus de création de nouvelles pages, clarifions la différence entre des postes et pages.

  • Les publications sont dynamiques (c'est le meilleur choix si vous démarrez un blog)
  • Les pages sont statiques comme celles que vous trouvez sur le site Web d'une entreprise. Votre page «À propos de nous» en est un parfait exemple.

D'accord, donc lorsque vous êtes prêt à commencer avec votre première page. Cliquez Pages -> Ajouter un nouveau sur le côté gauche de votre tableau de bord. L'écran suivant sera très familier à ceux qui ont utilisé Microsoft Word.

Ici, vous pouvez ajouter votre texte, vos images et tous les éléments de la page que vous créez. Lorsque vous avez terminé, cliquez sur le Publier bouton. Si vous souhaitez des boutons pour ces pages dans la barre de navigation de votre site, nous le verrons ensuite.

Ajout de pages à votre barre de navigation

Commencez par vous diriger vers Apparitions -> Menus. Cochez la case de la page que vous souhaitez ajouter, puis cliquez sur Ajouter au menu.

Création d'une page d'accueil statique

Étant donné que nous mettons en place un site Web, vous souhaiterez que votre page d'accueil soit statique et immuable. Si vous ne suivez pas cette étape, vos messages s'afficheront ici chaque fois que vous en créerez un.

Pour les propriétaires de sites Web mai, ils veulent que leur blog soit séparé, ce qui sera discuté momentanément. Pour créer une page d'accueil, procédez comme suit:

Création d'une page d'accueil statique

  • Aller à Paramètres -> Lecture
  • Choisissez la page que vous souhaitez (la première page est votre page d'accueil et la page des messages serait la page de votre site Web si elle est distincte)

Ajout de publications et de catégories

La plupart des sites Web auront également un blog attaché. Bien qu'il soit difficile de trouver des idées d'articles de blog, une fois que vous les aurez, vous devrez configurer votre site Web pour gérer ces articles.

Les publications se trouvent sur le côté gauche du tableau de bord où se trouve l'option pages. Vos articles de blog peuvent être organisés en différentes catégories en fonction de votre sujet, ou vous pouvez simplement créer une catégorie appelée «blog» si vous le souhaitez.

Pour ce faire, cliquez sur Messages -> Catégories sur le tableau de bord. Une fois que vous avez créé votre ou vos catégories, il vous suffit de cocher la case appropriée dans la section des catégories lorsque vous avez terminé d'écrire des articles.

Cela ressemble à ceci:

categories-wordpress "width =" 283 "height =" 337 "src =" http://www.editionslunebleue.com/wp-content/uploads/2020/01/categories-min.jpg "class =" aligncenter size-full wp-image-3435 lazyload

Regroupons-nous, voici les points à retenir de la troisième étape:

Installer WordPress

  • Les grands hébergeurs proposent une installation en un clic
  • L'installation peut se faire via votre panneau de contrôle d'hébergement.
  • Une fois installé, rendez-vous sur www.votredomaine.com/wp-admin ouvrir une session.
  • Créer des articles pour un blog (dynamique) ou des pages pour un site Web (statique)
  • Ajoutez des pages à votre barre de navigation en accédant à apparences -> menus.
  • Aller à paramètres -> lecture pour définir votre page d'accueil (page d'accueil) sur statique si nécessaire.
  • Organisez les publications en catégories en accédant à messages -> catégories.

(BONUS) Étape # 4: Nettoyage et touches finales

À ce stade, votre site est opérationnel, mais il nous reste quelques modifications à apporter avant de pouvoir l'appeler un jour. Ne vous inquiétez pas, cela ne prendra pas longtemps.

Votre titre et votre slogan

Ces éléments font référence à ce que les internautes voient sur les moteurs de recherche lorsque les pages de votre site apparaissent dans les résultats. Pour les modifier, rendez-vous sur Paramètres -> Général. La page devrait ressembler à ceci:

Le titre est la première chose que les gens voient dans les résultats de recherche.

Désactiver les commentaires

Selon votre site, il se peut que vous ne souhaitiez pas que des personnes commentent des pages ou des publications. Si vous préférez, cliquez sur Réglages -> Discussion -> décochez "Autoriser les commentaires".
comments-settings "width =" 600 "height =" 287 "src =" http://www.editionslunebleue.com/wp-content/uploads/2020/01/comments-settings-min.jpg "class =" aligncenter wp -image-3436 lazyload

Installer des plugins

Il s'agit de notre dernier arrêt sur la route du lancement épique de votre site Web. WordPress possède une énorme bibliothèque de programmes appelés plugins qui effectuent une grande variété de tâches sur votre site. Comme les thèmes, certains d'entre eux sont gratuits et d'autres payants.

Les meilleurs plugins WordPress élargiront les fonctionnalités de votre site et vous offriront de nouvelles fonctionnalités intéressantes. Voici quelques-unes des choses que les plugins peuvent faire:

  • Suivez vos efforts de référencement dans chaque publication
  • Accélérez votre site Web en mettant des pages en cache
  • Gérez vos efforts sur les réseaux sociaux et planifiez vos publications
  • Ajouter des sondages, des boutons de partage social et d'autres éléments d'engagement

Installer des plugins sur WordPress

  • Aller à Plugins -> Ajouter un nouveau et vous pourrez rechercher parmi tous les 50 000+ plugins de WordPress!
  • Lorsque vous en trouvez un, cliquez sur Installer.
  • Un conseil, tous les plugins ne sont pas créés égaux. De plus, trop de plugins ralentiront votre site. Faites vos recherches avant de décider de commencer l'installation.

Nettoyage de la maison et touches finales

  • Si vous ne souhaitez pas de commentaires, accédez à paramètres -> discussion -> décochez «autoriser les commentaires».
  • Installez les plugins en allant sur plugins -> ajouter de nouveaux
  • Faites des recherches avant d'installer des plugins, ils ne valent pas tous la peine.

Comment démarrer un site Web avec un grand design

Félicitations pour avoir appris à créer un site Web! Vous voyez, ce n'était pas si difficile du tout!

Mais nous n'avons pas encore fini.

Un plan à long terme doit être mis en place pour la façon dont vous souhaitez concevoir votre site Web.

C'est là que commence le vrai plaisir!

Ensuite, nous allons examiner les principaux locataires de la conception Web et vous aider à vous faire une idée de l'apparence et de la convivialité de votre site Web dans un avenir prévisible.

Les quatre piliers de la conception Web


Pilier # 1: Taille

Facteurs de largeur de page

  • La taille de la page en corrélation avec la taille de l'écran (ordinateur de bureau ou mobile)
  • Le contenu de la page
  • Que vous souhaitiez que le lecteur survole ou l'enregistre pour une lecture approfondie à une date ultérieure.
  • La quantité de bande passante nécessaire pour charger la page.

La différence entre la conception graphique en ligne et imprimée

  • L'impression permet à l'utilisateur de voir un une page complète de deux pages
  • Les pages Web en ligne ne montrent que une page à la fois

Structure de la page

  • Divisez-vous en «écrans» en fonction de ce qu'un utilisateur voit en faisant défiler
  • Lien vers la page d'accueil sur le logo (Cliquez ici pour créer un logo)
  • Contenu divisé en en-têtes
  • Liens globaux facilement visibles pour les utilisateurs, structurés sous forme de liste
  • Navigation fil d'Ariane (facultative) au-dessus du contenu principal / intégrée dans l'en-tête.
  • Icône de panier d'achat pour le commerce électronique dans le coin supérieur droit de la page
  • Les colonnes de numérisation peuvent être utilisées pour les liens de navigation sur la gauche pour de meilleurs résultats.

Structure de la zone de contenu

  • Titre de la page – utilisez les en-têtes au format H1 en haut de la page pour montrer clairement ce que la page concerne pour les lecteurs et les moteurs de recherche.
  • Règles – Utilisez CSS pour contrôler les règles de la page car elles peuvent devenir encombrées. Si vous êtes préoccupé, les règles peuvent être ignorées et, à la place, des espaces ou du contenu visuel peuvent être utilisés pour créer une séparation.
  • Navigation de page – Pour les mises en page de plusieurs pages, proposez une navigation en haut et en bas de la page pour avancer et reculer dans la séquence.
  • Dates de publication – Les dates auxquelles le contenu a été publié ou mis à jour doivent être placées en haut du site pour les sites d'actualités et de magazines, tandis que d'autres peuvent l'inclure en bas.
  • Pieds de page – Gardez-les à l'écart et utilisez-les pour l'attribution légale, comme les déclarations de droits d'auteur, les coordonnées et les auteurs de pages.

Cadre de la page

  • La longueur de la page n'est pas autant un problème que par le passé. Les utilisateurs défileront.
  • Plusieurs périphériques d'entrée et tailles d'écran nécessitent un site Web adaptatif.
  • CSS et HTML devraient se concentrer sur une conception flexible et fluide. Des éléments statiques peuvent être utilisés (barre latérale) combinés avec des éléments flexibles (contenu).

Lectures complémentaires sur la taille dans la conception Web:

Pilier # 2: Couleur et espacement

Théorie des couleurs

  • Les couleurs fonctionnent ensemble pour la complémentation, le contraste et l'éclat
  • Trois types de complémentation des couleurs: Triadique. Composé et analogue.
  • Le contraste est utilisé pour diviser les éléments sur une page (un exemple étant le contraste de couleur d'arrière-plan et de texte)
  • La vibration fait référence à la luminosité de la couleur. Des couleurs plus vives créent plus d'énergie (utile lorsque vous essayez de vendre un produit). Les nuances plus sombres sont relaxantes et permettent à l'esprit de se concentrer.
  • Choisissez des couleurs aux extrémités opposées du spectre pour une harmonie visuelle
  • Le contraste élevé aide à rendre les éléments facilement lisibles et guide l'attention

Jeu de couleurs triadique

Schéma de couleurs triadique "width =" 250 "height =" 250 "src =" http://www.editionslunebleue.com/wp-content/uploads/2020/01/triadic-color-scheme.png "class =" alignnone size -full wp-image-4285 lazyload

  • Composé de trois couleurs sur une roue
  • Commencez avec la couleur de base et dessinez un triangle équilatéral à partir de la première couleur
  • Les trois points du triangle créent le jeu de couleurs.
  • Exemple: jaune, rouge et bleu

Schéma de couleurs composé

Schéma de couleurs composé "width =" 250 "height =" 250 "src =" http://www.editionslunebleue.com/wp-content/uploads/2020/01/compound-color-scheme.png "class =" alignnone size -full wp-image-4286 lazyload

  • Choisissez deux couleurs des côtés opposés du spectre.
  • Permet plus de liberté dans le choix des couleurs.
  • Les couleurs choisies auront des caractéristiques complémentaires.
  • Exemple: orange et violet. Orange & Bleu

Schéma de couleurs analogues

Schéma de couleurs similaires "width =" 250 "height =" 250 "src =" http://www.editionslunebleue.com/wp-content/uploads/2020/01/analogous-color-scheme.png "class =" alignnone size -full wp-image-4287 lazyload

  • Sélection de couleur dans la même zone du spectre.
  • Les couleurs sont représentées par le dynamisme et le contraste
  • Deux exemples: jaune / orange ou monochromatique.

Psychologie des couleurs

  • Psychologie des couleurs examine comment les couleurs influencent le comportement humain.
  • Les clients prennent 90 secondes pour se forger une opinion sur un produit. 62 à 90% de cette décision est basé sur la couleur.
  • Les enquêtes montrent les femmes préfèrent le bleu, le violet et le vert. Ils n'aiment pas le gris, l'orange ou le marron.
  • Les hommes préfèrent le bleu, le vert et le noir. Ils n'aiment pas le marron, l'orange ou le violet.
  • La couleur le bleu représente confiance, loyauté et calme.
  • Le jaune représente généralement la prudence, mais il peut également déclencher des centres d'excitation dans le cerveau.
  • Les couleurs sont étroitement liées aux souvenirs et aux expériences.
  • Le vert est une excellente couleur pour les produits / services extérieurs et environnementaux
  • Le vert fonctionne bien comme couleur pour les CTA lorsqu'il est associé au effet d'isolement.
  • Le noir peut être utilisé pour transmettre la sophistication, le luxe et l'exclusivité.
  • Les couleurs vives et primaires sont idéales pour les appels à l'action.
  • L'espace blanc aide à réduire la surcharge et permet une conception «respirante».

Aspect visuel

  • Utilisez une hiérarchie visuelle pour différencier ce qui est important et ce qui est secondaire.
  • Conservez les éléments connexes en groupes pour faciliter la structure.
  • Une mise en page basée sur une grille avec des groupes de contenu crée une mise en page numérisable.
  • La cohérence est importante dans la typographie et la mise en page
  • Un équilibre visuel entre le texte et les graphiques est primordial. Pour le grand public, il s'agit d'un équilibre de texte et de liens avec des graphiques plus petits qui se chargent rapidement.
  • Les concepteurs Web devraient se tourner vers des palettes de couleurs inspirées de la nature pour un exemple de schémas de couleurs harmonieuses.
  • Efforcez-vous de la simplicité et utilisez l'espace blanc pour séparer les différents éléments visuels.
  • Découvrez le cadre frontal le plus avancé et le plus réactif au monde.

Pilier # 3: Disposition et navigation

Navigation claire

  • Une conception claire et cohérente à travers les graphiques et le texte donne au lecteur l'assurance de trouver ce dont il a besoin.
  • Il est essentiel que les utilisateurs comprennent où ils se trouvent par rapport au reste du site Web.
  • Pas de pages sans issue. Les pages de sous-section doivent avoir des liens vers la page d'accueil ou les pages de catégories locales.
  • Concevez votre hiérarchie de navigation en pensant à l'efficacité. Les utilisateurs doivent atteindre leur destination en un minimum d'étapes.
  • Toutes vos pages doivent être conçues avec une grille de mise en page cohérente et une hiérarchie d'informations visuelles.
  • Les commentaires peuvent être reçus via des analyses et données de la carte thermique pour voir comment les utilisateurs interagissent avec les aspects de navigation du site.

Conception de la barre latérale

  • Concevez votre barre latérale avec une convivialité universelle à l'esprit. Identique ou équivalent sur toutes vos pages.
  • La conception doit être flexible et utile pour un large éventail de préférences et d'expérience sur Internet.
  • Il est facile à utiliser et organisé de sorte que les informations importantes soient les plus importantes.

SEO (Search Engine Optimization)

  • Mots clés ou requêtes – Utilisation variée de mots clés associés et de variations à longue traîne qui ciblent des sujets spécifiques.
  • Texte alternatif – Utilisation de texte alternatif dans les images pour fournir une description des analyses des moteurs de recherche.
  • En-têtes – Intégrer des mots clés et des sujets pertinents dans et<br /> <h1> balises pour établir la profondeur d'actualité.</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;"><strong>Saillance de l'entité</strong> – Définir les principaux sujets (entités) et les connecter à d'autres sujets connexes (Exemple: les héros Marvel se connectent à The Avengers, Spider-man, etc.) </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;"><strong>Sitemaps</strong> – La création d'un plan du site et de robot.txt permettra aux araignées d'explorer plus facilement vos pages Web et de différencier les pages indexées des pages non indexées. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;"><strong>Structure d'URL</strong> – Décrivez le sujet de la page et soyez succinct. N'utilisez pas 10 mots quand 3 suffiront.</span></li> <li style="font-weight: 400;"> <span style="font-weight: 400;"><strong>Optimisation d'image</strong> – Utilisez une largeur d'image cohérente et des outils comme </span><span style="font-weight: 400;">optimizilla</span><span style="font-weight: 400;"> pour réduire la taille du fichier. </span> </li> <li style="font-weight: 400;"><span style="font-weight: 400;"><strong>Vitesse du site Web</strong> – Concentrez-vous sur la diffusion de pages à chargement rapide pour une expérience utilisateur positive et fructueuse. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;"><strong>Création de liens</strong> – Utilisez la sensibilisation par e-mail et le réseau d'influenceurs pour gagner des backlinks pertinents vers votre contenu. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;"><strong>Google Analytics</strong> – Surveillez les mesures significatives telles que le taux de rebond, le temps passé sur la page et l'impact de l'engagement sur les conversions / ventes.</span></li> </ul> <h2><span style="color: #ff6600; font-size: 36pt;">Pilier # 4: Style</span></h2> <h3><span style="font-size: 24pt; color: #333333;"><b>Typographie</b></span></h3> <ul> <li style="font-weight: 400;"><span style="color: #333333;"><span style="font-weight: 400;">Grande typographie</span><span style="font-weight: 400;"> dépend du contraste visuel et du choix de la police (comment ils interagissent et fonctionnent avec l'espace blanc environnant). </span></span></li> <li style="font-weight: 400;"><span style="font-weight: 400; color: #333333;">Des marges cohérentes sont indispensables, avec une utilisation cohérente de l'espace blanc pour créer une structure et séparer le texte des autres éléments de la page. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400; color: #333333;">N'utilisez jamais de conceptions centrées, justifiées ou alignées à droite dans le texte d'un site Web. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400; color: #333333;">Le texte justifié à gauche est la meilleure option, avec des titres qui sont alignés à gauche. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400; color: #333333;">Les dispositions à largeur fixe permettent de contrôler la longueur de la ligne, tandis que les dispositions flexibles remplissent la fenêtre du navigateur. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400; color: #333333;">Pour une largeur fixe, définissez des colonnes ne dépassant pas 365 pixels, soit environ 10 mots par ligne. Dans une conception flexible, utilisez les commandes d'attaque CSS pour ajuster l'espacement des lignes. </span></li> <li style="font-weight: 400;"><span style="color: #333333;"><span style="font-weight: 400;">Utiliser </span><span style="font-weight: 400;">de premier plan</span><span style="font-weight: 400;"> pour augmenter la lisibilité. Les meilleures pratiques sont 2 points au-dessus de la taille de la police. Exemple: une police de 12 points doit avoir 14 points d'interlignage. </span></span></li> <li style="font-weight: 400;"><span style="font-weight: 400; color: #333333;">Le retrait peut être utilisé pour introduire de nouveaux paragraphes, ou l'espacement des lignes vides peut être utilisé comme un moyen de fournir un espace blanc entre les paragraphes (mieux pour numériser des pages Web).</span></li> </ul> <h3><span style="font-size: 24pt;"><b>Trouver votre style </b></span></h3> <ul> <li style="font-weight: 400;"><span style="font-weight: 400;">Ne vous fiez pas aux modes ou uniquement aux tendances. Choisissez un style approprié et pertinent pour votre public. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Comprenez les besoins de votre utilisateur et le problème que vous essayez de résoudre pour lui. Regardez les concurrents, créez des tableaux d'humeur et définissez des directives de marque. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Gardez tout propre et visuellement agréable. Trouvez l'équilibre entre visuels attrayants et convivialité. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Votre style doit refléter vos croyances et vos valeurs. Votre passion doit être présente dans votre conception. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">N'imitez pas les autres, inspirez-vous d'eux pour créer quelque chose de tout à fait unique. </span></li> </ul> <h3><span style="font-size: 24pt;"><b>Création de contenu de haute qualité </b></span></h3> <ul> <li style="font-weight: 400;"><span style="font-weight: 400;">Les lecteurs en ligne préfèrent parcourir les pages plutôt que de les lire. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Divisez votre texte en paragraphes plus petits (3-4 lignes par). </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Fournissez des en-têtes descriptifs et courts. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Utilisez le gras et l'italique pour mettre en évidence les points importants du texte. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Utilisez un style de pyramide inversée (les points les plus importants près du début et faciles à trouver). </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Utilisez des balises HTML pour définir des en-têtes, des paragraphes, des listes à puces, etc. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Variez vos types de contenu: listicles, éditoriaux, guides pratiques, vidéos, podcasts, infographies. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Citez des sources dans vos articles avec un texte d'ancrage et des hyperliens pertinents. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Utilisez des images pour diviser davantage de longues portions de texte. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Fournissez des conseils pratiques. </span></li> <li style="font-weight: 400;"> <span style="font-weight: 400;">Rédiger un bon équilibre entre le contenu informatif et promotionnel (</span><span style="font-weight: 400;">La règle 80/20 s'applique ici</span><span style="font-weight: 400;">). </span> </li> <li style="font-weight: 400;"><span style="font-weight: 400;">Fournissez toujours un CTA (appel à l'action) à la fin indiquant au lecteur quoi faire ensuite.</span></li> </ul> <h2><span style="font-weight: 400; font-size: 36pt; color: #ff6600;">Concevoir pour l'expérience utilisateur </span></h2> <h3><span style="font-size: 24pt; color: #333333;"><b>Enquêtes </b></span></h3> <ul> <li style="font-weight: 400;"><span style="font-weight: 400; color: #333333;">Utilisez un logiciel d'enquête pour collecter des données telles que des informations démographiques de base pour comprendre les utilisateurs de votre site Web. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400; color: #333333;">Posez des questions sur la convivialité comme la fréquence à laquelle ils visitent et comment ils évalueraient les principales fonctions. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400; color: #333333;">Les réponses vous donneront une base sur la façon dont votre conception actuelle fonctionne ou ne fonctionne pas.</span></li> </ul> <h3><span style="font-size: 24pt;"><b>Analytique </b></span></h3> <p><span style="font-weight: 400;">Utilisation d'un programme comme Google Analytics ou SiteCatalyst d'Adobe </span><span style="font-weight: 400;">peut vous aider à identifier des données comme celle-ci:</span></p> <ul> <li style="font-weight: 400;"><span style="font-weight: 400;">Combien de temps un utilisateur est resté sur votre site Web</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Le nombre de pages visitées au cours de cette session</span></li> <li style="font-weight: 400;">Le nombre d'engagements que l'utilisateur a pris</li> <li style="font-weight: 400;"><span style="font-weight: 400;">Le navigateur et le système d'exploitation utilisés (ainsi que la taille de l'écran) </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Qu'ils soient nouveaux sur votre site ou qu'ils reviennent</span></li> </ul> <h3><span style="font-size: 24pt;"><b>Personas d'utilisateur </b></span></h3> <p><span style="font-size: 14pt;"><em><span style="font-weight: 400;">Persona # 1 </span></em></span></p> <ul> <li style="font-weight: 400;"><span style="font-weight: 400;">Nom: Frank Ramsey </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Titre du poste: Employé de bureau / gestionnaire </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Démographique: 20+ ans, célibataire et diplômé. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Objectifs: quitter son emploi et se lancer en affaires. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Il connaît les ordinateurs, peut-être même avec WordPress, mais il ne sait pas comment démarrer un site Web.</span></li> </ul> <p><em><span style="font-weight: 400;"><span style="font-size: 14pt;">Persona # 2:</span> </span></em><span style="font-weight: 400;"><br /></span></p> <ul> <li style="font-weight: 400;"><span style="font-weight: 400;">Nom: Lisa Warner </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Titre du poste: Maman au foyer avec deux enfants</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Démographique: 35+ ans, marié </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Objectifs: commencer à gagner de l'argent à la maison pour l'aider à s'adapter à son horaire mouvementé.</span></li> <li style="font-weight: 400;">Elle utilise Pinterest quotidiennement, mais ne sait pas comment démarrer un site Web. Elle ne sait pas non plus quelle niche mérite d'être explorée et comment elle va monétiser.</li> </ul> <h2><span style="font-weight: 400; font-size: 36pt; color: #ff6600;">Erreurs de conception Web à éviter </span></h2> <p><span style="font-weight: 400;">Dans cette section, nous examinons quelques exemples de </span><span style="font-weight: 400;">horribles erreurs de conception de sites Web</span><span style="font-weight: 400;"> afin que vous puissiez éviter ces pièges dans votre propre travail. </span></p> <h3><span style="font-size: 24pt;"><b>Problèmes avec votre page d'accueil </b></span></h3> <p><img alt="Erreurs de conception - AmazingThings.org "width =" 650 "height =" 432 "src =" https://www.onblastblog.com/wp-content/uploads/2016/02/Design-Mistakes-AmazingThings.org_-1. png "class =" size-full wp-image-4268 alignnone lazyload"/></p> <p><noscript><img class="size-full wp-image-4268 alignnone" src="http://www.editionslunebleue.com/wp-content/uploads/2020/01/Design-Mistakes-AmazingThings.org_-1.png" alt="Erreurs de conception - AmazingThings.org "width =" 650 "height =" 432"/></noscript></p> <p>Voici une page d'accueil de 2011. Direction zéro. Cela m'a pris 1 minute et 30 secondes pour vraiment comprendre ce que ce site propose. Croyez-le, un nouveau visiteur du site Web ne vous laissera pas autant de temps.</p> <p>Je ne peux pas croire qu'il y ait encore des gens qui ont des problèmes avec ce concept de base.</p> <blockquote class="twitter-tweet" data-lang="en"> <p dir="ltr" lang="en">A eu le plaisir d'examiner la page d'accueil de 415 sites Web et, dans environ 20% des cas, ne pouvait pas dire de quoi parlait le site en regardant la page d'accueil</p> <p>– <a target="_blank" href="https://twitter.com/methode/status/760905070829535232" rel="nofollow noopener noreferrer">Gary Illyes (@methode)</a></p> </blockquote> <ul> <li style="font-weight: 400;"><span style="font-weight: 400;">Le design est axé sur l'entreprise et non sur l'utilisateur (trop promotionnel)</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Il n'y a pas de point focal facilement visible sur votre page d'accueil. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">La vitesse de chargement du site Web est supérieure à quatre secondes </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Les utilisateurs doivent actualiser pour voir le nouveau contenu. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Il n'y a pas d'accessibilité pour les utilisateurs handicapés. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Des erreurs de codage provoquent la rupture du site Web. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">La page d'accueil est différente dans différents navigateurs</span></li> </ul> <p>Voici à quoi ressemble la page d'accueil d'AmazingThings.org ces jours-ci.</p> <p><img alt="Design Revival - AmazingThings.org "width =" 650 "height =" 433 "src =" http://www.editionslunebleue.com/wp-content/uploads/2020/01/Design-Revival-AmazingThings.org_.png " class = "size-full wp-image-4267 alignnone lazyload"/></p> <p><noscript><img class="size-full wp-image-4267 alignnone" src="http://www.editionslunebleue.com/wp-content/uploads/2020/01/Design-Revival-AmazingThings.org_.png" alt="Design Revival - AmazingThings.org "width =" 650 "height =" 433"/></noscript></p> <h3><span style="font-size: 24pt;"><b>Erreurs de texte et de lien </b></span></h3> <p><img alt="Erreurs de conception - Texte et police "width =" 650 "height =" 410 "src =" https://www.onblastblog.com/wp-content/uploads/2016/02/Design-Mistakes-Text-and-Font. png "class =" size-full wp-image-4269 alignnone lazyload"/></p> <p><noscript><img class="size-full wp-image-4269 alignnone" src="http://www.editionslunebleue.com/wp-content/uploads/2020/01/Design-Mistakes-Text-and-Font.png" alt="Erreurs de conception - Texte et police "width =" 650 "height =" 410"/></noscript></p> <ul> <li style="list-style-type: none;"> <ul> <li style="font-weight: 400;"><span style="font-weight: 400;">Plusieurs styles de texte sur une seule page (alignés à gauche, justifiés, etc.). </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Pas assez de contraste entre le texte et la couleur d'arrière-plan </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Un texte centré ou entièrement justifié est utilisé. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Le texte en plus des liens est souligné. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Le ton change tout au long du contenu. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Les liens ne sont pas clairement étiquetés avec le texte d'ancrage approprié. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">De nombreux liens sont morts ou rompus. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">La structure des liens est trop complexe avec trop de mots dans une URL.</span></li> </ul> </li> </ul> <h3><span style="font-size: 24pt;"><b>Éléments graphiques et pièges multimédias </b></span></h3> <p><img alt="Erreurs de conception - Échec du logo "Classe = width =" 650 "height =" 263 "src =" http://www.editionslunebleue.com/wp-content/uploads/2020/01/Design-Mistakes-Logo-Fail.png " = "size-full wp-image-4272 alignnone lazyload"/></p> <p><noscript><img class="size-full wp-image-4272 alignnone" src="http://www.editionslunebleue.com/wp-content/uploads/2020/01/Design-Mistakes-Logo-Fail.png" alt="Erreurs de conception - Échec du logo "width =" 650 "height =" 263"/></noscript></p> <ul> <li style="font-weight: 400;"><span style="font-weight: 400;">Le logo n'est pas au-dessus du pli ou présent sur toutes les sous-pages. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Cliquer sur le logo ne vous amène pas à la page d'accueil. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Banner ads and graphics are too close (people ignore ads so they may ignore both) </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Image file sizes are way too big and take long to load. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Graphics are used as links. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">The color scheme isn’t complementary. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Too many animated gifs. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Flashing graphics or animations that can cause seizures. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">There’s no alt-text on graphics. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Videos or music auto plays when the visitor hits a page.</span></li> </ul> <h3><span style="font-size: 24pt;"><b>Navigation Problems </b></span></h3> <p><img alt="Design Mistakes - navigation bar" width="650" height="341" src="http://www.editionslunebleue.com/wp-content/uploads/2020/01/Design-Mistakes-navigation-bar.png" class="size-full wp-image-4271 alignnone lazyload"/></p> <p><noscript><img class="size-full wp-image-4271 alignnone" src="http://www.editionslunebleue.com/wp-content/uploads/2020/01/Design-Mistakes-navigation-bar.png" alt="Design Mistakes - navigation bar" width="650" height="341"/></noscript></p> <ul> <li style="font-weight: 400;"><span style="font-weight: 400;">Navigation sidebars aren’t obvious or present. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">There’s a popup/page that explains how to navigate the site. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">No indication of the site’s layout (i.e. Breadcrumb navigation). </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Navigational terms are vague or confusing. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">No shortcuts to popular pages/content on the homepage. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Navigational links are inconsistent from page-to-page</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Some or all of the pages require users to scroll horizontally. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Users must follow four links or more to find the information they’re looking for.</span></li> </ul> <h3><span style="font-size: 24pt;"><b>The Mortal Sins of Web Design</b></span></h3> <p><img alt="Design Mistakes - disorganized" width="650" height="466" src="http://www.editionslunebleue.com/wp-content/uploads/2020/01/Design-Mistakes-disorganized.png" class="size-full wp-image-4270 alignnone lazyload"/></p> <p><noscript><img class="size-full wp-image-4270 alignnone" src="http://www.editionslunebleue.com/wp-content/uploads/2020/01/Design-Mistakes-disorganized.png" alt="Design Mistakes - disorganized" width="650" height="466"/></noscript></p> <ul> <li style="font-weight: 400;"><span style="font-weight: 400;">The website doesn’t have a search engine. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Graphics are used as links </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">The CSS or HTML files aren’t optimized. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Dates are present on content that isn’t consistently updated. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">The content is full of needlessly complex jargon. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">There is no contact information readily available. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Using JPG images when you should be using GIF.</span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">The text isn’t black. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Headings are all capitalized. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Documents and graphics have incomprehensible file names. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">When clicking an image or graphic it doesn’t show a larger version of the image. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Documents that span multiple pages don’t have the option to view it as a single page. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">Bullet-point lists aren’t used for organizing information. </span></li> <li style="font-weight: 400;"><span style="font-weight: 400;">The back button doesn’t work because it’s been disabled.</span></li> </ul> <div class="obb-box gray"> <div class="obb-box white"> <p><span style="font-weight: 400; font-size: 18pt; color: #333333;">Further Reading (And Solutions) </span></p> </div> </div> <div class="code-block code-block-9" style="margin: 8px auto; text-align: center; display: block; clear: both;"> <img alt="Classe SEMRush SEO Software "width =" 720 "height =" 300 "src =" http://www.editionslunebleue.com/wp-content/uploads/2020/01/SEMRush-SEO-Software-in-content.png " = "size-full wp-image-6910 aligncenter lazyload"/><noscript><img class="size-full wp-image-6910 aligncenter" src="http://www.editionslunebleue.com/wp-content/uploads/2020/01/SEMRush-SEO-Software-in-content.png" alt="Logiciel SEMRush SEO "width =" 720 "height =" 300"/></noscript> </div> </div> <p><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p> </div> <footer> <!-- post pagination --> <!-- review --> <div class="td-post-source-tags"> <!-- source via --> <!-- tags --> </div> <div class="td-post-sharing-bottom"><div class="td-post-sharing-classic"><iframe frameBorder="0" src="http://www.facebook.com/plugins/like.php?href=http://www.editionslunebleue.com/comment-faire-un-site-web/&layout=button_count&show_faces=false&width=105&action=like&colorscheme=light&height=21" style="border:none; overflow:hidden; width:auto; height:21px; background-color:transparent;"></iframe></div></div> <!-- next prev --><div class="td-block-row td-post-next-prev"><div class="td-block-span6 td-post-prev-post"><div class="td-post-next-prev-content"><span>Previous article</span><a href="http://www.editionslunebleue.com/comment-demarrer-avec-les-programmes-daffiliation-pour-les-blogueurs/">Comment démarrer avec les programmes d'affiliation pour les blogueurs</a></div></div><div class="td-next-prev-separator"></div><div class="td-block-span6 td-post-next-post"><div class="td-post-next-prev-content"><span>Next article</span><a href="http://www.editionslunebleue.com/ameliorez-votre-entreprise-8-avantages-incroyables-de-power-business-intelligence/">Améliorez votre entreprise: 8 avantages incroyables de Power Business Intelligence</a></div></div></div> <!-- author box --><div class="author-box-wrap"><a href="http://www.editionslunebleue.com/author/editionslunebleue/"></a><div class="desc"><div class="td-author-name vcard author"><span class="fn"><a href="http://www.editionslunebleue.com/author/editionslunebleue/">editionslunebleue</a></span></div><div class="td-author-description"></div><div class="td-author-social"></div><div class="clearfix"></div></div></div> <!-- meta --><span class="td-page-meta" itemprop="author" itemscope itemtype="https://schema.org/Person"><meta itemprop="name" content="editionslunebleue"></span><meta itemprop="datePublished" content="2020-01-04T23:27:26+01:00"><meta itemprop="dateModified" content="2020-01-04T23:27:26+01:00"><meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="http://www.editionslunebleue.com/comment-faire-un-site-web/"/><span class="td-page-meta" itemprop="publisher" itemscope itemtype="https://schema.org/Organization"><span class="td-page-meta" itemprop="logo" itemscope itemtype="https://schema.org/ImageObject"><meta itemprop="url" content="http://www.editionslunebleue.com/wp-content/uploads/2020/01/editionslunebleue.png"></span><meta itemprop="name" content="Editionslunebleue"></span><meta itemprop="headline " content="Comment faire un site web"><span class="td-page-meta" itemprop="image" itemscope itemtype="https://schema.org/ImageObject"><meta itemprop="url" content="http://www.editionslunebleue.com/wp-content/uploads/2020/01/How-to-Make-a-Website.jpg"><meta itemprop="width" content="650"><meta itemprop="height" content="366"></span> </footer> </article> <!-- /.post --> <div class="comments" id="comments"> </div> <!-- /.content --> </div> </div> <div class="td-pb-span4 td-main-sidebar" role="complementary"> <div class="td-ss-main-sidebar"> <!-- .no sidebar --> </div> </div> </div> <!-- /.td-pb-row --> </div> <!-- /.td-container --> </div> <!-- /.td-main-content-wrap --> <!-- Instagram --> <!-- Footer --> <div class="td-footer-wrapper td-footer-container td-container-wrap "> <div class="td-container"> <div class="td-pb-row"> <div class="td-pb-span12"> </div> </div> <div class="td-pb-row"> <div class="td-pb-span4"> <div class="td_block_wrap td_block_7 tdi_3_ec9 td-pb-border-top td_block_template_1 tdc-no-posts td-column-1 td_block_padding" data-td-block-uid="tdi_3_ec9" ><script>var block_tdi_3_ec9 = new tdBlock(); block_tdi_3_ec9.id = "tdi_3_ec9"; block_tdi_3_ec9.atts = '{"custom_title":"EDITOR PICKS","limit":3,"sort":"featured","separator":"","custom_url":"","block_template_id":"","m6_tl":"","post_ids":"","category_id":"","category_ids":"","tag_slug":"","autors_id":"","installed_post_types":"","offset":"","show_modified_date":"","el_class":"","td_ajax_filter_type":"","td_ajax_filter_ids":"","td_filter_default_txt":"All","td_ajax_preloading":"","f_header_font_header":"","f_header_font_title":"Block header","f_header_font_settings":"","f_header_font_family":"","f_header_font_size":"","f_header_font_line_height":"","f_header_font_style":"","f_header_font_weight":"","f_header_font_transform":"","f_header_font_spacing":"","f_header_":"","f_ajax_font_title":"Ajax categories","f_ajax_font_settings":"","f_ajax_font_family":"","f_ajax_font_size":"","f_ajax_font_line_height":"","f_ajax_font_style":"","f_ajax_font_weight":"","f_ajax_font_transform":"","f_ajax_font_spacing":"","f_ajax_":"","f_more_font_title":"Load more button","f_more_font_settings":"","f_more_font_family":"","f_more_font_size":"","f_more_font_line_height":"","f_more_font_style":"","f_more_font_weight":"","f_more_font_transform":"","f_more_font_spacing":"","f_more_":"","m6f_title_font_header":"","m6f_title_font_title":"Article title","m6f_title_font_settings":"","m6f_title_font_family":"","m6f_title_font_size":"","m6f_title_font_line_height":"","m6f_title_font_style":"","m6f_title_font_weight":"","m6f_title_font_transform":"","m6f_title_font_spacing":"","m6f_title_":"","m6f_cat_font_title":"Article category tag","m6f_cat_font_settings":"","m6f_cat_font_family":"","m6f_cat_font_size":"","m6f_cat_font_line_height":"","m6f_cat_font_style":"","m6f_cat_font_weight":"","m6f_cat_font_transform":"","m6f_cat_font_spacing":"","m6f_cat_":"","m6f_meta_font_title":"Article meta info","m6f_meta_font_settings":"","m6f_meta_font_family":"","m6f_meta_font_size":"","m6f_meta_font_line_height":"","m6f_meta_font_style":"","m6f_meta_font_weight":"","m6f_meta_font_transform":"","m6f_meta_font_spacing":"","m6f_meta_":"","ajax_pagination":"","ajax_pagination_infinite_stop":"","css":"","tdc_css":"","td_column_number":1,"header_color":"","color_preset":"","border_top":"","class":"tdi_3_ec9","tdc_css_class":"tdi_3_ec9","tdc_css_class_style":"tdi_3_ec9_rand_style"}'; block_tdi_3_ec9.td_column_number = "1"; block_tdi_3_ec9.block_type = "td_block_7"; block_tdi_3_ec9.post_count = "0"; block_tdi_3_ec9.found_posts = "0"; block_tdi_3_ec9.header_color = ""; block_tdi_3_ec9.ajax_pagination_infinite_stop = ""; block_tdi_3_ec9.max_num_pages = "0"; tdBlocksArray.push(block_tdi_3_ec9); </script><div class="td-block-title-wrap"><h4 class="block-title td-block-title"><span class="td-pulldown-size">EDITOR PICKS</span></h4></div><div id=tdi_3_ec9 class="td_block_inner"></div></div> <!-- ./block --> </div> <div class="td-pb-span4"> <div class="td_block_wrap td_block_7 tdi_4_3e1 td-pb-border-top td_block_template_1 td-column-1 td_block_padding" data-td-block-uid="tdi_4_3e1" ><script>var block_tdi_4_3e1 = new tdBlock(); block_tdi_4_3e1.id = "tdi_4_3e1"; block_tdi_4_3e1.atts = '{"custom_title":"POPULAR POSTS","limit":3,"sort":"popular","separator":"","custom_url":"","block_template_id":"","m6_tl":"","post_ids":"","category_id":"","category_ids":"","tag_slug":"","autors_id":"","installed_post_types":"","offset":"","show_modified_date":"","el_class":"","td_ajax_filter_type":"","td_ajax_filter_ids":"","td_filter_default_txt":"All","td_ajax_preloading":"","f_header_font_header":"","f_header_font_title":"Block header","f_header_font_settings":"","f_header_font_family":"","f_header_font_size":"","f_header_font_line_height":"","f_header_font_style":"","f_header_font_weight":"","f_header_font_transform":"","f_header_font_spacing":"","f_header_":"","f_ajax_font_title":"Ajax categories","f_ajax_font_settings":"","f_ajax_font_family":"","f_ajax_font_size":"","f_ajax_font_line_height":"","f_ajax_font_style":"","f_ajax_font_weight":"","f_ajax_font_transform":"","f_ajax_font_spacing":"","f_ajax_":"","f_more_font_title":"Load more button","f_more_font_settings":"","f_more_font_family":"","f_more_font_size":"","f_more_font_line_height":"","f_more_font_style":"","f_more_font_weight":"","f_more_font_transform":"","f_more_font_spacing":"","f_more_":"","m6f_title_font_header":"","m6f_title_font_title":"Article title","m6f_title_font_settings":"","m6f_title_font_family":"","m6f_title_font_size":"","m6f_title_font_line_height":"","m6f_title_font_style":"","m6f_title_font_weight":"","m6f_title_font_transform":"","m6f_title_font_spacing":"","m6f_title_":"","m6f_cat_font_title":"Article category tag","m6f_cat_font_settings":"","m6f_cat_font_family":"","m6f_cat_font_size":"","m6f_cat_font_line_height":"","m6f_cat_font_style":"","m6f_cat_font_weight":"","m6f_cat_font_transform":"","m6f_cat_font_spacing":"","m6f_cat_":"","m6f_meta_font_title":"Article meta info","m6f_meta_font_settings":"","m6f_meta_font_family":"","m6f_meta_font_size":"","m6f_meta_font_line_height":"","m6f_meta_font_style":"","m6f_meta_font_weight":"","m6f_meta_font_transform":"","m6f_meta_font_spacing":"","m6f_meta_":"","ajax_pagination":"","ajax_pagination_infinite_stop":"","css":"","tdc_css":"","td_column_number":1,"header_color":"","color_preset":"","border_top":"","class":"tdi_4_3e1","tdc_css_class":"tdi_4_3e1","tdc_css_class_style":"tdi_4_3e1_rand_style"}'; block_tdi_4_3e1.td_column_number = "1"; block_tdi_4_3e1.block_type = "td_block_7"; block_tdi_4_3e1.post_count = "3"; block_tdi_4_3e1.found_posts = "38"; block_tdi_4_3e1.header_color = ""; block_tdi_4_3e1.ajax_pagination_infinite_stop = ""; block_tdi_4_3e1.max_num_pages = "13"; tdBlocksArray.push(block_tdi_4_3e1); </script><div class="td-block-title-wrap"><h4 class="block-title td-block-title"><span class="td-pulldown-size">POPULAR POSTS</span></h4></div><div id=tdi_4_3e1 class="td_block_inner"> <div class="td-block-span12"> <div class="td_module_6 td_module_wrap td-animation-stack"> <div class="td-module-thumb"><a href="http://www.editionslunebleue.com/seo-vs-marketing-sur-moteur-de-recherche-quelle-est-la-difference/" rel="bookmark" class="td-image-wrap" title="SEO vs marketing sur moteur de recherche: quelle est la différence?"><img class="entry-thumb" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABGAQMAAAAASKMqAAAAA1BMVEWurq51dlI4AAAAAXRSTlMmkutdmwAAABBJREFUKM9jGAWjYBQMKwAAA9QAAQWBn6cAAAAASUVORK5CYII="alt="" data-type="image_tag" data-img-url="http://www.editionslunebleue.com/wp-content/plugins/td-standard-pack/Newspaper/assets/images/thumb-disabled/td_100x70.png" width="" height="" /></a></div> <div class="item-details"> <h3 class="entry-title td-module-title"><a href="http://www.editionslunebleue.com/seo-vs-marketing-sur-moteur-de-recherche-quelle-est-la-difference/" rel="bookmark" title="SEO vs marketing sur moteur de recherche: quelle est la différence?">SEO vs marketing sur moteur de recherche: quelle est la différence?</a></h3> <div class="td-module-meta-info"> <span class="td-post-date"><time class="entry-date updated td-module-date" datetime="2020-01-05T10:14:17+00:00" >5 janvier 2020</time></span> </div> </div> </div> </div> <!-- ./td-block-span12 --> <div class="td-block-span12"> <div class="td_module_6 td_module_wrap td-animation-stack"> <div class="td-module-thumb"><a href="http://www.editionslunebleue.com/donner-un-sens-au-marketing-daffiliation/" rel="bookmark" class="td-image-wrap" title="Donner un sens au marketing d'affiliation"><img class="entry-thumb" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABGAQMAAAAASKMqAAAAA1BMVEWurq51dlI4AAAAAXRSTlMmkutdmwAAABBJREFUKM9jGAWjYBQMKwAAA9QAAQWBn6cAAAAASUVORK5CYII="alt="" data-type="image_tag" data-img-url="http://www.editionslunebleue.com/wp-content/plugins/td-standard-pack/Newspaper/assets/images/thumb-disabled/td_100x70.png" width="" height="" /></a></div> <div class="item-details"> <h3 class="entry-title td-module-title"><a href="http://www.editionslunebleue.com/donner-un-sens-au-marketing-daffiliation/" rel="bookmark" title="Donner un sens au marketing d'affiliation">Donner un sens au marketing d'affiliation</a></h3> <div class="td-module-meta-info"> <span class="td-post-date"><time class="entry-date updated td-module-date" datetime="2020-01-05T02:53:50+00:00" >5 janvier 2020</time></span> </div> </div> </div> </div> <!-- ./td-block-span12 --> <div class="td-block-span12"> <div class="td_module_6 td_module_wrap td-animation-stack"> <div class="td-module-thumb"><a href="http://www.editionslunebleue.com/comment-promouvoir-votre-blog/" rel="bookmark" class="td-image-wrap" title="Comment promouvoir votre blog"><img class="entry-thumb" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABGAQMAAAAASKMqAAAAA1BMVEWurq51dlI4AAAAAXRSTlMmkutdmwAAABBJREFUKM9jGAWjYBQMKwAAA9QAAQWBn6cAAAAASUVORK5CYII="alt="" data-type="image_tag" data-img-url="http://www.editionslunebleue.com/wp-content/plugins/td-standard-pack/Newspaper/assets/images/thumb-disabled/td_100x70.png" width="" height="" /></a></div> <div class="item-details"> <h3 class="entry-title td-module-title"><a href="http://www.editionslunebleue.com/comment-promouvoir-votre-blog/" rel="bookmark" title="Comment promouvoir votre blog">Comment promouvoir votre blog</a></h3> <div class="td-module-meta-info"> <span class="td-post-date"><time class="entry-date updated td-module-date" datetime="2020-01-05T08:07:50+00:00" >5 janvier 2020</time></span> </div> </div> </div> </div> <!-- ./td-block-span12 --></div></div> <!-- ./block --> </div> <div class="td-pb-span4"> <div class="td_block_wrap td_block_popular_categories tdi_5_9e0 widget widget_categories td-pb-border-top td_block_template_1" data-td-block-uid="tdi_5_9e0" ><div class="td-block-title-wrap"><h4 class="block-title td-block-title"><span class="td-pulldown-size">POPULAR CATEGORY</span></h4></div><ul class="td-pb-padding-side"><li><a href="http://www.editionslunebleue.com/./non-classe/"><span class="td-cat-name">Non classé</span><span class="td-cat-no">38</span></a></li></ul></div> </div> </div> </div> <div class="td-footer-bottom-full"> <div class="td-container"> <div class="td-pb-row"> <div class="td-pb-span3"><aside class="footer-logo-wrap"><a href="http://www.editionslunebleue.com/"><img src="http://www.editionslunebleue.com/wp-content/uploads/2020/01/editionslunebleue.png" alt="" title=""/></a></aside></div><div class="td-pb-span5"><aside class="footer-text-wrap"><div class="block-title"><span>ABOUT US</span></div></aside></div><div class="td-pb-span4"><aside class="footer-social-wrap td-social-style-2"><div class="block-title"><span>FOLLOW US</span></div></aside></div> </div> </div> </div> </div> <!-- Sub Footer --> <div class="td-sub-footer-container td-container-wrap "> <div class="td-container"> <div class="td-pb-row"> <div class="td-pb-span td-sub-footer-menu"> <div class="menu-bot-menu-container"><ul id="menu-bot-menu" class="td-subfooter-menu"><li id="menu-item-5" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-first td-menu-item td-normal-menu menu-item-5"><a href="http://www.editionslunebleue.com/plan-site/">Plan site</a></li> </ul></div> </div> <div class="td-pb-span td-sub-footer-copy"> © </div> </div> </div> </div> </div><!--close td-outer-wrap--> <!-- Theme: Newspaper by tagDiv.com 2019 Version: 10.2 (rara) Deploy mode: deploy uid: 5e29bae03ecdb --> <script type='text/javascript'> /* <![CDATA[ */ var wpcf7 = {"apiSettings":{"root":"http:\/\/www.editionslunebleue.com\/wp-json\/contact-form-7\/v1","namespace":"contact-form-7\/v1"}}; /* ]]> */ </script> <script type='text/javascript' src='http://www.editionslunebleue.com/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=5.1.6'></script> <script type='text/javascript' src='http://www.editionslunebleue.com/wp-includes/js/underscore.min.js?ver=1.8.3'></script> <script type='text/javascript' src='http://www.editionslunebleue.com/wp-content/plugins/td-cloud-library/assets/js/js_posts_autoload.min.js?ver=c8cba5620a72d5b299fa8f62aeca6adfx'></script> <script type='text/javascript' src='http://www.editionslunebleue.com/wp-content/plugins/td-composer/legacy/Newspaper/js/tagdiv_theme.min.js?ver=10.2'></script> <script type='text/javascript' src='http://www.editionslunebleue.com/wp-includes/js/comment-reply.min.js?ver=5.3.2'></script> <script type='text/javascript' src='http://www.editionslunebleue.com/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.1.9'></script> <script type='text/javascript' src='http://www.editionslunebleue.com/wp-content/plugins/td-cloud-library/assets/js/js_files_for_front.min.js?ver=c8cba5620a72d5b299fa8f62aeca6adfx'></script> <script type='text/javascript' src='http://www.editionslunebleue.com/wp-includes/js/wp-embed.min.js?ver=5.3.2'></script> <!-- JS generated by theme --> <script> </script> </body> </html>