July 09, 2017

Things to consider when designing a blog from scratch

I recently had myself go through the needlessly arduous process of building a blog from scratch instead of choosing from the endless supply of prebuilt themes. I had naively expected the project to be trivial—I would only need to design a couple of pages, after all—but it turned out not to be the case. Here are some things that consumed my time throughout the process.

1. Content width

Website wireframe

I had originally thought to make my main content container somewhere between 840 and 900px (for large-sized displays). This seemed reasonable because a single centered column of text on a full-sized display leaves a considerable amount of whitespace on either side, which felt to me like a poor use of screen real estate. However, after researching other blog websites, I was surprised to find that they utilized a very narrow container spanning in the range of 580 to 700px.

For example, Firebase fits their text in a 580px column. Medium uses a 740px container with 20px of padding on each side, leaving 700px for the text.

The reason for the slimness? Readability. Studies on line lengths for readability find that 45~75 characters per line (cpl) are optimal for printed texts, while for web the guidelines vary somewhat. This is the reason why news websites such as BBC fit their text in a narrow column as well. I chose to follow Medium’s example and went with a 700px column width for my posts.

2. Typeface

The typeface used in a personal blog can convey the author’s voice and personality. I therefore wanted a unique font rather than a ubiquitous font like Helvetica or Roboto; however, the catch was that I had to choose within the set of available web fonts. After browsing TypeKit and Google Fonts, I settled on Europa because I liked the playfulness of the round characters.

However, after applying Europa to my entire website, I found that it looked great on headings, but not for body text. The roundness of the characters made each word too wide, and the short ascenders and descenders did not make it easy on the eyes to read a long paragraph. Consequently, I applied a more standard font, Open Sans to the body.

Update: the current body typeface is PT Serif. I wanted to convey a more formal and literary atmosphere with a serif typeface.

Overall, the typefaces used in a personal blog must strike a balance between personality and readability. Using a font like Arial for the entire website may create a bland atmosphere; using a retro font as body text would indeed convey a lot of character, but burden your readers’ eyes especially in long posts. Font pairing is one elegant solution to this tradeoff.

3. Posts overview page

Posts overview page

Even the simplest of blogs requires an “index” page, an overview of the blog’s post history. The simplest design might just display each post in full, like Stripe. Another simple approach would list just the date and title, like the Minima Theme for Jekyll. Most blogs go somewhere in between, presenting a graphic “cover image” and short snippet in addition to the date and title.

Personally, I think displaying the posts in full is unnecessary for most cases. Blog readers generally want to read only about topics they care about, and they would want to skim through titles instead of full-length texts. One exception might be if your posts are meant to be read sequentially, like chapters in a book or diary entries.

I went with a two-column layout with the date positioned at the left, and the content on the right. I included an excerpt for each post by taking the first paragraph, and added a clickable “READ MORE”.

4. Responsiveness

Responsive page demo

Responsiveness refers to a website’s ability to adapt its layout for displays of all sizes. Blogs are by nature pretty responsive without any extra work due to their simple layout; that said, utilizing extra space will ensure that your website retains visual interest even on larger screens.

For example, on larger screens, the posts overview page of this website (http://terrykwon.com) expands to two columns. Shrinking the browser window leads to the date column collapsing into the main content as a row. This type of “column-to-row” pattern is common and quite easy to implement in web design, and you should definitely consider a multi-column UI for desktops. One example of a complex layout that is also completely responsive is the Open AI blog.

5. Conclusion and references

Although a lot of work, building a personal blog was a rewarding experience. It allowed me to create a completely personalized brand for myself and communicate through a design that I believe to represent my voice. There are other benefits as well, such as it being lighter than prebuilt themes, and being easier to maintain as I wrote the entire source code by myself—but the development aspects will be covered in a future post.

The most valuable resources during the design process were other blogs, and I will list them here (the order is meaningless). They were especially useful when making typographic decisions since these blogs often feature long technical posts.