I've been busy working on a revamp behind the scenes of Blog.SpoonGraphics recently with aims to push the site forward and make use of the new features of WordPress 2.7 as well as CSS3 styling rules that are gaining wider support with the near release of Firefox 3.1.
Here's my little roundup of what's new!
The large illustrated header, colour scheme and general style of the site have become largely recognisable and still gain good responses from new visitors, therefore this main styling was something I wanted to keep intact with the newer design.
One main change visually is the larger content area allowing for the wider, two column sidebar. By also shortening the header this allows the sidebar content to appear further up the page, and helps spread out the links into two sections.
The restyled page elements also add a bit more visual interest to the site, whereas before they a little plain, they now tie in to the overall design much better.
On the post pages, the social bookmarking icons have been swapped out with the Doodle Blogger Icons recently released!
Looking a little deeper there's the new search bar, and restyled resources list, now making use of some little icons to indicate the meaning of each link.
One of the main reasons behind the revamp was to implement the new threaded comments feature of WordPress 2.7. You'll now notice a small reply button next to each message, allowing users to respond to each other giving more of a flowing conversation.
Other than the noticeable visual changes, the site has also been completely reconstructed and recoded. I've managed to reduce the HTTP requests by 8 which I'm sure will help out when multiplied by a day's worth of visits. Otherwise, clean html code and a Strict Doctype make the site more presentable to the web design community.
I've also enjoyed putting into practice some CSS3 styling, including @font-face, border-image and border-radius. Right now, @font-face is only viewable in Safari, but is a feature bundled with Firefox 3.1, this simply degrades back to standard web fonts for other browsers. Border-image can be seen by those on Safari and Chrome, but is also a feature coming with Firefox 3.1. Finally, gone is the large background image for the tooltips, now replaced with a small tiling background and border-radius rule to smooth off the corners, which simply degrades down to square corners for non-supporting browsers.
With jQuery already being introduced to create the tooltip effect, a few additional fancy pants features have also been included. Such things as the back to top scrolling and lightbox on a few image links make for a slightly more enjoyable browsing experience.