Mark Bult Design: San Francisco, CA, Established 1988

Web design and development for small and large business, e-commerce, b2b, b2c, SAAS, and community websites. User experience design and usability testing.


Tuesday, March 09, 2010

The myth of the fold

In web design and development there is almost always a desire to surface as many items of content and functionality above “the fold”* as you can possibly cram in there: Top news, latest blog posts, branding, primary navigation, secondary navigation, customer testimonials, carousels, search box, Twitter stream, log in box, and of course at lease a couple ads.

Below is a brief catalog of the many years of user research that debunks the concept of the fold.

Let us be free of this burden once and for all. Our users already are.

The myth of the page fold: evidence from user testing

Blasting the Myth of the Fold

Unfolding the Fold

Life, Below 600px

Debunking the “above the fold” myth

Below the Fold: Why Scrolling Isn’t A Bad Thing

* The fold is the viewable area of a web page seen by a visitor upon first landing on the page, without having scrolled. The concept comes from newspaper design. Since newspapers had to be folded in half to fit in racks or on newsstands, the attention-grabbing headlines and photos had to be placed “above the fold” to entice people to pick up the paper.

Labels: , , , ,

Friday, January 08, 2010

What I use to create enews.org and related websites

A drive-by reader sent me an email today months ago after seeing Mark & Velma’s Hitchin’ Party picured on a roundup of “30 Green Websites” on TutorialBlog. I replied via email, but then thought I might as well post it here too.
Found your website by accident while searching for other things.

First off, I am overly impressed with all your efforts under enews.org! As a web services manager of many years gone by, I’ve been trying to spend more time for myself and my wife putting together little jewels like http://markandvelma.enews.org/. I’m not looking to start up any kind of consulting gig. I just want to have some weekend fun geeking out on some web goodies to kinda kinda combine a lil’ blogging and a lil’ photo collections of our trips to like Tuscany, Germany, San Fran, and the like.

I’ll admit to you that I’ve been looking at some of your source code under enews.org trying to determine what tool(s) you’ve used to put it all together. Besides movabletype and PixelPost, you’ve succeeded in keeping is all a secret. I did get a chuckle out of the witty repartee of ‘Powered by web geekery and strong coffee’ !

Would you be willing to share some of your secrets behind a project like http://markandvelma.enews.org/ & http://markandvelma.enews.org/party.html

My reply:

The original Hitchin’ site on http://markandvelma.enews.org/ was built with Photoshop and Dreamweaver, and uses Lightbox2 for the photo gallery. I was intending to power it with WordPress but I didn’t have enough time before the wedding to set it up, and I haven’t had the time or impetus since, although I still intend to convert the whole mini-site to WP some day, so Velma and I can use it as a singular place for posting family news and pictures and stuff.

The Holiday Gift mini-site we put up there in December 2008 was also created with Photoshop and Dreamweaver, and uses a customized version of a JQuery-powered unit called the Coda Slider.

As you saw, I use Pixelpost for my photoblog. I like Pixelpost a lot and I’ve been trying to find time to upgrade to a newer version so I can start putting photos up again. I created a custom template for my photoblog using, you guessed it, Photoshop and Dreamweaver. There are a couple worthwhile WordPress photoblog plugins which I may consider using instead, but I really like Pixelpost, so I’m not wholly interested in moving from it until a better alternative comes along.

The rest of enews.org was cobbled together a few years ago using Photoshop and Dreamweaver for the portfolio page and home page.

The blog is powered by Blogger and uses a slightly tweaked version of one of their standard templates, although I host on my own server, instead of on blogspot.com. I’ve always like Blogger but it’s not customizable enough and the Google team develops new features mostly for the blogspot.com customers and the self-hosted folks like me get left out. I installed Moveable Type a few years ago and fully intended to switch to it, but ran out of time. Later I decided WordPress was overtaking it in terms of development and add-on support, so I decided I’d use that in future. But I still haven’t finished converting it, so it’s still Blogger for now.

I’ve been working on a huge redesign of everything on enews.org, to make it all finally look the same, but I keep getting inturrpted by things like contract work. Since that pays the bills, my side projects go on the back burner for another month or two at a time. Oh well. Things could be worse, right?

It currently is just Photoshop, Dreamweaver, JQuery, and Coda Slider, but it’ll be converted to WordPress once I’m done formalizing all the templates, which are still in development and haven’t been optimized yet.

