My Geek Weekend

[elfs]

The only way to get good at something is to practice. This week, I'm afraid I didn't do any writing at all because my efforts have been back into the graphic design part of my brain. My efforts have been targeted at one of Omaha's projects, supporting the Washington State 33rd District Democrats, and now you too can see the fruit of my efforts: Karen Keiser 2006.

Whee. My first client website in nine years. Pretty nice, too, eh?

Campaign website design sucks the way campaign commercials suck. Have you ever noticed just how un-slick campaign ads are? Campaign websites are the same way, and there's one and only one reason for this: you've got a three-color palette. Red, white, and blue. That's it, unless you count black for the text. I'm especially grateful that Senator Keiser gave me the freedom to give the splash some damn color with that Van Gogh; politics could use something better than the stultifying repetition of primary red, white, and blue.

It's nice to keep my hand in: I learned a little PHP along the way, and got to use some of my l33t CSS skilz that I've been using in my professional life. (Yes, I know enough PHP to check the taint on all my variables; I just wish I could have written the URLs RESTfully).

And I have to tell the client, "This is a campaign site" and keep in mind that the primary goal of the campaign site at this time is (1) to attract and retain volunteers, and (2) to be a countering web-presence to her competitor. Eventually, as election day draws nearer, the website has to slip over to (1) attracting volunteers and (2) convince people who haven't volunteered to come out and vote, preferably for the candidate, but vote, dammit.

Comments

[norikos-author.livejournal.com]

Define writing urls RESTfully, please? A quick google wasn't enlightening.

[elfs.livejournal.com]

The Journal Entries web pages are RESTful. Even though the portion of the URL "/journal/" is a program, the rest of the URL looks user-friendly and provides for ease-of-navigation and ease-of-bookmarking. It's even Google-friendly, because Google doesn't think it's manipulating an engine.

REST stands for "Representational State," and it means that the URI portion of a URL, if it indicates an object (a story, a network, a position paper, whatever), should be capable of identifying that object without arguments (without anything in the ?foo=bar&fred=wilma portion), and that arguments should be reserved for actions presented to the object.

Because the client gave me a whole bunch of documents in Word and PDF and I needed to extract them quickly, I componentized them, and made headers and footers separately, and just slapped the readfile() argument with untainted versions of the argument. I would rather they have been URL paths, myself, and RESTful, but it was not to be on the deadline I had.

[norikos-author.livejournal.com]

ah! good, I'm already doing that for story-site (my rewrite of the playground sites in rails, with lots of niftinees added, like an annocpan-like setup for beta readers to comment on stories.

(And I less-than-three rails)

[rapier.livejournal.com]

A pox on your Comic Sans!

Apart from that, the website looks great. :)

[elfs.livejournal.com]

I showed it to a friend of mine who's a much bigger graphics designer (and has many way cool clients). She said, "Did you use comic sans on that website? I hate comic sans! You swore you weren't going to use it!"

I said, "Yeah, but the client insisted, and hey, it looks good and folksy for the picnic sign, and isn't that the point? The rest of the website's in Trebuchet, which is a fine, strong font, butch without being excessively masculine and great for a political campaign."

And then I cringed. When did I learn to talk like that?

[rapier.livejournal.com]

I'm appalled, but I also understand. Has it really come first circle? That we should use Comic Sans because it's kitschy? Like the same way some Chinese restaurants will purposefully misspell English words and throw in dashes of Engrish to appear more authentic?

I despair, I really do.

[elfs.livejournal.com]

Yes. In this case, the campaign flyers handed out at various Dem meetings were in Comic Sans, and the client wanted it to look kitschy for the website as well.

[lisakit.livejournal.com]

I actually prefer Comic Sans. Being nearly blind as a bat I find it easier to read.

[lisakit.livejournal.com]

Although, Arial tends to be the preferred font in the legal industry these days. Still no serifs, and it can go quite small without losing readability and still looks professional.

Wandering out on a limb, to do a critique...

[kavri.livejournal.com]

Elf, I know that you didn't ask for any kind of review or critique of the site, but a few things jumped out at me, that though minor, I thought I should mention. Do with them what you will:

Suggested Donation: $33.00 donations of all sizes are greatly appreciated!

~ The line above does not scan well, it seems like after the colon it is referring to "$33.00 donations of all sizes". Perhaps something closer to the following:

The suggested donation is $33.00, but donations of any size are greatly appreciatted!

~ Your directions take up three lines, but have awkward line breaks. Still keeping it to three lines, the following looks cleaner:

Directions:
From I-5 take the S. 188th St. exit and head west (toward SeaTac airport).
Turn left on International Blvd. Go to light at S. 194th St and turn left into the park.

~ In the volunteer section you say, "Click on the word "volunteer" anywhere on this page to reach a short form where you can tell us how best to reach you." I clicked on all instances of 'volunteer' and it seemed to take me to the 'home' page each time, it was only after some time that I noticed the message at the bottom of the page:

"Signing up to volunteer through this website will be enabled sometime the first week of May. Check back soon!"

I think this is confusing. On the sidebar to the left, you should mention further information soon, and then put up the directions when the functionality of the form is added. (imho).

