Share
Vous êtes-vous déjà demandé comment ont été créés tous ces thèmes de "magazines" astucieux pour WordPress et d’autres plateformes? Beaucoup, sinon tous, ont été conçus à l'aide d'un framework de grille CSS - du moins en substance sinon en réalité. Autrement dit, vous pouvez utiliser un framework CSS existant ou créer le vôtre à partir de rien. Bien qu'il soit possible de concevoir des mises en pages Web complexes sans cadre, il s'agit sans doute d'un acte masochiste. Dans cet article, vous obtiendrez une vue d'ensemble du lot actuel de Frameworks et de ce que vous devez choisir d'utiliser..
Les grilles de mise en page ont été utilisées dans l'édition imprimée bien avant le Web. Ils constituent une base invisible utilisée pour créer une cohésion visuelle dans la conception et la mise en page de pages de magazines et de journaux. Il s’agit essentiellement d’un réseau qui divise l’espace horizontal et vertical en unités cohérentes où le texte, les titres, les images et la publicité peuvent être placés..
Le même concept a été adapté pour la conception de pages Web pour la même raison, en utilisant du code CSS (Cascading StyleSheets) pour positionner des éléments HTML. En fait, de nombreux sites éditoriaux gérés par de grands éditeurs de médias imprimés appliquent des grilles pour donner à leurs sites Web un aspect similaire à leur contenu imprimé..
Notez que l’axe vertical n’est pas aussi bien pris en charge dans les systèmes CSS Grid, car la hauteur d’une page Web n’est pas aussi problématique que pour une page imprimée. (Il s'agit néanmoins d'un problème mineur dans la conception de pages Web, à moins que vous n'attendiez les mêmes fonctionnalités que les systèmes de publication assistée par ordinateur (PAO), qui sont difficiles à prendre en charge sans un langage de type PostScript que les navigateurs peuvent implémenter et prendre en charge.)
Tous les concepteurs ne prennent pas en charge l'utilisation de l'utilisation de structures de grille sur des tables, voire pas du tout. Mais regardons les choses en face. il existe certaines dispositions que vous ne pouvez tout simplement pas utiliser avec des tableaux HTML sans beaucoup d'effort pénible - et de nombreuses imbrications difficiles à déchiffrer, qui devraient jamais être modifiées.
Bien sûr, si vous utilisez des grilles, vous devrez ajouter les balises HTML nécessaires à votre contenu, augmentant ainsi la taille des fichiers de page. En outre, cela signifie que les balises et le style ne sont pas vraiment séparés - un principe auquel de nombreux concepteurs de sites Web aimeraient adhérer. (Certaines personnes pensent, à tort ou à raison, que les concepteurs de CSS sont des concepteurs qui craignent que le besoin de leurs services ne diminue. Bien que, dans cette logique, les codeurs rencontrent également des problèmes, notamment avec l'augmentation du code entre navigateurs des bibliothèques telles que jQuery.)
Le fait est que l'utilisation d'un framework de grille CSS signifie que votre navigateur charge le (s) fichier (s) CSS une seule fois et les garde en cache "du côté client". De plus, le balisage HTML supplémentaire nécessaire pour appliquer le framework CSS "invisible" est rarement si important que les problèmes de bande passante pour les lecteurs doivent être une préoccupation. (Fait intéressant, la plupart des opposants semblent parler de Yahoo UI Grids, pas tellement de Blueprint.)
Dans la plupart des exemples sur lesquels j'ai travaillé, et dans tous les thèmes de magazine que j'ai inspectés à l'aide de grilles, nous parlons d'une augmentation relativement petite de la taille des fichiers, notamment par rapport au code de la plate-forme de blog utilisé. Une seule grande image occupera probablement plus de place. Avec des connexions Internet plus rapides, ce n'est pas si grave.
Avantages du design et de l'esthétique
Que vous utilisiez des grilles CSS pour le prototypage ou les systèmes de production, il existe de nombreux avantages en termes d’esthétique et de conception:
Voici une courte liste de certains des frameworks les plus populaires:
Il existe d'autres frameworks CSS Grid répertoriés dans Google Code, mais sur les trois ou quatre autres que j'ai examinés, la plupart étaient incomplets en termes de documentation ou même de fichiers de projet, je les ai donc laissés de côté. Si vous connaissez un cadre non répertorié, veuillez nous le faire savoir dans les commentaires.!
Permettez-moi de souligner qu'il ne s'agit pas d'une comparaison exhaustive des frameworks CSS. En fait, je n'ai pas utilisé autre chose que Blueprint, même si j'ai numérisé des documents pour tous les frameworks énumérés ci-dessus et joué un peu avec YAML et Grid Designer. Blueprint, YUI Grids et YAML sont sans doute les "trois grands" dans l’espace-cadre CSS, et 960 semble être un quatrième choix solide.
En choisissant un cadre, j'ai pris en compte le fait que je ne suis pas un concepteur qualifié - au-delà de ce que j'ai étudié seul depuis des années. Je touche au design quand cela est nécessaire, bien que sous une forme très minimaliste. En fait, comme j'ai passé plusieurs années à publier mon propre magazine imprimé ou à travailler sur d’autres magazines, j’ai fait une mise en page (vraiment mauvaise) en utilisant les principes de la conception de grille utilisant Adobe PageMaker. Je trouve donc très naturel de travailler avec CSS Grids pour la conception Web. Compte tenu du nombre de thèmes WordPress disponibles - voir la liste à la fin de cet article - basés sur un cadre de grille (principalement Blueprint), les concepteurs se sentent également à l'aise avec les grilles..
Néanmoins, avec le temps toujours limité, j'ai besoin de quelque chose de facile à apprendre et à utiliser, mais robuste. J'ai trouvé que Blueprint CSS Grid répondait à mes besoins. Il s'intègre parfaitement à diverses bibliothèques JavaScript - y compris jQuery, ce qui peut donner lieu à des interfaces Web extrêmement sexy. Il rend bien (bien que pas 100% parfaitement) dans la plupart des navigateurs - bien que vous ayez besoin de tester cette grosse épine dans les côtés des concepteurs Web, navigateur IE.
D'après mes recherches lâches sur CSS Grids l'année dernière, Blueprint semble être le cadre le plus robuste, le moins restrictif, le plus pris en charge (en termes de portée de son utilisation): le plus petit, et le cadre avec le plus d'outils. . En fait, la beauté de Blueprint est que vous pouvez très rapidement produire le code CSS d'un framework personnalisé à l'aide d'outils tels que le générateur de CSS Blueprint Grid de Kematzy. Bien que vous puissiez le faire avec Grid Designer, une comparaison rapide suggèrerait que ce n'est pas aussi robuste que Blueprint.
Sur le revers, numériser et parcourir la documentation pour Yahoo! Le framework CSS de UI Grids m'amène à penser que si vous voulez juste faire une mise en page simple et que vous voulez utiliser quelques presets, vous voudrez peut-être examiner cette option. Cependant, j'estime que c'est un peu trop restrictif à mon goût. (Vous voudrez peut-être lire le framework CSS de Foo Hack contre les grilles YUI.)
En fin de compte, lorsqu'il s'agit d'apprendre quelque chose de nouveau en ligne, tel qu'un langage de programmation et une bibliothèque / structure de code, j'applique toujours la règle des épaules de géants. Je sélectionne d’abord les options qui me semblent adaptées à ce dont j’ai besoin, puis je sélectionne en fonction de tout ce qui a été écrit. Cela peut sembler injuste pour les nouvelles options, mais le processus n’est pas tellement plus arbitraire que le nombre de personnes qui choisissent des applications Web à utiliser. Il y a trop de choses à garder pour garder la trace, et avoir une communauté de soutien existante fait une grande différence.
Blueprint CSS Grid Framework est ce que je vais utiliser dans tous mes tutoriels sur NETTUTS (le cas échéant). Au lieu de copier la liste de fonctionnalités à partir de la documentation dans Google Code, laissez-moi me concentrer sur les raisons pour lesquelles je l'ai personnellement choisie. Certains de ces points se recoupent avec ce que j'ai déjà dit:
Comme mentionné ci-dessus, je rencontre des problèmes avec IE, mais tout le monde ne le fait pas? Plusieurs thèmes de WP utilisant Blueprint ont résolu les problèmes de navigateur IE. Je suis donc en train d’extrapoler en pensant qu’ils peuvent généralement être résolus..
Blueprint, au moment d'écrire ces lignes, ne prend pas en charge les schémas liquides, ce dont je ne suis pas un grand fan. Cependant, un tel soutien arrive apparemment, au cas où vous vous pencheriez de cette façon.
C'est une question de choix, n'est-ce pas? Certaines grilles CSS sont livrées avec un fichier grid.png ou même un fichier .psd que vous pouvez utiliser en mode transparent dans Photoshop, Fireworks, GIMP, etc. lorsque vous définissez vos éléments de conception. Je suis un peu plus old school et dessine toujours mes mises en pages en commençant par le papier:
Vous remarquerez que l'utilisation de logiciels graphiques pour la maquette de mise en page ne se trouve nulle part dans ce processus. C'est parce que je ne suis pas un designer et j'utilise une approche très minimaliste pour ce que je conçois (pour moi-même). Mais si vous envisagez d'utiliser, par exemple, Fireworks pour votre maquette, vous le feriez entre les étapes 3 et 4..
J'ai essayé d'être exhaustif dans ma recherche de CSS Grid Frameworks, analysant plus de 120 articles pour rechercher des pistes. Cependant, il est possible que j'ai raté certaines options, alors n'hésitez pas à en proposer d'autres.
Quel que soit le framework CSS que vous décidez d'utiliser, faites-le car il répond le mieux à vos besoins généraux. Si les pages / modèles que vous concevez contiennent de la publicité, déterminez quel type d'annonce. Très tôt, lorsque j'ai choisi des thèmes pour mes sites, j'ai choisi les annonces AdSense (qui sont Conforme à l'IAB). Plus récemment, j'ai choisi / conçu des blocs d'annonces 125 x 125, que je préfère nettement à la plupart des blocs AdSense..
Si vous le souhaitez, un projet de spécification du W3C intitulé Module de positionnement de grille CSS de niveau 3 (rédigé par deux employés de Microsoft) traite de l'intégration de la présentation basée sur une grille dans CSS. Les fonctionnalités discutées dans ce projet pourraient être dans IE 8.
Voici des liens vers quelques-uns des nombreux excellents articles sur CSS Grids.
Si vous sentez que vous n'êtes pas encore prêt à vous attaquer aux grilles et à la conception de thèmes, mais que vous avez besoin d'un thème basé sur une grille, voici probablement l'une des listes les plus complètes que vous trouverez. (Il y en a en fait plus de 46, si vous incluez des variantes.) Il comprend des thèmes de magazines, de magazines, de galeries, de spécialités et divers thèmes premium qui utilisent soit explicite ou implicite Grilles CSS. (Il est possible qu'un ou deux n'utilisent pas de grilles, bien qu'à première vue, elles semblent l'être.)
Quelques-uns de ces thèmes sont gratuits ou ont une version gratuite. La plupart sont pour la plate-forme WordPress. Cette liste inclut uniquement les thèmes disponibles pour le grand public, pas nécessairement les thèmes de grille personnalisés utilisés par divers blogueurs. (Voir les liens sélectionnés dans la liste précédente, y compris Web Designer Wall et Smashing Magazine pour obtenir des instantanés de ces sites. Voir également Soustraction de Khoi Vinh, à titre d'exemple de site basé sur une grille à impact visuel.)
Avertissement: certains de ces thèmes pourraient ne pas fonctionner dans WP 2.5x+
La liste ci-dessus de thèmes de magazines est compilée à partir des références suivantes, ainsi que de Google..
Accentsconagua