I heartily recommend leveraging the many, many, many services and technologies that keep emerging that allow hobbyists like us to do these sorts of fun personal sites faster and easier than ever before. There are so many of them, with varying offerings, it’s impossible to recommend just one. But since you mention you interest in putting up photo collections and blogging in a family context, there are a couple I’ve been impressed with: Vox and Kinzin (I saw another one recently I liked even more, but I can’t remember the name). The thing about these two that a lot of people like is the ability to manage persmission so only invited guests can view your vacation photos (for example). You can do this with WordPress plug ins too, btw, you just have to install an add-on or two.

Labels: ,

Thursday, October 22, 2009

Thursday Top 5



Jetsons Theme Song Extended



Lost Parody #3: Harry Potter
I figured Jenny could appreciate this. [via Jason A]



Ryz
Design a shoe; if the community likes your design, it might get produced. [via Jenny]



Sub woofers. Lol.
[via ihasahotdog]

An epitaph for the Web standard, XHTML 2
I just got used to coding strict XHTML and, wouldn’t ya know it, now I gotta switch again. Well, HTML 5 is pretty promising, so it should be a good thing.


The weekly Thursday Top 5 lists the five most notable, interesting, funny, outrageous, cool, or simply strange things of the week. It is intended for distractionary purposes only. Do not take orally. If ingested, seek a doctor’s advice. If you like it, share it with others, or check out the long list of previous entries.

Labels: , , , , , ,

Wednesday, May 13, 2009

Updated a couple posts

I updated these two popular posts yesterday. Just thought I’d drop a reminder here in case anyone’s on the lookout for these sort of resources.

Labels: , , , , ,

Wednesday, January 14, 2009

Job boards for designers and web developers

List updated May 12, 2009

I’ve been collecting this list for a while, in anticipation of having to use it one day. That day’s fast approaching here, so I thought I’d publish the list.

Here are all the job search sites I know of that cater primarily to the creative and design communities, plus the tech / online media sector. There are a few other job-related services thrown in too, toward the bottom of the list.

As an aside: I was rather disappointed that the hiring reps at a former employer (in the tech industry), were not aware of most of these. When I was looking to hire seasoned design talent and was getting utter shite filtered to me from HR, I had to give them most of these so I’d have some decent portfolios coming in.

Coroflot
http://www.coroflot.com/

37Signals Job Board
http://jobs.37signals.com/

Authentic Jobs
http://www.authenticjobs.com/

Crunchboard
http://www.crunchboard.com/

Krop
http://www.krop.com/

Fresh Web Jobs
http://www.freshwebjobs.com/

Just Creative Jobs
http://www.justcreativejobs.com/

Metafilter Job Board
http://jobs.metafilter.com/

Slashdot Job Board
http://jobs.slashdot.org/

AIGA Design Jobs
http://www.aigadesignjobs.org/public/default.asp
From the AIGA / American Institute of Graphic Arts.

Elance
http://www.elance.com/

AlleyInsider Job Board
http://jobs.alleyinsider.com/

ArtyPapers Jobpile
http://artypapers.com/jobpile/

Boxes And Arrows Job Board
http://jobs.boxesandarrows.com/jobs

CSS Beauty Job Board
http://cssbeauty.com/jobs/

Hire an Illustrator
http://hireanillustrator.com/v2/

Djobber
http://djobber.com/
[thanks to commenter mick]

Web Developer Jobs UK
http://www.webdeveloper-jobs.co.uk/
[thanks to commenter matthew]

Job Thread
Offers posting your job openings to multiple sites.
http://www.jobthread.com/

JobCoin
Publishers can get paid for hosting job boards.
http://www.jobcoin.com/

Emurse
Resume hosting service.
http://www.emurse.com/

Jobamatic
Job board implementation for online publishers.
http://www.jobamatic.com/a/jbb-static/home

JobBazaar
Hosting service.
http://www.jobazaar.com/

OpenSourceStaffing NEW
http://www.open-source-staffing.com/
Developers and programmers: Apache, Drupal, Joomla, LAMP, Linux, MySQL, Perl, PHP, Plone, Python, Ruby on Rails, Samba, and iPhone apps, among other technologies.

TwitterJobSearch NEW
http://www.twitterjobsearch.com

Style Apple Job Board NEW
http://www.styleapple.com/public/jobboard.php

