I attended Startup Weekend in Boulder, Colorado this past weekend and I’d like to encourage everyone and anyone looking to start any kind of company to attend one if they bring the event close to your town.
The format of the weekend is like this: you gather together Friday night, meet awesome people, propose ideas, gather enough support for your idea (in terms of human capital), and then spend the rest of the weekend assembling your idea.
On Friday night there were roughly 100 people in a small lecture classroom on CU’s campus. All of them are smart, motivated, tech-focused people, the kind of people you always hope you get a chance to work with, unless you’re already working for a startup of some kind, in which case, you probably already are. Everyone’s on Twitter and/or Facebook and/or every other social web service. Everyone reads the same people you read or knows someone you should be reading. Everyone knows the same current events on the web you know or knows something you should know. Some of them have flown across the country to attend.
I pitched a few ideas but ultimately decided to work with a small group that wanted to create a poor man’s content failover service for web sites that receive unexpected Digg/Slashdot traffic. We called it Hitsurance. By 11pm Friday night we had our idea, a name registered, and a dedicated server set up with a splash page and email submission form. I went home and crashed with my brain racing away on ideas well into the night. I woke up twice to write some notes. Needless to say, sleep was fitful.
We worked Saturday from 9 to 9 and got about half way there. We had a design, a logo, the basic premise for the demo fleshed out, a blog, SEO research completed, Google Apps for Your Domain acquired, a Twitter account, and some of the backend scripting in place.
All work and no play would be boring, of course, so part of Saturday the attendees spent time socializing, working, eating, and bouncing ideas. We had a short concert from local singer/songwriter Reed Foehl, which was unexpected and strangely appropriate. By the end of Saturday most of us were fried. I went home and crashed but again, didn’t sleep very well.
We returned Sunday and worked from noon to 7, finishing up as much of the demo as we could. We got the service working around 6:30pm with just enough time to eat and do some fine-tuning before the group demo session at 7. Our demo worked as expected and, dare I say it, the site and the signup experience look pretty sharp considering we started from nothing Friday night. As for the future of the service, my co-founders and I are still discussing it. It’s definitely a useful service and a win-win all around. Content producers keep their audiences going and hosting providers stave off potential server crashes, which makes the rest of their customers happy.
You can read about the other groups at the Startup Weekend re-cap. I think the Web2Splash idea is both cool and useful. I’m also interested in seeing the IMDB for Podcasts go forward. It would mesh really well with one of the ideas I proposed. If Jetrecord doesn’t take up all of my time I might contact Andy in the future.
Now how much would you pay?! If the whole experience of building a product over a weekend with good people is not enough, all the groups got to pitch their ideas and chat with Loïc Le Meur, Jeff Pulver, Guy Kawasaki, Eric Litman, and Stowe Boyd, each individually. Where else do you get a guaranteed chance to do that, especially with an idea you just came up with the night before? All for $40?
I had a great time meeting and working with everyone and to boot I got to use a few Perl libraries that I haven’t tried before.
Again, I highly recommend it to anyone thinking about starting their own company, especially one with a web focus. But any type of high tech idea is a good fit for this event.
Background Reading
Designing With Grid-Based Approach
My Approach
1. Determine Your Site’s Main Content
I’m using the epicenter design approach to create the site. In his seminars, Edward Tufte says the only thing that differentiates your site from anyone else’s is the content. Not the fancy graphics, not the layout, not the navigation. So I started by determining what my content is. What is this site’s raison d’être, if you will?
As it is, the text I write makes up the bulk of the content on this site. There are other items from time to time like screen shots and photos, but mostly, I write. Working from the inside out, if people can’t read the text of the articles, the design has failed. So I started with the type as the base element of my grid.
If this site was about photographs, I would have used photographs as the base element. If it was videos, I would have used those. Diagrams, diagrams. Illustrations, illustrations, and so on.
2. Let the Content Determine the Dimensions of the Grid
Having decided that I’m going to use type as my base element, I must determine the dimensions of the type. To do that, I have to make some decisions about the type.
First, it must be readable to me. I’m 34. I wear glasses when I’m on the computer. I don’t have a strong prescription, but when type is too small, I have to squint pretty hard and I find that annoying. I don’t like re-sizing text with the browser: also annoying. In fact, it’s enough to make me use the back button on a site with otherwise good content if the majority of the text is set below 11px.
I’m making an assumption, based on my content, that the people visiting my site are close to my age or younger. Therefore, I’m following this readable-to-me guideline because I can be reasonably sure that if the type works for me, it will work for the majority of people who visit this site. Younger eyes can read smaller type, usually.
What if I discover later my assumption is incorrect? Answer: I’ll redesign. Make a decision and move on. Without more information you can only go with what you know. Don’t agonize over it.
I went with 16px Georgia using a color of #3f3f3f and a line-height of 24px. After playing around I found this combination to be very pleasing. There’s no science behind my decision. (Well, if there is I’m unaware of it.)
The key property there is the line-height. 24px is the basis of almost every measurement on this site, vertically and horizontally.
3. Determine the Maximum Width of the Layout
Most sites these days are opening themselves up to work on larger screens. 1024px is a typical target. I went with 24px * 45, which is 1080px. Done.
4. Layout the Grid
The site must fit somewhere inside of that 1080px. I decided I wanted a content section on the left and a sidebar on the right. Just two columns. I also decided I don’t want to fill the whole screen from left to right. I like white space on the sides. How much white space?
I could set the columns anywhere on the 24×24 grid if I wanted. I decided instead to go with my pal, the Golden Section. Again, I just find it pleasing. 61.8% of 1080px is 667.44px, but let’s round up to 668px just because we can. So, the wrapping div for the site will have a width property of 61.8% and a max-width property of 668px. Why use the max-width property? I don’t want the reading lines to be too long.
What about Internet Explorer 6, which doesn’t support the max-width property? Answer: IE6 was released in 2001. IE8 is about to be released. To Hell with Bad Browsers! (Yes, I know hacks are available to make it work in old browsers. You’re welcome to use them. I have decided to move on.)
Moving on, within that wrap of 668px I still have to set two columns. Golden Section to the rescue again. The left content column is set to a 61.8% width and floated left. The sidebar takes up the remaining area on the right after applying a small 24px gutter between the two.
5. Everything Else
The top margin is 24px. My head shot at the top is 96×96, a multiple of 24. The sidebar text line-height is 12px, half of 24. The margins between elements is either 12px, 24px, or 48px. I’m sure you get the idea. Take the rest of the things you need to layout and look for a way to apply your dimensions in a way that makes sense to you and to the purpose of the site. That’s all there is to it.
Is everything perfectly aligned to the grid? Not really. A few things are out of place. I tweaked a few elements to make them more pleasing when following the dimensions didn’t make sense. As in all things, use your tools and rules and know when to deviate.
Also, I am not a typographer or graphic designer by training or trade. I just pick things up as I go. Take my advice with a grain of salt. And if you know how I could tighten things up, please say so.
Cheers!
