Créez une page Web adaptée aux besoins des utilisateurs mobiles avec Skeleton

Récemment, nous avons publié un article présentant 20 exemples étonnants d'utilisation de requêtes multimédia pour une conception Web réactive. Ces pages Web répondent extrêmement bien aux différentes tailles de fenêtres de navigateur, des grands écrans HD aux smartphones.

Aujourd'hui, nous allons vous montrer comment utiliser une plate-forme standard appelée Skeleton pour éviter les maux de tête liés à la conception et à la création d'une page Web réactive. Vous serez étonné de voir à quel point c'est facile!

Qu'est-ce que le squelette?

La page d’accueil de Skeleton décrit le projet comme «une petite collection de fichiers CSS et JS pouvant vous aider à développer rapidement des sites beaux, quelle que soit leur taille, qu’il s’agisse d’un écran pour ordinateur portable 17" ou d’un iPhone. "

Le créateur de Skeleton, Dave Gamache, a essentiellement réformé le framework 960 vieillissant afin de mieux faire face aux défis modernes présentés par la richesse des périphériques qui accèdent régulièrement au Web. Bien que le projet comprenne également quelques fonctionnalités supplémentaires telles que jQuery, nous nous concentrerons principalement sur l'aspect présentation. Gardez à l'esprit que, comme cette chaudière est très bien organisée, il est assez facile de supprimer tout ce que nous n'utilisons pas. L'auteur met l'accent sur la personnalisation: conservez ce que vous aimez, changez ce que vous n'aimez pas!

Aperçu

Démo en direct: Cliquez pour lancer

Commencer

La première étape consiste à télécharger le projet. Une fois que tout est téléchargé et décompressé, ouvrez le fichier HTML inclus et laissez tout tomber à l'intérieur du conteneur.

Avant de commencer à construire la page, il est important de comprendre comment cela fonctionne. Skeleton est construit sur un framework de grille, donc si vous détestez les frameworks de grille, il ne vous gagnera pas. N'hésitez pas à arrêter de lire maintenant, laissez un commentaire méchant sur le développement du Web sémantique et passez à autre chose.

Pour ceux d'entre vous qui sont toujours intéressés, il y a seize colonnes, chacune ayant une marge gauche de 10 pixels et une marge droite de 10 pixels. Avec une largeur totale de 960 px pour le conteneur, voici les tailles pour chaque colonne:

/ * Grille de base * / .container .one.column {width: 40px; } .container .two.columns {width: 100px; } .container .three.columns {width: 160px; } .container .four.columns {width: 220px; } .container .five.columns {width: 280px; } .container .six.columns {width: 340px; } .container .seven.columns {width: 400px; } .container .eight.columns {width: 460px; } .container .nine.columns {width: 520px; } .container .ten.columns {width: 580px; } .container .eleven.columns {width: 640px; } .container .twelve.columns {width: 700px; } .container .thirteen.columns {width: 760px; } .container .fourteen.columns {width: 820px; } .container .fifteen.columns {width: 880px; } .container .sixteen.columns {width: 940px; }

Comme dans la plupart des systèmes de colonnes, votre objectif est d’ajouter le nombre total suivant: 16. Ainsi, si vous souhaitez fractionner la page entre deux colonnes, vous devez créer deux divs distincts et appliquer les classes? Huit colonnes? pour chaque.

Vous devez également connaître certaines autres fonctionnalités utiles, telles que la possibilité de diviser la largeur par trois. Appliquez simplement le? Un tiers? ou? deux tiers? classes, qui sont égales à 300px et 620px respectivement.

.container .one-third.column {width: 300px; } .container .two-thirds.column {width: 620px; }

En outre, pour créer des espaces ou des colonnes vides, vous ajoutez les classes de décalage: compensé par un, compensé par deux, etc. Chacun de ceux-ci ajoute essentiellement soixante pixels supplémentaires de remplissage pour tenir compte des lacunes dans le contenu.

Feuilles de style

Le code ci-dessus provient du fichier inclus? Skeleton.css? fichier. Il existe également deux autres fichiers CSS importants: base et layout. Le? Base.css? Le fichier inclut des styles prédéfinis pour la typographie, les boutons, les formulaires, les onglets, etc. La plupart des éléments qu'il contient sont totalement facultatifs et doivent être remplacés par l'utilisateur. Si vous pensez que ce passe-partout est trop lourd pour ce que vous voulez faire ou prend trop de contrôle, abandonnez ce fichier.

Le? Layout.css? Le fichier est une feuille de style très organisée, mais toujours principalement vide, incluse pour votre commodité. C’est là que vous placerez tout CSS personnalisé que vous souhaitez ajouter à votre page. Ce fichier CSS contient également toutes les requêtes @media supplémentaires que vous souhaitez implémenter. Les requêtes par défaut sont dans? Skeleton.css? et fondamentalement, appliquez simplement une nouvelle largeur à toutes les classes de colonnes lorsque la fenêtre est réduite à certaines tailles.

Page Web Étape 1: Navigation

Maintenant que nous connaissons les bases de Skeleton, intervenons et construisons une page Web avec! Nous garderons le design agréable et minimaliste pour nous concentrer sur la propreté et l'organisation de tout ce qui est produit sans presque aucun effort de votre part.

La première chose que nous souhaitons ajouter à notre page est un élément de logo simple et des liens de navigation. Chacune de celles-ci obtient sa propre div et nous allons attribuer à la première une largeur de deux colonnes et à la seconde une largeur de quatorze (2 + 14 = 16).

