DIY Responsive Design Partie III: Meilleures pratiques CSS et image

Dans le troisième et dernier volet de notre série DIY Responsive Design, nous allons vous plonger dans les meilleures pratiques CSS et en matière d’image, et vous montrer comment obtenir un beau site Web qui se charge rapidement sur plusieurs appareils et réseaux.

Espace de noms Vos règles CSS

L’espacement de noms est le concept de création d’un élément d’encapsulation parent dans le HTML référencé dans CSS, les styles ne sont donc appliqués qu’au contenu de l’élément d’encapsulation. Grâce au contenu d’espacement de noms, il est moins probable que les styles nécessaires pour votre page d’article affectent d’autres parties de votre site Web.

Comprendre cela nécessite une discussion sur Sélecteurs CSS. Pour que CSS sache quels éléments obtiennent certains styles, vous allez créer Règles CSS. Une règle CSS contient un sélecteur (c’est-à-dire l’élément qui recevra les styles) et les définitions de style.

Les sélecteurs CSS peuvent être définis comme une chaîne de texte représentant la relation parent-enfant d’un document HTML. Mais comment cela s’applique-t-il au concept d’espacement de noms?

Prenez ces deux règles CSS simples:

p {

la couleur verte;

}

.myArticleWrapper p {

La couleur rouge;

}

Dans cet exemple, la première règle CSS fera de toutes les balises de paragraphe la couleur vert, tandis que la deuxième règle rendra toutes les balises de paragraphe à l’intérieur d’un élément avec la classe myArticleWrapper rouge.

Le modèle réactif de votre site contient une collection de règles et de styles pour garantir les meilleures présentations sur le plus grand nombre d’appareils. Les choses peuvent mal tourner si des règles CSS affectent ces styles. En enveloppant le contenu de votre page d’article dans un wrapper et en écrivant vos règles CSS pour cibler uniquement le contenu à l’intérieur de cet élément wrapper, vous pouvez éviter de créer du CSS qui modifie les styles d’autres éléments dans le modèle réactif.

Conseil pro: Les noms de classe HTML et les attributs d’identifiant peuvent être tout ce que vous voulez qu’ils soient. Pour vous aider, vous et les autres, à comprendre vos valeurs de classe et d’identifiant, essayez de leur donner un sens au contenu qu’ils représentent.

Ajouter des styles pour rendre les images réactives

Étant donné que les navigateurs traitent les images comme du contenu en ligne, il se peut qu’aucun contrôle ne soit défini pour contraindre les images aux zones de contenu dans lesquelles elles s’insèrent. Cela signifie que des règles CSS peuvent devoir être utilisées pour garantir que les images répondent correctement aux différentes tailles d’écran.

Les modèles réactifs ont généralement la classe img-responsive incluse dans la feuille de style. Cette classe peut être ajoutée à une balise d’image pour garantir que les images ne s’affichent jamais à plus de 100% de l’élément qu’elles contiennent.

Par exemple:

Vous pouvez définir une règle CSS dans un espace de noms d’élément pour que les images restent également réactives. En règle générale, il est recommandé de définir des images avec une largeur maximale de 100%. La définition de hauteurs et de largeurs exactes pour vos images peut entraîner des problèmes de présentation indésirables. Il est préférable de fournir des pourcentages avec largeur et hauteur. Cela permet au navigateur d’ajuster dynamiquement la taille de l’image pour répondre à l’espace disponible.

En relation :  12 idées pour prendre de meilleures photos

Dimensionner correctement les images

Il y a deux facteurs à prendre en compte lors du traitement des images: la taille du fichier image et les dimensions de l’image. Essayez de ne pas confondre les deux, car la taille du fichier image représente la quantité d’espace disque que le fichier occupe; tandis que les dimensions de l’image sont sa largeur et sa hauteur.

Il est extrêmement important de prêter attention à ces deux facteurs lors du traitement d’images. La taille des fichiers image affectera le temps de chargement de votre page, tandis que les dimensions de l’image affecteront l’apparence de l’image sur la page. Les deux choses les plus importantes que vous pouvez faire lors de la création d’images pour vos articles sont d’enregistrer l’image pour le Web et les appareils et de rogner l’image pour qu’elle s’adapte à l’espace d’affichage souhaité.

Avant d’ajouter une image à votre site, utilisez des outils tels que Photoshop ou Gimp pour enregistrer une copie de l’image avec une taille de fichier réduite. Ces outils vous permettront d’obtenir la meilleure qualité d’image avec la plus petite taille de fichier.

Essayez de recadrer les images afin que les dimensions soient similaires à l’espace dans lequel l’image s’adaptera. Signification: si l’image doit s’adapter à un espace où elle doit être plus large que haute, recadrez l’image de la même manière.

