Redesigned

redesigned.png

Felt an urge to redecorate the other day, and so I threw some new paint on this old thing. I trimmed a lot of fat, went all HTML5, completely ignored Internet Explorer, threw in a Google web-font and made the site all responsive and scaling to smartphones. It was liberating. If you’re reading this in a feed-reader, I invite you to jump out of it for a brief gander.

For a while I’ve been working on the be-all end-all WordPress theme, a parent theme framework with all sorts of other buzzwords not including synergy. For this theme, however, I simply threw it all out and started with a mix of TwentyEleven (excellent HTML5 base) and the deprecated fallback theme you’re not actually supposed to use (turns out the fallback comments form was much to my liking; don’t worry, I copied the files to my theme directory).

I also deactivated a bunch of plugins. I’ve been a tremendous fan of Subscribe To Comments ever since I switched from Movable Type almost a decade ago (how time flies), but since the introduction of email subscriptions in Jetpack, that plugin is more-so a must-have for me (not to mention the fact that the stats module is now some of my bread and a lot of my butter). I have a bunch of to-do’s still, mostly related to finding a decent way to make my photos section interesting again.

Then of course, I’ve turned down the lights, something you either love or hate. I’ve found myself reading a lot on my smartphone, and somehow it works for me when the little device emits less light in my face. Black will do that to you, and I’m told it’s always a good choice. Plus, I’m a big fan of feed-readers (not so much Google Reader anymore), so if you prefer a white background you may go right back to your reader of choice and I will harbor no ill will towards you.

Part of my urge to redesign has been my want of going long-form. This blog has gone through a lot of iterations based on my whim at the time. Currently, this quote by Brent Simmons appeals to me:

Twitter and Facebook are great for organizing a revolution. Blogs are for explaining why we need one.

I’m not looking to start a revolution, and the truth is I may blog way less these days now that I’m juggling a toddler and a fantastic job. But what I do write, I want to keep, store, cross-reference and archive.

Invasion Of The Magical Moai Monoliths Of Rapa Nui

moai.png

moai, (plural moai): one of the large stone heads on Easter Island (Rapa Nui)

I know, my redesigns used to have a pseudo-profound reasoning. This one doesn’t, I assure you. I simply find moai exceedingly fascinating. That’s why this entire redesigned layout you’re now looking at (provided you’ve stepped out of your feedreader) is dedicated to the awesomeness seeping from every crevasse of Easter Island. Which unfortunately I haven’t been to, but plan to visit. At some point.

This project took a while. Months of on/off work, in fact, and far more design-iterations than I had originally planned. Mostly because getting moai to look good in a webdesign turned out to be a challenge; one I’ve now documented in animated GIF files here because GIFs speak louder than words:




There’s even a GIF of the entire header area, too large to fit here.

There’s also new cool stuff:

  • Because I’ve found Twitter (follow me!) to be endlessly fascinating, not only are “Tweetbacks” added as comments (see my V post for examples) but on single posts you can now click “tweet this” in the same passive-aggressive manner that all the young hipsters do.
  • There’s a new logo.
  • Work and play is now completely separate, this blog being “play”. Except of course, for the huge blue sticker advertising my work site.
  • I started work on my own font, (mostly because I can, now that the cool browser can embed fonts for real), but ended up using the beautiful(ler) BPreplay by George Triantafyllakos. I’ve even exploded the size of the headings now that I can use such a pretty font.
  • In the course of my rather WordPress centric freelance adventure, I’ve built quite a few open-source WordPress things. That’s why there’s now a dedicated section, right next to Skyler the silent moai.
  • You’ll also no doubt (which is the point) notice the links to recent stuff tagged ‘something’ right at the top of the page. That’s a custom-made widget which grabs most recently updated posts.

I also scrapped a few things:

  • Comments are now off by default (more on that later).
  • I ditched my poster section, but it’ll probably reappear later in some form.
  • There’s no longer a CSS style switcher (and it’s not coming back). This is the design, and it’s staying for a while.

That’s it. Let there be rock.

Newscope Part 2: The Mini-Extreme Makeover

Noscope Pangea

When I decided to go freelance, I could have chosen to sell my services from another domain, separating personal from work stuff. There are a couple of reasons why I chose to keep things here at Noscope, the first and foremost being that keeping things here was the quick and easy thing to do. Secondly, my commercial work will somehow be personal (that’s the plan at least). Finally, chances are potential clients’ll find me here.

How does one realign a personal website to be part commercial, part what it was before? Gents like Jon Hicks have managed. What’s the trick? Do I employ censorship? Fuck no. Do I write more or less personal content? The plan is more.

The previous design1 stuck around for quite a while. It was a a fairly basic layout with tabs, whitish bluish colors and an oldschool cut corner. Nothing really wrong with that, so as you can see it’s still mostly the same. The changes are mainly structural.

