Category: Wordpress

I made good progress on the To Do list last night:

• Install copy of WordPress on development box
• Import backup of live site content to provide some content for the development site
• Create a bare-bones set of template files
• Review the default CSS before beginning development of custom CSS for new template
• Setup CSS for basic layout
  • 2-Column wide left, narrow right, approximately 75% – 25% split
  • Site width: 1024px (current width ~800px)
  • This gives almost the same relative widths as the current template, but with an increased overall width, resulting in a wider left column (and right) to give more room for graphics & code as desired.
  • Header will be short, ~ 5% +/- of screen height
  • Footer will be one or two text lines
• Select color scheme
• Select photo / graphic / logo for header and develop site-wide navigation in header

Pretty good work!

I want to show you a screen capture of the default starting point for the template, which is the supplied Kubrick template:

[image no longer available.]

Look familiar? That’s what you get after an initial install of WordPress if you don’t make any changes.

To show you just how much work is being done by that default template, here is what it looks like if you remove all the CSS that is being applied:

[image no longer available.]

Not very pretty, would you say? Well, after considering the two, I decided to start with the default template, and then tweak the settings from there.

Here’s a sneak-peak at what I’ve come up with so far:

[image no longer available.]

What do you think? You can see the result of a lot of the design decisions I’m making:

• Width 1024px
• Header graphic gives mountain scene
• Leads to a blue, green, brown earthy palette for colors
• Drop down tabs from header for page-level navigation (still more work to be done here)

I’m still working on getting the column widths where I would like, so you see the sidebar out of place still. Fonts have not been adjusted at all yet, for color, family or size.

Pretty good start for a few hours work. I think I will make my target launch of May 1 with no problem!

I’ve made the decision this morning to target a launch date for the new theme for May 1, 2007. With that in mind, I’ve got 10 days to get it done. To that end, I’ve created a To Do list of items to be completed:

To Do

• Install copy of WordPress on development box
• Import backup of live site content to provide some content for the development site
• Create a bare-bones set of template files
• Review the default CSS before beginning development of custom CSS for new template
• Setup CSS for basic layout
  • 2-Column wide left, narrow right, approximately 75% – 25% split
  • Site width: 1024px (current width ~800px)
  • This gives almost the same relative widths as the current template, but with an increased overall width, resulting in a wider left column (and right) to give more room for graphics & code as desired.
  • Header will be short, ~ 5% +/- of screen height
  • Footer will be one or two text lines
• Select color scheme
• Select photo / graphic / logo for header and develop site-wide navigation in header
• Select items to be included in sidebar:
  • About – Should I include picture of me?
  • Search
  • Feeds
  • Email subscription option?
  • Archives – Perhaps better in header site-wide navigation?
  • Categories and/or tag cloud?
  • Blogroll – Move to separate page?
  • Space for affiliate ads
  • Space for site support links (Blogflux currently)
• Setup footer with statistic tracking codes, etc.
• Plan post layout and post-related plug-in use.

I’m sure I’ll come up with other details, but that will be the basic flow.

OK, if you look back at Part 1, you will find I listed choosing a Column Layout first on the To Do list. However, do you always do your To Do’s in order? Not me. Well, actually, it’s not my idea. In researching the whole column/page layout concept for today, it was pointed out there were some other important items to consider first. In a recent guest post at ProBlogger, Matt Coddington from NetBusinessBlog shares the Important Elements of Blog Design & Layout.

Matt emphasizes the importance of focusing on Content, User Experience and Compatibility.

Content refers to your actual planned content for your blog. Do you write long posts or short? Do you include a lot of graphics? What size do you use? Then of course you can through in what other gadgets do you want to include in your posts or sidebars? All of this stuff takes up space. Ask yourself for each item included, is it important or can I do without it?

User Experience focuses on user issues. I don’t know about you, but while I like hi-resolution screens to be able to pack more content into a smaller space, I’m getting older… I’ve worn glasses most of my life, and find now that even with a current prescription, I prefer my fonts a little larger. So, do you have young readers, or old? We have to think about accessibility for users using screen reader devices, or screen magnifying devices for limited vision. As well as navigation accessibility considering both the limited vision user and the mobility impaired who may have difficulty using a mouse to navigate.

