I had a bit of trouble with the buttons on the sidebar. I had intended to have them right against each other, but with the way the are curved I couldn’t get them to work right. The images were overlapping weirdly and it just didn’t look good. So I decided to spread them out by a few pixels. It works, just wasn’t the original way I intended.

I would like to have the quote at the top randomly change, but I don’t know how to do that. PHP or jQuery maybe?

Something new I did was validate my code. It worked! Just had to fix a few errors and it was all set.

#1: I had never heard of image replacement or anything like that (I later discovered that deep within my web design book). I knew that I wanted to make buttons, and that somehow I had to get the images to play nice with the navigation that was made with an unordered list. So what to do? I spent many hours in front of the computer screen, and eventually figured out that I could make the buttons the same size as the background image.

#2: I didn’t know that you could have one image that would work for three different states! I wanted different images for normal, hover, and active. I made it work, but the loading kills it.

#3: Internet Explorer hates it. But I hate IE, so we’re even. Ha!

Does it work? Kinda. If I did it over again with my newfound knowledge, I’d use image replacement for the buttons, and include all three states in one image, for a total of four images instead of twelve. And maybe make it work for IE, but only if I was really bored.

The goal of this project was to create a nice, clean blog template that would be easy to edit and plug content into. I first created the mockup in Photoshop, then sliced it and did all the coding for it by hand. The tabs at the top use the sliding door method, so as the text is resized they still look great!

Check it out here.

This was the banner image I started with. It’s almost what is on the live site, except for the color of the eagle.

Banner for okwueagle.com

We decided that we wanted the iPhone version of the site to tie in very well with the original. I kept the same eagle and text, and added a simplified version of the main navigation. We included the links used most often. We also wanted a search bar in the header.

Here’s the original.

Original okwueagle header

The challenge was to fit all of that into a small space! I shrunk the eagle down so it fit in line with the text, and placed the search bar to the right of that. The nav then fit below. Here is how it turned out.

okwueagle iphone header

When we we started looking at this, it was decided that the eagle was too small. Also, we wanted to emphasize the fact that this version was made for the iPhone, and to do that we wanted an icon similar to those on the iPhone. Now I had an even smaller space to convey the eagle and the OKWU text!

Here’s what I came up with.

okwueagle iphone icon

We’re still working on the final version of the site, I’ll keep this updated and publish when it goes live so you can check it out.

red background

1680 x 1050 pixels.

You can check out the concept here.

Download

1280 x 800 px

Download

1440 x 900 px

Download

1440x 900 px