Redesigning StevePavlina.com – Part 5

This is part 5 of the 9-part series on Redesigning StevePavlina.com.

Laying Out the Pages

The next part of the project was straightforward. It was time to create all the pages and build out the site.

This part involved taking the content from the HTML pages on the old site, adding it to new WordPress pages, updating it, and reformatting it.

This included:

This was fairly easy work, but it took several weeks because there was a lot to do.

I experimented a great deal with the layouts and created some standard layouts for making new pages, which gave the new site a consistent look and feel throughout.

Having every page on the site under WordPress management makes the site much easier to maintain. All of the original hand-coded HTML pages are gone, and all of their old .htm URLs redirect to the new pages.

Getting Feedback

As I worked diligently on creating the pages for the site, I showed early versions of the work in progress to some friends, including at the WordPress meetup in mid-October 2015. The site was beginning to look nearly launchable to me, and I received some nice positive feedback, but I could tell by others’ reactions that I still had more work to do.

The biggest realization was that I needed to improve the typography. Looking back it seems a bit foolish to admit that at this point in the project, typography was largely an afterthought in my mind. I mainly used the default settings for everything, including a common sans serif font for the main body text, probably Helvetica.

I realized there was a lot more that I still needed to learn. I committed to raising my standards and figuring out what I could do to improve the typography as well, even though I didn’t necessarily believe there was anything wrong with what I was already using.

Typography

I really didn’t know much about typography at all. In my mind typography was a synonym for fonts. Moreover, I presumed that the choice of font wasn’t that important, as long as it was readable on a screen and wasn’t some flowery script like what people use for wedding invitations. Sticking with commonly used web fonts seemed perfectly fine to me.

I grew up with fonts on low-res monitors and dot matrix printers, which was a very different situation than we have with today’s high-res displays. My typography-awareness was unsophisticated to say the least.

I concluded that I should probably study typography and alleviate this weakness of mine. It seemed clear that other people were noticing things that I was oblivious to. I figured that it couldn’t be that hard to learn. I didn’t need to learn Chinese calligraphy after all. I just needed to learn how to do typography design for my website at a higher level of quality. How hard could that be?

As it turned it, it wasn’t difficult at all to learn the basics and then some. It just took time.

In late October I Googled to find typography resources and spent 2-3 days studying typography for 8-10 hours per day. I took notes on everything that seemed useful for my project. I sought understanding first, not application.

I easily learned more about typography in my first hour of study than I’d ever known before. It all made a lot of sense. I realized I could indeed do a much better job on my site’s typography, given what I’d learned in just a few days of deliberate study.

The most helpful site I encountered was Butterick’s Practical Typography. My second favorite was Web Typography. I read both of those sites in their entireties.

Whenever I learn something new, I find it helpful to link the new knowledge to something I already understand. I began to see that typography was similar to fashion. The choice of typography was a means of expressing myself. I began to wonder which typefaces would feel like me, just as I might ask, Does this shirt feel like me?

I grew up in an earlier web typography world dominated by Arial, Verdana, and Times New Roman, so I had a lot to unlearn. I learned that typography is about so much more than the choice of fonts. Good typography also considers the precise spacing of elements, the height of lines, the spacing between the letters, the layout of headers, the use of bold and italics, the balance of different fonts, the size and spacing of bullet points, the length of lines, and a whole lot more. Presuming that typography equates to fonts is like saying that fashion is a synonym for textiles.

As I studied typography, I realized that I’d been making a lot of mistakes due to ignorance, and now I was finally able to recognize those mistakes. I began experimenting with CSS to test different possibilities for the headers, fonts, sizes, margins, line height, letter spacing, and more, and little by little, I saw improvement.

As just one example, I learned to notice the difference between oblique italics and real italics. Many web fonts generate an italics version of their base font by algorithmically slanting the letters. This pseudo italics looks okay, but a true italics font can look nicer than a slanted regular font. A real italics font can include additional flourishes if the font designer opts to include them.

This next part is only going to make sense if you view it on my website directly, not via an RSS reader, via email, or on a different website that may not apply the appropriate fonts.