Ars Technica Jobs NEW
http://jobs.arstechnica.com/

Sitepoint’s “Looking To Hire” Marketplace NEW
http://marketplace.sitepoint.com/categories/looking-to-hire
Looks like mostly freelance and junior- to mid-level positions. No surprising, since that seems appropriate to Sitepoint’s target audience.

Read/WriteWeb Job Board NEW
http://jobs.readwriteweb.com/
Mostly developer/programmer listings.

Ajaxian Job Board NEW
http://jobs.ajaxian.com/

SearchWebJobs NEW
http://www.searchwebjobs.com/

Freelanceswitch NEW
http://jobs.freelanceswitch.com/
Mostly freelance jobs, obviously.

Smashing Magazine Job Board NEW
http://jobs.smashingmagazine.com/

CreativeHeads.net NEW
http://www.creativeheads.net/search.aspx

CreativePool UK NEW
http://www.creativepool.co.uk/employee/jobboard.php
For UK jobs.

devBistro Tech Jobs NEW
http://www.devbistro.com/jobs
Lots of IT and developer listings, sometimes a few design postings.

Evolt Job Board NEW
http://evolt.org/jobs
Not a very easy to use site.

indeed NEW
http://www.indeed.com/q-web-design-jobs.html
Aggregated search results for jobs from Monster, 37Signals, Dice, and many others.

Think Vitamin Job Board NEW
http://thinkvitamin.com/jobs/?job=69

jobs.wordpress.net NEW
http://jobs.wordpress.net/
Just WordPress-related jobs.

Web Designer Wall job board NEW
http://jobs.webdesignerwall.com/

DesignM.ag job board NEW
http://designm.ag/jobs/

Wired job board NEW
http://jobs.wired.com/

Mashable job board NEW
http://mashable.jobamatic.com/a/jbb/find-jobs

Programmer Meet Designer NEW
http://programmermeetdesigner.com/
Looks like mostly freelance gigs.

Behance Network job list NEW
http://www.behance.net/Job_List

Design:Related job board NEW
http://www.designrelated.com/jobs

Creative Hotlist NEW
http://www.creativehotlist.com/

FWA (Favorite Website Awards) job list NEW
http://www.thefwa.com/?app=aboutus&id=30
Unfortunately, since the site is all Flash-based, in-page keyword searching via your browser is impossible.

The Designers Network job board NEW
http://jobs.designers-network.com/
International jobs.

Web Freelancers NEW
http://www.webfreelancers.com.au/
For Australia and New Zealand.

Web Directions Jobs NEW
http://jobs.webdirections.org/
For Australia and New Zealand.



Agencies

Creative Circle
http://creativecircle.com
[thanks to Kim and Velma]

Accolo
http://www.accolo.com

24seven
http://24seveninc.com

Filter Talent
http://www.filtertalent.com

Creative Group
http://www.creativegroup.com

Aquent
http://www.aquent.com

Artisan Creative NEW
http://www.artisancreative.com
They work mainly with creatives.

Emerging Blue NEW
http://www.emergingblue.com

The Talent Factor NEW
http://www.thetalentfactor.net
Agency with a focus on technology companies.



Suggestions?
Know of any I missed? Leave a comment and I’ll update the list.

Labels: , , , , ,

Friday, January 02, 2009

What music do you write/code to?

My friend Jason can’t listen to music or anything when he’s coding. When I worked at Download.com, lots of editors and developers wore headphones and listened to music as they worked. I don’t know what they were listening to, but it was quite prevalent (and made for a very quiet workplace). Then again, when I moved to another group just 50 feet away on the same floor, almost nobody seemed to listen to music or wear headphones as they worked.

When I’m writing or coding, I like to listen to music. But I’ve found it very hard to concentrate on writing, editing, or reading words when the music has lyrics. It seems the language part of my mind has trouble concentrating on the words I’m trying to work with if it’s hearing other language in the background.

Velma just walked into the room and said something to me as I was typing that last sentence, which reminds me of another way language can totally derail my train of thought when I’m writing. But more about that another time : )

I find it a lot easier to write or code to instrumental music. When I want to be energized I often listen to up-tempo drum and bass or something, but when I really need to concentrate I usually switch to classical. This seems especially necessary when I’m trying to read and digest something difficult to understand, or I’m working on a particularly tough bit of code that just won’t work right.

