My first responsive site design was working on this site right here, a little over three years ago. I definitely learned a lot doing it, and I think the fact that it was responsive helped me land a job at the time.
However, I definitely bumped my head a lot against certain things, and in the intervening three years, I learned a lot about how to approach a responsive design.
When I felt it was finally time to make a change on this site, I decided to focus on a couple things:
- Readability – as this site is first and foremost a blog
- Performance – not that the old site was a dog, but I definitely did a few things wrong
To aid in readability, I started with a very clean but warm design. There is very little cruft. I didn’t want the site to feel like a hospital, though, so I tried to introduce personality through bits of microcopy around the design.
I also used a new body typeface – Source Sans Pro – and gave it a very generous size at large viewports. I’m not sure if it’s to everyone’s taste, but I like it.
As for performance, I had done some things very, very wrong with my previous design:
- I manually loaded a version of jQuery, even though WordPress was adding its own. So, I had it loading twice (WTF?)
- My CSS wasn’t minified
- There were a lot of HTTP requests that were just silly
So, I focused on cutting all that out. I got the home page down to:
- 16 HTTP requests
- 103KB Transferred
- ~750 MS load time
The biggest asset that I have loading is currently jQuery, which, I’m not terribly sure that I need. I think I only need it for my portfolio right now. I may cut it out for visitors to my site in the near future.
Other than content images, the only graphic is the inline SVG rocket icon in the header and footer.
I’ve also reworked my portfolio, and I have up to date entries there!
So, please, check it out, and let me know what you think!