Category: Development

Blue!

No, not me. I’m still between jobs, still looking, but I’m not letting it get me down. I’m keeping my brain active, playing around with cool Web technologies like jQuery and Flex. It’s fun.

In addition to learning new tools, I’m building my portfolio.

No, not me. I’m still between jobs, still looking, but I’m not letting it get me down. I’m keeping my brain active, playing around with cool Web technologies like jQuery and Flex. It’s fun.

In addition to learning new tools, I’m building my portfolio. This is something I wouldn’t have considered a year ago, but recently I’ve been working on a few interesting websites. Of course, you already know about VGVA.com. All it needs now is routine maintenance and content update, with the occasional new theme. I’ve got a few ideas for improvements, but for now it looks nice and it works.

Also finished earlier this month, a project I hadn’t mentioned before: http://loucrockett.com. This is the portfolio of a friend of mine, originally done all in Flash. Problem was, the code was old and failing in most modern browsers; since I didn’t know Flash and the original developer was unavailable, I decided to re-implement it in PHP. The functionality’s just the same, minus some pretty eye candy, plus a couple of little extra features. I bet there are lots of other tricks I could do to make it even prettier, once I get the hang of jQuery.

Which is not gratuitous or useless. I’m just showing off my skills, is all.

Third: Team Vancouver. I’ve been working on this site quite a bit in the last few weeks; the design’s not done yet, but we’re well on our way. I tell you, there’s no feeling like looking at a half-finished design and suddenly seeing how it’ll all come together in the end. Instead of the blah green design, I took my inspiration from the new Team Vancouver uniforms and put together a kicky blue palette with sharp lime green accents, that has zing and pizazz and all sorts of “z” words. Add a revision of the site structure and content, a reshuffling of the layouts, and we’ll have ourselves a site that’s fun, fresh and eminently usable.

So that’s what I’m up to lately. Once I get all that out of the way, I’ll have time to really get cracking on redesigning this blog.

Chaos and Numbers

I finally have the bones of my new design. It’ll be a 3-column layout, 960px wide. Spent so much time fiddling with the widths, and then it hit me: all I had to do was take a clue from the 960 grid system and let column widths be fractions of the total width. Easy-peasy.

I finally have the bones of my new design. It’ll be a 3-column layout, 960px wide. Spent so much time fiddling with the widths, and then it hit me: all I had to do was take a clue from the 960 grid system and let column widths be fractions of the total width. Easy-peasy. After a bit of experimentation I settled on a 5-column grid, with the left and right sidebar each taking up one column, and the main content section taking up three. The main page will be built on a four-column layout, and will feature a bit more than just a list of recent posts.

And you know, there’s something deeply There’s something deeply satisfying about these proportions. Something clean and orderly. Ancient Greeks (as I understand it) dabbled in numerology, getting all mystical about numbers like the Golden Ratio even as they practised solid mathematics. I can understand that a little better now.

Now comes the hard part: fleshing it all out. But I’m working on that.

In other news, the Team Vancouver is coming along. I had some good breakthroughs in the last week, but I’m one step behind my own site. Instead of seeing everything coming together, I’m at the stage of breaking everything down, trying to forget the present design. It’s all right, though, that’s another kind of satisfaction, to ignore what is, and start seeing the possibilities…

Out of chaos, I bring order. Out of order, I create chaos. To everything, there is a season.

What’s inspiring me

AdamSchwabe.com: a wonderfully clean, minimalist site. Not just in the look; note that a lot of common blog functionality is missing: Category listings or tag cloud? Browsable archives? Blogroll? It has none of these things, and doesn’t especially need them. What it does have is a beautiful and effective navigation scheme that uses colour to let you know exactly where you are, and a layout that lets the eye flow naturally to the content. Hey, that’s what you get when the author’s a user interface designer. AdamSchwabe.com teaches me that less is indeed more.

Plus, it’s what introduced me to colourlovers.com, so bonus points there.

