Blog Updates: It's Responsive!

There's been a lot of changes to a few of my websites lately, including this blog. Inspired by the whole idea of responsive web design I've been going through and refactoring the front end logic. This involves more than just updating CSS. Removing jQuery, adding some HTML5, and cleaning up the controller layer of my application are all part of these sweeping update. While my home page and lifestream have plenty of improvements, this blog has received the most significant amount of change so far.

Responsive Design

There were a number of design changes I wanted to make with the blog. A big readable serif font for the posts, larger images for hiking posts, and more obvious calls to action were just a few of these. None of these changes were as important as making the site responsive. A full 15% of visitors are coming in on a mobile device, a number that will only grow in the coming years.

By making the blog responsive the content will 'resize' to fit the screen resolution. That allows me to design layouts that will fit on smaller mobile devices and larger widescreens. Granted, people have a tendancy to prefer a small amount of horizontal text for large amount of content, but this does give me some flexibility in the future.

I had a lot of fun doing responsive design. It can get frustrating dealing with cross-browser compatability, even if older browsers ignore the responsive statements, as its adding another layer of complexity to the design layer. There were a few elements I chose to hide on smaller screens to improve usability, but beyond that I tried to use best practices across the board. Readability, obvious links, and adding breakpoints with the content are all points that I kept in mind during the redesign.

Front-End Optimization

If I was going to be building logic to handle mobile devices than it would be only fair to keep page speed in mind as well. The main culprit here I wanted to clean out was jQuery. It may be only 32kb, but there was no true added value and Javascript rendering still takes a chunk of time on top of download time. I was using jQuery to wrap up my Google Analytics in an object format as well as submitting commets via an Ajax process. It didn't take a lot of rewrite to remove it all together.

CSS resets are used to start your styles from a blank slate. Browsers have different default settings that are difficult to work around and wiping them all down to a very plain surface can help with design. They also come with hefty performance costs. Right now I'm trying out a cleaned up version of a normalizer, which is meant to apply similar modern styles cross-browser instead of wiping everything out, but I'm still concerned about the CSS rendering.

Outside of removing jQuery and changing up my approach with styles I've also tried to go through and optimize the amount and types of requests per page. I'm still working through this phase, using data streams instead of background images and bringing requests down to a single domain, but the boost in performance I've gotten already is promising.

New Features

Finally, the new shiny features! Of course, the design has been updated, but that is more tied to making the site responsive than something drastic. Larger post images were important for me. The old ones were around 500px wide and the new images are 800px. The change is relatively small but very striking for long time users. There are a lot of images on this blog (somewhere in the realm of 500 to date) and I wanted to show them off a bit more.

A really cool feature I added is the 'related posts' on the bottom of all posts. This logic takes some of the keywords from the post and does a comparison to other posts and pulls some of the closest matches. This query is a bit hefty and may need some tweaking down the road, but the result is pretty awesome.

Another new feature are the introductions on top of the category, home, and some of the tag pages. I wanted to make this blog more friendly for first time visitors, people who may not know what the Huron Mountains are or too much about PHP, so I added some helpful information at the top of these listing pages to help them out. I'm also curious if they'll have some SEO benefit too, but that is secondary to the usability.

As always I have more plans for this site. My big picture refactor is less than half way done: I still need to rework my waterfalls, map, music, and portfolio sites, each of which will take a decent amount of effort to do. I still want to make more changes on my blog though. Adding grouping and ordering logic to posts that are in a series, having email notifications on published posts, and colored markup for my coding posts are all wishlist items for future updates. After all, the point of agile development is to never be done with anything, right?