Homepage Design

I am a strong believer that HTML should be used to deliver data and that CSS and JavaScript should be used only to augment that data for a better user experience. This is in line with the concept of progressive enhancement.

While designing and coding the latest iteration of my website I was confronted to with the question of how should I handle the homepage. Traditionally the home page of a “blog” site returns the most recent or several of the most recent posts, either in their entirety or just summarized text. Users can then click on the post title to view the full post on its own page. Since I am taking a completely static approach to my site and I am currently not using any generator scripts (such as Jekyll), having a traditional homepage would mean maintaining the same content in at least two different locations. For now I have elected to have the homepage return only a list of posts with their titles linking to the full document. The homepage is then effectively an “index” both technically being that it is index.html page in the root directory, and semantically given that it is a list of pages. From an SEO standpoint this is great, the page is effectively a sitemap (even though I already have one of those) and none of my content gets repeated on my site making each page more valuable. This is also good from a metrics standpoint since each view of a post will absolutely be captured as an individual page view.

I recognize that this is perhaps not the best user experience. There is a reason why most blogs include the latest content on the homepage after all. If a user is coming to check on what’s knew on the site they don’t necessarily want to click through a bunch of links to know what the articles are about. To remedy this I am using JavaScript and CSS to pull in the full article content for the most recent post asynchronously. For now it is just one post at a time, but users have the ability to click through all posts in chronological order. This means I only have to maintain the content for each article in a single location, with the exception of the title. I also still get good metrics by utilizing a custom Google Analytics action whenever a post is viewed on the homepage. This is actually better data than I would have had if I was just including the content since I can identify how much traffic each post gets even if people don’t click through to the post page itself. Since this is all done with JS and CSS it gracefully degrades and doesn’t have any impact on how bots and crawlers see my site content.

I intend to expand upon this functionality in the future. Perhaps I will include more than just one post at a time, or maybe I will switch to an “infinite” scrolling approach. I also intend to add more visual appeal to the transitions and loading periods. For now I think the result ends up looking a little nicer than just a page with a list of links.