I know I ended off last week with an emphatic “Blog design complete!”, but truth be told, I wasn’t happy with what I saw. Having come across a really good article written by Pearsonified on how readability on the web can be optimized for readers by following the ancient Golden Ratio, I became really inspired and wanted to keep this in mind for the design of danl.im.
My ideal style setting was to have a single column, 650px wide post area, with 650px wide photos. Using Pearsonified’s typography calculator, such a width would’ve needed a font-size of 20px.
However, after spending many hours pouring through the style sheets and code of Standard 3.0, I just couldn’t find a way to bring the max-width of the blog down from 940px to 650px without breaking the responsiveness of the theme (Standard 3.0 is awesomely built on Twitter Bootstrap).
So if you’ve visited my site during the last two weeks, you would’ve seen a very ugly interim version of it with a 940px wide post area, 940px wide photos and 27px sized font. It was horrible.
Thankfully, Jason Bradley came to the rescue again. The article that he shared got me thinking and wondering how else I could shrink the site’s width down to 650px, and after a while of tweaking, I finally got it!
The problem all along was that I’d been playing with width: 650px, which ended up hard-coding the width into the site, breaking it’s responsiveness. What it should’ve been instead, was max-width: 650px;. That, along with a few margin corrections, solved the problem that had been bugging me for the longest time. The code looked something like:
margin-left: auto;
margin-right: auto;
max-width: 650px;
What you see now is a newly revamped design with a smaller width and font size, still adhering to the Golden Ratio typography rule. Never giving up pays off huh. I can finally say “Blog design complete!” and go to bed in peace.