Most of the time, though, rock music with lyrics playing in the background doesn’t seem to have much effect on my ability to concentrate on other tasks (it seems reading and writing are the ones affected most). I’ve worked this way for so many years (since 6th or 7th grade, at least), it seems I’ve become accustomed to it. And, fortunately, I’ve become aware of my limitations too, which is why I’m glad there is still a classical radio station in the Bay Area.

I’m curious whether other people have similar or different stories. Please comment!

Labels: , , ,

Thursday, December 04, 2008

Thursday Top 5+1



Prop 8, the Musical
Gay marriage will save the economy. [via Aaron]



Design Coding
By the Poetic Prophet (aka the SEO Rapper). [via Ynnej]



“Atheism Song”
“Put away your fakeyism, here comes atheism.” Sung to Adam Sandler’s “Hannukah Song.” [via BoingBoing]

The Cartoon Network rickrolled the Macy’s Thanksgiving Parade
Video after the link, since there was no way to embed.

Augmented Reality
This interactive company figured out a way to insert a digital character into live video using a webcam, a small piece of paper, and Flash.

The original Indiana Jones
Otto Rahn and the temple of doom.

Labels: , , , , , , ,

Thursday, November 27, 2008

Thursday Top 5



45 Beautiful Motion Blur Photos



As if being a sports mascot wasn’t bad enough

History of the browser user-agent string
Aaron Andersen explains one of the many reasons why web developers get grumpy.

Blogging from 25,000 feet
Virgin introduces in-flight Wifi.

Holy zeppelin!
Airship Ventures offers rides over the Bay Area in a real zeppelin, taking off from historic Moffett Field.

Labels: , , , , , , , ,

Wednesday, October 01, 2008

Browser testing your web design

An important part of web design and development is getting the pages to display nearly identically in all the major browsers (and minor ones too). These online services allow you to perform cross-browser and cross-OS compatibility tests.

Litmus (formerly SiteVista)
Definitely my favorite. Excellent interface and functionality. And unlike most others, Litmus offers full-length screenshots of the page(s) you’re testing. Sign up for the free account which lets you try on two browsers. You’ll like it.
www.LitmusApp.com

IE NetRenderer
As a Mac developer, I often use this free German site to do quick tests in IE. Does not do full-length pages like Litmus does.
meineipadresse.de/netrenderer

Browsershots
Have not tried this yet, but they have an impressive list of OSes and browsers.
www.Browsershots.org

Browsercam
Have not tried this.
www.Browsercam.com

CrossBrowserTesting.com
Have not tried this.
www.CrossBrowserTesting.com

BrowsrCamp
Have not tried this.
www.BrowsrCamp.com

Labels: , , ,

Thursday, June 05, 2008

Thursday Top 5

Black balloons
Awesome spot from We Can Solve It.



HEMA
European retailer HEMA put up this innovative site to announce...er, something. I don't speak Dutch. [thanks Jason]
producten.hema.nl

Instructables: Harry Potter wands
Make your own with painted paper and hot glue.
www.instructables.com/harry-potter-wands

