Site redesign update

So I already talked about the HTML5 rewrite of my blog’s code, but now I want to go over the design and the layout – what’s different and what’s new.  Before that I’ll just quickly say that I’m making great progress – basically the main structure and the front page are done and working, on my local server; now I just need to do the individual pages, as well as the single-post page and it’ll be ready to go. v2.0So in terms of the design itself, the new theme is still dark (i.e. white on black) but instead of the bright yellow as one of the main colours, I’m now using pale blue. Despite that the site actually seems to be more colourful. This is because in the current theme I feel that yellow is much too strong to use for titles or links, which means that all the text is white and looks very bland. With the more subtle blue I am able to use it for titles, links, as well as other elements on the page – giving the whole thing a livelier look. In addition to that I plan to use more post images, hopefully infusing the front page with a bit more colour, while still preserving the two-tone theme. You can check out the preview on the left for a closer look.

In addition to changing the theme the other big changes to the site are the addition of a sidebar and pages.

The reason for adding the sidebar is mainly flexibility. My current design is very rigid. Want to change order of categories, or remove/add one? Can’t, it’ll mess up the header. Want to add a search field or a twitter feed? Can’t, there’s no place for them. Basically, in my attempt to create a minimalistic design I went overboard, so the new design aims to fix that. Of course with the sidebar I can now add all sorts of content I wasn’t able to before – twitter stream, flickr feed, blogroll, ads, etc. One of the top elements of the sidebar is going to be a thumbnail of the most recent design I did – this allows me to highlight my recent work.

Then there are the pages, which pretty much do not exist right now. As you can see from the screenshot above, there are quite a few. The most interesting one of course is “Portfolio”, this is of course where I’m going to present my web design work. Then there’s also the “Downloads” page, which groups in one place whatever scrips, icons, or whatnot I offer for download in my posts (the Codex Icons post is  my most visited post, so clearly there’s a demand for that kind of content). The rest of the pages pretty much speak for themselves.

Another big change (or maybe small, depending on how you look it) I made is to remove the sharing links from my posts. For one, the traffic on the site just doesn’t warrant them at all (and to be frank, seeing nothing is better than seeing a bunch of zeros). The other reason is that all those sharing widgets and links, more often than not, require external javascript and/or css, and facebook’s like button is even worse since it uses an iframe. All that introduces a lot of mess into my code, which I like to keep clean and organized. Plugins like AddThis for WP do help with that sort of thing by wrapping up all those into one element but, even with that, it’s still code that I have no control over and I don’t know what’s it doing, so at least for now, I’m cutting them out.

One final note: so far I’ve been using the All in One SEO plugin (if you work with WordPress you know what I’m talking about), and it’s a great plugin, but with this new design I’ll be switching to WordPress SEO, and I’m pointing that out simply because I can’t overstate how awesome that plugin is. The reason it’s so great is because it does much more than what would typically be considered “SEO” – a lot of it is really about just encouraging you to be smarter in terms of how you manage, organize and present your content. I really think that this plugin should be included in the default WordPress installation.

Anyway, I may end up putting the new design live even before it’s fully done because even at this stage, with no pages done, it’s already looking and working much better.

Be the first to comment on this post

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>