Avalonstar:distortion is the total opposite in many ways. It’s dark. It’s busy. But you know what? it works. The author puts in tons of fun little extra bits, from “Welcome to Avalonstar” in Japanese to the closing “</and this would be the end>” tag at the very bottom. The site is fun to read. If you can pull it off, more can definitely be more.

Mind you, a design is nothing without content, and the two above sites has it in spades. And that’s something else for me to work on (not that I haven’t already).

Elements: Architecture in detail. Not a website, but a book. The other day I was in The Book Warehouse on Davie, and this caught my eye right from the top shelf. Aside from the lovely shots of contemporary architecture, the book’s message is that the devil is in the details. For the whole to work, all the components have to be working first.

Oh, and that day I also bought Neil Gaiman’s The Graveyard Book, Terry Pratchett’s Nation, A Hat Full of Sky and Wintersmith. They didn’t have The Wee Free Men, though. Bummer.

Geography

A little while back I wrote that, in the blog’s new version, I’d be proudly displaying my daily pictures of Sunset Beach in the sidebar. This is still the plan. And with a much wider layout it’s absolutely feasible. But in the last few days of figuring out widgetizing sidebars (two of them), installing a few more plugins, deciding on all the right navigation aids and so on, I hadn’t really visualised how big a 240 x 180 image was. Stuck on top of the sidebar, I feel it’s becoming a focus point of the whole page.

I didn’t really see this coming, though I probably should have.

A little while back I wrote that, in the blog’s new version, I’d be proudly displaying my daily pictures of Sunset Beach in the sidebar. This is still the plan. And with a much wider layout it’s absolutely feasible. But in the last few days of figuring out widgetizing sidebars (two of them), installing a few more plugins, deciding on all the right navigation aids and so on, I hadn’t really visualised how big a 240 x 180 image was. Stuck on top of the sidebar, I feel it’s becoming a focus point of the whole page.

Which… is not a bad thing, actually. I’ve been thinking for a while that my blog would become less focused on posts, and more on my current projects and photography. But I hadn’t fully grasped how the layout would have to change with the content. And frankly, I still don’t. This is very new to me, and I’m still feeling my way across the weird, wonderful landscape of Web design.

Tagging

I’ve been reading this very excellent blog full of tips and info about Wordpress. Right now I’m pondering tags and categories.

I’ve been reading this excellent blog full of tips and info about WordPress. Right now I’m pondering tags and categories.

Since I switched to WordPress for the current version, I’ve been using categories and not tags. For a while I tried to get a hierarchy of categories, but I just couldn’t decide on the right one. And the end result is a very unbalanced list. “Comics” and “Life” have quite a few posts, while “Music” has two. That never felt right to me. On one hand, it was a constant nudge that maybe I could blog a bit more and flesh out these sparse topics, but I never really got around to it. So the nudge became more “annoyance” than “inspiration.”

The other problem was, a lot of my posts fit into more than one category. What was the point, if a post didn’t fit into a clear hierarchy?

Now I’ve gotten (back) on Flickr, and discovered the joy of tags. And I realize that I don’t actually need categories. If readers want to browse through my blogs, tags will work just as well—along with my Google custom search engine, of course, and all the other Web 2.0 doodads I’ve just started tinkering with.

Of cherry blossoms and insecurities

I’ve just finished the Easter theme for the VGVA site. It’s been a fun and challenging experience, improving my skills and deepening my understanding of many Illustrator features. Pushing the envelope, that’s what it’s all about.

I’ve just finished the Easter theme for the VGVA site. It’s been a fun and challenging experience, improving my skills and deepening my understanding of many Illustrator features. Pushing the envelope, that’s what it’s all about.

Plus, the kudos. Those are always good.

The header graphic was the most complex I’d done so far; in fact, the real challenge (in addition to figuring out the tools at my disposal) was having a clear idea of how the finished product should look. I had to make several changes to the colour scheme along the way and my first draft, was very rough: some rough Paintbrush daubs in place of cherry blossoms, and a few lines sketching out a tree. So the next step, naturally, was to add more details, make everything more realistic.

