Home

Redesign Overview

Wiping the slate clean

As I said in my previous post I wanted to rebuild my site top to bottom. Looking at my repo I had a ton of images no longer in use, weird testing pages for clients that were long past being relevant, a mish-mash of script tags floating around, and the CSS needed a bit of love. Seven years was enough, it was time to wipe the slate clean, and start over from scratch.

Jekyll vs Hugo

Over the past few months a number of high-profile designers I follow on Twitter have jumped ship and moved over to Hugo with a lot of success. I was, and still am intrigued with the idea, but decided to stick with Jekyll while my creative juices were flowing - I didn't want to get sidetracked figuring out technical issues. I'm so fluent with Jekyll I don't even think about it anymore.

Pre-rolled Jekyll

I love working in Jekyll, but I got frustrated when they decided to pull all the styling into a gem and start pushing developers towards using themes. Since then I knew my time on the platform was coming to an end. I keep a pre-gem, no-content, stock version of Jekyll with the CSS and structure already set so I can spin up development sites within minutes.

Bare minimum

Every step of the way I kept saying 'what is the simplest way to do this?'. I wanted a site for my writing - okay, blog posts to start and maybe a brief bio. Thats it for now. Start with an index page listing posts, and a few entries just to see how they'll lay on the page.

I took the same approach to the CSS - avoid as many media queries as possible. I started with adaptive type sizes. I've explored the vw unit before, but never in depth. After some initial research I learned you can preventing it from scaling too small on mobile or too big on larger displays. For example the paragraph text for my blog posts is set to font-size: calc(16px + .5vw);. This keeps the font around 18pt on mobile (my tired eyes prefer larger fonts), and it scales up to about 24pt with the browser open full width on a 15" laptop. Even on a 27" external display it feels comfortable and not over the top.

So far my use of media queries has been minimal. One on the homepage for listing blog post entries to go from column to rows, and then a few others to adjust layout padding (I could probably kill those with % based calls). My entire CSS directory for the generated site is at 16KB. Not too bad.

Only having two pages means I don't have to fuss around with a menu or overly complicated navigation. The header has a nameplate link to the homepage, a link to the blog index, and one of the few flourishes on the whole site.

Saying no before yes

Apple made a big deal about saying a thousand no's before saying yes. Okay I'm not that prolific and yes, this is just a basic site - however I'm still saying no to extra features unless absolutely necessary. I axed my visual design gallery, my photography gallery, I didn't include my Twitter feed, a resume, or even a contact form (I should probably put my email address somewhere). I want to focus on writing for now. In the future I'm sure I'll add a feature or page here or there, but I'd like to keep it as tight as possible and new content is going to be a tough sell.

No JS

Okay, I broke this rule after a day but just barely. No JQuery, no goofy animation libraries, no scrolling effects, nothing except a small script for a fun little easter egg (which I'll write about in my next post). Talk about lightweight.

Colors

My design MO over the past decade has can be summed up as: navy blue. Dark drab colors...boring. At one point I had my blog posts listed on a grid of cards, all a different bold color. That was one of my first attempts to expand my palette and it really should have stayed around longer but I got distracted and re-designed it (sound familiar?).

In this design I've tried to keep the spirit of that feature alive site wide. I wrote my CSS to be color independent - meaning if I define a background-color and text-color in my liquid page or post header it will apply to everything on that page. For this post I chose an almost Tiffany Blue for the background with a very dark blue for the text. This style is inherited in the header, body, footer, and, in what I think is pretty slick, the SVG icon at the top of the page. If nothing is set everything defaults to black text on a white background.

Here you can see my default template that the pages are rendered with. A check in the body tag sets the colors if they are defined in the page.

There are some dangers here I am well aware of. First and foremost I have to be sure of appropriate color contrast. I also made sure to set links to be in a nice padded white box with black text. On darker backgrounds these stand out a bit but for now I think it works.

Typeface selection

Needless to say typeface selection is key since the site is 98% text. I started with Poppins for the headlines, but thats what my current client project is using and it didn't feel good copying them. I started looking at big fat sans serifs on the more condensed side. After much deliberation I landed on PT Sans Condensed for the headlines with PT Sans for the body copy. This gives the headlines a great look when I blow them up for the blog titles, but they still feel very crisp and clear on smaller screens. The body copy reads very well in my opinion - very low friction.

A great foundation

I really love the direction of the design. It came together extremely quickly - a few hours the first night, and an hour or two the next day and its already in great shape. It's focused on presenting the writing with very few distractions. It's fast and lightweight.

I feel better about this design than I have on previous versions and hopefully I can resist the re-design urge for a while. Next up I plan on doing a lot of writing, as well as a pass to make sure the accessibility is up to snuff.

Next post will be about my little super-nerdy easter egg that made me break my No-JS rule.

Previous Postconsole.log('is my hero') Next PostDynamic Moon Phase SVG