My new homepage

There’s a TV program on the BBC at the moment that we’re watching called Celebrity Masterchef. In it a bunch of celebrities (90% of which are completely unknown to me) tackle preparing and cooking dishes, competing against each other for the best one, well presented. There’s a couple of jokey judges (who I again have never heard of) to shake their heads in wonderment at the inability of the “celebrity in the street” to actually cook something appetizing.

After watching a few of these, we’re getting the idea that, in order for someone to have the best chance of winning, they’ve just got to cook a pretty ordinary dish – even simple – but present it well. Those who try for a fancy dish but don’t present it well, get marked down.

Over the past July 4th weekend, I’ve been putting that maxim to good use myself. Not in cooking, mind you, but for a new domain I wanted to have as a goto place for all things Julian. In the past I’ve used imetjulian.com – “hey, if you want to find out about me, go to imetjulian.com – I Met Julian, geddit?” – which was moderately successful, in the sense of no one really followed my exhortations at parties to do so. I copied the HTML/CSS layout – the rendering of a couple of business cards – from other versions of the same idea under a Creative Commons license, and added things like FontAwesome icons and the like.

And then once Twitter got its act together and had some nifty looking homepages for your accounts, I created whoisthisjulian.com, with rather more success, even though it had the same content as before. To keep them separate in my mind, I’ve now added a background image to whoisthisjulian.com and rearranged the Creative Commons stuff. But still it didn’t satisfy. The layout and content was fairly simple, sure, but it didn’t really snap. So I bought another domain, jmbucknall.com, to act as the entry point for people to find out about me and wondered how to design it.

Coincidentally, last week I read an article on minimalist website design (The Roots of Minimalism in Web Design) and it had an image of a homepage for a designer:

Current homepage for Brian Danaher

That was it, I felt; the design for my new website. Now as it happens, Danaher decided for whatever reason to use images for the elements on his page and there was no way I wanted to do that – and his HTML was … let’s generously say, templated, scripted, and old fashioned. Mine had to be HTML5 and CSS, and, if I could get away with it, no JavaScript. Also I’d recently bought a font I liked (it’s Gentleman: “a legible typeface with clear geometry and spiced with nice humanist terminals enhancing its identity”) in a one-day sale, so I was eager to use that too. The kicker: it came with a licensed Webfont version as well. As you can see: simple ingredients to make an ordinary website, but the presentation is going to be all.

After that it was pretty much plain sailing. I designed it in Microsoft Word to begin with so that I could decide on the weights of the font I wanted to use and to futz around with the names of the links. Then the HTML/CSS took about an hour to code up and test. I also used an idea from a post by Eric A. Meyer on CSS popups (no JavaScript!) to display the descriptive text for each link. In essence, put the description in a span:

    <ul class="links">
      <li>
        <a href="https://boyet.com/" rel="bookmark" title="Personal blog">
          BLOG
          <span>Read posts Julian has written on topics that have piqued his interest (and still do)</span>
        </a>
      </li>
      <!--more links-->
    </ul>

…hide it by default via CSS, and then style it when the link is hovered (again in CSS). I went for casting it as a block element underneath the link word.

.links a {
  color: black;
  text-decoration: none;
  display: block;
}

.links a span {
  display: none;
}

.links a:hover {
  color: #008000;
}

.links a:hover span {
  display: block;
  font-family: "Gentleman500", Verdana, Georgia, sans-serif;
  font-size: 16px;
  line-height: 16px;
  color: #444444;
  padding: 0 0 10px 10px;
}

Of course, once that was done, I had to do the mobile version. I’m surprised as to how quickly that went, truth be told. The hover/popup stuff works well on a phone or tablet: the first tap shows the description, the second navigates to the link. And then, I decided to write a proper About page. That caused me to introduce some @media queries in the CSS, by which time I was in danger of overdoing the simplicity of the dish, even though the presentation was good.

Anyway, it’s done now. I must say that I like the design, I feel it is nicely minimal and works extremely well with the font I chose. It also gives a professional impression to someone navigating to it from Twitter or LinkedIn. And did I mention that it has no JavaScript?

  Loading links to posts on similar topics...