Or… was it? The problem was that (a) it’d be a lot of work, and (b) even if I pulled it off, it might not necessarily look that good anyways. Maybe realism was overrated; maybe an overabundance of little details would just overwhelm the viewer, and all I had to do was show the essence of cherry trees and Easter eggs and all that springtime goodness. (Granted, the eggs were the easy part.)

For the next few days I kept going back and forth between the two extremes. The fact is, I wasn’t that secure with my visual imagination (something I already blogged about) and so falling back on what my camera saw instead of creating my own interpretation seemed a safe solution.

Well, I think the final product works. I’m still not totally happy with it, but I’ve alway been my own worst critic, so take that with a grain of salt. At the moment I’m heroically resisting the urge to go back and tinker. I can’t find the reference right now, but some years ago I read a quote by Aldous Huxley about regret. He wrote that it was a mistake to continually go back and fiddle with your finished works. No matter how much you polished them they would always have flaws; at some point you just had to let go, learn from your mistakes, and go on to make whole new works. And that’s exactly what I’m going to do: identify what needs work, and then fix it in a later version. I probably can’t do much better right now. A year from now, though? Oh yeah.

Back to basics

Redesigning my site is always a special time. It’s a time to start fresh, re-examine all my assumptions and past decisions, ask the hard questions. It starts with the content. What should I keep? What should I add? What should I drop? Before I even get to work on the design, I need to know what I should be designing for.

Redesigning my site is always a special time. It’s a time to start fresh, re-examine all my assumptions and past decisions, ask the hard questions. It starts with the content. What should I keep? What should I add? What should I drop? Before I even get to work on the design, I need to know what I should be designing for.

My Queer History Project? Oh, it stays. Even if I didn’t have any incoming links to it, I’d keep it just because even after 10(!) years I’m still enormously proud of it. It’ll share the stage with the other Web design projects I’ve got going on: VGVA and Team Vancouver

Quotes? For years I used to have lots of quotes, several pages’ worth, including a ginormous one dedicated to the great Terry Pratchett. I decided to drop them in the current version, but I keep going back and forth on it. Thing is, I’m just not sure how to incorporate them in the design. Should I have a random quote in the sidebar? Or a whole, separate page? I still don’t know. Very few of the blogs I’ve seen have have them, so… well, we’ll see. I don’t have to decide today.

Photo thumbnails in the sidebar? Sure thing. I’ll have to find new WordPress plugins to handle Flickr. So far I haven’t seen any that’ll do exactly what I want it to (display a block of square thumbnails just like the Gallery plugin does), but I’m sure it’s out there. Or I’ll do it myself.

In addition to those thumbnails, I plan to show my daily shot of Sunset Beach. Yes, I’ve been keeping that up, though there are a few gaps. Good news for me, Flickr can create slideshows from sets, so I don’t need to futz around in iMovie. Showing off my daily photo will keep me motivated, and provide a bit of regular fresh content.

Twitter and junk? Well, I don’t twitter. Maybe I should? If nothing else, Twitter and Lifestreams and such would be another good way to add content on a regular basis. Why not? My site started out with “essays,” long pieces that took weeks or months to write. Then I moved on to blogging: smaller, more frequent updates. Maybe micro-blogging is the next logical step.

Speaking of which, part of me is still deciding if I want to keep the stuff I wrote “pre-blog,” dating back to 1997. They’re WordPress pages instead of posts, since I don’t have exact publication dates for most of them, and I don’t want to just invent some. Picky, maybe, but that’s just my thing. Part of me is considering dropping the large archive page listing every single post/essay, and doing with category/tag pages (more on tags in a later post). Or maybe monthly archives, but a master list is feeling more and more unwieldy to me. In that case, I’d have to come up with a special page for older writing (like I briefly did, while designing the present version), or drop it entirely.

