I’ve spent a great deal of my free time over the past five-and-a-half months working on a new design for Initial Charge. I have done major redesigns in the past, but this was the first time I ever tackled a ground-up rewrite of the site’s design. Every single line of CSS and HTML was written from scratch.
A year or two ago, that wouldn’t have been possible. But I spent last fall learning as much HTML and CSS as I could from Treehouse. Before then, my knowledge of web design was fairly rudimentary — never able to do much more than minor changes to existing WordPress themes. Now, I can build an entire WordPress theme with minimal web searching.
This is how Initial Charge looked from December 2015 until today:
The new site design, which I’m calling Recharge, fixes many of the annoyances I had with the previous design — the first being typography. The previous design’s titles were set in Georgia with the body text in Avenir. And while these typeface had served me well, it was time for a refresh. Titles are now set in Palatino with Avenir Next as the body font.
The next major, site-wide change is the way images are displayed. The silly outline is gone and images now fit the full width of the viewport on mobile and the full width of the text column on desktop and tablets. This had been something I wanted to do ever since I saw Álvaro Serrano make the change on Analog Senses early last year. It should make the site’s use of images much more impactful and allow readers to see more detail in screenshots.
If you’re viewing this on mobile, as most of the site’s visitors do, you might not have noticed this next change — a two column, responsive layout. When the browser window becomes 768 pixels or wider, the top navigation bar disappears and a sidebar surfaces that may be familiar to long-time readers. Prior to the site’s redesign in 2015, Initial Charge had a two-column layout with navigation in the sidebar. When I moved to the more mobile-friendly 2015 design, the sidebar was completely replaced by the top navigation bar. With Recharge, you get the best of both worlds.
The archive page has been restyled with all of the feature articles grouped beneath month headers — I was overjoyed when I figured out how to do that. But the most exciting change is the restructuring of the homepage. Reverse-chronological works when everything you publish has the same weight, but on site’s like Initial Charge, with feature articles and links, it wasn’t a great fit.
It may be a bit trendy to say this, but Initial Charge’s homepage is now algorithmic. Although, the homepage algorithm is a bit more simplistic than what the fine folks at Twitter and Instagram have built. Entries on the homepage are now in the following order:
- The most recent feature article.
- The eight most recent Linked List entries.
- The second most recent feature article.
- A list of the six most recent feature articles that haven’t already appeared on the homepage.
Long time readers are unlikely to visit the homepage — most of them use RSS, Twitter, or some other means to be notified when something is published. The vast majority of people that hit the homepage are new readers and this structure will allow Initial Charge to put its best foot forward, hopefully turning those first timers into repeat visitors.
The Rest
There are several other, small design details that I think are worth pointing out:
- A yellow underline now highlights feature article titles.
- Square bullet points are used in unordered lists.
- The site’s “bolt” icon now appears alongside the date below articles and links.
- The site’s search bar has been completely restyled.
- The webclip icon now appears at the bottom of each page and links to the homepage.
- There’s now a touch of green in the design. The color appears as an underline on subheadings within articles and a handful of other locations throughout the site.
I never expected the site redesign to take as long as it did — maybe a month or two, but definitely not five-and-a-half months. But I couldn’t be happier with the results. I may get the itch to write some HTML and CSS sooner, but my hope is that this new design will last for many years to come.
I obsessed over every page before hitting the “Activate” button in the WordPress dashboard, but there’s certainly the possibility that I overlooked something. If you notice anything that doesn’t look quite right, please let me know — either by email or on Twitter with a mention or direct message.
