| date | slug | title | page_title | changefreq | priority |
|---|---|---|---|---|---|
2012-03-16 16:07:02 +0000 |
webdesign-adaptatif-5-astuces-indispensables |
Webdesign adaptatif : 5 astuces indispensables |
Responsive webdesign 5 astuces indispensables |
monthly |
0.8 |
Depuis l’année dernière, la tendance est au webdesign adaptatif.
Avec la sortie du nouvel iPad et l’explosion du marché téléphone mobile, cette tendance devrait doit devenir la norme d’ici la fin de l’année. Si les travailleurs du web ne plongent pas dans ces nouvelles pratiques, je parie sur un beau IE6 revival pour leurs sites internet.
Voici 5 conseils pour vous aider à créer un design de qualité, accessible et adaptable.
Vous apprendrez dans cet article :
- Comment cacher du contenu pour les petits écrans ?
- Créer des blocs de contenu adaptable pour faire un meilleur usage des écrans mobiles.
- L’échelle des images proportionnelle à la largeur d’écran disponible.
- Comment créer des images adaptatives (optimisés pour les différentes tailles d’écran, la vitesse du réseau, etc ...)
- Ajuster les polices de caractères en fonction de la largeur du navigateur.
Avant de commencer la lecture de cet article je vous invite à visiter le site smashing magazine. Mettez la fenêtre de votre navigateur en plein écran et redimensionnez la afin d’avoir moins de 480 pixels : magique ?
Non, c’est du webdesign adaptatif.
Pour maîtriser la technique de changement du contenu installez vous confortablement et prenez des notes !
Au XXème siècle, le contenu était optimisé pour une taille d’écran de 1024*768px. De nos jours, il faut que l’information s’affiche aussi bien sur un écran 27 pouces que sur un smartphone. La première solution est de masquer la partie de votre site qui n’est pas indispensable.
Utilisez la propriété CSS display:none en fonction de la taille de votre périphérique. (Dans ce ca si la fenêtre est inférieure à 480px)
@media screen and (max-width: 480px) {
.sidebar {
display: none;
}
}Au lieu de cacher un bloc de contenu pour les fenêtres étroites, vous pouvez utiliser une méthode moins destructive et réduire le contenu. Je vous conseille d’utiliser la même méthode que wikipédia mobile : Afficher le titre de la catégorie et permettre à l’utilisateur d’explorer son contenu.
]
Lorsque l’utilisateur tape le titre, le bloc se développe.
Pour créer un bloc pliable vous devez combiner CSS et Javascript.
<div id="m-sidebar">
<div class="m-sidebar--content">
<h2>Contactez-moi</h2>
<p>Je m’engage à vous offir des fleurs en retour.</p>
</div>
</div>
Utilisez jquery pour vous aider à créer votre barre pliable verticale.
Dès que le DOM est prêt on initialise la variable collapsed ce qui permet de savoir si notre bloc est caché ou non.
La fonction formatSidebar() permet de gérer tout les différents comportements du navigateur.
Les 2 règles CSS permetttent de visualiser l’état de la sidebar. Si elle est masquée on affiche un "+" qui invite l’utilisateur à voir le contenu caché. On utilise un sprite CSS car c’est une bonne pratique :)
Une autre astuce facile et rapide, à mettre en place dans la conception d’interface fluide, est d’utiliser une échelle pour les images.
La façon la plus simple pour redimensionner l’image est d’ajouter la propriété CSS max-width à l’élément img, et de donner une valeure en pourcentage.
Le navigateur détermine la taille de l’image par rapport à l’élément parent.
La hauteur de l’image est ajustée automatiquement.
.photo {
max-width: 65%;
}Le redimensionnement en pourcentage possède des avantages mais aussi des inconvénients :
- C’est le navigateur qui redimensionne l’image cela consomme du CPU
- Si votre image est en HD la consommation de bande passante explose
La solution la plus pertinente à ce problème est d’avoir une image pour chaque type de périphérique. La même problématique existe pour la gestion des vidéos. Pour être compatible avec tous les navigateurs, une vidéo doit être encodée en 3 format différents.
Un groupe sur GitHub développe ce concept d’image responsive en utilisant un polyfill pour créer le comportement d’une nouvelle balise : picture.
<div data-picture>
<span data-src="small.jpg"></span>
<span data-src="medium.jpg" data-media="(min-width: 400px)"></span>
<span data-src="large.jpg" data-media="(min-width: 800px)"></span>
<span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span>
<!-- Fallback pour les navigateurs sans Javascript -->
<noscript>
<img src="small.jpg">
</noscript>
</div>
Résultat : les appareils mobiles vont chercher la version optimisée mobile de votre image, alors que les navigateurs de bureau sont affichent l’image extralarge.
En suivant la méthode d’échelle des images, il est possible de redimensionner le texte pour faire un meilleur usage de l’espace disponible. Il est préférable de faire des petits ajustements concernant la taille de la police. Si elle est trop petite vos visiteurs auront du mal à lire.
body {
font-size: 100%;
}
@media screen and (max-width: 480px) {
body {
font-size: 90%;
}
}
@media screen and (min-width: 1000px) {
body {
font-size: 110%;
}
}Dans cet article, vous avez exploré 5 façons d’améliorer la mise en page de votre site web adaptatif.
- La propriété CSS
display:nonedans les requêtes des médias pour masquer le contenu**. - Création de blocs démontables en utilisant JavaScript et CSS pour emballer le contenu sur les écrans mobiles.
- L’échelle des images avec la propriété
max-widthet les largeurs de pourcentage. Les images restent proportionnelles à la taille du navigateur. - Utilisation de JavaScript avec le polyfill
picturepour créer des **images adaptatives **: les navigateurs de bureau affichent une image HD, alors que les navigateurs mobiles reçoivent une version basse résolution. - Réglage de la taille de police pour afficher plus de texte sur les petits écrans et adapter la taille des polices aux grands.
Avec ces conseils, vous êtes bien placé pour créer de fantastiques sites adaptatifs qui se ressemblent indépendamment du périphérique utilisé.