~ At the top bar above the candidates picture, you have a white bar that contains the link 'Volunteers'. I strongly think that it should include "Home"...most computer users that have minimal contact with web pages are usually familiar with the 'Home' format, and it is the easiest way to keep them from getting confused when the go to sub-layers. As well, thought there is contact information at the bottom of the page referring to the website, I again think it is familiar to most users to have a 'Contact' link. Again, added to the top white bar, this would allow someone to immediately get the postal, street address of the campaign office, and email information for the candidate.

~ The right hand side bar has four sections: Issues and Actions, Volunteer!, Media Appearances, 2006 Legislative Achievements.

However, the final title isn't viewable without scrolling. I'd suggest you rewrite the Volunteer info and/or shorten the info on Media Appearances that leads into the 'read more' link...so that the "2006 Legislative Achievements shows without the need to scroll.

~ Just my opinion, but I've never liked Comic Sans Serif font for anything formal or official. I don't think it goes well with your other font choices, which I like. I don't really have any fantastic suggestions (maybe Century Gothic?)...but, I think I'd like most any other sans serif font.

On to the good comments:

~ Excellent photo, and nice size! I hate poor photos of candidates and tiny body/torso shots or conversley huge 'head' shots. It is a nice in your face size torso shot that makes her an easily recognizable face.

~ As someone who feels the stars and bars is horribly over-used everywhere in the US, I really liked the flag and the fade on it...artisitic and subtle...not in your face and brash.

~ The setup overall is great, I like how the banner with her pic stays at the top as one navigates the sub-layers.

~ The orange is a really really nice colour contrast to the blue...it really makes the colours seem vibrant.

hope you don't mind me tossing in my two cents worth (0.0179735 USD)

kaVri

Re: Wandering out on a limb, to do a critique...

[elfs.livejournal.com]

Excellent photo, and nice size! I hate poor photos of candidates and tiny body/torso shots or conversley huge 'head' shots. It is a nice in your face size torso shot that makes her an easily recognizable face.

She gave me a great photo to begin with, although I spent a good solid hour in GIMP adjusting the cover of her jacket to fit in with the theme of the site. Now that you've mentioned you like the orange, I'm half-tempted to go back and revisit that decision since in her original photo it was somewhat orange. It would be an easy touch-up, and I have the original with its layers exploded, so I shouldn't have much trouble isolating "the jacket".

As someone who feels the stars and bars is horribly over-used everywhere in the US, I really liked the flag and the fade on it...artisitic and subtle...not in your face and brash.

Yeah, that's me. Master of subtlety. In this case, though, that was a serious design decision. It's really frackin' important that the Dems use the stars and bars, that they emphasize over and over that they're just as "American" as the Repubs, and have just as much right to the flag. I just didn't want to wrap the site in it like Bill O'Reilly naked with a flafel in hand.

The setup overall is great, I like how the banner with her pic stays at the top as one navigates the sub-layers.

Thanks. I'm working hard to remember that the secret of web design is CRAP: Contrast, Repetition, Alignment, Proximity. I'm also as lazy as an alligator: I made up a simple header and a pair of right bars (you'll notice that the right bar is smaller on inner pages; it's the long one with some things cut out) and assembled the pages programmatically. I really wanted to use ZenWeb to do that, because it would have forced me to learn Ruby, but I quickly ran out of time and did it in Python and PHP. It's what I know.

The orange is a really really nice colour contrast to the blue...it really makes the colours seem vibrant.

True, but it's going away after the picnic unless I can find a suitable color scheme that'll work for the client. The Washington State flag's colors are primary green and yellow, which would go really well with the red white and blue, doncha think? Sadly, I'll probably have to stick with the Old Glory palette because using state colors (for a state campaign, no less) would probably seem jarring and unpatriotic.

hope you don't mind me tossing in my two cents worth.

Not at all! This was fabulous feedback! Exactly what I needed, especially with your catching that silly typo in the donations section. Now I have to crank together a Contact and Privacy Policies page.

[antonia-tiger.livejournal.com]

There's so much that I don't have the cultural context to understand, but the end result looks fairly good. I shall have to check my monitor, as the blue is so dark as to look black. I've found that colour and brightness differences at the extremes of the range can't be relied on. Very dark is effectively black for some people, and very pale comes out as white for others.

OK, Washington State. Does that present any design elements that you can use? For instance, State Flag colours.

Something I feel is missing, almost certainly because I'm an outsider, is any strong sense of place. Some of the stories I've heard about US politics and gerrymandering make me wonder if a map graphic would have a positive effect. Maybe there's scope to use pictures of local landmarks? But that goes a little bit out of the graphic-design box.

On the Environmental/Energy page, there's a typo in the second line of the E-waste section--looks like a missing word. Again, outside the graphic-design box. I'm pretty certain that you didn't write the words anyway; you've never come across as having quite that sort of tin ear for language.

[lisakit.livejournal.com]

That is pretty slick.

Viewing it as a potential voter looking for info on a candidate, every time I had a question, I scrolled down and found an answer. I *really* like that. More important than colors really, but the color does help direct the eye.

Nice job.

[gromm.livejournal.com]

Campaign websites are the same way, and there's one and only one reason for this: you've got a three-color palette. Red, white, and blue.

Gee. With the simple addition of green, you'd have at least something to work with. ;)

Just remember that the less a statesman amounts to, the more he loves the flag. That explains much about politician's websites. :)