Comment planifier un arrangement de contenu pour une conception réactive

Dans un post récent, j’ai expliqué comment contenu visuel se rapporte à schéma de configuration. Cependant, ce sujet est très détaillé et se divise en plusieurs sous-sujets, l’un d’eux étant organisation visuelle pour des mises en page réactives.

Dans cet article, j'aimerais approfondir davantage le contenu réactif afin d'examiner certaines des meilleures pratiques pour: réorganisation du contenu pour des écrans plus petits. Dans la conception UI & UX, il n’existe pas de bonne réponse pour chaque projet, mais il existe des tendances qui fonctionnent bien, et de ces tendances, vous pouvez construire vos propres idées.

Réorganiser les grilles en listes

Chaque site utilise un type de grille, visible ou non. Le contenu d'une grille solide se regroupe souvent horizontalement sur des moniteurs plus larges, mais cela n'a pas de sens pour les appareils plus petits. Le meilleur remède consiste à décomposer ces grilles sur des écrans plus petits. convertir les éléments en listes.

Exemple 1: Conseil municipal de Wellington

Jetez un coup d’œil sur le site Web du conseil municipal de Wellington, qui utilise plusieurs sections de style grille sur la page d'accueil.

Il y a un petit diaporama de liens carrés qui réduit lorsque la fenêtre du navigateur se redimensionne. La section de pied de page aussi devient plus petit, et éventuellement se transforme en une liste verticale de liens.

Sur les très petits téléphones avec une largeur de 320 pixels, vous devez concevoir la taille de votre appareil. Dans le cas d'un iPhone, l'appareil est plus grand que large, il est donc logique de disposer le contenu de cette manière..

Exemple 2: Burgers Mooyah

Jetez un coup d'œil à la page d'accueil de Mooyah et essayez de redimensionner la mise en page. Il y a une petite zone de diaporama qui contient trois éléments sur un écran de bureau, mais cela se rétrécit pour afficher un seul élément sur le mobile (ajout de diapositives masquées au widget).

Les deux boîtiers promotionnels annonçant l'application et le menu Mooyah restent côte à côte jusqu'à ce que l'écran soit suffisamment petit pour les réorganiser verticalement.

le “Connecte-toi avec nous!” section réorganise également le contenu de sorte que chaque poste social obtient autant de place que possible. En règle générale, les écrans larges sont les plus larges et les écrans de smartphone sont les plus hauts..

Exemple 3: marché thématique

Lors de la conception d'une mise en page avec une grille, vous devriez considérer styles de mise en page larges et hauts avant d'écrire une seule ligne de code. De cette façon, vous serez prêt à construire des points d'arrêt qui ont du sens.

Une page avec une mise en page complète doit réduire la taille des boîtes avant de les casser sur une nouvelle ligne. Par exemple, Theme Market a un largeur max fixe de 1240, et la grille contient quatre blocs par rangée.

Lorsque l’écran devient plus petit, ces blocs réduire en largeur, mais éventuellement panne à laisser trois cases par rangée. À la plus petite taille, vous obtenez une boîte par rangée et a beaucoup de place pour que le texte et les images brillent.

Il y a toujours un équilibre de garder le plus d'informations possible en vue combiné avec la nécessité de rendre le texte lisible. Plus vous construisez de dispositions de grille, plus il sera facile de trouver cette arrangement de la balance du contenu.

Masquer ou supprimer des colonnes

Moniteurs plus larges et plus de support du navigateur permettre aux développeurs de construire des mises en page incroyablement complexes. Je vois souvent des blogs avec trois voire quatre colonnes qui occupent une bonne partie de l'écran.

Cependant, les appareils plus petits ont besoin d’un flux de contenu qui est logique verticalement. J'ai trouvé deux options pour traitement des barres latérales excessives:

1. Déposez-les sous le contenu principal
2. Cachez-les tout à fait

Exemple 1: arrêt presse

Consultez le site Web de Stop Press. Il a quatre colonnes verticales sur mon moniteur de bureau.

La colonne de gauche est un menu de navigation vertical, la colonne suivante est la colonne de contenu principale avec les articles récents. Ensuite, nous avons deux colonnes latérales différentes débordant de “de côté” contenu.

Au fur et à mesure que la fenêtre du navigateur se redimensionne, ces colonnes réduire lentement la taille. Le premier à aller est la navigation de gauche qui se cache derrière une icône de menu hamburger.

Le point d'arrêt suivant masque la colonne du milieu et les principaux boutons de partage social. Enfin, sur les plus petits écrans, la barre latérale extrême droite disparaît complètement. ne laissant que la colonne centrale principale de contenu.

Aucun contenu de la barre latérale n'apparaît sous le contenu principal. Ses complètement caché de la vue, et c’est un choix parfaitement acceptable pour réduire le chargement de la page et pour garder la hauteur de la barre de défilement à une taille décente.

D'autre part, de nombreux blogs déplacez la barre latérale sous le contenu principal comme sur Concept Art Empire qui comporte des postes connexes dans la barre latérale que finalement déposer en dessous du contenu.

Exemple 2: Blog Wishpond