Main Menu

Before:

Old Menu

After:

New Menu

  • There were simply too many tabs, it wasn’t not focused enough.
  • Previously the many tabs were there to highlight all the various sections up front in the primary navigation. As it didn’t create any renewed interest in the stale sections such as the picture & wallpaper section, I decided my plan to “unite the continents” had failed. Accepting this failure, I decided to move some things to subsections instead.

  • With new stuff in the subsections, I increased the contrast to make those links more apparent.
  • The simpler main section setup allows me to add lots of new subsections. I’m hoping to eventually make one in the Work tab that says “art book”, maybe one that says “posters”. I can dream, can’t I?
  • Colophon” was fun for a while. Now it’s called “About”, because it’s “about me and what I do”. Beware of added commercial propaganda content.

Digest Home

Before:

Old Home

After:

New Home

  • The old homepage was a “digest page” automatically showing new content from various sections, yet it still felt static and dead.
  • Accepting this staleness, I decided to entirely scrap the digest page and use the homepage differently.

  • Because the homepage is the default section which new visitors are likely to see first, I decided to use it for pretty pictures. While I interact the most with people commenting in this blog section, it’s easy to forget that this is just a little clubhouse. Most people will have no idea what’s going on. The new setup with a static explanatory homepage, I believe, gives a better introduction to what the hell this is all about.
  • I needed room for an upcoming side-project, so I’ve added a “Vn” tab. Some of you may have guessed this is dedicated to mathematician John von Neumann, in honor of whom I’ve named a generative graphics engine.
  • Behind the curtain stands a tiny AJAX wizard, all clad in blue and dynamically serves up pictures from the archives. Click “Older” in the bottom of the page to see his skills. This wizard is named Michael Heilemann, in honor of the author of rolling archives, from which the wizard stole his powers.

Through The Looking Glass

Some changes are purely cosmetic, some are a structural. For instance, since my camera got stolen, I haven’t photographed. With posters coming up, the wallpaper section deserves a revamp. As a result, the pics & desktops section is in limbo, relegated to being a subsection of the journal.

The journal (you’re looking at it) got the most changes, mainly invisible ones. Comments have been adjusted for clarity, the main page has been cache optimized and WordPress has been updated. Also, most of the code is now based on the upcoming final release of the Fauna theme. Finally, there are tiny ♥ icons in the main feed. Kinda like Gruber. All tiny cosmetic changes that give that “new paint-job” feeling.

Whether the changes made will work out given time, remains to be seen. So far, I’m enjoying the new car smell. Alas, it’s what’s under the hood that matters, so here’s hoping this old car has a few miles in it still.

  1. Entitled “Pangea” for the supercontinent that was Earth before its continents drifted apart. More in the archives.  

Newscope: Master Plan

Nommercial

Change is afoot! I have decided it is time to try something new. For me, that means focusing on my art. Thusly, I have quit my damn fine fulltime-job at Titoonic and decided to go freelance.

This is a big step for me. I have consciously quit a challenging, interesting job at an innovative company with the best and most talented colleagues in the business for the sole purpose of “focusing on my art” (cue heroic tune). The outlook could very well be that of a starving artist: bleak. One might even ask, why the hell did I do that? In fact, I’ve asked myself that very question more than a couple of times.

Essentially it all boils down to this: I love doing personal graphical work like the stuff that graces the new homepage. I would love to be able to make a living by doing just that. If I don’t try, I will most likely regret it more than I already regret quitting my job. So, as of November 1st, I will be freelance.

I will be taking on clients, doing small web-related projects to make a living: logos, identities, website / interface designs, usability consulting, that sort of thing. The idea is to make enough of a living to have some spare time to focus on those personal projects of mine. I mentioned an art book once, maybe now is the time. I was once asked if I sell posters, well I’d love to see if that’s worthwhile. For now, I’ve put my money on the prospect that things’ll work out dandy. I can’t wait to find out if it will.

Noscope Pangea

Noscope Pangea

It makes me proud to finally unveil what has been a labor of love for me. Codenamed “Pangea” (Greek for “all lands”), the purpose was to unite sections of Noscope that had drifted apart.

When I started pondering this redesign (press Shift F5 or click out of your feedreader if you don’t see anything new), it quickly became clear to me that I wanted to focus more on the structure and the functionality behind the scenes, than the look itself. I’ve spent years learning that if you simplify and optimize your work processes, your productivity will increase. This might sound like a no-brainer, but it’s not as easy as it sounds.

While design came secondly, I still wanted the visuals to be intertwined with the structure. Having had a design that was intentionally secondary to its contents for a very long time, it was crushingly clear to me that this one had be able to stand on its own. I wanted a design that was tight, clean, and felt thought-through. That was the master-plan.

Results