Bill Scott
Former Yahoo Bill Scott (he's now with Netflix) gave this talk at CNET about a year ago, but I was glad to watch this video again for a refresh. If you're a web developer or user experience designer, it’s chock-full o’ really good things for for you to know. His personal website is very, very useful too, and if you're not already aware of and using the YUI Interface Library, it's a must-see.
Video presentation: http://video.yahoo.com/watch/1285664

How to Enjoy Sushi
Now that I've watched this awesome instructional video, I'll be prepared to visit Japan!
www.youtube.com/watch?v=6C5SbdCPmck

Labels: , , , , , , , , , , ,

Thursday, October 04, 2007

Thursday top 5 + bonus 5

I didn't have time to post a Top 5 last week, so here's a double dose.

Statetris
Because games should be educayshonal.
www.mapmsg.com/games/statetris/usa/

The Black Sabbath Show
I think every 1970s metal act should've had a cartoon.
www.youtube.com/watch?v=hYPH3fhojM4

Desktops for true web dev geeks
If you don't know what a div tag is, you're not going to get these at all.
www.happywebbies.com

Fart in the duck
Oh, those wacky Dutch.
www.youtube.com/watch?v=iRUGGy9RVrM

Robots playing Gnarls Barkley's "Crazy"
"LEV the thereminbot and his newly-built pal thumpbot play "Crazy" with help from a 20-year-old MT32 synthesizer. OK, Lev's a bit out of tune, but hey, ROBOTS..."
www.youtube.com/watch?v=19RJEnNUg1I

"Assassinz"
New funny stuff from the Duncan Bros.
www.youtube.com/watch?v=AAHKRWdl6z8

"BBS: The Documentary"
Anybody remember dialing up to BBSes before the Web? I guess everybody needs a hobby: Some guy spent four years filming a documentary about BBSes.
www.bbsdocumentary.com

"Planet Earth"
This is a spectacular series from the BBC. I will second my friend Olya's recommendation too: Get the BBC version featuring David Atetnborough as narrator, not the Discovery Channel version featuring Sigourney Weaver. I mean, I like Sigourney and all, but she ain't no Attenborough. It's available in HD btw.
www.amazon.com/Planet-Earth-Complete-BBC-DVD/dp/B000MRAAJW

A flickr group for Robert Heinlein fans
Okay, so I'm a dork, but I started a group on flickr.
www.flickr.com/groups/heinleinia/

The Green
I wish I had cable so I could watch programming like this. In a poll ten years ago, almost 80% of Americans said they'd call themselves environmentalists. Yet most people do very little to make the environment better or raise awareness. Programming like this makes me optimistic.
www.sundancechannel.com

Labels: , , , , , , , , , , , , ,

Thursday, September 13, 2007

Two upcoming conferences



I'm looking forward to these two conferences coming to San Francisco next month: An Event Apart happens October 4 and 5, and the Voices that Matter Web Design Conference happens October 22–25. I'll be heading to both.

Labels: , ,

Tuesday, August 28, 2007

Mobile Web Design



Cameron Moll has published a new book titled Mobile Web Design. I don’t have it yet, but based on his previous work I'd bet it's pretty good.

Despite the name, this book is not just for designers. You may want to check it out if you are in any way part of the development of content for mobile devices. There's a general dearth of info available on mobile web development, so it's probably a good addition to your library.

It’s only available as a PDF download now, and I’m not sure if it’s going to bookstores and Amazon later or what, but I’d be willing to bet it will. However, you can get it cheaper as a PDF now ($19), and the first 599 buyers will entered in a drawing to win an iPhone.

There’s a sample preview available too.

UPDATE: There's also a new article today on A List Apart on mobile web design in the new age of the iPhone and Mobile Safari.

Labels: , , , , ,

Thursday, March 01, 2007

Thursday top 5

A Band on Fire
Arcade Fire in New York magazine. Includes some pretty cool photos.
» http://nymag.com/nightlife/features/28509/index.html

The Devil in the White City
I’ve been enjoying this dramatic history about the 1893 World's Fair in Chicago and the associated story of H.H. Holmes, who was perhaps one of the country's first serial killers. Author Erik Larson, like Simon Winchester, proves that historical books don’t have to be snores.
» tinyurl.com/yufask

Picnik
This beta site describes itself as "online photo editing made fun." It's possibly the best online tool I've seen in two years. Really excellent.
» www.picnik.com

Styling <form> widgets
For the web dev geeks like me.
» www.themaninblue.com/writing/perspective/2004/04/28/

WOXY
The legendary internet radio station.
» woxy.lala.com

Labels: , , , , , , ,

Friday, January 12, 2007

Designing for actual browser sizes

Update December 2008: Thomas has published a follow-up article, “Browser sizes revisited.” The practical advice is: Design websites to be no wider than 980px. The reasons: Even though most people are browsing on 1280x800 monitors these days, they keep their browser windows minimized to a width between about 1200 and 1300 pixels. The other reason is that mobile phone web browsers all use 980 as their default width.

Original entry: Thomas Baekdal has published a report that fairly definitively puts to rest the notion that there are a lot of people still using 800x600 as their monitor size and therefore that websites should be narrower than 800 pixels.

I've been saying for more than three years that the data show that 1024x768 has been the norm both worldwide and in North America, and the number of people using that resolution has not surprisingly increased a great deal in those three years. Actually, there are a lot of people using much larger monitor resolutions these days.

The report is will researched, and the user types and geographical breakdown is broad, although I wish there was a slightly larger number of actual domains that were used for testing. But at least the type of sites used — primarily fashion sites for teens, men, and women — would presumably cover a fairly accurate and broad age range.

Labels: , , ,

Saturday, November 04, 2006

Gettin' hitched, part 1: branding your wedding

After Velma and I decided to get hitched, I started thinking about some of the cool things we'd get to make as part of the process, like invitations. I also harkened back to a post I'd seen a year ago on a blog by a designer whose work I admire, Jason Santa Maria, who had made a website for his wedding and had posted similarly about "branding" his wedding and the associated collateral material he'd made.

I googled it to find the post again, and was duly re-inspired. Jason's an excellent designer with an extremely good sense of how typography works on the web and in print. He's responsible, among other things, for last year's excellent redesign of A List Apart.

Over the ensuing months, I had lots of ideas about what we could do, and kept notes in the little Moleskine notebook I carry everywhere.



From the very beginning we called it a "hitchin'." I'll get into the choice of wording a little more in a later post about the whole process of deciding to get married, but suffice it to say: it wasn't odd to us at all to call it "Mark & Velma's Hitchin' Party," since we'd already been asking each other for months if we really wanted to get hitched.

The save-the-date

Being the excellent event planner that she is, Velma had worked back from our October 7 hitchin' day to select a date to send out the save-the-date announcement.

Usually for a design project I have at least a few days to sketch ideas and browse through some magazines or something for inspiration. But it turned out that I had about a day to plan and execute the save-the-date design, and Velma starts getting antsy (read: annoying) when I let a deadline slide by much.

So, since I had a reasonably good idea of the design style I wanted to project (a little quirky, a little pop-art, and somewhat organic in texture), I just threw something together in about an hour and a half.

The save-the-date postcard was never actually a printed postcard, since we emailed it to everyone, and called the small handful of people who we couldn't email. This has several benefits, such as: postage savings (none), faster delivery, cheaper to produce (free), and the ability to use a totally custom design.



So, while it was never actually physically printed, the postcard intentionally looked like a printed piece. I used real paper for a textured background, and made the type look like it was actually printed on the paper. The stamps look real, down to the authentic postmark, but in reality every single item on the card was composited in Photoshop. I thought it'd be clever to use the "I love you" stamp, and then threw in a twist by using a postmark from Estonia instead of a U.S. one.

The save-the-date not only introduced the M&V circle monogram I used as the mainstay of the brand, but was for some people the first time they heard we'd decided to get hitched!

The website



This was going to be my favorite part, but also the most time-consuming. I'd originally planned to create the entire site as a Movable Type blog so Velma and I could both administer posts, and so visitors could comment right on the site. However, it was already going to be a massive undertaking to just design and build the entire site in a little over two weeks, plus I wanted to do it as an entirely CSS-based layout. So I shelved the MT blog idea and decided I could revisit it when it was all done to see if I had time to convert the static pages into dynamic MT templates. It turned out I didn't.

After the save-the-date postcard's somewhat rushed beginnings, this would be the first item to have a full-blown design, and it would serve as a visual touchstone for the rest of the collateral items to follow, such as the all-important invitations. So, as with any design project, I needed to do some sketches, consider typefaces and styles and colors, and seek inspiration from other people's designs. I also needed to collect and create visual assets like the M&V monogram, the type-based logo and its shield, the green wallpaper pattern background, and the little print-inspired flourishes.



At the same time, Velma was outlining and writing most of the content. When she handed it over to me it was about 85% done. I reorganized a few things to make them work better in a website environment, edited some things and injected a little more strange humor here and there, and started styling some of it for coding it into xHTML. I usually begin in xPad or TextEdit, inserting a few tags here and there, mostly for styling the fonts, and inserting HREFs if I have URIs already or by looking them up in the browser on the fly.

I iterated a few designs before I settled on one that I really liked. And it was a good thing, because I was beginning to run short on time. Luckily, I'd decided to take a week off from work because I was seriously exhausted from the pace at work during the Webshots redesign process, so I had a week I could dedicate to designing, building, and testing the website.



I chose a lively color scheme of bright greens and light yellow to invoke our nature-inspired theme and to emphasize our somewhat nontraditional take on the concept of a wedding. I counterbalanced that with black and red as more traditional print and ink colors, and chose old-style wood type fonts to give a somewhat retro old-timey feel. I used Georgia for all the HTML text, which is a gorgeous serif font even on the web (most serif fonts are atrocious on screen), and I used several gothics and slab serif fonts to invoke a feel of artisan printing techniques. Last but not least, the tiny flourishes and the minute lines and dashed lines are in orange, as a nod to my bride's hair color and to throw in a fall color for our autumn wedding. The orange thread we used to stitch the invitations later was not just a coincidence.

After finalizing a design template that would be generally unchanged for most pages, I created some header variations for the content area in the center. Some of the pages needed simple headers and some needed headers with sub-headers. I used HTML text for the headers in keeping with good web-standards techniques, and spruced them up by bookending them with graphic flourishes.



After the basic page template was designed in Photoshop, I created the Photos, For Out-of-Towners, and Gifts pages next, since their content would vary most from the other pages, which are largely just text pages with nice styles and spacing applied. I knew I wanted to make something special for the Photos page, but that it had to be pretty fast and easy to implement, and needed to be updatable later with wedding and honeymoon photos. I liked what Jason did on his site but I didn't want to mess about in Flash and didn't know what he'd used.

I decided to experiment with Lightbox, a fairly new and very cool JavaScript library that seemed like it would be fairly pretty easy to implement. I hoped, anyway. Turned out it was easy, and I had our photo gallery up and running in an afternoon once I started building out the xHTML pages.



I spent most of the weekdays on my week off building the xHTML framework for all the pages and the CSS to make it all look good. I use Dreamweaver to do all this stuff, since it just goes about a million times faster than hand coding used to. During the process of making a fairly complex three-column CSS-based layout without tables, I relied heavily on Dan Cederholm's excellent book Bulletproof Web Design, which I can't endorse highly enough.

Most astonishingly, I was able to build a site for the first time that validates for xHTML 1.0 Strict instead of just Transitional. I rather surprised myself by being able to do it.

Later I'd enlist the help of Jason Ables, who gave me his handy little PHP script for the RSVP page. And while I spent an hour or two looking into Perl- and PHP-based scripts to create an interactive poll for our Surname Survey page, I simply ran out of time and had to use a simple "email us your suggestion" link.



I spent a lot of time and effort on the website, and I'm very happy with how it came out. Being the perfectionist that I am, there are of course a few minor things I would have done differently or better, given more time, but all in all it came out about 98% perfect, which is more than I can say about almost any client project. So I'm very pleased with it.

The site was recognized by a number of CSS galleries, sites that serve to inspire other designers and to showcase exemplary use of design and web-standards coding.



The invitations

I'm a pro at doing invitations, I've been designing them for all kinds of events and parties for over 15 years. But this was actually the first time I'd designed a wedding invitation. Designers love to show off how clever they are when making their own wedding invites, and I'm no different in this regard.

Given more time and money I would have made them exceptionally elaborate, with letterpress printing, tipped-in sheets, and other fancy printing techniques. But it was actually more important to make them by hand for two reasons: I wanted to show the personal care and effort we were making with each one. Also, it was important to us to plan and execute a wedding that was fun but not incredibly expensive. It would be against our principles to spend $50,000 so frivolously when you can have a wonderful, memorable time for a fraction of that cost.

So I turned to long experience with designing great-looking collateral materials for nonprofits who never have any budget for printing. I've become somewhat of an expert at this, and I called on all that experience to create a design that was totally professional looking but also totally unique. To top it off, we assembled the entire thing ourselves and probably made and mailed them all for less than $300.



I used a ream of paper I'd had left over from a client project about eight years ago. I used another ream of paper we'd picked up at a surplus store for about $2 (retails usually for about $30). I bought a matching ream of cover stock for the CD inserts and the RSVP postcards, and a box of envelopes.

Velma carved the block designs for the front leaf pattern from oak leaves she'd collected. Velma and I did the block printing in one evening, and by morning they were all dry. I designed the cards in Adobe Illustrator and intentionally made them fit two-up on a normal sheet of letter paper, so we could print everything in-house. The only exception was the RSVP cards, since I couldn't get the heavy card stock to feed through the printer. Instead, I took those to Kinko's and they were copied and cut in about ten minutes.



I hand-cut and folded all the other pieces and then our friend April assembled them while Velma sewed the orange stitch in the spine using her sewing machine.

We stuffed the 70 or so invites ourselves and Velma hand-addressed them, and affixed the special stamps I'd ordered from Stamps.com a few weeks earlier. The stamps turned out to be the most costly part of the whole invite, probably around $150 or so — one on the outer envelope and one on the RSVP postcard inside. The rest of the invite's printing cost nothing since we did it all in-house. Needless to say, the design was free : )