Le blog Wishpond également supprime complètement la barre latérale à partir de l'écran dans les petites fenêtres. Cette zone contient généralement de la publicité, des formulaires d’inscription et des liens de publication associés. Aucun de ces contenus n'est vital, mais il peut apporter une valeur ajoutée aux visiteurs..

J'aime suivre un approche hybride où je déplace la barre latérale sous le contenu, mais masque également quelques éléments dans la barre latérale après un certain point d'arrêt.

Par exemple, si la mise en page complète contient trois blocs d'annonces, je peux masquer deux de ces espaces publicitaires sur mobile. Ce rend le contenu de la barre latérale accessible mais ne pas encombrer la page avec un contenu excessif.

Exemple 3: Madame Gautier

J'aime aussi la façon dont Madame Gautier utilise leur “Dernières nouvelles” encadré sur la page d'accueil. Il finit par tombe en dessous du contenu, et prend une vue complète sur la page.

Presque tous les sites Web auront au moins une barre latérale dans la conception. Que ce soit une barre latérale à l’échelle du site ou juste quelque chose qui apparaît sur un modèle de page, la style de design côte à côte est populaire parce que correspond à plus de contenu sur l'écran.

C'est ton choix comment gérer le contenu. Vous pouvez déposer la barre latérale plus bas, la masquer complètement ou utiliser un hybride de ces deux techniques. Mais tu devrais faire ton choix basé sur la pertinence de la barre latérale, et son nécessité à la page.

Ajuster et réduire les marges

Il y aura toujours un point où le contenu ne peut pas être compressé plus loin, et une section doit tomber en dessous de l'autre.

Par ajustement des marges avant de réduire le contenu de la page, vous donnez aux lecteurs un choix plus large de contenu.

Exemple 1: Un monde

Le pied de page sur One World est un excellent exemple. Il a liens de pied de page du site flottaient droit avec un formulaire d'inscription par courrier électronique sur la gauche.

Lorsque la mise en page est redimensionnée, les marges et les marges entre ces éléments se réduisent. Les colonnes de liens se rapprocher, et le formulaire d'inscription devient un peu plus petit, aussi.

Passé un certain point, il est logique de déposer les liens sous le formulaire d'inscription, et donner le pied de page beaucoup d'espace pour respirer.

Oui, la page est plus longue et, oui, il faut plus d'effort pour faire défiler l'écran aussi loin, mais à ces points d'arrêt plus petits, vous pouvez supposer que les utilisateurs sont sur des appareils orientés verticalement.

Exemple 2: îles dorées

Un autre exemple que j'aime beaucoup est la page d'accueil de Golden Isles avec son style de navigation unique. Lorsque vous redimensionnez la fenêtre du navigateur, les liens de navigation serrer ensemble. Finalement, ils rompre avec une seule ligne en deux rangées, puis en colonnes de la plus petite taille.

Autres articles sur la page suivre le même schéma. Cet exemple démontre le pouvoir de redimensionnement des marges avant de réorganiser complètement la mise en page.

Flux vertical sur les petits écrans

Le contenu de la page devrait couler naturellement, et alignement vertical est logique sur mobile. Cela signifie que vous devez considérer les blocs de contenu de la page pour mettre à jour le style de contenu en conséquence. Cela inclut les paragraphes, les en-têtes, les guillemets, les listes non ordonnées et les zones de contenu personnalisé..

Exemple 1: BodyBuilding.com Single Post

Prenons par exemple ce post BodyBuilding qui utilise de petites boîtes montrer différents exercices de glut.

Ces boîtes comprennent vignettes sur le côté droit pour démontrer l'exercice. Sur des écrans plus petits, ces vignettes décomposer sur une nouvelle ligne, et éventuellement empiler les uns sur les autres.

Votre CSS réactif doit prendre en compte cette petite minutie pour chaque page du site..

Exemple 2: Vanity Fair

Pour un plus grand exemple, consultez la page d’accueil de Vanity Fair qui réorganise complètement le curseur d'histoire en vedette. Sur un bureau en plein écran, les histoires sont répertoriées par une image sélectionnée sur le côté. Au fur et à mesure que le navigateur redimensionne, cette section d'histoires principales devient un carrousel coulissant.

L'interface elle-même change complètement en ajoutant une navigation par points, des flèches et des images en vedette pour chaque histoire de la liste. Leur liste d’articles en plein écran est plus “verticale”, mais cette disposition est plus délicate à utiliser sur un écran mobile, il est donc préférable de la transformer en carrousel coulissant..

Pense plus sur le flux de l'utilisateur plutôt que votre flux de contenu. Contenu n'a pas toujours besoin d'être forcé dans une mise en page verticale sur petit écran. Il suffit de penser à la façon d’organiser le contenu de manière à prend en charge une expérience de navigation verticale.

Pensées finales

La conception adaptative est essentielle de nos jours et chaque concepteur et développeur Web doit comprendre son fonctionnement. Les visiteurs s'attendent à ce que tous les sites Web soient adapté aux mobiles. Chaque fois que je tombe sur un site Web non réactif, je grince des dents à la vue de cette barre de défilement horizontale..

Suivez les conseils de cet article pour planification de stratégies de conception pour réorganiser le contenu pour la meilleure expérience utilisateur possible sur tous les appareils.