Changes
It has definitely been a while since I have posted, but for good reason I believe. I have made massive changes to my website with user-facing design changes, as well as back-end structural changes. Between finishing those changes and working it has kept me pretty occupied, but I’m definitely happy with how everything turned out!
With this post I hope to describe the changes that took place and the reasoning behind them.
Design Changes
So, why did I redesign the look of the site? A couple of key reasons:
- It felt very outdated.
- It wasn’t a good design for a blog.
Let’s explore those in more detail.
It Felt Outdated
While the internet in the 90’s was filled with animated GIFs, thick borders and a myriad of colors, this is no longer the case. Simplicity is the rule rather than the exception with today’s web and my website previously didn’t follow that rule near as much as I would have liked.
First there was the mix of colors. I had a dark grey background for everything but the content area, a thick lighter grey border, then stark white for the content area. At the top of the site were two images separated by my header text (my name and slogan). These images contained a mixture of green, brown and blue primarily.
The thick border and dark background I mentioned above, beyond the extra color, was an issue all its own. I found the content area felt compressed; almost claustrophobic and that issue came into play on my small 13" laptop monitor, don’t mind larger 20"+ monitors. On these monitors, the content was a skinny column of white amongst a sea of grey, with the black characters getting lost.
By removing the border and change in background color, I feel that the content now fills the page. Not literally of course! For readability, the text is contained to a column width similar to that of before, but without the visual divider. Also, the line under the header stretching across the width of the browser window gives the illusion of the content filling the page. I believe this works well on larger monitors by helping keep the content from getting lost, as well as small ones such as my laptop for general styling.
I eliminated the images in the header because although they look nice, attention was drawn away from the content below by taking up valuable screen real estate and their colors.
These changes simplified how much there is to look at and gave the website that “clean” design with only thin, simple lines to separate the content where necessary. Anything that doesn’t need to exist, no longer does.
Wasn’t a Good Design for a Blog
When I originally designed the flow and layout of this site (back in grade 11!), it was focused around my resume, portfolio and learning about me. Now it contains a blog. With the ever updating content, it made sense to have the blog as the main focus of the site.
Just as a reminder and some information for those who didn’t see the prior design: previously I had a separate home page which contained summaries of the latest 5 blog posts, then the blog page which would show the latest post. All of the other pages haven’t changed.
What was wrong with how I had the blog laid out? Firstly, the home page felt out of place and lost. Many blogs have a home page which contains summaries of the latest few posts (see ThisIsMyNext, All Things Digital and Engadget for just a few examples), so I figured I would do the same. What I had overlooked was the blogs with summary pages post far more often then I ever will. These summary pages work since people need to be able to see the what are the latest posts over the course of a day. Since I’m updating relatively infrequently, it just didn’t make sense; adding a layer of distraction from the content below.
To fix this, I made the blog page the home page and eliminated the summary page completely. This brings the viewer straight to the content and from there each post has a link to the previous one (in the future I will be adding additional navigational aids such as an archive and click-able categories).
The second issue was I didn’t have a sidebar. Yes, I consider that an oversight in the previous design. The reason? People on the web want to get in, read what they want, then get out. The sidebar provides an easy way for me to have a short description of myself (see right) as well as host other content that I don’t want to be the focus, but still consider necessary to the user experience. The alternative for this content before was a completely separate page and link in the main navigation.
Infrastructure Changes
Although the design decisions make a difference in the short term for visitors, how the site is managed and organized on the server can make a profound difference in the long term. That’s why so soon after implementing my blog system, I redesigned the structure that the blog was built off of.
The biggest decision and change that I made was the switch from my blog posts being dynamic pages to static. Let’s first look at the difference between a dynamic and a static web page.
Static vs. Dynamic
These two terms refer to how website content is generated in the web browser for the viewer to see.
On a basic level, static web pages will show the exact same thing to the user every time they go to the page. This would be the large majority of pages on the web.
Dynamic web pages on the other hand, manipulate or customize the content in some way before the user sees it. An example of this is Google’s search where one page (google.com/) shows the results for any search query (with some additional information stored in the URL). Often times a dynamic page requires accessing a database for information. Any moderately large website uses dynamic web pages to allow for easy content management; you don’t have to hire a web developer just to change the wording of something on a page, but can enter the changes into a web form.
How They Affect Blogs
With blogs, either method can be used to present the blog posts. In the initial version of my blog, I used the dynamic method which meant that I had one page which pulled the information for a blog post from the database. This, however, presented a few issues:
- Nasty URL: With this system, the blog post being viewed had to be passed to the blog page through the use of a post ID which corresponds to the entry in the database behind the scenes. What results is a URL of the form colincwilliams.com/Blog?post=60. This provides no information to the viewer and just doesn’t look good.
- Speed: With the dynamic system, the database is accessed every time a post is viewed. Database access is a slow operation and therefore increases load time for the page. For low to moderate traffic, the slow down is negligible and perfectly manageable. In high traffic situations (i.e. when extremely large numbers of people are accessing blog posts at the same time), this speed drop can become devastating; sometimes causing the website to seem unresponsive.
While I doubt I will ever face enough traffic for the second point to become an issue (although it never hurts to future proof; one link from a site like Daring Fireball will bring a blog to its knees if it’s not set up properly), I took great issue with the first. Once I was linking to my own posts and typing in the URL, I realized how bad that URL style is in this context. For that reason, as well as for the immense learning experience of doing something new, I decided to switch to static pages for my blog.
You can see the change in the URL with this, or any of my posts. It now portrays the year and month in which I posted, as well as has the full title of the blog post right in the URL. This is just another area of polish that cleans up the look of the entire website.
There is an issue with the static system, however. When I decide to change the HTML structure of the website to change the visual design, I’m going to have to regenerate all of the blog post files with the changes. This could be somewhat difficult, or at least a large operation, in the future after I have made many posts. I do believe that the improvement in user experience and future proofing for traffic increases outweighs that single complication though.
Overall my folder structure on the server is clean and efficient, yet I believe I am providing the best end user experience with these structural changes.
Conclusion
I hope you like the new design of the website. Please feel free to let me know what you think so I can keep making the website better!