Site update notes and thoughts

I’ve recently pushed out an update to the design of Ice to the Brim. If you’re reading this in your aRSSe reader, please take a gander at the creature in its natural habitat to get the full feeling.

The previous design wasn’t broken. It was quite nice. But I’ve developed so much as a site-maker, I’ve got so many new practices and tips with the code I make, that I wanted to update the whole shebang, make it purr, stroke myself with the elegance of the code as well as the visual aesthetic.

Some goals I had with the design

1. Responsive — it must adapt to screen size because that’s the kind of thing that makes my juices flow.
2. Easy in, Easy out — it must have a design that allows me to post small quotes, images, etc., without needing to think much about headlines and image sizes and quote citation markup, etc. I want to be able to fart little love bytes as well as write longer articles.
3. Homepage Welcome — it must welcome first time visitors with an introductory experience of myself.
4. Email Earnestness — it must encourage people to sign up for the email list so I can foster more community behind the scenes. This is something of an experiment I’ve been doing at Father Apprentice that I’ve been liking.
5. Thoughtful Baseline & Layout — every element must be thought-through, intentional and work in some relatable way to a zoomable vertical baseline. We’re talking bylines and borders and widths and paddings and custom_functions.php here, people.
6. Elegant Above & Below — all code and style must be delivered with efficiency above and below the surface.

The Homepage

I really like this homepage. It feels great to me for two reasons: 1). it looks good, 2). it’s a complete accident that it looks good.

All my focus on this redesign was on the blog page — what a post looks like, how the content and sidebar columns related, how they shrank and grew, what visually separated one post from the next, etc. So, when it came time to throw together an interesting, quirky, personal, heart-felt home page design I was a little spastic and clueless.

In my first attempts I was using the same jumping-axes photo I was previously using. The photo was interesting enough to elicit the feeling I wanted, but I wasn’t very excited about it. I needed something more.

First attempt at the homepage

I began fiddling. I made a rectangle to measure how much width I had to work with. The default color used in the rectangle was the bright and rich purple I use for the link color. Whoa, that looks interesting! What if I made it full-width? “That’s it,” I thought to myself. It’s got enough pizazz, it’s fun, ship it.

Second attempt at the homepage

So I shipped it. I launched the site with that as the homepage. Got to work making some changes to the live database, kept checking the site, visiting the homepage, started getting pretty bummed about this look. It was the text and form on the left; it was just wrong, slapped together, flat, fuggly.

I needed to change it. Ok, I’m getting too long-winded here, let’s make this quick) So I did what I always do when I lose interest in a design: I looked for a silly and honest picture to add a caption to. I landed on this. I messed with it. Now we have a homepage hero image that hits the feel I was looking for… and the colors look damn good.

The final homepage

Typography

My understanding and eye for typography has evolved a ton over the past year. I’ve learned a great deal and experimented and have landed on some principles I believe in. Principles about font size, line height, spacing between elements, etc. This site incorporates all that goodness and workitude.

Every typographic and layout element on this site adheres to a spacial rhythm. The spacing between headings and paragraphs and blockquotes and posts and sidebars and comments, etc. all relate to each other in thoughtful ways. This was the experiment, this was what I wanted to accomplish.

The details here are this: 18px font size. If that’s my base unit, then I’ll use the golden ratio to define everything from that, which gives us a 29px line height. That 29px is what I use throughout the site, in some way or other: between paragraphs, in sundry ways to divide space above and below headings, between the content and sidebar, etc.

That’s a long story short. There’s shit-tons of math and geekery I’d love to talk about but let’s just leave it at that for now. If you’d like to see a lot of the interesting typographic elements on one page you can visit the typography page.

Navigation

Here’s a thing I’ve learned: most people land on a blog page when they first visit this site. These are people searching or following links from Twitter/FB. They check the content on the page, then they look at the navigation. They’ll either go to the home or about pages from there.

That’s how a typical user will get to know this site. So I wanted to keep the navigation minimal, essential. It also means I wanted to make the homepage and the about page good at introducing myself and asking them to commit to a bit of a relationship to me through the email signup.

The current navigation meets the essential needs of a visitor. There’s other goodies like the subscribe page that I’d like people to land on, but I can link to that from relevant parts of blogs and sidebars where necessary. It’s clutter to the new user.

These are the decisions that make any site good; it’s about what’s not there.

Layout

There was a lot of math involved. As I mentioned above, everything on this site relates in some way to the number 29 because that’s the visual significance of a line of text in a paragraph with this font/line size.

Everything’s a 29-ish thing!

One problem I had in previous versions of this site was how to visually separate posts. In the previous version there was a pencil-drawn line. I wasn’t a huge fan, but it worked as a brute force kind of solution.

Another interesting challenge was having different styles for different types of posts, the main example being how I style posts that simply consist of a quote. I don’t want these posts to have a headline on when viewed with others on the blog pages, I simply want the quote to feel like its own stand-alone unit. But the headlines are a huge part of the visual separation between posts. So, I lose that identifier. What to do here?

I opted for a small piece of post information on the left of each post. The subdued post-info is the only thing in that left-most column, you don’t even need to focus and make sense of the blocks of text there to realize there’s something new starting.

I fought against this kind of look because it’s so common Tumblrs and I don’t wear smart glasses, but it proved to be the right solution to the “visually separating multiple post types” problem.

Responsiveness

For anyone who’s not familiar: responsive websites adapt to the screen they’re being viewed on. You can go ahead and shrink your browser window or view this site on an iPad or phone and see how the content adapts to the viewing experience.

Part of me feels like there’s nothing broken in an unresponsive site. I can zoom in on my iPhone and see what I need to about the site, content, etc. In some situations that’s what I want when I land on a site.

However, this responsive thing is very fun. It is also important. It’s fun because it can be like a puzzle. How should the homepage image, text, and signup form respond when a user visits on a smaller viewport? There’s a lot to play around with there. And those decisions can make a difference in how users behave on your site. That’s important. What’s also important is something something mobile web is more popular than desktop in 3 years, something statistics, something something truthiness. The mobile experience matters.

Right now the responsive stuff is especially cool because it shows you care and are capable. I care about visitors who view this site, so I want give them a good experience with a cherry on top no matter what they’re viewing on. I’m capable of doing that.

Conclusion

So, that’s the site I’ve created. There’s more to tell, but you’ve stopped reading already. Ultimately the best thing about this site (and your own) is the content. I have some great lil’ bits of content here. It’s important to me, in a zen kind of way, to be thoughtful and care about how I do that… to the greater end that my ego is stroked and loneliness averted and mania reigns supreme OMFG LMAO!

Tagged as: Editor's Pick