Note the difference between these two lines in Arial font:

The quick brown fox jumped over the lazy dogs.

The quick brown fox jumped over the lazy dogs.

The italics version of Arial basically looks like the normal font with all the letters slanted.

Now note the difference between these same two lines in Charter font:

The quick brown fox jumped over the lazy dogs.

The quick brown fox jumped over the lazy dogs.

Can you see the difference? Charter includes a fancier italics font with some flourishes. You can see that certain letters are rendered differently in italics; they aren’t merely slanted letters from the normal font. Pay special attention to the differences between the regular and italics a, e, f, i, and z.

Some fonts include only the normal base font, and they algorithmically generate other variations like italics, bold, and bold italics. Higher quality fonts may include specially designed versions for each of these variants. The italics letters aren’t merely slanted normal letters. And the bold letters aren’t uniformly fattened normal letters.

In the early days of the web, it was common to use sans serif fonts in the range of 10-12 points, which made sense when 14″ to 17″ low-resolution monitors were common. But with high-resolution displays and larger displays being more common today, it makes sense to use larger fonts for the main body text, even going as high as 25 points.

After I studied typography, I began paying more attention to detail than ever before, and I really got into it. I did what some people would regard as a ridiculous amount of experimenting and fine-tuning.

I looked at more than 600 fonts before choosing the ones I used for this site.

I tested different fonts, sizes, and letter spacing for the headings, subheadings, menu labels, footer links, button captions, form fields, and more. Sometimes the differences between fonts was very subtle. I’d go back and forth 5-10 times on occasion trying to figure out which of two options was best. I enlisted Rachelle’s help to get a fresh perspective from time to time as well.

I experimented with different font sizes for the main body text and concluded that it would be best to base the font size on the window width. On monitors or laptops with the window stretched wider than that content area, the body text font will max out at around 24 points. As the window width shrinks, it will gradually step down towards 16 points in half-point increments. This is done entirely with CSS. Consequently, when you increase or decrease the width of your browser while viewing my website, you’ll see the text gradually change size so that even in tiny windows, it’s still readable.

Of course we can use the browser to change the font size on the fly (such as by using Cmd-minus and Cmd-equals on a Mac, and Cmd-zero to return to normal size), but a lot of people don’t think to do that.

Before I studied typography, I hadn’t even noticed that websites with larger fonts had me reading faster. At my desk I use a 27″ 4K monitor, and with larger fonts I can lean back in my chair and relax more. While it’s important to use mobile-friendly designs for small devices, how many people also consider how their sites will look on larger monitors? Who wants to read a puny 10- or 12-point font on a 27″ screen? There are millions of such monitors out there, including the larger iMacs.

I made lots of little typographical tweaks that most people will never notice unless they deliberately look for these subtleties. For instance, I wrote custom CSS to change the bullets and numbered bullets, so they’re slightly lighter in color than the main body text. This has the effect of de-emphasizing the bullets and drawing more attention to the text. To achieve this effect, I had to remove the default bullets and basically re-code them from scratch via CSS. It was a nice challenge to figure out how to do it.

In other parts of the site, I removed the bullets deliberately where I felt there were redundant or added unnecessary visual clutter, such as the lists of books on the Recommended Reading page.

I changed the way blockquotes, code, and tables look too, even though I hardly ever use the latter two.

As you can probably tell, when I learn something new, I like to obsess over it. For many days it seemed like all I did was live and breathe typography. This is my favorite way to learn — by full immersion.

Getting the Single Post Right

The most important type of page on the site to get right was a regular blog post. This is where most new visitors first land on the site and where people usually spend the most time. I spent days just getting this page to look right, tweaking every little thing until I felt really good about it.

For the headings and subheadings (H1, H2, H3, etc.), I went with PT Serif. This Russian-designed font is one of my favorites. I love the pointy hooks it has on the letters a, c, and s. PT Serif is part of the Google Fonts collection, so anyone can use it for free.

