Essential Keystrokes is…

where I share my favorite tips, tools, reviews and commentary on web design, marketing, blogging, new media and related topics. For more about this site and the voice behind it, check out my About page.

Connect

SubscribeFollow me on TwitterLinked In Stumble Upon What I Digg Email me
Mar
25

HTML 101 to WordPress Transformation

By Char

I am an HTML 101 baby. I learned to code when the Internet was young and frames were cool. Then came tables, slicing images, and rollovers. About two years ago I started working with CSS and PHP. Wow! Making site wide changes became more efficient and I suddenly had to learn a lot of new stuff. I also started working with content management interfaces and WordPress has quickly become my favorite – not just for blogging either – for building interactive, content rich web sites.

This weekend I decided it was time to take one of my old sites, Printables for Kids, that I created and maintain for fun and move it from an HTML 101 format to WordPress. Now I just want to know why I didn’t do this sooner?

Let’s take a look at the transformation. Below is the screen shot of the before – the HTML, table structured, basic site with a PR of 3 and decent traffic:

Printables for Kids Before

Nice. Simple. But a PAIN to update.

I decided to use the Blue Zinfandel WordPress theme by Brian Gardner as my base.

Blue Zinfandel

I started by going through the CSS style sheet section at a time and making my customizations. I added the header and then reviewed. Then I set the colors and reviewed. I took each piece individually and tweaked it until I got the same general look and feel as the original site, but with all the WordPress power. (Thanks Randa for your tips along the way.)

And the final product:

Printables for Kids

The site is now much easier to update and I can leverage the power of Technorati, MyBlogLog, blog carnivals, memes, and other blogging tools to increase the traffic to the site.

And if you have kids (and even if you don’t), go road test it for me and tell me what needs to be tweaked.

Categories : Project Files, WordPress

10 Comments

1

It’s nice to hear that another website on this vast internet has been pulled out of it’s table based layout and into the 21st century! When I was at school they were teaching HTML 3 and it’s relevant techniques and I’m so glad I left it behind when I decided to really get into web development.

Just if you’re interested, your page doesn’t validate for a couple of easily fixable reasons. Drop me an email if you want me to tell you, but there’s no point in clogging up your comments with code!

2

Phil – thanks for the offer – I will definitely take you up on it. I am still tweaking it, but getting it out of tables was the biggest goal.

Real life is the best classroom in my opinion!!

3

Way to go! I like it a lot and will be checking out the site for personal reasons.

Question – do you like to use wordpress as a CMS?

4

Brooke,

I hope you like the site! So far, WordPress is one of the easiest CMS platforms to work in from both the developer and user perspective – in my opinion. I have a handful of client sites that I am about to transition to WP for ease of use.

5

What a fantastic site!!!

You would have been hugged to pieces if nearby. I’m teaching English here, bread and butter stuff … and the activities and etc on your site were superb.

A million thank yous! Loved the layout.

6

Hello Di! I am so glad you like them. Keep checking back because a lot of what was on the old site has not yet been migrated to the new site. I’m trying to get a few new things there each day.

Thanks for stopping in again.

7

I think you’ve done an excellent job of recreating the general look. Well done, Char. :)

Try giving your footer text a little padding on the bottom. It needs a little breathing space in my opinion.

8

Thanks David – I will go back in and give it room to stretch and breathe.

9

I love the new design. It is amazing how great it looks . I am wanting to give my blogs some new looks and after my vacation I am hoping I can change their look and design.

10

Jennifer – Thanks. It is always fun to give a site a new look. This site is next.

Leave a Comment

RECENT PROJECTS

Team Training NE Celiac Family