La conception Web mobile présente de nombreux avantages, mais uniquement lorsqu’elle est utilisée correctement. Des techniques appropriées permettront à la page d'être bien présentée sur les grands écrans, les petits écrans et les petits écrans de PDA. Cependant, une mauvaise structure de code sera désastreuse pour une mise en page fluide. Par conséquent, nous devons trouver des solutions réalisables aux défauts de la plupart des conceptions de flux.
Si, en tant que concepteur, vous avez fait un effort supplémentaire pour créer une mise en page fluide et fonctionnelle, pourquoi ne pas aller plus loin et la rendre compatible avec toutes les résolutions au lieu de vous limiter à la plupart des écrans. Vous pouvez utiliser quelques techniques pour créer une mise en page adaptable de manière inattendue qui reste fonctionnellement intacte à mesure que les résolutions d'écran changent.
Dans cet article, nous discuterons des méthodes éprouvées pour créer des mises en page CSS réactives 100 % fonctionnelles et fournirons une liste détaillée d'autres didacticiels et pratiques :
Vous pouvez également vous référer aux articles précédents :
1. Disposition fluide à l'aide d'une grille
La plupart d'entre nous ont entendu parler du système de grille 960 pour concevoir des pages Web à largeur fixe. L'utilisation du système de grille 960 rend les conceptions à largeur fixe préférables aux mises en page fluides. Cependant, il existe un moyen de créer une disposition flexible basée sur une grille. Techniquement parlant, la structure du code de la mise en page élastique est différente de celle de la mise en page fluide, mais elle fournit presque le même effet à l'utilisateur.
Qu'est-ce qu'une disposition de flux ?
Les grilles fluides sont créées grâce à l'utilisation intelligente de divs, de pourcentages et de calculs mathématiques simples. Cette idée vient d'Ethan Marcotte, qui a reconnu que "em" est une amélioration par rapport à la taille de la police. Nous revisitons ce concept de base ici, mais pour une compréhension complète et détaillée de cette approche, consultez « Flowing Grid », un didacticiel complet sur la création de mises en page flexibles basées sur une grille.
L'idée est d'utiliser des tailles relatives, de combiner des pourcentages et des ems et d'utiliser des divisions simples pour trouver les largeurs de pixels correspondantes utilisées dans les conceptions à largeur fixe.
avantage :