Site Redesign

Last Edited – April 30, 2010 by Randall Crock
Filed under: Graphic Design, Personal

If you have been following my blog, thank you, and you may notice something different. I just did a big redesign of the site, so I hope you like it. I am going to talk about how I go about doing a site design for those who are interested, and I hope you enjoy!

For the past couple days, I have been overhauling the site design. I liked the original two column setup, but I wasn’t super happy with the way it actually turned out. I figured I would just do some small modifications to the theme, which then turned into a major set of changes. Most of the base code is still intact, but I almost completely rewrote the style sheet to reflect what I wanted. I got the base layout working really quickly in my primary browser (Chrome), and like every web developer, I now had to turn to the other browsers for testing, and Internet Explorer became the bane of my existence.

Everyone has to start somewhere, and I happen to like starting with the top. The header is made up of 3 divs which get aligned with CSS, and they cooperated quite well with Chrome. I then rendered my page with Adobe Browserlab, which is awesome, to see the differences between how my page would render in the different browsers. It turns out, that every browser, including Chrome, wasn’t doing what I wanted. Turns out I am using the Version 5 developer build of Chrome, which has a bunch of changes to how it displays HTML. After a bit of tweaking with padding and margins, I had it all working in Chrome, Safari, and Firefox, but IE 7 still wouldn’t cooperate. I spent so much time trying to work out the problem that I was getting very frustrated, and decided to move on.

I then started tweaking the way the columns were set up. I wanted to keep the two column layout, but combine them into the same box. Like the header, the main body is composed of three div elements which get aligned with CSS. This was much easier since the divs weren’t stacked, but side by side, making it easier to figure out what was wrong. I kept having problems with the background not rendering at the correct height, then discovered the many options of the display CSS element. After that, it was a piece of cake to get right.

After getting the main body working properly, I moved on to small tweaks in the way posts and pages get formatted. I changed the post headings to display datestamps, categories, and a divider between the heading and the post. I also added a divider between posts, and tweaked the way that links display. At this point I also did a redesign of the tabs, which I wanted to keep but update, so now instead of all CSS elements, I decided to go the classic way of images.

At this point, I was basically done with modifications, but had to go back and fix the way that IE7 was rendering the header. I tried everything I could in the CSS to get it to work right, but it refused to constrain two of the elements (the navigation bar and title) within the third. I tried changing margins and padding, the display type, every CSS trick I could think of. Eventually I went to check the XHTML for the page, and discovered that I was using <span> tags instead of <div> tags. I changed them, and presto, it worked.

If you read this whole post, congratulations, and please leave me some feedback on what you think of the site. I like to get as many opinions as I can and incorporate some of the elements people point out.

Comments are closed.