Fondamentalement, vous voulez le ratio d’aspect des dimensions de l’image pour être proche de celle de l’espace il apparaîtra sur la page. Les navigateurs font de leur mieux pour afficher les images avec une qualité décente, mais en fonction des dimensions de l’image et de l’espace dans lequel elle se trouve, le résultat final peut donner un aspect étiré ou écrasé.

Utiliser la propriété Display CSS

Lorsque vous travaillez sur votre page, il peut devenir important d’afficher les éléments en ligne sur une seule ligne, de les empiler les uns sur les autres ou de les masquer entièrement. le Propriété d’affichage CSS vous permet d’ajuster la façon dont le navigateur traite la propriété d’implantation d’un élément. Les valeurs de propriété d’affichage de block, inline-block et hidden vous permettront d’empiler, de circuler le long d’une ligne ou de masquer des éléments sur une page.

Utilisez les requêtes multimédias en conjonction avec cette propriété pour aider à ajuster le contenu en fonction de différentes tailles d’écran. Il est assez courant d’utiliser la propriété display pour forcer le contenu à s’afficher en ligne sur les appareils à grand écran, sous forme de blocs implantés sur les téléphones ou pour masquer les icônes des écrans de bureau et les afficher sur mobile.

Définir les largeurs en pourcentage

Les largeurs basées sur le pourcentage permettent aux pages de s’étendre et de se contracter pour s’adapter à différentes tailles d’écran. Les navigateurs respectent les valeurs de pixels exactes lorsqu’ils sont utilisés pour définir des largeurs et des hauteurs sur CSS. Cela signifie qu’un élément défini sur 800 px de large apparaîtra toujours à cette taille. Les navigateurs ne mettront pas ce contenu à l’échelle pour s’adapter à un espace plus petit. Pour cette raison, nous vous recommandons de définir les largeurs sous forme de pourcentages.

En relation :  Votre site mobile passe-t-il le test de la zone de pouce?

Une astuce CSS courante qui tire parti de ce concept consiste à utiliser la propriété max-width pour contrôler un élément sur des écrans d’appareils plus grands. Par exemple:

.myElement {

largeur: 100%;

largeur maximale: 800px;

}

Cette règle indique au navigateur de faire en sorte que l’élément remplisse l’écran jusqu’à 800 pixels. De cette façon, sur les appareils à écran plus grand avec beaucoup d’espace sur l’écran, l’élément aura une largeur de 800 pixels, mais sur les appareils plus petits comme les téléphones, l’élément représentera 100% de l’espace disponible sur l’écran.

Les valeurs de hauteur, en revanche, sont un peu délicates à utiliser. En raison de la nature de défilement des pages Web, il est très rare de définir une valeur de hauteur sur le contenu de la page. Pour cette raison, les navigateurs ont tendance à ne pas stocker beaucoup d’informations sur la hauteur des éléments de la page.

Cela fait qu’une hauteur basée sur un pourcentage semble ne pas avoir d’effet sur la présentation d’un élément. Pour que les hauteurs basées sur un pourcentage fonctionnent, les éléments avec la hauteur en pourcentage doivent être l’enfant d’un élément avec une hauteur de pixel exacte. Nous vous encourageons à ne définir une hauteur de pixel CSS qu’avec parcimonie.

Utiliser les outils d’inspection du navigateur

Tous les navigateurs Web sont livrés avec un ensemble d’outils de débogage pour vous aider à résoudre les problèmes sur la page. Ces outils d’inspection peuvent être utilisés pour voir de quels styles un élément hérite et également pour activer / désactiver ou ajouter des styles supplémentaires. Lorsque tout le reste échoue, essayez d’utiliser les outils d’inspection pour vous aider à comprendre ce que fait le navigateur lorsqu’il affiche votre contenu.

Conclusion

Une conception réactive efficace devient rapidement une nécessité pour tous les sites Web. En investissant du temps et des ressources dans votre entreprise, vous pouvez améliorer l’expérience utilisateur, le référencement, l’accessibilité et bien plus encore. Les conseils que nous avons décrits devraient faire de la création de pages réactives dans votre modèle un processus relativement simple et amusant.

Gardez à l’esprit les idées principales, y compris l’espacement des noms de vos styles CSS vers un élément wrapper, l’utilisation de la grille Bootstrap et des points d’arrêt, le dimensionnement et le style des images pour s’adapter à leurs zones de contenu, l’utilisation de la propriété d’affichage pour ajuster la présentation de la page et le contrôle des tailles de contenu de page commencer. Comme toujours, notre équipe de services de conception est disponible pour des services de conception personnalisés et de modèles.

Vous avez des questions ou des commentaires? Partagez-les dans les commentaires ci-dessous!

Moyens Staff
Moyens I/O Staff vous a motivé, donner des conseils sur la technologie, le développement personnel, le style de vie et des stratégies qui vous aider.