Comment utiliser les bases de Bootstrap pour améliorer l’expérience utilisateur

Le mobile est important pour pratiquement tous les sites Web de nos jours, et la conception réactive est de loin le moyen le plus populaire de répondre aux visiteurs mobiles. Bien sûr, il existe d’autres solutions (par exemple, des sites ou des applications spécifiques aux mobiles, par exemple). Mais d’un point de vue SEO, le responsive design est difficile à battre.

Vous pouvez repartir de zéro, mais il est souvent plus facile d’utiliser un framework tel que Bootstrap. En utilisant Bootstrap, vous pouvez créer très rapidement un design agréable, simple et réactif.

Voici comment:

Commencer

Pour commencer, tout ce que vous avez à faire est de créer un fichier HTML (ou PHP d’ailleurs) et de créer un lien vers les fichiers Bootstrap principaux. Il existe deux fichiers CSS (un est facultatif), un fichier Javascript (JS) et quelques icônes. Vous devrez également créer un lien vers Jquery pour que le fichier Bootstrap JS fonctionne correctement.

Il y a deux façons de faire ça:

Utilisation du CDN d’amorçage

Tous les fichiers Bootstrap requis sont hébergés et disponibles gratuitement sur un réseau de diffusion de contenu (CDN), fourni par MaxCDN, ce qui signifie que tout ce que vous avez à faire est d’inclure des liens vers ces fichiers dans votre code HTML et tout fonctionnera automatiquement.

Voici les liens dont vous aurez besoin :

href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css”>

Note importante: Il y a quelques autres morceaux de code d’en-tête recommandés à inclure également, alors consultez la page Bootstrap “Getting Started” pour voir ce que vous devez inclure ou, alternativement, si vous êtes nouveau sur Bootstrap, cliquez ici pour un guide simple pour créer un modèle Bootstrap que j’ai écrit récemment.

L’avantage de cela d’un point de vue SEO est que le CDN garantit que ces fichiers se chargent très rapidement, ce qui est bon pour l’expérience utilisateur. De plus, comme ces mêmes fichiers sont utilisés sur des milliers d’autres sites, de nombreux utilisateurs les auront déjà mis en cache.

L’inconvénient est que vous ne pourrez modifier aucun de ces fichiers (bien que cela puisse être une bonne chose) et que vous devez maintenir votre site à jour en cas de mises à jour majeures de Bootstrap (encore une fois, sans doute un bon chose).

Téléchargement des fichiers

Pour les experts, vous pouvez télécharger les fichiers LESS de base et les personnaliser à votre guise. Mais pour la plupart des utilisateurs, il suffit de télécharger le CSS / JS standard précompilé. Vous obtiendrez un dossier avec les fichiers dont vous avez besoin et vous pourrez ensuite les lier à partir de votre code HTML comme ci-dessus, sauf bien sûr que les URL vers lesquelles vous vous connectez seront là où vous téléchargez les fichiers.

Créer un autre fichier CSS

Quelle que soit l’option que vous choisissez, vous voudrez certainement ajouter vos propres styles. Bootstrap fournit un cadre, mais vous devrez le personnaliser selon vos besoins. Vous pouvez modifier directement le CSS Bootstrap, mais il est préférable de créer un nouveau fichier CSS pour vos modifications, au cas où vous souhaiteriez mettre à jour vos fichiers Bootstrap ultérieurement.

Création de votre conception

N’oubliez pas que la principale raison pour laquelle vous créez un design réactif est d’améliorer l’expérience utilisateur de vos visiteurs. Commencez donc par planifier à quoi vous voulez que votre site ressemble. Il y a quatre tailles dans Bootstrap par défaut :

• xs (appareils mobiles)
• sm (grandes tablettes et netbooks)
• md (petits et moyens ordinateurs)
• lg (gros ordinateurs)

Mais vous n’êtes pas obligé de créer quatre mises en page différentes. De nombreuses personnes n’ont qu’une seule disposition pour les appareils mobiles (généralement une seule colonne) et une disposition de base à deux colonnes pour tout autre écran. (Vous pouvez également apporter de petites modifications lorsque vous passez à un écran plus grand.)

Démontrons cela avec un exemple très simple utilisant une mise en page à deux colonnes :

