New Design, New Domain

For all of my readers who use RSS readers, or read through Planet PHP, I have re-designed my blog.

Part of the reason for this, is that I want to move away from the Pixelated Dreams moniker, branding the site under my own name. To that end, you can now access the site at https://daveyshafik.com — the old domain will continue to work (and I have every intention of renewing it) so no need to make any changes on your ends — though I would appreciate all future links back to use the new domain.

This new design is based on the excellent work of John O’Nolan with some gratuitous hacking, this is actually the 3rd re-design I’ve worked on for this site.

As you might recall, way-back-when, my blog looked something like this (using the Joshua theme):

The first redesign, followed my original stock themes color scheme of sandy colors and blue, as can be seen in two concepts here:

and the very similar, but slightly different take:

In this design, I had planned for the top bar to expand to show archives, with a slider to move around them; the cloud tag, contact form, search, etc. Keeping them all out of the way until wanted. The goal was to create a polished (ajaxified) interface with little clutter, while still making sure all expected features were available.

The sliding mechanism actually had two sliders, a start and end, which were, by default, kept 2 weeks apart (IIRC), but could be split apart to allow you to encompass any and all posts on my blog. As you moved the sliders, the posts included in the date range would automatically appear below.

Next, came a radically different approach, this time, I started thinking about what I put online, and how I could share it with others. In particular, once I returned home from php|works and ZendCon, I realized that my blog is just a small part of my online presence. I thought it would be very cool to not only include my flickr stream and my twitter feed on my site, but to actually make it useful.

This is my use-case:

I go to a conference, I take some photos, I tweet some stuff, someone sends me a link which I add to delicious, and then I write a blog post — the blog post is just a single part of my experience. I wanted to be able to capture the pictures from that day, and the tweets from that day, and keep them with the blog post. I wanted to use my delicious as a sort of bibliography of information resources I used on that day.

So, when you go to a blog post for Day 3 of ZendCon, you see the pictures from Day 3, the tweets about how hungover^W psyched we are about the people we’re meeting and the sessions we’re attending, as well as ideas and such that we put up throughout Day 3. These are captured, and stay with the blog post as a single entity capturing the entire day.

To this end, and also because I wanted to play with VectorDesigner, I came up with this design:



The idea was a horizontal accordion, starting with “Explore” for archives, tag clouds and related posts, “Photos” for either my most recent photos (home) or related photos from Flickr, and then “Twitter” for either my most recent tweets (home) or related tweets.

However, I ran into two problems, first, this sort of layout is not too difficult to do in CSS-P, until you introduce the idea of dynamic accordion behavior. Then you need to do all sorts of sucktastic stuff in JavaScript to make sure it all works nicely. I tried to do the design with everything open all the time, or no more than one open at any given time, but it still wasn’t working nicely.

The second issue is that of space; the plan to put the content on the right meant I would be left with potentially very little space for the text. One of my favorite things about this new design is the wide open spaces for content — which, lets face it, is the reason for the blog to exist in the first place!

However, I did get three great things out of this design: 1) A simple color scheme I liked, comprised of 5 colors. 2) An idea of what I wanted from my site 3) Great Keynote templates (as anybody in my streams talk at |works 08 can attest!)

So, then I ran across the layout by John, and I knew that was it. I’ve spent the 3 weeks tweaking; there are two color schemes (click the swatches at top right) and I learned a lot about WordPress Templating.

However, things are not all rosey: Comments don’t work, the dynamic trapping of related photos/tweets doesn’t work, there are no archives, search or really any way to actually browser the site and I have no idea what else I’ll be putting in my Books & Things section.

But, I wanted to get this out, get rid of the stock theme, and not get bored with it! So, let me know what you think on twitter (remember: comments don’t work) or on IRC!

– Davey