Welcome To Site 7

Look, I changed everything! I usually redesign my blog a bit at the start of every year, but this one is the first time I’ve built a completely new one from scratch in more than eight years. As is now tradition, I’ll give you a song to listen to while you snoop around.

Site Six

It’s been like that for two years, and there were a six things I wanted to change:

1. A title

I’ve always struggled with this – I like to be clear and descriptive, but most personal blog titles make me cringe. I also have a bad name for possessive apostrophes, so “Tom Francis’s Blog” is just painful. I used to avoid the issue by naming it something completely irrelevant, like ‘Ugly Fruit’ or at one point ‘Politics’. Then I avoided it by removing the name completely, so the last few iterations have had no title at all.

This time, I was determined to have one even if I immediately regretted it. After trying several I immediately regretted, I gave up and left it as the placeholder: “Tom Francis Regrets This Already”. I still regretted it, but neatly, the more I regretted it the more appropriate it became.

2. An intro

I looked at a lot of people’s personal sites to figure out how to improve mine, and it’s weird how many of them don’t explain who the hell the person is until you rummage around. In the spirit of explaining things to assholes, I really wanted to do a better job of that. The previous site did it in a few terse, reluctant words, so I tried to make it a bit friendlier this time.

I also think a lot of us are still under the impression that the ‘home page’ is where people arrive, and then they delve into the ‘post pages’ from there. In reality, most people discover sites when they’re linked to a particular page, so they’re more likely to see a particular post first. That’s why the new intro’s on every page.

3. Responsive design

Literally more than half of internet users are browsing from a mobile device now. And they vary wildly in resolution. I’ve never liked fixed-width designs, and I’ve never had one here, but previous versions all needed a resolution of at least 1024 pixels wide. They were basically useless on mobile phones.

Rather than make a separate mobile version, which’d scale badly to the huge middle ground between a Retina iMac and a first-gen smartphone, I’ve made the whole design resolution-agnostic. Try resizing the browser window – it should adapt all the way down to about 250 pixels wide, so it should be readable and usable on anything beyond a scientific calculator.

I’m also using Matt Wilcox’s Adaptive Images code to automatically resize images to your screen width before you download them, so smaller-res devices don’t download unnecessarily big images.

4. Bigger images

At the other end of the scale, it’s ridiculous how many sites look awful at 1920×1080. That’s by far the most common resolution now, and the internet at that res is a sad ocean of wasted space around unreadable text. I wanted to make sure everything expanded at high resolutions, and I particularly wanted big, sharp, colourful images. Most of the games I write about are gorgeous, and it always makes me sad to see them relegated to little thumbnails.

5. More featured posts

Previous designs did have a column for posts I wanted to highlight, but it was a clumsy JavaScript array I had to manually text-edit every time I wanted to add something new. So I never did. This time, I wanted those to be bold, colourful little badges, with clearer titles, and a much easier way to add to them. I can just add a tag to any post to add it to the rotation there, so I’ll be expanding that set as we go. You can also read all 30 with the link at the bottom of the right column.

6. Ways to subscribe

I realise not everyone uses an RSS reader – even Google, who make the best one, are basically abandoning it. I’m still keeping it, but I’ve now set up a Facebook page and a Twitter account that only ever post when I publish something here.

I think that’s it! Big thanks to Westley Knight, Jenn Frank and Graham Smith for testing and help. As ever, let me know in the comments if anything’s broken. If anyone’s interested in the stats, we’ve just passed 26,000 comments, this is roughly the 600th post (I deleted a few), and so far 1.4 million people have been here. Wow.

20 Replies to “Welcome To Site 7”

  1. Liking the new design – a minor thing though is I feel the main body text is slightly too big reading maximised at 1920×1080 resolution, although if I resize the browser window in any way (even if I have it the full size, just not “maximised” if that makes sense), it’s fine.

  2. 16 point font would be awesome, the text is huge and makes me feel like I’m blind as fuck.

    Other than that great job. Here is to another year of great content.

  3. Overall, I rather like it; the featured articles part especially. And the jacket in your profile shot, I could never pull off black leather, only shades of brown.

    Only niggle, don’t care for the drop shadow on the text at the top of the page. Looks a bit messy when combined with the gradient. Okay; I’ll admit that that’s perhaps pedantic point, even for me.

  4. New design looks pretty damn awesome.

    (Also, the Explaining Things to Assholes link in this article is broken)

  5. Much better! Cheers Tom – as kARL alluded to, I did at one point think I’d accidentally pressed the shortcut for some sort of Large Print accessibility mode! Much more comfortable now I think (and easier to tell the difference between headings and text.)

    Definitely liking the more efficient (not sure if that’s the right word?) use of the space too – your blog has always been the reason I’ve stuck with a three column theme for my own, and every year I get more jealous at how well you’re able to tweak yours and it still works really well.

  6. Argh! I made that mistake I never make, of leaving out the http://. I promise I haven’t believed www is sufficient since 1997. It actually happened because of the noobification of address bars: if you copy and paste the URL from an address bar, it ‘helpfully’ clips off the vital http:// to make it look cuter or something.

  7. Tom, thanks for keeping on RSS – it’s my main method of keeping track of everything on t’internet so I’d hate to see it die!

    On a design feedback front, the text in the comment boxes doesn’t scale the same as the rest of the page, so right now I’ve made the page text small yet readable but the only way I can tell when I make a typo here is by the red line that Firefox inserts, because I can’t actually make out individual letters. (Ironically, Firefox doesn’t recognise Firefox as a cromulent word…)

  8. I like this new site. It’s slick and cool and it’s got a certain something about that makes it really feel like it belongs in 2013.

  9. Wow. The dynamic resizing down to tiny width is freaking amazing. Seriously the best, fastest, most responsive implementation of that I’ve ever seen. Why is this not everywhere?

    Otherwise, looks good. Regret nothing!

  10. I just noticed that on mobile, the YouTube video for the level editor doesn’t shrink with the rest of the site, so it doubles the actual width of the page.

  11. I love the Responsive design. What did you use to implement it?
    A program or did you hard code the whole site?
    Great job.

Comments are closed.