- Status: Retired
In August 2009, I decided to try my hand at freelancing/contracting. At the time, I decided to work under a business name. Hoever, as I worked with it, it started becoming clear that it would be better for me to work as an individual, for a number of reasons. So, I rebranded myself.
The Site Design
I really liked the notes on corkboard look that the Milo's Deli project has and I wanted something like it, but with the notes on corkboard more prominent than what I felt Milo's is. As I thought about designs and layouts, though, I came to the conclusion that the designs I was coming up with wouldn't mesh well with the amount and type of content I was looking to have on my site. I still wanted the feel that I thought the notes on corkboard conveys -- the stream of thought and notes taken during the creative process (regardless of what that creative process is). That led to an idea for a marker board style idea, but since I couldn't think of a way to make the screen look like a marker board and keep it consistent (primarily, I fail at creating realistic-looking metal for a frame, not to mention that I'm not really enough of an artist to make a realistic-looking whiteboard, since it's not actually completely white). While trying to find a way to do it, I came across a tutorial on how to make a realistic chalkboard image and was inspired. Between it and an article I found on how to make sketch-like images (after failing to find adequate icons for what I wanted on my site), I had an idea I could run with.
I'm not a big fan of using a large amount of images in site design. Images and image-based designs increase download times and have a tendency to break on very large or very small screens. When I'm creating a site for an audience that could view it on pretty much any extreme, I want it to be flexible enough that it still looks good even on those extremes. What resulted was a fun new CSS3 attribute: "background-size."
I think the idea behind "background-size" was the CSS trick of encasing an image (using the <img> tag) in a container, then setting the image to a percentage size of the container and the container a flexible-sized (percent or "em") measurement. Doing this trick automatically resizes the image based on the size of the container, which is in turn determined by the size of the screen. "Background-size" does essentially the same thing, except the image is the container's background. This allows the image to stretch or collapse to fit the container. It's still not a completed CSS3 spec, so I think there could be some improvements to implementation, but it's actually quite handy. As an added bonus, it's already supported by everything except Internet Explorer. IE is somewhat easily fixed by using a tiling background, instead. Unfortunately, it's not as elegant as the CSS3 attribute, but until IE9 becomes the dominent version of Internet Explorer, or unless I find out about some IE proprietary filter, it's what I'm stuck with.
Another fun point about the background is that it's actually composed of two different images, and a background color. The main background, which looks like a well-used chalkboard, complete with "gunge" from years of use, is actually a code-set background color with a semi-transparent "grunge" layer. Then, the not-fully-erased markings are layered on top, inside of a different element.
I absolutely love web fonts, and, by extension, services such as TypeKit. It's liberating to be able to complete the look of a theme without having to resort to image-replaced text. Somehow, I don't think Georgia, Times, or Arial would quite work to complete the look of chalk on a chalkboard Granted, I didn't use it for the body text, but I figured it'd be a good idea to refrain from doing so for the sake of my eyes and those of anyone who comes to visit.
You might notice a handful of icons around the site. Those are ones that I created specifically to go with this theme and for my needs, since I couldn't find a set that I liked that would go with the rest of the look and had the icons I needed (specifically, file type icons that diferentiated between OpenDocument Format (.odt) and Microsoft Word Format (.doc). Some time with Inkscape and some references for the icons I was looking for, and voila! A custom icon set!
I plan on refining the set and added more icons. Once I complete the set (with things I don't use, such as Facebook and Bebo), I plan on releasing it for download. If I'm lucky, it'll make it into Smashing Magazine, which would probably get me far more traffic than I could dream of otherwise (hey, I can dream, can't I?).
Under the Hood
To make updating easier, and to easily integrate a professional blog into it, the site is powered by the wonderful CMS, SilverStripe. In addition to the core, it uses the blog, document object module, and SWFUpload modules, and runs a custom theme that I built. While most of the site is just the basic page type, styled, the portfolio page is actually a custom page type (and technically, the Home Page is custom, too, but there's not much to its customization) that's based on SilverStripe's documentation tutorial for creating a custom page type. Once I build the contact form, it will be its own page type. jQuery will also power slideshow/image gallery combinations on the portfolio page.
I've also once again used CSS3 techniques for various aspects of the site. The big use is actually in the main and navigation backgrounds, which uses the "background-size" attribute. As an accent, the text also has drop shadowing applied to it, to make it "pop" more.
I haven't yet done anything special with the website itself, so my work with SilverStripe was nothing new and things I had already done before. However, that's not to say that I haven't learned things from working on the project.
Agile Development in Practice
I've heard a lot about agile development practices and how it's the latest (kind of) and greatest way of creating an application these days. The problem is, none of the people I've worked with are actually using agile development. Instead of rolling out small, incremental changes once every couple of weeks, they roll a number of changes into large version releases. Even in college (and in a college that prides itself on keeping updated, no less), it was the waterfall method that was taught.
In the interest of getting the new design up quickly, I ended up working in an agile style, which was quite refreshing. As I said, I was originally taught the waterfall method, which meant knowing exactly everything the final product will do long before a code file is ever opened. I remember my senior project following that method. We had so much paperwork that we could literally hand what we had over to someone who was never involved in the planning phase and after looking through the plans would know exactly what was needed for every aspect of the website. We had flow charts, use cases, pseudocode, the works. We even had test plans for aspects of the program that weren't even close to being implemented.
Now, that's not to say that an agile development environment doesn't have any of these things, or doesn't go through the development lifecycle, but the software development life cycle (SDLC) is done in smaller portions and multiple times throughout an agile project, for each increment of the development. While I'm not formalizing and writing out flowcharts or use cases for each portion, I do go over them in my head (since I'm the only one that would ever work on this site in the foreseeable future) and do testing before launching each piece. The result, I've found, is a more satisfying feeling, because each piece is its own entity. Once it's finished, it can be integrated into the existing system and implemented right away, instead of it just being perceived as another cog in a giant machine that feels like it will never be finished.
Fun with Inkscape and the GIMP
Because I couldn't find icons that fit with the look I was going for, I had to make my own. Enter Inkscape, the open source alternative to Illustrator. With the help of a tutorial to get me started (I'm more of a GIMP person when it comes to graphics, so I wasn't hugely familiar with Inkscape), and some playing with its options, I soon had some icons for the site. The only issue I had was that Inkscape's native save format is .svg, and its support for .png doesn't seem to allow for trimming and the use of transparencies, at least that I know of. So, off to the GIMP (the Gnu Image Manipulation Program) for trimming, resizing, and converting to .png images with transparencies. I liked it so much, I even did the same thing to make the horizontal rules for the site.
All in all, I'm proud of how this project turned out. I think the chalkboard look is creative and along the lines of what I was going for. I got to play with more CSS3 stuff, TypeKit, and SilverStripe, all of which I thoroughly enjoy.