Et voici à quoi cela pourrait ressembler sur un écran plus petit :

Pour réaliser cette conception de colonne à l’aide de bootstrap, il vous suffit de saisir le code suivant dans votre page HTML (à l’exclusion du code de l’en-tête) :

Ceci est la barre latérale

C’est le contenu principal

Il existe une documentation complète sur l’utilisation du CSS, des composants et du JS inclus dans Bootstrap sur le site. Je ne prendrai donc pas la peine de tout parcourir ici. Espérons cependant que la création de la mise en page réelle ne sera pas difficile. Qu’en est-il de l’aspect SEO ?

Considérations SEO pour Bootstrap

Les principales considérations SEO relèvent de deux domaines : l’expérience utilisateur et la vitesse de chargement. Bien sûr, la conception réactive concerne principalement l’expérience utilisateur, donc tant que vous pensez à vos utilisateurs lorsque vous concevez votre site, vous devriez être bon.

La vitesse de chargement, en revanche, est toujours un problème délicat, car les exigences en matière de vitesse de chargement varient d’un appareil à l’autre, et vous souhaitez offrir la meilleure expérience globale à chaque utilisateur, quels que soient l’appareil et la bande passante.

Cela étant dit, explorons comment nous pouvons faire en sorte que nos pages Bootstrap se chargent très rapidement sur tous les appareils.

Création d’une page rapide

Le plus gros inconvénient de Bootstrap en termes de termes de référencement est que les fichiers CSS et JS sont relativement volumineux et, dans la plupart des cas, vous n’utiliserez pas pleinement tous les aspects de ce code. Cela signifie que vos utilisateurs téléchargent des données inutiles.

Le moyen le plus simple d’accélérer les choses est de vous assurer que vous créez un lien vers les fichiers minifiés plutôt que vers les fichiers normaux. Mais vous pouvez faire beaucoup plus pour accélérer les choses en utilisant le personnalisateur Bootstrap :

Étape 1 – Créez votre design et HTML

Je vous recommande de télécharger les fichiers Bootstrap pré-compilés et de créer votre page comme d’habitude. Assurez-vous de créer votre propre fichier CSS. N’apportez aucune modification aux fichiers CSS ou JS de base.

Lorsque vous codez votre page, notez les aspects de Bootstrap que vous utilisez.

Par exemple:

• Utilisez-vous des tableaux ? Ou juste divs?
• Utilisez-vous des boutons ? Ou créer le vôtre ?
• Utilisez-vous la typographie par défaut ?

Étape 2 – Créer un Bootstrap personnalisé

Une fois que vous avez terminé votre conception, accédez au compilateur personnalisé Bootstrap. Vous verrez, en haut de la page, une longue liste de cases à cocher. J’espère que vous savez maintenant de quels aspects de Bootstrap vous avez réellement besoin.

Décochez toutes les cases dont vous n’avez pas besoin. En cas de doute, décochez-la. (Vous pouvez toujours l’ajouter à nouveau plus tard.) Vous pouvez également apporter des modifications aux paramètres individuels, tels que les couleurs, le remplissage et même le nombre de colonnes. (La valeur par défaut est 12.)

Remarque latérale : Vous pensez peut-être que vous n’avez besoin que de deux colonnes, mais 12 est en fait un très bon nombre car il divise par 1, 2, 3, 4, 6 et 12, ce qui vous donne une flexibilité impressionnante. Donc, mon conseil est de s’en tenir à 12, sauf si vous avez des exigences vraiment spécifiques.

(Si vous ne comprenez pas ces options, laissez-les simplement pour le moment. Cependant, si vous avez dû apporter de nombreuses modifications à votre propre fichier CSS, vous pourriez remplacer les paramètres que vous pourriez modifier ici à la place.)

Avec un peu de pratique, vous pouvez rendre vos fichiers Bootstrap beaucoup plus efficaces en personnalisant ces paramètres et, espérons-le, éviter d’avoir à utiliser des quantités excessives de CSS supplémentaires dans votre propre fichier CSS.

Étape 3 – Compiler et télécharger