I'm extremely happy with the way they came out. They're very distinctive and definitely match our personalities, and they were a collaborative effort through and through (even if Velma felt for a while like I was hogging all the work).

The rings

I don't know where Velma came up with the idea of getting tattoo rings, but I liked the idea instantly. I've been considering a tattoo for a couple years now, and I was pretty close to getting one last winter, but never really got around to it. Actually, until two years ago, I'd never really considered it at all. I didn't dislike tattoos, but was never that interested in them either. At least not having one permanently on me.

But that's one of the reasons I liked the idea of tattooed wedding rings. Its permanence. After all, it would be a strong statement of our commitment to say to each other that we'd permanently wear our wedding rings.

We made sketches of patterns over several weeks, trying to come up with a design that would be personally meaningful and also simple enough to do in such a small space. We played around mostly with ways to try to entwine the letters M and V, but never came up with one we were both enthusiastic about.

Nearing the hitchin' date and needing to decide on something, I took a black felt tip pen out of my drawer and sketched a simple leaf on my finger — just three lines — and showed it to Velma. We had our ring design. The leaf is a significant symbol for both of us as environmentalists and lovers of nature, and the design also happened to be aligned with the design of the invitations and website too.



The other benefits, by the way, are that you never have to worry about losing your ring, and tattoos are a lot cheaper than diamonds ; )



