Seven Blog Design Tips for Textpattern
Posted Sep 10, 2007 | 2 Comments
tags: css,
jquery,
textpattern,
web design
Textpattern is the CMS that powers my site, and almost every day I learn how to take advantage of another one of its endless features. If you’re using Wordpress instead, I feel sorry for your mother. Detailed below are seven design tips that I’ve used in the recent redesign of AndrewSwihart.net, some coming from two excellent books I’ve read: Textpattern Solutions: PHP-Based Content Management Made Easy
1. Local Development Site
Before my Samsung 226BW review got popular, I didn’t see much traffic here, so I was content changing things on the live site, knowing maybe only 1 or 2 passersby would be around when I was redressing the proverbial mannequins in the display window. When you’re seeing more steady traffic like I am now, it’s not a good idea to regularly subject visitors to the horror of your site under construction.
The solution is to install Textpattern locally on your computer so you can mess things up as much as you want. You can do a perfect port of your live site by following this excellent guide on Wion.com. He covers every potential pitfall, and the instructions are clear and thorough.
It’s possible to do a whole transfer of your site in a couple minutes, and the process is almost identical if you want to import your local development site back up to your web server. The only thing you have to do each time is change the Site URL field in Admin » Preferences to match the site you’re working on, so all your relative URLs will still work.
2. Style Sheet Management
One of the biggest buzz-kills in CSS web design is hunting around over and over for style properties that you want to change. To minimize this you should keep your CSS as organized as possible. An article called Creating Sexy Stylesheets by Jina Bolton is one of the best single, free guides to CSS management I’ve found on the web. Read it from beginning to end for an excellent primer on minimizing CSS work flow headaches.
A single style sheet is best for the speed of your site, but one sheet can be long and hard to navigate when you are making a lot of changes to your site’s design. For this reason, it’s nice to use multiple style sheets to divide up the different properties of your CSS. A lot of people find it useful to separate reset styles, layout, typography, forms, IE hacks, and print styles (to optimize your site’s appearance for printing). In Textpattern, you can create multiple style sheets like this and link to them in the <head> element with tags as follows:
<txp:css n="reset" format="link" />
<txp:css n="layout" format="link" />
<txp:css n="typography" format="link" />
<txp:css n="forms" format="link" />
<txp:css n="ie" format="link" />
<txp:css n="print" format="link" media="print" />
When you are in the thick of the design stage for a site, this kind of modular CSS is very convenient. In addition, organizing your style declarations in one of the ways suggested in Jina’s article will make finding them much faster and less cumbersome.
Also in that article, Jina talks about making your own CSS “framework.” That’s really just a fanciful term for a set of style sheets like those above, except stripped down to act as a template for designing several sites. A bunch of egotistical developers came up with the term as if it was a revolutionary idea. However, a CSS template (I like that term better) is a great idea and something any web designer would benefit from in the long run.
My Thoughts on Blueprint
I think the popular Blueprint CSS template is a great learning tool, created by experts and full of nifty tricks, but it’s not perfect. Regarding reset styles, you may want something more or less rigorous than what Blueprint provides. An article on Perishable Press provides and discusses a collection of reset styles for you to pick and choose from. These, in effect, replace the lowest priority styles in the cascade – the browsers’ default styles. Meanwhile, the grid layout of Blueprint may not be something you would need or want for a simple blog site, although the logic behind it is worth appreciating. As for Blueprint’s typography stylesheet, its organization and completeness is admirable, however, you will almost certainly make changes to the styles for your own site. It would be most savvy to use something like Blueprint as a starting point for making your own CSS template, which will save you a huge amount of time rehashing commonly used styles across multiple sites, with little or no bloat.
3. Textpattern Forms
Making liberal use of forms in Textpattern is another thing you can do to be organized and code your site efficiently. Forms are used for storing and micro-organizing snippets of markup. You give each form a name and it’s added to an alphabetized list. Then, in place of the chunk of markup you put in the form, you can simply type a tag like this:
<txp:output_form form="form_name" />
I’ve taken this advice, and it makes it easier to quickly find what I’m looking for when I go to make a change. Most importantly, when you reuse forms on several pages or in articles, the changes are reflected everywhere that references the form. In this way, forms are like CSS, except for HTML and Txp tags instead of styles.
An idea to get you started is to put your headers, sidebars, and footers into their own forms, and then call them into all the pages that use them. In general, any commonly used snippet of code deserves a place in a form.
4. Use Tags
I now use the tru_tags plugin for tag-based navigation on my site, which makes use of the built-in keywords feature in Txp. Tag and category-based navigation work pretty much the same from the user’s perspective, but tags hold the advantage when you’re the one creating the site, especially for blogs. First, its nice to be able to just type in some words in the keywords box in Textpattern, without having to go make new categories every time you write an article on a new topic. Also, there’s no limit to how many tags you can assign to an article, whereas, by default in Txp, categories are limited to just two. You can use the rss_unlimited_categories plugin to get just that, but you’re still stuck with creating the categories before you can use them. The other nice benefit I get from using tags is that I can automatically add them to the metadata for each article with a single Txp tag, like this:
<meta name="keywords" content="<txp:keywords />" />
If you are using the keywords field for this purpose already, as it’s intended, you can use the same words for organizing your content. Simple and automatic, the best rules to live by ;)
5. Make Your Site Come Alive
Textpattern lets you exploit the power of PHP without knowing a lick of the language. You can decorate your sidebar, archives, photo gallery, and other areas with dynamic elements that update automatically as you write new articles, upload new pictures, etc… And setting up these dynamic elements in Textpattern is worlds easier and more accessible for a novice than it is in Wordpress, courtesy of elegant, simple Txp tags. More to come…
6. Add Some Flare
With the easy-to-use Javascript package JQuery now being packaged with Txp, it’s time to use it to add a little spice to the behavior of your site. If you haven’t noticed my new subscription area on the top of the sidebar, I have a tiny smidgen of JQuery goodness in there when you click “email”. Here is the entire code for it:
$(document).ready(function() {
// hides the element by default
$('#email_sub').hide();
// toggles the element on clicking the noted link
$('a#email_toggle').click(function() {
$('#email_sub').slideToggle(400);
return false;
});
});
That’s it! If you have an idea for some effect you think might be possible with Javascript, surf over the Learning JQuery and see if Karl or someone else has an example you can work from. You can usually figure out what the scripts are doing even if you don’t know the syntax. You just have to plug in a few elements, classes, or ids into the right spots and it should work fine.
7. Speed It Up
Textpattern is known to be the slimmest, fastest CMS out there, so you may not feel like there is much to be done here. But I recently discovered a plugin called asy_jpcache that makes Txp even faster. It serves up cached versions of pages as long as the cache is less than 15 minutes old or whatever time limit you specify. According to benchmarks reported in the plugin’s thread and in this article, you can get anywhere from a 8x to 20x speed boost!
When you are finished (or are taking a break from) playing with your CSS, you should condense your multiple sheets into a single, static style sheet for optimal page loading speed. To do this, just copy and paste the contents of each individual sheet into one big “default” sheet. Now, to make a static CSS file (to take the place of the style.php file), you can use the plugin rvm_css and link to the file in your <head> element like so:
<txp:rvm_css format="link" />
This single Txp tag will load a static version of whatever stylesheet you have assigned to each section under the Presentation tab in Textpattern. You should also always remove unnecessary comments and maximize selector grouping to make your CSS as small and efficient as possible.
There are other things you can do in terms of designing your site for speed, and some of these are well layed-out in Paul Stamatiou’s 5 Ways to Speed Up Your Site. If you really get into it, check out his other site speed articles. Paul is a bit of a website optimization fetishist ;)
Before
After
Conclusion
I hope these tips are useful to people who have made the wise decision to blog with Textpattern instead of Wordpress. In making your own dynamic blog site, there is nearly unlimited customization possible using simple Txp tags and plugins – no PHP to deal with or even look at. I’d love to get some constructive feedback on my site’s current design; for kicks you can click the screenshot above to see the original AndrewSwihart.net.
#2 Andrew Swihart Jan 4, 07:01 PM
#1 Dennis Dec 21, 04:06 PM