Back in the bad old days, people used tables to do layouts for web pages. Actually, many still do, and if you design HTML emailers it is pretty much a requirement.
Anyway, you've probably heard that tables are out and CSS-styled div's are in. It sounds all very wonderful in practice (position stuff anywhere on the page), but in practice one needs to develop decent methodologies to actually use these capabilities to create a useful layout.
Here's a great article I found: From PSD to HTML
I am tending towards using Fireworks rather than Photoshop for a lot of my website graphic design these days, but the principles are the same. This article breaks down the practical steps very nicely, and the principles can certainly be applied to a WordPress theme as well.
Showing posts with label design. Show all posts
Showing posts with label design. Show all posts
Tuesday, December 13, 2011
Getting started with Gantry
I have been looking for a solid template or framework from which to build a custom WordPress theme for our new company website. I have messed around with some randomly-chosen WordPress themes over the last few weeks, just to get a feel for how WordPress works... and refresh my rusty CSS skills.
The GIGO principle seems to apply when trying to whip a WordPress theme into shape: if the theme has been built using a sloppy process, it may "work" initially but things quickly fall apart when you start really trying to customise it.
In any case, a lot of WordPress themes are more suitable for blog-type sites - which of course is understandable given WordPress's origins.I favour a multi-column "magazine" layout, not only for the company website I'm building, but also for all the conference and association sites I need to tackle as well. Now, WordPress is perfectly capable, in principle, of generating just about any layout you'd like, but it's not easy to find a theme that supports this sort of thing "out of the box".
To my delight, I discovered 960.gs, a brilliant little CSS "grid system" that helps to get nicely-proportioned layouts done easily in CSS. I recall encountering the princple of a grid layout in my Journalism studies: it has been a tried-and-tested approach to print layout for a long time. While grid systems are sometimes maligned for being overly rigid, they are extremely useful for rapidly structuring a balanced layout, even more so for layouts that are to a certain extent composed of dynamically-generated elements (e.g. content on a WordPress-powered page).
960.gs can be used in anything from a static HTML page to a Drupal-powered monster, but I discovered that it is also the basis for some WordPress themes as well. Even better for people like me, who are keen to develop something highly customisable, are "frameworks" for WordPress such as Gantry, which incorporate the 960.gs system to do layout... and provide a lot of additional functionality as well. This is a framework for themes developed by people who make themes (in this case, a company named RocketTheme).
Gantry seems to be aimed at site designers like me, who want lots of columns and a very flexible layout. I'm still in the early days of playing around with the framework, but so far I'm incredibly impressed.
Tasks that lie ahead:
The GIGO principle seems to apply when trying to whip a WordPress theme into shape: if the theme has been built using a sloppy process, it may "work" initially but things quickly fall apart when you start really trying to customise it.
In any case, a lot of WordPress themes are more suitable for blog-type sites - which of course is understandable given WordPress's origins.I favour a multi-column "magazine" layout, not only for the company website I'm building, but also for all the conference and association sites I need to tackle as well. Now, WordPress is perfectly capable, in principle, of generating just about any layout you'd like, but it's not easy to find a theme that supports this sort of thing "out of the box".
To my delight, I discovered 960.gs, a brilliant little CSS "grid system" that helps to get nicely-proportioned layouts done easily in CSS. I recall encountering the princple of a grid layout in my Journalism studies: it has been a tried-and-tested approach to print layout for a long time. While grid systems are sometimes maligned for being overly rigid, they are extremely useful for rapidly structuring a balanced layout, even more so for layouts that are to a certain extent composed of dynamically-generated elements (e.g. content on a WordPress-powered page).
960.gs can be used in anything from a static HTML page to a Drupal-powered monster, but I discovered that it is also the basis for some WordPress themes as well. Even better for people like me, who are keen to develop something highly customisable, are "frameworks" for WordPress such as Gantry, which incorporate the 960.gs system to do layout... and provide a lot of additional functionality as well. This is a framework for themes developed by people who make themes (in this case, a company named RocketTheme).
Gantry seems to be aimed at site designers like me, who want lots of columns and a very flexible layout. I'm still in the early days of playing around with the framework, but so far I'm incredibly impressed.
Tasks that lie ahead:
- Get graphics plugged into the framework (for backgrounds, borders, etc.)
- Integrate a decent slideshow plugin/widget into my front page, on top of Gantry
Subscribe to:
Posts (Atom)