For the main body text, I almost went with PT Serif too, and for a while I was using it during the design phase, but then I came across Charter and liked it even better. Charter is a tad easier to read in my opinion. Charter isn’t included in the Google fonts like PT Serif is, so I had to download and add it to my site separately. Charter is a free font created by Matthew Carter, the same guy who created Verdana and Georgia. Somehow this seemed fitting since I used Verdana a lot on my old site.

One question I had was how wide to make each line of the article text. I knew that super-wide text was more difficult to read and that thinner columns could be read faster, but I didn’t know the ideal line length. One site suggested that 45-90 characters per line was about right, but that’s a pretty big range. After a bit more research, I found a recommendation that 66 characters per line was considered ideal. I tweaked the margins until the content was coming in at around 66 characters per line. That looked really good to me, and I found it easy to read, so I went with it. Of course this only works on a wide enough screen. If I tried to fit 66 characters per line on a small cell phone screen, it would require a ridiculously tiny font.

Featured Images

I know that it’s common to include featured images with blog posts these days. This feature wasn’t available when I started blogging in 2004, and all of my previous posts were created without featured images. My personal opinion is that they’re unnecessary fluff in most cases. When I see them on other sites, I tend to find them distracting and childish. For some reason I also tend to associate featured images with low quality content, perhaps because so many content mills use them.

I can understand why some people like to use featured images though. It makes sense if you care about Pinterest or Instagram. It may make your related posts links look prettier.

Perhaps the main issue is that many bloggers don’t choose featured images with much care, and they over-rely on stock images. Does it really add value to stick a photo of a clock on a time management article or a random jogger on a fitness article? When I see stock images, I figure the text will be equally unimpressive, and I click the Back button to avoid wasting time on what will probably be a fluff piece.

Featured images can surely add value in some cases, like including a photo of a meal for a recipe blog or a location photo for a travel blog. But if the blogger is plopping in a featured image as an afterthought, I’d rather just see the text because it’s simpler and faster.

Given my negative impression of featured images and the sloppy way I’ve seen them used in common practice, it was a no-brainer to rule them out for my site redesign. I see no reason to pad the site with such fluff, and I’d rather attract readers who are smarter than the ones who will think, Ooooh, a clock photo!

Whenever using an image is appropriate because it will add some value, I’ll include one at the point in an article where it makes sense to do so. I like using images judiciously but not promiscuously.

Spacing

The most painstaking work I had to do for the whole project was to fine-tune the spacing of elements on each page.

When I first started this project, it wasn’t clear to me if there was an intelligent way to space out the elements on a page, such as the vertical spacing between the headings, subheadings, and main text. I just went with the default settings for everything.

Then I realized there was a more mathematical way to do this, based on multiples of the line height of the main body text (baseline to baseline). I thought of the vertical layout of a page as if it were a musical composition running down the page, whereby every line (blank or otherwise) was like a note in the composition. If the notes are spaced at the right intervals, the music sounds good. But if the notes come too early or too late, the music doesn’t sound right. So I realized that if I spaced the elements haphazardly, it would be like writing a song haphazardly. The result would be disharmonious.

When a song is disharmonious, it feels offensive to our ears. We can hear the difference when a single note is out of place.

When a web page’s elements aren’t spaced harmoniously, the result is that the page appears more visually complex than necessary. Most web pages have this problem because the designers didn’t pay much attention to spacing. If all they did was fix this one problem, their pages would appear less cognitively complex and more relaxing to the eye.

Starting with the regular blog post page, I began meticulously aligning the elements on the page vertically, so that their baselines all aligned at integer multiples of the line height for the body text, from the header all the way down to the footer. I found that when I made this change, the pages looked more soothing than before.

When we read text on a page, our eyes get used to scanning at regular intervals. The spacing of these lines establishes a certain scanning rhythm. If we hit a break between paragraphs or encounter a subheading, and the baseline of each element lands exactly in accordance with that established scanning rhythm, then our eyes naturally continue on to the next block of text with the exact same rhythm, and the experience is harmonious. But if these other elements don’t land precisely where they should, it throws our scanning pattern out of rhythm, and we have to readjust. This makes reading more fatiguing, and it makes pages look more complicated than they really are.

