After writing and sharing my last post regarding my challenges in getting open graph tags to work on this site, a friend of mine tweeted a really sad image of what my site looked like on phones. I already mostly knew that reality, but to be called out on Twitter about it was a real shot to the gut.
It was time to get my shit in order.
I already had planned a bunch of improvements and enhancements to this site, but at that moment I vowed to make responsiveness and/or mobile friendliness top of the list. We do, after all, live in a world dominated by smart phones.
So what did that entail, exactly?
I’ll be up front with you: I still have basically no idea what I’m doing when it comes to CSS and/or SASS. Writing styles has been a significant challenge for me, and still is, as you have likely noticed on this site here. This meant that I needed to hone my skills, and fast. The first order of business was taking some courses on Code School to make sure I had the fundamentals down. That was pretty easy, and I felt confident to soldier on.
Now I had a decision.
Was I going to use a framework? Another friend of mine simply recommended I go with Boostrap. I wasn’t sold just yet. The entire premise of this was to have it be a learning experience, and I wasn’t convinced Bootstrap was the right choice given that goal.
That said, I was also fairly certain building it from scratch was not a possibility, nor was it a great use of my time. I learned that one the first time around with the first iteration of this site. It was ugly, hard, and ultimately not fruitful at all.
Luckily a while back someone (who I am forgetting now) tipped me to something called Grid by a nice gentleman named Adam Kaplan. This felt perfect. It was a framework that’d save me a lot of the effort and time of having to figure out how in the world to handle responsiveness and Media Queries (@media) masterfully. Going with this framework was also ideal from a learning and doing perspective since it’s pretty bare-bones outside of the grid framework it gives you.
So that’s what I did.
About four or so hours after throwing my old stylesheet straight into the garbage, I ended up with what you’re seeing here. (As of November 26, 2014. Site subject to further change.) It still looks like butt, but at least it’s serviceable on mobile devices and weird browser dimensions.
So what’s next?
I’m on the fence about whether I should focus more on making it not just functional, but actually nice to look at. I think I might head back to the land of functionality for a bit. Next up is probably adding some sort of comment system to these posts so all you folks can tell me just how dumb I was to not know all this stuff already, or fight about things, or just generally insult everything. Disqus seems like the obvious option here.
Anyhow, that’s it for now.
Onward and upward,
Jordan