Nate Wiger vs Technology Code always works better after a few beers

Jekyll Plus Twitter Bootstrap on S3

I’ve decided that modern web development is largely a test of your personal pain threshold. My blog redesign goals seemed reasonable: A responsive, mobile-friendly page layout, easily searchable by Google, that could be edited locally and then pushed to a hosting service. At times it felt like I was building the Curiosity Rover II.

My main goal was to create a responsive page design that would work equally well on laptops, iPhones, iPads, Kindles, and so on. When I’m reading on an iWhatever, it drives me nuts when I hit a blog with 10pt font that I have to pinch in and swipe back and forth to read. But creating a fluid layout isn’t as easy as just shrinking things; you need to reshuffle the layout, as this excellent slide deck highlights.

So after a good amount of brain stuffing on responsive design, I settled on the following packages to make this all happen:

Some of these worked great. Others made me want to club a baby seal.

Laid Out

Here’s a comparison of my finished blog layout on a laptop:

Laptop layout - full page

And on a mobile device:

Mobile layout - top
Mobile layout - bottom

On smaller screens, notice how the search bar remains up-top, under the title. My bio, on the other hand, shifts all the way to the bottom, after the article. I wanted people to hit my content first, and then my smiling face after they had read the article, so they could look at it with either adoration or disgust.

If we breakdown

Here’s my core page structure:

<div class="row-fluid" id="topbar">
  <div class="span6" id="blogname">
    <a class="brand" href="/">Nate Wiger vs Technology</a>
    <em>Code always works better after a few beers</em>
  </div>
  <div class="span6" id="searchbox">
    <!-- Google custom search box -->
    <gcse:searchbox></gcse:searchbox>
  </div>
</div>
<div id="searchresults">
  <!-- Google custom search result -->
  <gcse:searchresults></gcse:searchresults>
</div>
<div class="row-fluid">
  <div class="span9">
    <div class="index-content">
      <!-- Article or list of posts -->
      
    </div>
  </div>
  <div class="span3">
    {\% include sidebar.html \%}
  </div>
</div>

http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design

DNS

$ dig +short allthingsdistributed.com
174.129.25.170
$ dig +short www.allthingsdistributed.com
s3-website-us-east-1.amazonaws.com.

Twitter Bootstrap was the real enabling tech here

Other Cool Resources

Nate Wiger's handsome mugshot