One of the most basic lessons here is to make sure that if you have blank lines between paragraphs in your text, then the distance from the baseline of the last line of the preceding paragraph to the baseline of the first line of the next paragraph should be exactly equal to double the line height. If it’s not, then you’re throwing off the reader’s natural scanning rhythm, your text will be harder to read than necessary, and your content will look disharmonious. If you fix just this one problem, you’ll see and feel the difference when you look at your text and try reading it.

For the rhythm of text on an article page, I used a spacing scheme like this:

Blank line
Title
Blank line
Date
Blank line
Text
Text
Text
Blank line
Text
Text
Text
Text
Blank line
Blank line
Subheading
Blank line
Text
Text
…
Last line of text
Blank line
Blank line
Read related articles:
Blank line
Link 1
Link 2
…
Link 7
Blank line
Separator
Prev / Next links
Blank line

The baselines of all these elements land on integer multiples of the line height for the main text. So if the line height is 33 pixels, then the baselines of these elements will land at 33, 66, 99, 132, etc. pixels down the page.

Once I liked the look of the blog posts, I applied this spacing approach to all of the other pages on the site. This took about two weeks to get it just right for every page. That’s because I had to wrangle a wide variety of CSS elements to get them to cooperate.

After this new spacing regime became the default for the site, I could tell when some element was off by just five pixels because it felt disharmonious to me. For instance, when I added the sidebars to the Products and Workshops pages, something felt off. The problem was that I was using slightly smaller text for the sidebars, which automatically used a smaller line height by default. Once I boosted the line height for that smaller text to match the main body text, the sense of harmony returned.

Maybe I went a little overboard with this, but I really liked the result. It made each page feel easier on the eyes. Reading long articles was less fatiguing. Harmony replaced disharmony. I felt good about putting so much effort into making these improvements for the benefit of readers, even though most of them will never consciously notice these details.

Doing all this extra work changed my relationship with my website. I often saw my old website as just a container for the content. I cared about the content, but I didn’t care that much about the site’s design. By tackling that extra 20% of the value that takes 80% of the effort, I felt more connected to my evolving creation. It wasn’t just something I was throwing out there. Now I was putting more of myself into it. The website was beginning to reflect some of my values back to me, such as caring, harmony, and elegance. That made me feel even better about the project, and it increased my already sky-high motivation for working on it. I began to enjoy the work even more than I did before, not by avoiding what was difficult but by embracing it.

The downside, however, is that this process made me something of a design snob. It’s hard to look at other web pages now, especially cluttered news articles, without being turned off by the obnoxiously disharmonious layout. With just some CSS tweaks, they could make their entire sites so much easier to read.

Upgrading CSS Skills

CSS stands for Cascading Style Sheets. It’s a coding language used to describe how to style and position elements on web pages.

I was decent at CSS well before I began this project, but during the project my CSS skills grew tremendously. I kept encountering changes I wanted to make but didn’t know how to pull off. Sometimes I found the exact solutions I needed just by Googling, and I picked up some new CSS tricks as a bonus. Other times I had to devise my own solutions.

Along the way I learned to use parts of CSS that I’d never used before, such as the :before, :after, :nth-last-child, and :nth-last-of-type selectors. I felt empowered to do more creative things with CSS. I got much faster at using it too.

Whenever I had to style some part of a page, I first created a picture in my mind of how I wanted it to look. Then I figured out how to code the CSS to make it look exactly the way I wanted. By the end of the project, it usually only took me a few minutes to get something to look right.

I used CSS to change the default formatting of just about everything on the site to make it look consistent and harmonious. I restyled Ninja Form’s contact form, Give’s donations form, Jetpack’s related post output, and Simple Yearly Archive’s formatting for the Archives.

This is why my custom CSS file is almost 800 lines long, and that’s in addition to the theme’s own CSS file. I also organized and commented the CSS file to make it easy for me to maintain.

I enjoyed all of this detailed work. I love the challenge of figuring out how to code something when I don’t already know how to do it. It’s a wonderful learning experience to face challenges that push me to increase my knowledge and skill. Almost every day was a learning experience.

Continue to Part 6 in this series.