Experimenting With Site Layout in 2020

Every once in awhile, I like to take a good look at my site to decide if there’s any way to make it fresh and interesting. During Spring Break this year, I did just that. Now, I have a fresh new site layout with some nice additions. Let me know what you think!

Table of Contents

Sidebar Overhaul

As a minimalist, I don’t like to overwhelm my users with flashy buttons, animations, and calls to action. In fact, for a long time, I tried to avoid adding any elements to the sidebar as to attract everyone to the small amount of content that was actually there.

Over time, I experimented with different layout elements, but nothing really stuck beyond a picture of myself and a search bar. Then, I had this great idea! What if I added the table of contents to the sidebar? Better yet, what if I also made it stick? That became my new goal.

Now, you’ll notice on nearly every post I have a table of contents in the sidebar. When you scroll down, you’ll even see the table of contents move with you. This was an idea that I actually stole from my Trill Trombone website. Although, this time it was for good rather than evil.

If you look around the site, you may notice that the table of contents isn’t everywhere. Unfortunately, I couldn’t figure out how to reduce the number of elements that show up, so list posts and reflections straight up don’t display it. In addition, there are likely other posts that have far too many headings to support the table. I’ll be removing it as I notice them.

In addition to the table of contents, I’ve also added elements for members, products, and advertisements. Hopefully, that will help direct some people to the other ways they can support the site.

Finally, I updated the text under my picture to link to both my portfolio and my new support article.

Styling Overhaul

One thing that I’ve been really scared to try is styling. After all, up until this point, I’ve tried to build everything around theme and plugin default behavior. Of course, that leaves a lot to be desired, and I desire a lot.

Well, I finally decided to get over my fear of CSS and overhauled the visual styling of my sidebar. Not only are there new widgets there, but now it looks considerably different. Here’s all the code that got that done:

#ezw_tco-5, #woocommerce_products-5, #text-8, #patreon_wordpress_login_widget-3, #custom_html-14, #woocommerce_widget_cart-3, .wpcnt, .post-last-modified {
	border: 1px solid;
	border-radius: 16px;
	padding: 15px;
	border-color: gray;
	background: #f9f9f9;
}

As you can see, each of the widgets now shares the same styling elements:

• 1 pixel solid border
• 16 pixel border radius (rounded corners)
• 15 pixels of padding to adjust for comfortable whitespace inside the element
• Gray border color
• Light gray background color

In addition, these same changes were applied to my last update date under each featured image. Of course, I had to make a few specific changes for that:

.post-last-modified {
	text-align: center;
	font-style: italic;
}

Now, the text is italicized and center just like it used to be.

Likewise, my ads at the bottom of the page also feature the new styling. Now, they no longer seem out of place!

Overall, I’m quite pleased with the style updates. Now everything looks consistent even if it isn’t. The simple containers make things look nicer.

Last Updated Date Overhaul

Last updated date was something I added as a measure of proving the freshness of my content awhile back. With all the work I’ve put in, I was worried that some of these articles would lose value over time simply because of the publish date. At least, that was the reason I decided to added the last updated date.

Well, I’ve made some changes to it. For one, the styling is consistent with my widgets. In other words, that date is nicely packed in a little gray window.

Likewise, I’ve also updated the last update date text. Now, it states the date in a human readable format. Instead of listing the date, it states how recent the latest update was (i.e. 5 days ago). In addition, it details which author made the most recent changes.

On top of all that, I have the plugin working in compatibility mode. Now, it replaces the post publish date in the meta data with the last updated date. Hopefully, that gives it better traction in search engines. Of course, I like to keep the actually publish date on each post.

Overall, I don’t think this change will impact user experience much. That said, I do think it’s a nice quality of life change for me!

Plans Going Forward

Right now, I am at the beginning of my spring break. My goal over this next week is to get enough content scheduled to get me through to the end of the semester (i.e. April 20th). In other words, I need to write roughly 10 articles including this one. If we include exams, I might need a couple additional articles.

On top of that, I was hoping to record a YouTube video or two. Unfortunately, I don’t see that happening as I also have two assignments to finish before March 18th. That said, I’m hopeful! By the time this article is finished, I’ll have about a week left in break. Let’s see what gets done!

In the meantime, feel free to recommend some ideas for the site. This summer, I’m planning to take a month or two off to relax. Of course, I also want to get ahead on this site! That would be a good time for me to start working on new ideas.

At any rate, that’s all I’ve got for today’s update! Thanks for sticking around.