Web

coilLogo
coil_hero_laptop

Back in November, I had the honor of working on the hiatus redesign of Coilhouse.net.
I also did the illustration on their goodbye post.
Back then, I promised you I’d make a more proper post about the redesign, so here it is!

My dear friend Nadya Lev had been designing the site, and ended up initially asking me to provide some CSS wizardry.
It was to be the last hoorah for this much celebrated magazine and blog, before it went dark for a few years. Even though I started just doing fill in CSS work, I ended up being development lead and also helping Nadya with a bunch of the design decisions.

The site was particularly challenging because it had originally been designed to be quite narrow, and all the images in the archive were less than 400px wide! I was concerned that such a narrow layout would make the site look dated, even though we’d just redesigned.
However, going through and upsizing the content wasn’t an option. Nadya had wanted to fill all the horizontal space with illustrations she had comissioned from the awesomely talented Jason Levesque. She had thought she would just set them as a background image- but at some point the topic of parallax scrolling came up.
Normally I wouldn’t go for something this busy for a content site like this, but since it would no longer be updating- a fun approach like this seemed appropriate.

coilgif

We ended up putting the whole menagerie of tiny illustrations into a parallax scrolling, easter egg filled layout. This solved most of my concerns about the site looking dated, as this animation technique has only recently seen a rise in popularity.
We spent hours and ours placing every illustration manually, choosing the speed it should scroll at, and making certain characters interact with others in particular ways as you scroll.

coil_hero_phone
As much as I advocate for responsive design, with a content width as small as it is, we decided to just make a standard view and a mobile view instead of the usual full range of responsive breakpoints. I’d love to go back in and optimize for a better tablet experience at some point.
Perhaps when they decide to return to the site and come out of hiatus, I’ll come back to help come up with a new theme for relaunch.
Until then, enjoy clicking around on the illustrations, and reading the massive archive of content from the past several years.

While I am sad that there’s no new activity over there- I’m overjoyed that my friends who worked on it can now take the time to pursue other things that they love.

Goodnight sweet Coilhouse.
I’ll be here when you wake up.

My dear friend Nubby Twiglet has been running her blog for 5 years!
She decided to relaunch her site with a new design to celebrate, and she asked me to do the development. I decided this would be a perfect opportunity to turn her fixed design into a super awesome responsive layout.

This is Nubby’s original design. The unusual Navbar is my favorite element, and it was also the most difficult part of the layout to code. It was a challenge getting the nav items to stay in line with the left side of the post content, while keeping the triangle on the right pinned in line with the right side of the content.

Other fun aspects of this design that were the expandable sidebar sections (hooray for jquery toggle!) and font replacement (typekit for the win!).

When the window gets smaller, the social link content on the right begins to run out of room on the screen. This brings me to the next section of the responsive layout.

Nubby didn’t have any mockups for other resolutions, so I designed some solutions to fix this issue as well as other small screen problems.
To keep the social links from overlapping with the main navigation, I simply stacked them vertically.
I used the same approach for the sponsor content in the sidebar.

I also wanted all the content to fit nicely on ipads and netbooks, so I set both the posts and the sidebar to fluid widths, so they would get smaller along with the size of the window.

For very small screens, like phones, I removed the sidebar entirely.
This allows the content to take up the full width of the screen.
The images scale as they do in the previous resolution size, taking up the full width of the content container.

I’m so happy to have had the chance to work with Nubby all these years, and I’m so excited to see what we make together in the future.
5 years of blogging nearly every weekday is no small feat!
I’m so so proud of her for coming so far.

Extra responsive layout resources

While I was in LA, I had the pleasure of visiting Pygmy Hippo Shoppe!

My agency made their website a couple months ago, and I had been dying to see the place in person!
My wifey Marie hooked me up with the Pygmy Hippo folks, and I’m super glad to have gotten the chance to work with them!

When developing the site, Pygmy gave us a few of pieces to build the design off of- a background graphic of the wallpaper they have in the physical store, and a large graphic of the store’s name and logo.

My partner, Tim, thought the whimsicality of the graphics called for anything other than your standard square header, so he created an ornate alternative.

I thought that the navigation bar needed a handmade touch, so I added a ribbon banner.
I’ve seen quite a bit of ribbons in web design trends as of late, but I’ve mostly seen them done with solid color. I decided a realistic looking ribbon was a fun way to put my spin on that.

From there, we used custom typography to round out the look.

When I got to the store, I was elated to see just how freaking adorable it was in real life.
Emi, the woman behind the hippo, is amazing and inspiring.
All of you folks in LA, go visit!
If you’re not local, get a small taste in their online shop.

I had the excellent privileged of redesigning my WIFEY’S website recently, and I couldn’t be happier with the results.

I was given 6 different header graphics to work with, created by Mr. Nathaniel Jankins.
Originally Marie was looking for just a rotating header, but I thought to myself: How could I make this COOLER?

After seeing all the images and realizing that they were so varied in color, it was clear to me that I had to create 6 different color themes to match:






I decided that it would make the most sense to keep the theme consistent for the user’s browsing experience, rather than changing on reload.
I set a session cookie for each theme, so the user only sees one theme per session.

So go check out Agentlover.com and let me know-Which one did you get???

mollyScreen

I teamed up with the most excellent Nubby Twiglet to work on my friend Molly Crabapple’s website.

I was really happy to get to add a few css3 details to Nubby’s design, like a drop shadow on the main content.
The folks viewing the page in older browsers won’t see them, but those with more modern browsers will get a couple little bonuses.

I took what I did on Sadie’s site using Cufon for font replacement- and took it to the extreme, really allowing Nubby to do what she does best with typography.

Nubby did her own post about her contributions to the site, as well as the business cards she made for Molly.

As always, I’m looking forward to more rad collaborations with the ever-wonderful Miss Nubs!