Site Redesign

The style of the site may or may not look familiar depending on which of my sites you have visited in the past.

Something I have wanted to do for a while (and the aim of this site) is to bring all of my content under two new sites - WatfordJC.UK and JohnCook.UK.

Consolidation of Content

The idea is simple: 2 websites (personal and "professional"), 5 domains (WatfordJC.com will be an alias of JohnCook.co.uk until I decide whether I want to keep it or not, TheJC.me.uk will become an alias of WatfordJC.UK), and one source of content that is displayed on a site depending on whether it belongs on that site.

Take tweets about my server, for instance. They should all be SFW and belong on all sites I host. Anything uncategorised (e.g. my couple of thousand of tweets) won't be on the "commercial" site until after categorisation, therefore one site will always have less content than the other (i.e. self-censorship).

Although the idea is simple, actually doing it will not be. As well as getting all the content together, I have yet to determine how to categorise it, how to store it, and how the backend will work.

The decisions I have made so far are:

  1. The colour scheme is going to be based on TheJC.me.uk.
  2. The site navigation is going to based on GPG.TheJC.me.uk (itself a derivative of WatfordJC.com).
  3. The canonical URLs will be either JohnCook.co.uk or WatfordJC.UK, depending on content.
  4. If there is one category I need, it is a rant category. Not only so others can filter them out, but so I can as well.

Update on

I have done a fair bit of work on the design. I have decided to use Zurb Foundation rather than Twitter Bootstrap, because after trying Bootstrap it was a bit too much hassle.

The canonical URLs are being tested (they are commented out on most pages at the moment), and I am also testing Open Graph Data, Twitter Cards, and Microdata.

Page Load Times

Gzip compression means I can't do chunked responses (can't seem to find a way to get them to work together) so page load times are an issue.

The solution I am currently investigating is to defer loading of all JavaScript until after the page has started to render, and using JavaScript to load the fonts.

The problem with loading fonts using JavaScript is that it causes a FOUC (Flash Of Unstyled Content) that would be worse if I didn't:

  1. Have some styles in the header of every page, so the navigation bar doesn't resize on font change, push content down after loading, etc.
  2. Didn't link to the site's stylesheet in the header, which is currently pretty big (82,249 bytes on the drive versus the image of me shaving on the home page being 7,298 bytes). I am not sure whether to further optimise, defer loading, or something else.

Cookies, JavaScript, and Web Fonts

I am currently experimenting with setting a cookie (lifetime of 30 minutes at the moment), and serving different content based on whether the cookie is sent to the server.

If the server receives the cookie:

  1. The server assumes the web browser has already downloaded the fonts used by the site from Google.
  2. The server adds the stylesheet for the fonts in the header.
  3. The server returns a page that doesn't include the inline JavaScript used for loading the fonts.
  4. The server refreshes the cookie's expiry time to now + 30 minutes.

If the server doesn't receive the cookie:

  1. The server assumes one or more of the fonts used by the site aren't in the browser's cache.
  2. The server doesn't add the stylesheet for the fonts in the header (to avoid blocking).
  3. The server returns a page that includes the inline JavaScript used for loading the fonts.
  4. The server sets the cookie with an expiry time to now + 30 minutes.
  5. The JavaScript does the font loading:
    1. Dims the text on screen to near invisible (start loading fonts).
    2. Dims the text that uses a font to invisible (start loading particular font).
    3. Makes the text that uses a font visible (when a font has loaded).
    4. Makes the navigation bar visible (when all fonts have loaded).
    5. Makes the text that uses a font visible (when a font can't be loaded) - not sure if implemented yet.
    6. Moves the navigation bar to the bottom of the page on failure or after "taking too long" (same position used when JavaScript is not enabled).

I am still experimenting, and there doesn't seem to be an obvious solution because when a font is loaded, it is used, and there is (to my current knowledge) no way to get a font into the browser and then do something when it is loaded but before it is rendered.

Having said that, I have only been dabbling with JavaScript (first time in a decade+) and jQuery (first time ever) for a few days, so I'm not quite sure what is possible yet.

One option I have just thought of: load some text "off-canvas" that uses each font (including the icons), then run a timer to detect when a font has loaded. Once it is loaded, dim the text used by that font, remove an attribute that has a style overriding the font, bring the pretty text into view.

Site Optimisation

Site optimisation is one of those things where there is no universal way of doing it. Take the fonts for instance. On the one hand I could merge the css files together so only one file needs to be downloaded (a best practice) but then I would lose the benefit of using Google's CDN and popular web fonts potentially already being in browser caches of visitors.