The favors

I had all sorts of ideas for wedding favors I wanted to make, and was probably being way too ambitious considering we didn't have months and months to plan and execute them all, and some of them would've taken a considerable amount of time (like mini photo books).

At some point Velma remembered a post I made in January about a website where you could print custom messages on MMs. She'd also come across a similar site where you could personalize the printing on Sharpie pens. We'd half-jokingly discussed filling in the ring tattoos with a Sharpie at the ceremony, since we'd have to get the tattoo a week before so it'd have enough time to heal.

We were running low on time, and the Sharpie website didn't have anything saying how long it took to fill and ship orders, so we decided to just get the MMs, which we could get with time to spare.



We'd made a huge playlist of awesome songs to play on an amplified iPod at the park, and I wanted to make DVDs with several hundred songs for everyone, but Velma was concerned that some people would want a normal audio CD to play in their cars. That, and the fact that we had less than a week to go at this point, limited us to a playlist of 22 songs on about 75 audio and MP3 CDs we burned over the next few days.



I made two special insert cards that showed which was an audio CD and which was an MP3 CD, and had the song titles and artists on the back. For any guest who didn't get one, we have some extras and I can mail you one, or you can stream Volume 1, a bunch of extra songs we played during the day that didn't fit on the CDs, using this handy little player I found. And if you're savvy enough, I bet you can figger out how to download the ones you like.

