Speed of Light Refined

Readers who visit the site might notice some slight modifications to the site's design, and I'd like to take a moment to go over some of them. While the changes aren't significant enough, visually, to call this a redesign, the whole underbelly of the site's style and some fundamental pieces of its markup have been refined and re-written.

Markup

The markup for Speed of Light hasn't changed too much; it's always been following the additions of HTML [5], but now the elements are nested a little better, in addition to some CSS-element hints for a better layout, which I'll get to shortly. Nothing too exciting here.

At the bottom of the main page, I've also removed the “Older/Newer Articles” link. My analytics told me almost nobody used them. Instead, I'm trying something different: a link to the entire archive. Yes, this means the page might take longer to load, but I find it much more convenient when I'm looking for something. I might tinker with this in the future, but for now I find it much handier than an arbitrary amount of articles per page.

CSS

The style for this website has been completely re-written from the ground up, though you'll notice the end result is quite similar to what I already had. The most noticeable difference is the mast header, which is no long trapped inside its black box. It has much more room to breathe.

You might also notice the page itself just has far more room to breathe, with a better vertical rhythm. I grabbed a copy of The Elements of Typographic Style this summer, and this was the perfect application for it. In short, the lines and the spaces between them are no longer arbitrary. The whole design has been completely calculated and measured, and I think is much nicer on the eyes as a result.

I've also shrunk the text a little bit, though I'm not sure if I'll keep it so small. The result is body text has gone from around 19px to 16px. I generally tend towards larger type sizes, but I'm going to go with this for the time being. If you find it too small, get in touch. Alternatively, if you're using Safari on Lion, you can two-finger double-tap to have the articles zoomed in.

Responsive Design

The biggest change of all, you probably won't even notice: I've switched to using an open source CSS project called 1140px, which defaults to being more responsive when it comes to different window sizes. This means, the site should scale well, no matter if you're using a 30 or 3 inch display. This also means the site scales down well on mobile devices, such as iOS, just fine. Android devices are still yet to be seen. My guess is it will render well, but with terrible typography.

So try it out, and let me know how it looks, and if there are any major problems with it, be sure to let me know. I'll continue to tweak it in the coming weeks, but that is in short version 2.5 of the design for Speed of Light.

Join the Discussion 👂🤔✍️

Please read the Discussion Guidelines before replying.

☑️ Email me when someone replies.

Speed of Light