``The_Laptop's Domain'' Re-Design

I've had my personal domain for the upwards of five-ish years now, and it felt like it was high time for a re-design. There were a few reasons why this was so:

1. The content is getting increasingly haphazard and hard to manage---I hand-code every page without the use of any CMS to make the loading speed as fast as possible and the hosting costs as low as possible.
2. XHTML 1.0 Strict was starting to feel very limiting when I tried to write up some online tools/games.
3. I was using enough of the ``reverse chronologically ordered list'' to demand the use of reversed in the list tags, but that was not supported in XHTML 1.0.
4. Did I mention that maintenance was a nightmare?

So with that in mind, a re-design was definitely in order. I chose to use HTML5 and CSS3 this time partly because they are easier to maintain, and partly because they allow further exploration of the hypertext medium that old HTML and XHTML cannot provide.

When I first started on my own website back in late 2009/early 2010, I did not have much of a structure to begin with. It was simplistic to say the least. But as time went by, I added more and more unrelated content items, some of them necessary, some of them merely for padding (remember the White Noise and Pink Noise under Digital Music?). This made the flat structure that I was using untenable.

And then there was the whole shebang I did to make things mobile friendly. I won't go into the details here (See here for the gory details), but suffice to say, the script I wrote was not scalable to a richer set up. Thus it was the first thing I rewrote.

Then I looked into the design itself. I didn't like the fact that navigation was particularly frumpy, and that there were many horizontal lines breaking things up. I found it unnecessary especially since I am already relying on variations in size of the text to segregate information. Speaking of fonts, I was also getting appalled at the rather unreadableness of Candara (ironic since this blog is using Candara now), and so had to do something.

The result is what you now see at http://thelaptop.info/. I have retained the colour scheme from the past, tweaked the layout, updated the font to use Open Sans (self-hosted because I know some folks don't really like the fact that Google can track their web access patterns through the resource pull), and overhauled much of the words used. Here are some sample screen shots comparing the old and the new design:

Here we see the much more compact yet loose layout on the home page. When JavaScript is enabled, additional left and right arrows to jump backward and forward in history are provided.

Now we look at samples of really long prose in both the old and new designs. The text is slightly larger but is definitely more readable.

I have removed as much of the ``toggle the list'' tags by conflating them into the ellipsis metaphor that I use everywhere to collapse away objects.

Tables also see a light adjustment to sit more comfortably in the middle.

The single most fun thing about using HTML5: reverse numbered lists to better represent the reverse chronological order.

At this point I can say that the basic skeleton of the new website is in place. Professional credentials, writing, reading and shopping lists are already ported, as well as the grandfathered in tuning layer I wrote for Nyquist---I did not attempt to convert that one to the new format, and it is the only part of the old site that is retained wholesale. Stubs for the new categories are put in place, and I will slowly port over the old material over as and when they are relevant.

I had also done quite a bit of magic in .htaccess to reduce the amount of changes I need to effect outside of the domain, so for the most part everything ought to be transparent.

I can go on, but I think that's as much as I want to really convey.

Go forth and enjoy the new website design!