Decisions, decisions…

To Flickr or not to Flickr

Way back when, as I started to work on my site’s present design, I made a conscious decision not to use Flickr. The disadvantages, as I saw them, were: (a) I couldn’t style it, (b) current incoming links would be broken, and (c) I wouldn’t have access stats. Turns out (c) is not true, (b) doesn’t really apply since I don’t think I have any incoming links to my photos, and (a) is actually not that big a deal.

Way back when, as I started to work on my site’s present design, I made a conscious decision not to use Flickr. The disadvantages, as I saw them, were: (a) I couldn’t style it, (b) current incoming links would be broken, and (c) I wouldn’t have access stats. Turns out (c) is not true, (b) doesn’t really apply since I don’t think I have any incoming links to my photos, and (a) is actually not that big a deal. Hey, I had fun styling my galleries (and fighting with Smarty templates, and learning my way around Gallery’s user interface, which isn’t all that friendly), but I don’t need to do it anymore. Flickr offers much more flexibility in organising my photos, a snazzy interface, rich tagging and metadata, and—more importantly—tons of exposure.

I’m in the process of republishing my galleries on Flickr. All new photos will go directly there.

Oh, and I’ve started another site redesign. It was about time, don’t you think? No details yet, except I am planning to expand the width from 800 to 1000 px. Hah, and what will I do with all that extra space?

The Physics of Thumbnails

The square-cube ratio: when an object doubles in size, its surface area quadruples but its mass is multiplied by eight (oh, I was tempted to write “its mass octuples,” but that’d be a little much. Also, Firefox’s built-in dictionary doesn’t recognise “octuples”).

The square-cube ratio: when an object doubles in size, its surface area quadruples but its mass is multiplied by eight (oh, I was tempted to write “its mass octuples,” but that’d be a little much. Also, Firefox’s built-in dictionary doesn’t recognise “octuples”). And since a creature’s strength is proportional to the cross-section of its limbs, this explains why an ant can carry hundreds of times its own weight on its spindly little legs, a human can just about manage another human, and an elephant with its thick frame and stumpy legs can carry 25% its own weight. An elephant-sized human wouldn’t even be able to move.

So what’s the point? The rules don’t change when you get smaller or bigger, but how they manifest themselves does. This was brought home recently as I tweaked the thumbnails for VGVA.com‘s style switcher. The problem was to present the graphics, colour scheme, and overall look of each theme in a 20 x 20 space. Just shrinking the main graphics wasn’t enough. Details disappear, colours show up differently, even proportions can seem a little out of whack.

Consider the (newly finished) Christmas theme. That one was easy: I just took one of the snowflakes, shrunk it a bit, thickened the lines (otherwise they’d disappear), and then cropped it. Result: a pretty little thumbnail that does a good job of suggesting the whole while looking nice on its own. The tree wouldn’t have worked in a square space, and trying to show a whole snowflake would have meant (a) losing a lot of detail and (b) wasted space because those snowflakes are taller than they’re wide.

Second hardest: Red Fire. Deciding to go with just one shade of orange in the center part was easy, but then I fiddled a lot with the angle and granularity.

Biggest headache: Sunburst. Shrinking the sun graphic was no good: at that size it was just a shapeless smudge. Even worse: against the darker backgrounds I lost most of the contrast between the yellow and light blue. What to do? My first step was to thicken and darken the orange outline. That helped, a little, but the shape was still wrong. It was only a couple of days ago that I had my Eureka moment: stretch it out. The essence of the full-size graphic was in the shooting rays, so the thumbnail had to emphasize them. Also I lightened the yellow just a bit, to increase the contrast with the blue background. It felt a bit like cheating because I wanted to keep the colours the same, but the large sunburst had a white centre, so that was all right.

So, yeah. That is an interesting experience. I don’t know how many people this will interest, but I wanted to record this latest step in my quest to be a better Web designer.