Elliot Jay Stocks is a designer, speaker, and author. He is the Creative Director of Adobe Typekit, the founder of typography magazine 8 Faces, one half of Viewport Industries, and an electronic musician.

Made to measure

Posted on 18 September 2012 21 comments

Well, it looks like I’ve redesigned my site again.

This recent spate of redesigns might seem a little masochistic — and quite possibly a little insane, too, given that we’re launching Insites: The Book tomorrow — but this one comes from a deep frustration with the previous design: a design that, when created, served the purpose of allowing me to play with my ‘art directed’ series of web type experiments, but over time became nothing more than a burden; a design that got in the way of me actually writing. Specifically, the measure (line length) was just far too wide. Yes, I could have adjusted that, but why polish a turd? There’s something liberating about knocking everything down and rebuilding from scratch.

Unlike the past two incarnations of this site, which were designed entirely in the browser and during a very short period of time, I designed this one in Photoshop as part of a workshop that Keir and I taught last month, and then I sat with it for a while. After realising that I still liked it a few weeks later (a rare thing indeed), I began the process of writing the markup and CSS (directly within the Harmony interface) during the odd evening, and then, whilst waiting for a one-and-a-half-hour-delayed train on Sunday, I got the bulk of it finished. I hope — although only time will tell — that the gaps in between the creative process have made for a more informed design.

Anyway, back to the subject of the measure. Bringhurst said:

Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal.

Rather than count characters, I’ve gone for something that simply looks right. There’s fluctuation, of course, because this is a fluid, responsive design, but when I have done a quick count, I’ve been pleased to find that the measure generally conforms to Bringhurst’s guide. Most importantly, though, the main article’s measure dictates the entire layout of the site: media queries kick in at certain points to nudge things back into place. Unlike almost any other responsive site I’ve designed, there’s no max-width set anywhere in the CSS file: it’s actually padding set on the html element that does a similar (but more flexible) job. This was a happy accident after finding that there was no way to set a max-width on either the html or body elements whilst still maintaining the relationship with the faux column on the left (which you’ll see if you’re reading this in a browser window wider than 720 pixels).

When we focus on measure, we are of course focussing on the pleasure of the reading experience (which, in turn, feeds the pleasure of the writing experience) and that is exactly why this design is so minimal: there’s almost nothing to it beyond the actual article — and why should there be? This version represents the culmination of my move away from unnecessary design fluff. If anything, it’s something I came close to with version six before getting distracted by the idea of art direction in version seven, but the thing I’m most proud of with this design is that although it’s utterly minimal, there’s still room for art direction if the post requires it: check out the slightly refactored ‘Tomorrow’s Web Type Today’ posts about ligatures, subsets, swashes, and stylesets for examples.

Of course, I know some people will hate this. I can guarantee I’ll get comments saying things like, ‘the site is barely responsive when everything sits in such a narrow centred column,’ and ‘on my 27″ iMac, there’s loads of space at the side you could’ve used.’ But such responses miss the point. Responsive web design isn’t about filling every available bit of whitespace — it’s about balancing the innate flexibility of the web with a designer’s desire to control the output. And, in case you’re wondering, I’m writing and reading this on a 27″ iMac.

One last note on the typography: due to so many complaints from readers about the poor rendering of Skolar Light on (some versions of) Windows, I’ve switched all type to Skolar Regular — which is better hinted than the Light font — and used -webkit-font-smoothing:antialiased; to thin everything down (for WebKit browsers, anyway). Hurrah!

If there’s anything else you’d like to know, feel free to ask in the comments. And, although I redesigned more for myself than anyone else, I do hope you enjoy the new look. Perhaps this one might actually stick around for a while, eh?