The photo & recipe book

This part's yet to come, so I'll update the post when it's actually finished : )

Update: Regarding the oak-leaf motif used throughout the design of our Hitchin' website and invitations:

I recently learned (from a post by J.K. Rowling, interestingly) that the Oak is the Celtic tree associated with the birthdays of both Velma and myself (June 10 through July 7). I'd like to say that I'd pre-planned this symbolism in the design stage, but I didn't. The use of oak leaves was connected to our selection of the Oak Grove picnic area in Huddart Park, and was symbolic to our overall love of nature and fondness for oaks in particular.

But the Celtic birthday association is a pleasant bonus.

tags: hitchin', Velma, personal, friends, music, design, web design

Labels: , , , , , , , , , , , , , ,

Thursday, August 25, 2005

Weekly Standards spotlights Download.com redesign

The Weekly Standards is a website that features large corporate sites that have been redesigned using web standards. They approached us for an interview-via-email and luckily our new CSS wizard Greg Penhaligon took on the task of writing a full article [Update: The Weekly Standards went down for good, but you can still view this article on Archive.org] for them. A few of my initial responses to TWS's interview questions are also included as pullquotes (the last paragraph, which begins with "My advice for other designers..." is also a pullquote from me, but they style it incorrectly so it lacks an attribution. I've let them know and it might be fixed by the time you look).

There's been more feedback on the web about the redesign, and I've been collecting links to all the various places where people have commented. I'll post a list soonish.

Labels: , , , , , ,