Cabinet

Work & Play

In a little under two weeks, what began as ‘research’ for my next big project at work turned into this. I began testing layouts for a new website to be made for the organization I’m volunteering at, and I’m not sure at what point exactly I stopped sleeping and shaving. It definitely wasn’t on my list of things to do, and I actually thought I was done with the web for a while. Regardless, it’s here now, hopefully unchanged for a long long time. I’ve learned a lot in the process, and I’ll get to that in later posts, but for now I just want to share some of the resources I’ve used. I want to make it clear that much of this is all new for me, and the result you see here is thanks to a ton of people answering questions, posting guides, and otherwise holding my hand the entire way.

First, the basic structure that sparked my interest in the first place, is found at Typogridphy. The code and css is free, written by an eighteen year-old from the UK. His mark-up is so clean and clear, that even I could understand enough to alter it to my needs. A feature that really intrigued me about Typogridphy, that I wasn’t able to resolve in the end for this site, was ‘creating vertical rhythm.’ Basically it means trying to achieve a baseline whereby everything on the page aligns. I ended up giving up on that after the first week, because I just couldn’t get the math to work. If I knew a week ago what I know now, I think I could’ve done it, but at this point I’m over it. It’s a goal to consider for the upcoming site though, so if only for that, I’ve validated my time spent on this. For myself anyway, my boss has no idea. Even though I ended up changing a lot of the css, I wanted to give credit where it was due. Also the guy is eighteen. I was probably buying flowers for a girl or some shit like that at eighteen.

The rest of my html questions were answered by visiting the World Wide Web Consortium, which reminds me of this, but is unrelated. With just the W3C site alone, you can teach yourself how to build a site in html and css.

Then, I use ExpressionEngine to manage my content. EE lets me set everything up at once, and I don’t really have to think about code again until I pull some stunt like this and redesign everything. Actually, even if I did do a redesign, I wouldn’t have to touch anything EE-specific if I really didn’t want to. Basically it bridges a lot of gaps between design and functionality, and everyone loves bridges. There are a lot of great things said by others who’ve already drunk the Kool-Aid™, so I won’t say any more on that.

Other sites I found helpful were Web Design+ (same guy of Typogridphy), Blind Text Generator, and Textism. Of course, I looked at a lot of different page sources to study how real developers were structuring their code, and achieving certain effects. I looked a lot at Subtraction.com actually, and the article written by the nice man who actually coded it.

So, with this new website, I really just hope to use it as a space to share things, and eventually last as an archive. I planned the column on the left to hold all of my own photography, writing, or whatever. The right column will hold anything I’ve found and don’t want to forget, whatever the reason. We’ll see how things go, but I’m pretty hopeful that I can keep up with something like this at a relaxed rate, now that I’ve spent the time properly building up the structure to support it. Like I’ve mentioned before, I really had to teach myself a lot through this process, and I know there are a lot of mistakes. I appreciate any criticism and suggestions, and I hope to finally get some sleep now.