Having slaved over the new design for 3 days, I’m pretty well there. Let me preface by saying, I AM NOT A PROGRAMMING GEEK and I’m no design freak. I know what I like when I see it. What I’ve done can be achieved by anyone willing to read around stuff like WordPress plug-ins, basic CSS and a smattering of Javascript. Trust me, it’s not that hard. In fact much of the core code is cut and paste stuff I’ve picked up along the way.
What I wanted to achieve
I wanted to kick off the New Year with a clean design that’s vibrant and inviting. I wanted to get away from almost zero colour though I appreciate that over design can detract from the reading experience. I also wanted to add new elements asked for by readers but in such a way that I could maintain the relatively clean interface to the user. Finally, I wanted navigation to be a LOT easier.
How I made it work
I was going to use the UnNamedOne theme as the starting point for the 2007 look but found lots of problems early on. Basically it kept breaking and as I know diddly squat about AJAX (which was causing at least some of the problems) it got ditched fairly early on.
I settled on Fresh. This is an ‘old’ design in the sense it makes no use of WordPress sidebar widgets. Many people have complained sidebar widgets is really sloppy code. I’ve no idea but I do have a lot more control having hand coded the entire sidebar as you see it plus lumps of the header to pull in some special code I used to create the sidebar navigation.
The BIG thing with this design is that I’ve been able to incorporate two sets of sidebar navigation elements. Both are shown as tabbed layouts:
The first is ‘Navigate Stories.‘ This is designed to provide readers with a single yet simple way of accessing current and past material. Wherever possible, I’ve used plain English to describe the tabbed sections so that persons who are unfamiliar with blog terminology can easily grasp the concepts. Each tabbed section is made up of things I could pull direct from the theme, either as a plug-in or as code that extracts different subsets of the blog data.
The second is the ‘Bookmarks and Links‘ element. I’m especially pleased withi this as it takes an unusual approach to solving a problem. In this element, I’ve combined the tabbed code used in ‘Navigate Stories’ with Grazr code created from my collections of del.icio.us bookmarks plus a specific set of feed links that are appropriate for readers. I had a slight problem getting the del.icio.us code to behave as well as I’d like but that was more to do with my misunderstanding what I was doing inside Grazr. I don’t know if this qualifies as a ‘mashup‘ but then that term is on its way to being hijacked. The important thing to note is that rather than integrating different services, I’ve assembled service components inside the site. Much of the assembly relies on RSS, which Charlie Wood has previously described as application ‘glue.’
Both sections rely on Javascript code, some of which I hacked from an example at Barely Fitz. The reason for hacking the code was to get rid of ‘alert’ code when incorporating cookies into the Javascript calls for the main sidebar code. The base Javascript code is quite ‘old’ in origin but it is regularly updated and seems to work very well. It can be downloaded from here.
I also needed to style the navigation elements so I would not use up too much space in the sidebar. I achieved this by hacking around the theme stylesheet to create special classes for the navigation bars. I think it remains pretty readable even at relatively low screen resolutions but you be the judge.
The original code included some code in a field called ‘bottom.php.’ Since I used a different form of navigation as outline above, there was no need for this element. It got hosed though I’ve retained the original in case I need it in the future.
Finally, I made some colour tweaks to the post and title links. The original included underlining which I don’t like and which I think clutters the screen. These have been removed by the simple expedient of a colour change and dumping ‘underline’ from these classes.
What I’d like to do
I’d like to utilise the AJAX’ified ‘Live Search’ which is art of the base K2 theme. Trouble is I’ve no understand of this type of code and so it’s ben left for the time being.
At the moment there’s a huge amount of Javascript code in the header. I’d like to get rid of as much as possible into a separate .js file. The sidebar coding was pretty tedious and there has to be an easier way to create a display array. I’d really like to AJAX’ify the sidebar area to make it consistent with other AJAX elements like commenting. But as I’m clueless on AJAX I’m pretty much stuck.
I’d also like it to run a lot faster on initial load. I’ve tried paring back the code but I’ve hit a brick wall. Any help would be much appreciated.
Conclusion
I think I’ve given readers just about everything they’d want without requiring them to scroll down long sidebars full of extraneous crap. I know I’ve given James Governor and Alastair Harris one thing they had requested: A Big 4 Watch section which I’ve populated with some posts from a variety of sources. This means I’ll be making extensive use of del.icio.us in the coming months as I add to this resource.
Anyway – over to you and let me know what you thinnk, what breaks and what works really well. I won’t please everyone but then you never can in this life. I still have the old PlainText theme available if the wheels fall off.
In the meantime, I’d like to thank those few souls who were online and gave feedback at crucial moments over the run up and just past Christmas Day.
Technorati Tags: design, javascript, wordpress theme