Une fois que vous avez fini de modifier vos paramètres (ou de les ignorer), cliquez sur le bouton compiler et télécharger en bas de la page pour vos fichiers Bootstrap personnalisés. Maintenant, décompressez-les simplement et remplacez les fichiers originaux par vos fichiers personnalisés.

Avec un peu de chance, la ou les pages que vous avez créées ont le même aspect et fonctionnent exactement de la même manière. Testez-les soigneusement, et si vous trouvez que quelque chose ne fonctionne pas, revenez au personnalisateur et assurez-vous d’avoir coché toutes les bonnes cases (y compris celles dont vous n’étiez pas sûr auparavant).

Pour un site Web assez simple, vous pouvez probablement réduire de moitié, au moins, la taille de vos fichiers Bootstrap en passant par ce processus, ce qui rendrait votre site beaucoup plus rapide.

Création d’images plus rapides

Les images sont délicates lorsque vous parlez de conception réactive, car les grands écrans ont évidemment besoin d’images plus grandes. Vous ne voulez pas envoyer une image de 1600px à un navigateur mobile car c’est un gaspillage de bande passante.

Malheureusement, il n’y a pas encore de bonne solution à ce problème. Mais voici quelques techniques qui peuvent aider à accélérer les choses :

Utiliser les requêtes multimédias pour les arrière-plans

Cela ne fonctionne que pour les images d’arrière-plan, puisque nous allons utiliser des requêtes média CSS pour servir la bonne image. Mais si vous avez des images d’arrière-plan sur votre site, cela pourrait aider à réduire considérablement les temps de chargement.

Commencez par prendre votre image d’arrière-plan principale en taille réelle et créez-en une version plus petite (et peut-être aussi une version moyenne, si vous le souhaitez). Maintenant, incluez simplement le CSS suivant pour l’élément qui contient votre image d’arrière-plan :

#entête {
image de fond : url(largeimage.jpg);
}

Écran @media uniquement et (largeur maximale : 320 px){
#entête {
image de fond:url(petiteimage.jpg);
}
}

Cela garantira que sur les écrans plus petits, une image plus petite sera téléchargée, car la requête multimédia remplacera la propriété CSS d’origine.

Cet article propose un guide très complet sur l’optimisation des images pour les sites réactifs, alors consultez-le pour plus de détails.

Utilisation des requêtes multimédias pour les images

Il n’y a pas de bonne option pour utiliser la même technique pour les images régulières. Cependant, une solution consiste à utiliser des images d’arrière-plan au lieu de balises img HTML. L’inconvénient est que vous manquez l’opportunité d’inclure une balise alt, ce qui est mauvais pour le référencement.

Pourtant, si vous avez un site très riche en images, l’utilisation de cette technique pourrait réduire considérablement le temps de chargement de vos visiteurs mobiles. Vous devrez décider quelle option est la plus importante.

Une alternative consiste à inclure une image régulière :

Utilisez ensuite le CSS suivant :

Écran @media only et (min-width : 320px){
#imageholder {
image de fond:url(largeimage.jpg);
}
#imageholder img {
affichage : aucun ;
}
}

Comme vous pouvez le voir, sur les écrans plus grands, la plus petite image sera masquée et remplacée par une image d’arrière-plan à une résolution beaucoup plus élevée.

Avec cette technique, chaque utilisateur télécharge la petite image, mais seuls les utilisateurs de bureau téléchargent la grande image (beaucoup plus grande). Cela permet aux utilisateurs mobiles de gagner du temps de téléchargement, tout en vous donnant la possibilité d’utiliser une balise alt.

À l’heure actuelle, l’impact que cela aurait sur le référencement n’est pas clair, car vous cachez effectivement cette image aux utilisateurs de bureau. Mais si vous avez beaucoup d’images, cela pourrait être un bon compromis, et cela améliorera certainement les temps de chargement pour les mobinautes, ce qui ne peut être qu’une bonne chose.

Sommaire

Ce n’est pas un sujet unique, car chaque site est différent, mais mieux vous connaissez Bootstrap, plus vous pouvez en faire.

N’oubliez pas que Bootstrap, à la base, est un outil permettant de rendre les sites réactifs et, par conséquent, d’améliorer l’expérience utilisateur. Cela, à mon avis, vaut la peine d’être étudié.