Programming Included

Blog v0.2: Improving the Blog Reading User Experience

Comment Sections, Buttons, and Aesthetics

Table of Contents

As the new year begins and as the winter quarter is about to start, I wanted to update the website once more. For those who have been following the website layouts, there are several changes to the website that I have been doing incrementally. This post will be an attempt to capture most, if not, all of the changes that were significant.


Article Sections

Look up, what do you see? Why, it's an article section! These title sections were introduced while writing the blog: Handmade Hero and D3js.
These sections were introduced in hopes that the pages may be easier to skim through and read. I plan on doing more with them in the future.
The blog has been suffering through a lot of changes interms of the content width. The width of the content is detrimental to user retention because users generally skim articles in specific fashions. Having the content width be a little too long or too short may cause the user to skim content variably. The header sections are placed in hopes to combat this incase the width was too large. I did not design a full scale experiement to test the optimal width and do not plan to do it in the near future.

Fun fact: Within the Recent Posts/Blogs page, the article headers do not exhibit section lines in order to remove confusion between article divisions.


Aesthetic Changes

Immediately after posting v0.1, I made a change to the logo. A change was made to the logo cursor so that a sleeker, thinner feel can be given.



Furthermore, this logo plays better with the placing of the logo. Now I utilize HTML font underneath to represent the website's name. Overall this gives a more aesthetic feel and more 21st century computer-like method.

Somethings I want to be able to do in the future is to be able to add captions to blog images and create centering in order to make the blogs easier to skim and read. Really this is all about ease of use for the user in this case.



Finally there was a change to the placement of the logo. The logo has now been moved to the top. I did this because the website felt a little cramped and having that header space helps lighten up the feeling.

All of these changes have an equivalent mobile version that allows mobile viewing. I am looking forward to improving this version as the mobile aesthetics are not perfect yet.


New Functions

I introduced a comment section down below each blog. I used a service Disqus to do this. The service websites that are static in nature, that is, without any backend, to host comments (Comments require a backend support in order to store data.)



My decision to implement a discussion sections is in hopes that people will be able to ask any questions in the future. Currently the content in the blog is not much, however, this may change as the blog starts to gain momentum.


Invisible Changes

There are some internal changes too! HTML has been updated with paragraph tags in order to better update the website in the future. This also helps any bots that may crawl the site for SEO. But sadly also bad for scrappers :/ I added some custom helpers to help with some blog formatting. All of these changes are plans to better format and change the blog when needed in the future.

For those who are interested in making their own blog and would like to know what tools I am using: I am using Middleman with Github as hosting. Until next time! Looking forward to continuous updates in the future.

comments powered by Disqus