When I decided to redesign my website, I knew I wanted to concentrate on two things for the layout — content and focus. The meat of my website comes from my writing and that’s what the reader should get.
If I’m comparing my site with food, it’s like steak. The thing I like most about steak is that a good steak could stand on its own and you wouldn’t need anything else.
When you go to a fancy steak restaurant, the expectation is, you are there for the steak and nothing else. Don’t fill me up with bread and salad. I came for steak. Only after I’ve had my steak, should I be offered some dessert.
In the same way with this redesign, I wanted to make sure that the content I was creating was front and center. Everything else should get out of the way, so that the reader can get to the good stuff.
Now that I’ve got you hungry for steak, let me jump into the details of the redesign.
Breathing room
I believe how a steak is plated is an important element to the steak eating experience. If the steak is big and taking up an entire plate, you might be suspicious that the restaurant is overcompensating with quantity over quality. If a steak looks too small on a plate, it might heighten your expectations on how it should taste. Meaning that it better meet or exceed your expectations, because if it doesn’t, then you’ll walk away thinking you paid too much for what you got.
When a steak is perfectly plated, the plate almost disappears leaving your focus on the steak.
When creating the new layout for my website, I wanted to explore the use of white space to help accentuate the content. As you can see from the screenshot below, the logo and the menu (the header) is offset so that it isn’t lined up with the column of content. This provides a visual separation of the two elements from each other. I also left enough white space between the header and the body of text so that after a few lines of scrolling the focus is solely on the content.
Once the focus is on the content, my next goal was to make sure it was easy to read.
Easy to read
I’m not sure if this is a result of aging, but these days I’ve noticed that I’m more likely to read an entire article on a website if the width of the paragraphs are narrower. If you look at a physical book, margins are intentionally put on a page to limit the length of a line. Doing some research, I discovered that there are benefits to doing this.
Limiting the length of a line creates a rhythm for the reader. When a reader jumps to the next line, the subconscious mind is re-energized as long as the jump doesn’t occur too frequently. Limiting the length of a line also makes it easier for a reader to gauge where a line starts and ends, thus reducing stress.
It turns out that the optimal number of characters for the ideal line length is 50-75 characters. To achieve this, in my layout, I’ve set my font-size to 20 pixels while the width of the paragraph is 500 pixels wide.
Meanwhile, I also wanted to visually excite the reader when I include images in my posts. From the screenshot above, you’ll see that images exceed beyond the 500 pixels line width. I’ve chosen for images to be 550 pixels wide. During my experiments with the layout, I’ve found that it was large enough to provide some visual difference from the text and not detract from the flow of the text.
Once a reader is done reading a post, I then wanted to design a way to guide their next interaction with my website.
Guidance
This aspect of the redesign was tough for me — guiding a reader through an experience on my website. I’m not able to control how a reader gets to my website, but I do have some control over how the reader experiences my website once they are there. This is an area that I had to really think through. In doing so, I’ve had to learn to cut out clutter.
In the past I thought that providing the reader with as many links as possible to other parts of my website would increase engagement with my brand. But as you can see from this image below, my assumptions lead to a really messy footer.
In the screenshot above, I’ve counted ten possible actions the reader could take action on once they finish reading a post on my site. That’s one too many options. Really there should be one, perhaps two at most actions that the user should take. To increase the engagement of my readers with my website, I’ve decided to focus on building an email list with this redesign.
An email makes it super easy for a reader and I to enter into a dialogue regarding a post, all they need to do is simply hit reply. I could also provide exclusive resources and extra value for my readers through an email list. For this reason, I’ve made an email sign up a major focus at the end of each post.
I’ve purposely made the newsletter sign up stand out by adding a background color and a nice, shiny, colored button to catch a person’s attention. I’m almost tempted to remove all other footer links so that the reader is left with really three options. Either navigate to a different site, scroll back up or sign up for the newsletter.
I also want to do some split testing to see which newsletter sign up does better. I’ve heard that making a user click on an actual button first, then showing a form yields higher sign ups. I’m a bit skeptical about this since I believe most readers are used to the form being made available immediately, so that all they have to do is enter in their information and hit submit.
Another element I wanted to try introducing is a top window sticky banner like the one in this screenshot.
The purpose of this banner would be to inform readers on information that I wanted to make sure they knew about. This information could be in the form of a new resource I’ve created for the user or an announcement of a current series I’m covering such as this one about my redesign. I want to keep this banner as minimal as possible so I plan on just having text and a link in it. The color is used to help draw attention to the banner.
Working on the layout for the redesign has been challenging. I’m learning to restrain myself to achieve the experience that I want to provide for my readers. As previously mentioned in my post about why I’m rebuilding my site, I shared that I’m making intentional decisions for the direction of my website. In doing so, I’ve tackled with not just what I could do to solve a problem but why I’ve chosen a certain solution for the problem.
If you have any thoughts or feedback about the layout decisions I’ve made, I genuinely would love to hear them! In my next post I’ll be sharing about the typography that I’ve chosen for the redesign. I’m not a typography pro, but it was fun doing research and finding a pair of fonts to work with.
