Intro­duc­tion

I’ve never really fully fleshed out why I’ve shied away from web design, but my lead­ing the­ory has to do with con­trol: one can tightly grasp how frame­works and code inter­act with the servers, and when hand­ing off this work to a browser, you can never fully pre­dict how it will react. I’ve never liked the idea of mak­ing browser-specific expe­ri­ences and test­ing with dif­fer­ent devices. With the back-end devel­op­ment, I can eas­ily make sure every­thing is work­ing as it should and can leave the design­ing to some­one much more capa­ble than I am–and per­haps with more patience too. And, of course, I have a mind set of “well, all you need is a but­ton and para­graphs. If I know how to use it, that’s good enough for anyone.”

After spend­ing years knee-deep in code and servers, I’ve decided to refresh myself in the world of web design. I started pok­ing around at dif­fer­ent tech­nolo­gies and made a pretty sim­ple redesign of my staff page, which had pre­vi­ously been kind of a park­ing lot after I moved my blog over here.

Tools Used

Twit­ter Bootstrap

I didn’t want to start from scratch with CSS and design ele­ments, and selected Twit­ter Boot­strap as my scaf­fold­ing. There isn’t really a good rea­son as to why I picked this par­tic­u­lar frame­work other than it was the first that popped into my mind when think­ing about find­ing such a thing, and it seemed to have enough doc­u­men­ta­tion for my purposes.

The doc­u­men­ta­tion is good enough, and I didn’t really have a prob­lem with it besides the fact that I find that lay­outs look much bet­ter (and align) if you use row-fluid for all divs: mix­ing it with­out fluid makes it look weird. This may be because I also turned on respon­sive fea­tures so those two are interacting.

Any­way, I used row-fluid for every­thing and also turned on the respon­sive fea­tures. It’s a good frame­work to quickly get some­thing online that looks fairly decent with­out hav­ing to cre­ate things from scratch.

Another pop­u­lar choice, albeit one which I have not tried, is Skele­ton

Sub­lime Text 2

I’ve been slowly shift­ing away from Vim to Sub­lime Text 2 for all sorts of devel­op­ment tasks includ­ing projects for Ruby, PHP, C, and HTML. Sub­lime works in GNU/Linux, is easy to get set up, and has all sorts of nifty fea­tures. It’s not free, but well worth the cost.

As an added bonus, I installed it on my drop­box and have sym­blic links to that binary in my main /usr/bin direc­tory, so all of my set­tings are synced up no mat­ter what sys­tem I’m run­ning on. You can see some hints of how I did that by tak­ing a gan­der at this script.

Zen Cod­ing

One of the big annoy­ances with HTML is that it’s tag-based, and that means a lot of struc­ture and rep­e­ti­tion. With the Zen Cod­ing plu­gin, you can eas­ily tab-complete things such as. For instance, you can type in this:

div.row-fluid>div.span4*3>h2+p*2

Then hit <tab> and you’ll get:

<div class="row-fluid">
 <div class="span4">
  <h2></h2>
  <p></p>
  <p></p>
  </div>
 <div class="span4">
  <h2></h2>
  <p></p>
  <p></p>
 </div>
 <div class="span4">
  <h2></h2>
  <p></p>
  <p></p>
  </div>
 </div>

Nifty, eh?

The Results

For about an hour’s work, includ­ing writ­ing this post, you can see some­thing that looks pretty decent at my staff website:

http://staff.washington.edu/nikky

The code, along with the sim­ple deploy­ment rsync script, can be found here:

https://github.com/allynfolksjr/staff-website