Theme Building - Part 2

Written by blogboy from http://www.bloggingfornoobs.com/ on April 8th, 2008 | 2 Comments

The First thing you need to do when thinking about a theme is deciding who you are designing it for.  There are a number of tools that will tell you what your visitor’s monitors resolution is set to and this is a key factor to consider.  As often as not these days new computers come with a wide screen monitor and most of the older 17 and 19″ 4:3 monitors were capable of 1280×1024.  Like I said use one of the many site tools to figure out what size people are viewing your blog at.

For me 1% were using 640×480, that is just too small to design an effective money making blog.  9% were doing 800×600, which can be done, but 90% of my viewers were using something more, so I chose to go bigger.  Only 25% had resolutions above 1440, meaning If I went higher than that 75% of my people would lose something and I Almost certainly would love that low res 10% crowd.

I settled for going with a width of 1000 pixels for the theme.  Some of the other considerations that went into this size were the fact I knew as I grow I will attarct more and more people using legacy resolutions and didn’t want to alienate them.  1000 pixels fit on most everyone desktop and didn’t waving me looking around for information all over the screen.  In consideration for the low res crowd I made my text window which has all the posts and pages visible on their full screen.

If you take a look at http://www.bradstinyworld.com you can see how it looks since it is the newest theme I have done, even if it is based on an older design.  I build a single continuous banner in Photoshop and began to slice it up after I knew how I wanted the final lay out to work.  I used the method described on Photoshop Candy to design the graphics after having looked through several interesting Photoshop sites.

There are those who dislike the notion of a big graphical banner when you enter a site, but for me I think it gives a great vision of who you are and the mood you are trying to set.  There are some SEO considerations though since at most all a spider has to read in an image is the alt tags and the links if you used separate images.  I solved this problem by using some CSS tricks which we can get into later.  On Brad’s Tiny World you get a full package of text in that header, but the average viewer is never going to see it.  I matched the color and made it transparent which is enough for most browsers, but for good measure I made it only 1 pixel high.  Google will read it all the same, but as a designer I get the satisfaction of putting together pretty graphics unmarred by ugly text.

In the next part of this we will discuss whether you should widgetize or not.

Tags: 1280x1024, Blog, Brad's Tiny World, candy, crowd, CSS, google, graphical banner, great vision, legacy, link, Links, money, monitors, new computers, notion, resolutions, SEO, site tools, Tags, Theme, widget