Tag Archive for ‘Type’

The New Initial Charge

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:

Initial Charge’s 2015 Design

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.

The New Initial Charge

As you may have noticed, things look a little different around here. Over the past several weeks I’ve modified my existing WordPress theme to be better suited for the current web environment. The old design has served me well for almost seven years without any major revisions, but it was time to finally go responsive.

The move to responsive design is the most obvious change — a fluid-layout that expands and contracts when resizing your browser window and looks good on mobile devices as well as desktop computers. But much of the rest of the site has been restyled as well and I wanted to highlight one specific aspect of the new design — the typeface.

A couple of weeks ago I linked to a little web utility that let you browse iOS’ built-in fonts. The tool helped me figure out what fonts would be safe for me to use in the new design— OS X has Font Book, but I couldn’t find a comparable application in the App Store. Between iOS Font List and Font Book I narrowed my options down to Helvetica Neue, Gill Sans, Futura, Avenir, and Proxima Nova — which would require the use of Typekit, something I prefer to avoid.

After some helpful advice from a few friends online — thanks, MattKeenan, and Matt for all the help and words of encouragement — and plenty of testing, I eventually settled on Avenir for body text with Georgia remaining as the title font. In order to get better acquainted with my choices, I’ve switched Reeder and Tweetbot’s display font from San Francisco to Avenir and Instapaper’s from Elena to Georgia. I’ve been very happy with them so far and I can say that Avenir has quickly become my absolute favorite typeface.

I’m sure there’ll be some tweaks to my font stack in the future, though, specifically for Android and Windows users. As it stands right now, most of them are going to see the site in Arial, but that will probably change once I get some more time to test on other platforms. With the site now live, that will be much easier.

The Changelog

For those curious, here’s a full list of changes I’ve made to the site from the previous design:

  • Responsive design with a maximum width of 700px to retain legibility on larger displays.
  • Removed sidebar and went single column.
  • Navigation moved to below header and removed link to Linked List archive, now only accessible through the Feature archive and at the bottom of homepage.
  • Moved contact information to the About page in order to clean up navigation.
  • Restyled list of recent posts on 404 page to better match the Archive page.
  • Body type now set in Avenir.
  • Increased font sizes across the board.
  • Refined font weight in titles.
  • Adjusted font colors on all text.
  • Arrows added to link post titles to better indicate that they point to an external page.
  • Switched to simpler arrows on Next and Previous links at the bottom of search results and Linked List archive pages.
  • Resized search bar.
  • Added search bar to Archive page.
  • Added search bar to the top of search results page which now displays the current search term.
  • Fixed title links on search result pages which now point to the proper page on Initial Charge.

Moving Forward

In addition to the aforementioned tweaks to the site’s font stack there’s plenty of other changes I have in store for the future. The most important of which being a move away from deprecated functions in WordPress. As I mentioned earlier, I’ve used the same theme for Initial Charge and previous iterations of the site for nearly seven years. There’s still quite a bit of cruft that remains from years ago. Everything works for now, but I will soon start moving to WordPress functions that will be around for the long-haul and slowly eliminate those that have been deprecated.

That of course, won’t result in any visible change for readers, but it will help prevent the site from breaking with future WordPress updates. As for user-facing features, I’d like to add page numbers to the top of search results and Linked List archive pages, implement Twitter cards for Feature articles, add a Safari Pinned Tab icon, and fix an odd bug that might result in a narrow navigation bar on some pages. All of those will come in due time, though.

For now, I’m excited about starting off the new year with a major redesign and being able to get back to writing at more consistent times after the holidays are over. This past year has been incredible for the site and I’ve seen nothing but steady growth since I recommitted myself to publishing Every Single Day earlier this year. Hopefully next year will continue on that trend and bring even more great things along with it.

iOS Font List ➝

I’ve spent past week or two working on a redesign for Initial Charge and iOS Font List has been invaluable to me during the process. The articles I’ve published here have been typeset in Lucida Grande — alongside titles set in Georgia — for as long as I can remember. But I thought this redesign would be a great opportunity for a change of pace. I haven’t settled on a new typeface just yet, but I have it narrowed down to a handful of options:

  • Proxima Nova which would require the use of Typekit — something I’d prefer to avoid.
  • Helvetica Neue
  • Gill Sans
  • Futura
  • Avenir

If you have any strong feelings about any of these choices, please let me know on Twitter.

San Francisco, a Brief Review ➝

Vasil Enchev’s great piece comparing the variants of Apple’s new default OS typeface, San Francisco.

Fontstand ➝

A brand new Mac app that lets you try fonts for free or rent them by the month.

Font Men ➝

From the video description on Vimeo:

Font Men, gives a peek behind the curtain into the world of Jonathan and Tobias. Tracking the history of their personal trajectories, sharing the forces that brought them together and giving an exclusive look at the successful empire they built together.

(Via Nuclear Bits.)