Bootstrap 2.0-based design


This is phase two of the new site.

I’m using Bootstrap. It is an incremental improvement to the last design.

What’s new?

  • Using Bootstrap changed much of the markup, but I’m focusing on user-visible changes beyond alignment changes.

  • Better navigation on touch-devices.

  • Bigger photos — all photo sizes are bigger than the old site.

  • More pleasing grid view layouts. It is trying to balance dealing with photos in varying ratios and sizes with having a regular enough layout to scan.

Development notes

  • Each time I revisit the design of the site I go back over almost every page to look for and fix formatting bugs. Sometimes I’ll fix or remove dead links or insert updates. Each time I think about making significant edits or deletions for posts that are no longer relevant. How much of a blog is historical [and thus should get just enough editing to ensure things still work] versus being a living document [and thus obsolete posts that do not have enduring value should just be removed or rewritten]? I don’t know. For now I tend to leave things mostly as they were written. As the now continues to recede from the then I will need to contemplate this. Eventually I’ll probably purge a lot of the old content — particularly the content that web logs and searches suggest nobody has linked to.

  • Having a redesign in progress just paralyzes other writing. It’s easy to say “I’ll finish that post once the redesign is done”…

  • I’ve made further use of jQuery.

  • I tried out Supersized but could not get it to work well on collections of more than a dozen or so photos. This was not usable by me because I want something that could apply to any collection of photos on my site.

  • Now using Isotope to do layout of photos in groups.

  • Using isotope and some new sizing code for the multi-photo pages to try to generate a more pleasing grid view. I’m leaving the detailed layout to isotype but helping it along by ensuring all “grid view” photos are one of four sizes. A “cell” is 300 by 200 and photos may consume up to 2 cells high and wide. A photo is forced into the size closest to its natural ratio. If it’s “close enough” then it is distorted a little. If not then the photo is automatically cropped or matted.

  • The rendering scripts are simplified.