I talked about some thoughts I had on Web design in a previous post title My Thoughts on Web Page Designs, and also mentioned that I was working on a new theme for Technically Easy. After several weeks of development and testing, I finally switched to the new theme this past weekend.
While it isn’t the most exciting theme, it does contain all the elements and ideas that I had thought about. I have always preferred more simple designs than complex ones, which explains the look and layout of this theme. You’ll have to bear with me while I go over some of the points about this theme.
Static but Fluid Design
One point I made in my post about Web design was that of fluid and static layouts. Many templates are static width, meaning they are a certain width regardless of the resolution of the visitor’s monitor. I wanted to design a theme was was more fluid, and filled the entire width of the web browser with the web page.
If you resize your browser, you will notice that the content section expands and shrinks as the window is resized. The right sidebar stays the same as that is static. For those with widescreen monitors, the content section will now fill in the space to the left of the sidebar.
I read many tutorials and articles regarding fluid 2- and 3-column layouts, but found those on A List Apart to be well-written and easy to understand.
Easy-to-Read Words
One aspect of designing the template that I wanted to keep in mind is that of readability. I have no trouble reading small text on the screen, but others may have difficulty. I wanted to ensure that the font size I chose for the content was large enough that anyone should be able to read it without difficulty. But the question that I asked was “what size font?”
The answer: let the visitor decide. From what I have read online, all web browsers default their proportional fonts to 16px, and the monospaced fonts to 13px. I decided to base the font sizes of the new template on what the visitor has selected for their browser. If a visitor hasn’t changed their font settings, then the font sizes on Technically Easy will be based on 16px.
As a test, change the font size in your browser, and you will notice the fonts on Technically Easy will enlarge or shrink after each change. You decide what size you are able to read, and I’ll display my content in that size, or close to it.
Simple Header
I have visited many sites that have such a large header that I had to scroll down to find any content. For those that have been visiting Technically Easy for some time, you will have noticed that my headers are usually simple.
This template only includes the logo, title, the RSS subscription area and a navigation bar. I removed the ads on the right, and replaced it with the RSS subscription link and form. The navigation bar is pretty much the same as previous so the header isn’t a drastic overhaul compared to the previous template. Simple, and allows more content to be displayed above the fold.
I should mention that I borrowed the navigation bar code from Lyndi at Nice2All.com as she has created some great WordPress templates and provides them on her blog for free. The code she had (she has since re-done her template) made it much easier than I guessed to create the navigation bar.
Threaded Comments
The feature that I wanted to include in the new template was threaded comments. I had been using the “Reply” link to reply to comments on Technically Easy, but they didn’t show up as threaded because I didn’t use threaded comments in the previous template.
Including threaded comments wasn’t difficult, and it was just a matter of copying code from the default WordPress template into my template, and then modify the styles.
Once again, thanks to Lyndi for her post about adding threaded comments in a WordPress template.
Clean Sidebar
I wanted to keep my sidebar as clean as possible, by including only some ads and navigational links. For the most part, the sidebar is nearly identical to the one from the previous template. The two exceptions are that I removed the recent comments widget, and added a sponsored links section. I didn’t include any widgets in this template, so the sidebar is all coded as is.
Final Thoughts
After several weeks development, and hours of learning/research, I finally finished the template. This is my first WordPress template that I created myself, and learned a lot about CSS to get everything to work properly. There are still a few things that I will need to fix/tweak, and I’ll probably continuous to make minor changes, but for the most part I think I’ll stay with this template for the next few months. At least until I get the urge to once again redesign Technically Easy.
Related Posts
If you liked reading this post, consider following Technically Easy through the following:
on April 7, 2009 at 11:45 am
I like it, this was a job well done. I have got a feeling you are going to use this one for a long time.
You are more than welcome to make use of the menu code, I am glad to see someone is actually using some of my stuff. Thanks for the link as well, that was nice of you.
on April 7, 2009 at 12:17 pm
Thanks Lyndi. I’m not sure how long I will be using this template, as I like to change it on a frequent basis. As for the link, no problem. I like to give credit to those that helped.
on May 7, 2009 at 4:40 am
I love it! This is exactly the type theme I wanted for eyespi20 — especially the fluid content bay! Congratulations on coding your own template — you did a wonderful job and you have my envy and admiration for the fantastic results.