Compatibility is related to what devices do you want you content available on. In the past, it was difficult to have content appear in a similar arrangement, if viewable at all, by the major browsers without significant tweaking and tricks. Today it is easier thanks to Web Standards, but the problem has not been eliminated. There are also new platforms, such as cell phones and other mobile devices that are being used.

My Analysis

Applying the thoughts above to my plans for this blog, I come up with these considerations.

Content: I feel I need a wider column for my core posts. Many have included code examples, and I’ve had to make notations about wrapping lines and the like that would be clearer when displayed as one. I wold like to use more screen shot examples in a larger format, as long as file size is reasonable–which is based on actual content of the graphic. I tend to write fairly long posts, and having full posts on the home page is something I may need to reconsider. I had long ago come across “Mullet”-style blog layout by Jonathan Boutelle, and was re-introduced to it while researching this entry. (That’s where you have teasers to a few recent entries, with links to full posts, then a long list of the previous posts, say 50+ on the home page.) Then there’s the liquid vs. static layout argument that tends to lean toward liquid for longer posters and static for short. Michael Gray has a nice analysis in a three-part series on Maximizing Profits With Website Design and Layout.

User Experience: I tend to blend this all encompassing term mostly into usability. The personal issues I mentioned above, combined with accessibility & usability techniques must be a consideration in layout and choice of design details, like fonts and their default size. Allowing for the wider column I’ve already mentioned, gives me the flexibility to increase the default font size for ease in reading. I’m liking these choses already! This was a great exercise!

Compatibility: As mentioned, web standards is the only way to fly today. By designing a site that is functional when all the fancy stuff is turned off (CSS,JavaSciript, etc.) you end up with a site that is accessible from a multiple number of platforms. Taking it another level and providing custom CSS for those mobile devices that can use them, just improves the user’s experience.

With those thoughts on our brains, we will move on tomorrow. Perhaps really to thinking about the layout…

I had heard that the template that I am currently using, MistyLook by Sadish Bala, is very popular. however, I had never run into it elsewhere… well, there’s always a first time! I ran into it while researching de.lic.ious WordPress plug-ins on The Partition. Thanks for the inspiration to create my own! I knew I had to do it eventually, but I guess now is the time!

While I like the look of MistyLook very much, I am a firm believer in personal, business & web site branding. In order to create a name for my self, I also have to create an image. When you come here, I don’t want you to be confused where you are! I was the first moment I saw MistyLook on the Partition. It felt kind of eerie…

Step One: The Plan

Before I actually create the theme, which I’m going to walk you through with me step-by-step, I have to plan what I need and want to include. After trying several themes myself, browsing many more, and experiencing those of others I should have a sense of what pieces I might like to include in my theme. I’m talking conceptually here, not literally using someone else’s theme. The best themes out there are done by professional designers. Don’t steal them! That’s how they make their living! Especially custom graphics & images.

If you have not experimented with different templates, or browsed the online theme gallery at WordPress.org, go do so now. While you are there at the Codex, let me point out the bible for creating new themes, the Blog Design & Layout page. Start working your way through the material there. It will help you with the understanding for making everything from minor tweaks in a standard template design, to reworking how the whole page is laid out.

While I could make modifications to the original files, what I plan to do is to develop a true separate theme that could easily be contributed to the community or just shared with a friend. But, it will begin life as my personal unique design.

Let’s start with a To Do List:

• Select a page layout (1-, 2-, or 3-column?)
• Color scheme (there should be an overall consistent use of color in the design)
• Header & footer (content & design)
• Multiple column contents (if more than one, what’s in them?)
• Post structure & design (how is the post heading, content, metadata, tags etc. organized & displayed)
• Archive page layout
• Category page layout
• Tag page layout

That should get us started thinking. As I go along, I may add specific areas that are needed, or expand on the one’s listed. We’ll take it one step at a time.