Introduction

This is the beginning of a four part tutorial on a ground up template design for constructing a Wordpress website template. I’ll cover everything from initial design to layout to code and final testing during the course of the article. I’ll also give you insight into my thoughts on how a website should be implemented, and possibly give you some design ideas for your future or existing sites as well.

In the first part of this article we’ll discuss general foundation design, and have a look at not only the criteria that we want to meet, but what was wrong with my existing site first. In the second portion of the article we’ll start building a layout keeping these thoughts in mind. We’ll then clean everything up and make it pretty in my third installment. Finally, in the fourth installment, we’ll test the site to ensure that everything works and looks as it should. Do our final round of checks, and any minor tweaks that slipped through the cracks. On to the first part:

Design and Foundation Brainstorming

First you need to consider your design goals. Not the content, not the layout, not even the images or colors, but your goals. We need to look deep into the inner workings of your site. How will your site respond? How fast should it load? How easily will it be to update? How much attention can I apply to the code? How extensible can I make the site? Who will be viewing it? What will they be viewing it with? All of these questions and more should be answered before ever starting your sites layout.

Major design decisions are not based on a whim. They are carefully thought out and explored. Many companies spend a considerable amount of money on design, and you will see why through the course of this article. Since I am writing this tutorial as I create a template for WSD.com, I’ll provide you with not only my design decisions, but also with the thoughts that I have while creating my template.

Now the question you should ask yourself is; what is wrong with my site now? Why do I want to redesign it? Do I have time to do a redesign? How will I test it? Can I get by with minor updates to what I have? Once you have a clear idea of what the problems are you can start brain storming on how you want to design your site. Here are the issues that I want fixed with the new version of WSD.com.

1. The website is in general too slow.

2. There are too many references to exterior files.

3. The templates code is hard to read.

4. The CSS calls could be drastically simplified

5. The sites layout is a little to plain.

6. The sites appearance could use some tweaks.

7. Some of the PHP code currently running will never be used.

8. Final page load size is larger then what it should be.

This list only took me a few minutes to complete, and gives a good understanding of what my major issues are. I could have easily spent several hours nit picking each little piece of the site, but that’s only important when doing updates. Not complete redesigns. For a redesign, we just need to be sure that what we’re doing couldn’t be accomplished easier with some updates and tweaks to our existing site. Now that I know what is wrong with the current site, we need to figure out a framework design criteria for a new site. Let’s look at my design criteria in order of most to least important.

1. Speed – Why is speed my top concern? Well simply put, if it takes to long to load your page, no ones going to visit it. I remember seeing a figure recently that over half of collage students are still using dialup. So if your catering to students, it would be very important to have a fast site. One should also consider the hardware people are using. Think of all those people that use sub-DSL/cable connections like wi-fi or cellular modems. A prime example of this is Google. One of the most used websites ever. Google’s main page only contains one image, a search bar, a drop down menu, and a few text links. Thats it. No fancy graphics, no flash, no ads, just a thin shell before you get to the juicy center.

2. Size – Size and speed go hand and hand so it’s my second design criteria, but it’s not just the size of the page that’s a concern. Todays websites contain more linked files then they have ever before. Whenever WSD.com’s current page loads it doesn’t just load images. It loads templates, images, scripts, layout modules, makes several database requests, etc. A web master that doesn’t look at all of these factors when designing a site has no right to be one in the first place. Size matters. It matters when considering speed. It matters in bandwidth. It matters with CPU load. It matters in how many hit misses you have because your page just was to poky to read an article.

3. Legibility/Accessibility – If a person can’t read your page, then the data you spent your nights and weekends compiling is useless. It’s as simple as that. Some will find ways around it. Most will simply leave. What about the handicapped that want to view your site? Will they be able to read it? Will your site work on small display devices like PDAs, cell phones, and UMPCs? Can the average person understand how to navigate it? How will your site render differently in different browsers?

4. Reliability / Backup – A reliable page is one of the most important, and probably one of the most overlooked aspects of web development. A well designed site requires very little maintenance, however some are far harder then others to backup. If your web server suffers major failure, can you have your site back up and running in less then a day with minimal loss? What if your ISP or Website provider suddenly closes your account do to some obscure line in your terms of service? Backup and backup often. It’s not just a saying. It’s law among serious web developers.

5. Appearance – Finally we’re at my last design criteria. Appearances are important, but not as important as getting content to those that want it. My site should be clean and neat with minimal graphics. I’ll use white space, borders, and the occasional background color to highlight certain aspects of the content. Links should all be the same color regardless of status, and should obviously stand out from the other content without making them hard to read. Text should be no smaller then 12 pixels, which is standard for most print documents. Headers, section, and subject titles should stand out above the rest of the content, and use the standard <H> tags. Menus should be obvious, and easily accessible on the page. Finally the total layout should be what most people would consider as typical. This will lessen confusion among less web savvy visitors.

Now that we know what’s wrong with the existing site, and have formulated a design criteria to compensate for our existing issues you can start building your website foundation. In part two of this tutorial we’ll start building our website, and start putting our layout together with our criteria.