My blog’s third redesign has just launched with more @font-face and rgba() than you can shake an unsupported browser at.
My previous design with the squanda was about a year and a half old, but a few months ago it started to bother me. In recent weeks, it got to the point that I didn’t want to make any posts until I finished my new design.
I made the design from scratch with fancy new HTML 5 tags, which was super easy thanks to Mark Pilgrim’s guide to HTML 5. It focuses entirely on content rather than sidebar widgets, which is why the header is so plain and all the extras are relegated to the fat footer.
In addition to the new design, I took the opportunity to make use of some cool WordPress features I wasn’t before:
- comments are now disabled on posts after a year
- comment replies are enabled for better threading
- my posts use “more” tags now to keep things cleaner
I intend to start posting a lot more frequently, and already have a list of 7 posts that were waiting for the redesign to be unleashed.
I’m very interested in feedback on the new design, good or bad, so please leave comments here if you have any.
Today Paul Kim complimented my new blog design and I mentioned that I was thinking about replacing the bird at the top with a squirrel. A few minutes later, he sent me the new header above with what looks like a cross between a squirrel and a panda which he called a squanda.
I really like it. Thanks Paul!
I just finished a redesign of my blog and I’m pretty excited about it. I’d been using the previous theme for several years and felt it was time for something new. I’d also gotten a number of comments that the font was too small and hard to read on the previous theme. I decided to go with something the opposite of my previous dark theme and use a white background.
I found a great theme by Randa Clay that I ended up making a number of changes to — mostly with the width of the layout. I also redid my tags and categories and went through every post I’ve made and tagged it appropriately.
I added a favicon, rewrote my blog “pages”, and added my Twitter status to the sidebar. I’ll probably start blogging more often for a bit since I’m excited about it now.
This week I decided I want to work on my site and extensions a bit before I live and breath Mozilla for the next 3 months. Enter the ribbon. It’s something I’ve wanted to do for quite awhile, and it took a bit longer than I expected.
I added what I’m calling a ribbon (unrelated to Office 2007) to the main fligtar.com sites, like this blog. Clicking on it will bring down a menu of other things on fligtar.com.
I wanted to be able to easily modify an existing site to use this style and I wanted to be able to modify the menu content in one place, but I didn’t want to use PHP.
I’m pretty happy with the result (I won’t say “Mission Accomplished”), as including the ribbon without gradient can be done by:
<html>
<head>
<link rel="stylesheet" href="http://g.fligtar.com/ribbon.css" type="text/css">
<script language="JavaScript" type="text/javascript" src="http://g.fligtar.com/jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="http://g.fligtar.com/ribbon.js"></script>
</head>
<body>
<div id="ribbon_menu" style="display: none;"></div>
<div id="ribbon"><div id="ribbon_logo"></div></div>
</body>
</html>
… and the gradient is 2 lines more.
The process I went through to create this reveals why it took longer than expected:
- Determine color scheme
- Make shiny bar
- Place shiny bar
- Make 4 versions of logo that I’m not happy with
- Make 2 entirely functional menus before deciding I want the ribbon to drop down
- Fight with IE
- Realize that some sites (blog and LSU map) can’t use the gradient
- Separate gradient from shiny bar and redo that area of CSS
- Deploy to all sites
- Fight with trac’s CSS which did not play nicely with mine
- Win!
I called this Part 1, but my current plan is basically:
- Implement Ribbon
- …
- Profit!