21 comments

  1. Aaron Fischer

    Aaron Fischer

    18 September 2012 @ 12:14PM #

    Looks great, anyone that views a website 100% width on a 27" or 30" are insane, what do they expect. ;)
    Working on a redesign of my own, thanks for providing food for thought.

  2. Christian Krammer

    Christian Krammer

    18 September 2012 @ 12:19PM #

    Congratulations on your new design. Just like I love it lately: simple, but with a strong bias to great typography.

  3. George Robinson

    George Robinson

    18 September 2012 @ 12:45PM #

    Looks great! A shame that Skolar renders so poorly on Windows 7.

  4. dimitrie

    dimitrie

    18 September 2012 @ 12:50PM #

    very nice redesign! love it that you kept the option to make article specific art decisions!

  5. Vasilis Dimos

    Vasilis Dimos

    18 September 2012 @ 12:57PM #

    Hey Elliot,
    Nice redesign! Your fast release cycle makes me always feel bad, with my 10 prototype PSD’s sitting somewhere in a folder.
    Anyhow regarding the
    " …This was a happy accident after finding that there was no way to set a max-width on either the html or body elements whilst still maintaining the relationship with the faux column on the left …"
    I am getting quite some sluggish resize behavior on my browser window for the site, so I looked at the code and you used a empty content div for the faux-column. We were going for the same base layout and used a gradient on the body element in order to create the faux column at a certain page percentage (http://www.skroutz.gr/c/404/psigeia/m/45/Bosch.html). Works fine and might help with render performance.

  6. Claus

    Claus

    18 September 2012 @ 01:03PM #

    I really love the generous amount of whitespace, the proportions & the overall look. Skolar Regular does render beautifully on Windows (FF, Chrome not so much). But I have to say, that the font size is a bit too small for my taste and the quote could use a bit more line-height.

  7. Calea

    Calea

    18 September 2012 @ 01:30PM #

    Very beautiful work! I would suggest maybe sizing up in the body text on the mobile layout ever so slightly though. Looking forward to many great posts in this new format, well done!

  8. Jan-Paul Koudstaal

    Jan-Paul Koudstaal

    18 September 2012 @ 02:31PM #

    I agree with Claus, the font-size is too small for my taste as is the line-height for the quote. Nonetheless: good job on re-re-designing!

  9. Mark

    Mark

    18 September 2012 @ 02:38PM #

    Looking good Elliot, geting a rather strange effect on text before/after that highlighted: http://d.pr/i/BPKm

    Could be my computer going mentaloid

  10. dj

    dj

    18 September 2012 @ 05:34PM #

    Actually, I like them both. You compare the last iteration to a “turd?” I wouldn’t. I must say that I remarked to myself several times similar things to: “he must spend a lot of time on each post”; but, thought yo must have had it automated somehow. I enjoyed the “artsey-ness” of it – and now like this one.
    There is one issue I see and that’s the font size (on wide desktops) – what is it? I can barely see it and feel like I need to do a zoom on every page in order to read it without straining. Isn’t there something “responsive” to take into consideration us folks on large screens who don’t have our screens touching our noses?

  11. Erik

    Erik

    18 September 2012 @ 05:36PM #

    I salute you for taking line length into consideration, something I find many otherwise fine designers forget when working with responsive designs. Personally I’d go with a slightly bigger font-size to let Skolar shine, but hey that’s just me. Stellar work!

  12. Stéphane Lambion

    Stéphane Lambion

    18 September 2012 @ 06:14PM #

    Hi Elliot,

    Great redesign, I like it much more than the previous one! The huge amount of whitespace is cool, but the font-size is a bit too small, and, as I emailed you some time ago, the Skolar font is still not showing up – I’ve Georgia instead.
    And you also could increase the footer’s line-height which is really tiny.

  13. Marios

    Marios

    18 September 2012 @ 08:10PM #

    I really like the minimal look, and as to the redesign well this is the life of a designer we will never be happy and/or satisfied with our own outcome..and we will always try anything and everything to change it and make it better..

  14. Stephen Meszaros

    Stephen Meszaros

    18 September 2012 @ 08:39PM #

    Love the redesign as well and certainly agree with many of your sentiments. My only comment would be that the font size is a bit too small for my liking as well. Kudos on doing it for yourself!

  15. Paul Christian

    Paul Christian

    18 September 2012 @ 09:00PM #

    I like it Elliot! I do agree however on the (a bit too small for my taste) font size, and I also wondered why the text collumn is set mostly to the right of the screen. I remember the Information Architects theme having a similar ‘to the right’ lay-out of the text. Is there a psychological reason for this?

  16. Aplomb

    Aplomb

    19 September 2012 @ 12:24PM #

    Have you checked your website on Android devices? ‘text-rendering: optimizeLegibility;’ didn’t work very well when viewing my own website on an Android device.
    It knocked the “I’s” into the other letters. Strange, and really annoying. I just turned it off since it doesn’t do much in many browsers.

  17. George Robinson

    George Robinson

    20 September 2012 @ 11:33AM #

    Please increase the font size of the paragraph tags to 1.1em :)

  18. J. Blunden

    J. Blunden

    21 September 2012 @ 02:17PM #

    Type should be a little bigger. Otherwise great.

  19. nomi

    nomi

    21 September 2012 @ 06:00PM #

    As @J.Blenden mentioned, I noticed marginally small type too. Would you like to comment on what made you go for such small size?

  20. Stephen Coles

    Stephen Coles

    27 September 2012 @ 04:20AM #

    Elliott, nice look overall, but your text and comment type really is too small. Especially on a Retina display. Plan for the future.

    I would bring it closer to the current blockquote size and reduce the bq so it’s the same size (a larger bq seems a bit odd to me).

  21. Vincent

    Vincent

    30 November 2012 @ 10:28PM #

    The old version was beautiful, but i really like the new design.

© 2005 – 2014 Elliot Jay Stocks. All rights reserved. Powered by Harmony and tracked by Gaug.es. To keep updated with new content, you might like to subscribe to my RSS feed.