When I actually embarked on this redesign, I set myself a few minimum goals to achieve in order for this so-called “Pangea” not to be a crushing failure:

  1. Highlight orphaned sections
  2. Redesign primary navigation for simplicity
  3. Highlight worthwhile content from ages past
  4. Simplify the administrative updating of all sections
  5. Simplify writing and interlinking and, as such, inter-archival relationships (you heard me!)
  6. Allow for monthly rebranding
  7. More space and less scrolling

In order to fullfill #1, I have decided to adjust the Noscope homepage to hold a digest of all sections. This is not rocket science, and it’s been done before, but in my case not as extensively as now. This further allowed me to clean out quite a lot of clutter and cruft from the section most of you are likely to be reading: the journal.

Redesigning the main navigation (#2) was fairly easy. I added tabs, relegated Colophon and Archives to be secondary to the Journal, and removed the search button in favor of simply pressing “Enter”. The latter was purely decorative, as the usable thing would be to leave the button there. Yeah well if I don’t want to follow Jakob Nielsen’s recommendations based on statistical analysis, I don’t have to, so there.

With regards to #3 and #5, I’ve finally followed the visionary bloggers and joined the tagging train. So much in fact, that I’ve thrown out categories for all but structure. This new voodoo will hopefully help people find truly related content, quickly, and quite possibly allow people to click on things that interest them to see if maybe I wrote some fantastic piece on it in the past. That, and I’ll be adding links to really noteworthy past articles on the homepage, in the bottom right corner.

I spent the better part of a month working on #4. That means updating and simplifying my installments section. The end result is, probably, what makes me most warm and fuzzy inside about this redesign. For instance, open my latest installment (June) in a tab and notice the two new features: “scale to fit”, and “older installment”. Combined, I think they help out quite a bit with exploring the archives.

Adding space (#7) has been in my mind all through the actual design phase. Armed with De Bono’s Simplicity Principles, I have fiercely tried to remove clutter and focus on what’s relevant. This, not only visually, but structurally and semantically as well. In removing clutter, I also decided to add icons, something I’ve usually been too lazy to do:

Feed Icon Comments Icon Permalink Icon Folder Icon Quote Comment Icon Tags Icon Warning Icon Edit Icon
Feed Comments Permalink Folder Quote Tag Notice Edit

While not 12×12 works of pixel perfectness, I think they work well for what they need to do: replace text with generic symbols and concepts.

When it came to allowing for monthly mini-redesigns (#6), I had spent so much time creating a tight and stand-alone design that I’m afraid this is one area I over-looked (i.e. failed miserably in). We’ll see what happens when the dust settles.

Conclusions

More than anything, I’m happy to have kicked this screaming baby out of the door. Okay so it has a few bruises here and there (as of this writing, wallpapers and photography sections still need love, and Internet Explorer… well… [Update: Now with IE7 support]), but they will heal in time.

Equally important is the fact that I am once again excited about having a homepage. It doesn’t look like an abandoned mess, and it has that special “new car” smell. I’m confident this will get me posting snacksized portions of pointless stuff again, for several weeks or even longer.

Visually, I feel the design stands up quite well compared to your typical LiveJournal, MySpace or feed reader layout, and that’s not bad considering their respective popularity. I might not win the war with it, but this day I fought. But seriously.

Essentially, I feel like I’ve done what I set out to do, which was to create a clean, tight layout that provided me with the tools and features I wanted and presented the information in a viable way. I might not have unified continents that drifted apart in the Mesozoic era, but it’s not half bad either.

Tagging Noscope

Preparing for my redesign, I have started tagging Noscope. Using the extremely well-made Ultimate Tag Warrior I have already tagged the first 16 some pages of Noscope, but there’s still a long way to go.

For a long time, I’ve been reluctant to start using tags. I’ve found categories to be more intuitive, and tags to be simply visual clutter. Yet lately I’ve been warming up to the fact that tags can help you discover relationships between two seeming unrelated topics. What’s your take on tags / labels?

Note: The tag addition to Noscope is currently rather basic, but it’ll be built into my Pangea redesign.

Update: All tagged. Going over the 500+ posts, I also noticed a myriad of dead out-links, and throngs of redundant dated info. I must have deleted more than 50 posts during this process. Now, enjoy such tags as reviews, or maybe even inspiration.

Pangea: A Challenge

Pangea is the title of the upcoming design for Noscope. For this redesign, I will be needing a plain div box to place content in. In my mockups, the box looks like this:

Problem

It’s a fairly straight-forward box with four borders and an angled top-right corner. The markup looks like this:

<div class="box">
content
</div>

Now for the challenge: not worrying about IE and with no extra HTML markup, is it possible to CSS style this box, yet keeping the width and height liquid?

I have a few solutions already, but most of them require either JavaScript and/or extra source markup.

Update: A solution has been found. See the comments details.