Ensuite, nous allons mettre un simple? DS? pour Design Shack dans la première div et une liste de liens dans la deuxième div. Nous conserverons une grande partie du style par défaut pour le texte afin que vous puissiez avoir une idée de ce que sont les styles Skeleton.

<h1>DS</h1> <ul> <li>Accueil</li> <li>Sur</li> <li>Portefeuille</li> <li>Contact</li> </ul>

CSS de navigation

Skeleton prendra soin de notre mise en page et de la plupart de nos styles de texte. Tout ce que nous avons à faire, c’est d’ajouter des marges verticales pour placer tout où nous le voulons. J'ai également décidé de supprimer une partie du style de lien par défaut en faveur du mien.

Ce que j’ai fait est d’appliquer un espacement supérieur à l’ensemble du conteneur pour le réduire légèrement. J'ai également déplacé les liens vers le bas parce que, par défaut, ils s'alignaient avec le haut de la grande? DS? et je les voulais près du milieu.

.container {margin-top: 50px; } #nav {margin: 13px 0 0 0; } #nav ul li {display: inline; marge: 0 20 px 0 0; marge inférieure: 130 pixels; } #nav a {text-decoration: none; } #nav a: hover {text-decoration: underline; }

Cela dit, nous sommes bien partis. Le style de texte de Skeleton est excellent et se prête parfaitement au look classique et minimaliste recherché.

Étape 2: Image d'en-tête

Lors de la conception d'une page Web réactive, il est important de comprendre le fonctionnement des images. Bien sûr, tout ce que le navigateur rend peut être redimensionné, mais que se passe-t-il lorsqu'une image est trop grande pour son conteneur de sous-traitance?

Pour répondre à cette question, ajoutons une grande image en haut de notre page. Pour ce faire, nous ajoutons une autre division comme avant. Ce sera la largeur totale de notre conteneur, nous devons donc appliquer les «seize colonnes». Des classes.

<h1>DS</h1> <ul> <li>Accueil</li> <li>Sur</li> <li>Portefeuille</li> <li>Contact</li> </ul> <img src="//lesptitesaffairesdemayl.be/img/images_1/build-a-responsive-mobile-friendly-web-page-with-skeleton_4.jpg"> <h2>Étape 3: Message de bienvenue</h2> <p>J'appelle cette prochaine section le? Bienvenue? section tout simplement parce que je n'ai pas un autre bon nom pour cela. Maintenant que nous avons essayé une zone de navigation et une image, il nous reste à tester un paragraphe de texte pur et un paragraphe contenant des images mélangées à du texte. Ce sera l'ancien.</p> <p>En vous basant sur le même HTML que nous avons déjà construit, commencez une nouvelle division de 16 colonnes et ajoutez un en-tête et un paragraphe, comme indiqué ci-dessous.</p> <textarea wrap="soft" readonly=""> <h1>DS</h1> <ul> <li>Accueil</li> <li>Sur</li> <li>Portefeuille</li> <li>Contact</li> </ul> <img src="//lesptitesaffairesdemayl.be/img/images_1/build-a-responsive-mobile-friendly-web-page-with-skeleton_5.jpg"> <h2>Étape 4: Trois colonnes</h2> <p>Nous avons maintenant créé une section de navigation, une image en elle-même et un paragraphe en soi. Il est temps de créer des colonnes qui intègrent du texte et des images. Pour ce faire, nous utiliserons le tiers? classe que nous avons appris ci-dessus. Cela nous permettra de diviser rapidement la largeur en trois colonnes de contenu sans presque aucun travail de notre part. </p> <p>Nous allons commencer par le bloc HTML ci-dessous. Nous introduisons d’abord une balise h2, puis une image et enfin un paragraphe de texte.</p> <textarea wrap="soft" readonly=""> <h2>Un</h2> <img src="//lesptitesaffairesdemayl.be/img/images_1/build-a-responsive-mobile-friendly-web-page-with-skeleton_6.jpg"> <p>Si nous réduisons la fenêtre, nous constatons des changements spectaculaires. La mise en page se réinvente complètement, et la partie étonnante est qu'elle est toujours aussi belle! Je n'ai même pas pris le temps d'imaginer à quoi ressemblerait tout ce qui se passerait une fois reformaté, mais ici tout est beau et empilé verticalement.</p> <img src="//lesptitesaffairesdemayl.be/img/images_1/build-a-responsive-mobile-friendly-web-page-with-skeleton_7.jpg"> <p>Pour finir, vous pouvez personnaliser les éléments du dossier images à vos propres fins. Skeleton inclut diverses ressources visuelles telles que l'icône Apple Touch pour appareils iOS et un favicon.</p> <h2>Conclusion</h2> <p>Lorsque j'ai commencé à lire sur la conception Web réactive, j'ai compris les avantages évidents, mais je n'étais pas trop enthousiasmé par le travail supplémentaire nécessaire pour concevoir un site Web qui s'adapte à tous les appareils de taille. </p> <p>Cependant, avec un outil tel que Skeleton, l’effort nécessaire pour rendre une page Web réactive est vraiment très minime. En fait, c'est un bon échantillon à examiner et à déchiffrer pour voir quelques bonnes pratiques pour mettre en œuvre votre propre système réactif. </p> <p>Laissez un commentaire ci-dessous et dites-nous ce que vous pensez de Skeleton. Pensez-vous que les pages Web réactives valent l'effort supplémentaire? Avez-vous commencé à adapter vos conceptions à une large gamme d’appareils?</p>