Frankfurt agency, Fine German Design, claims their website for Cologne’s art musem may be the first German museum site to take advantage of responsive web design. And it responds in a way that I find more successful than many sites that make the responsive claim. Instead of fluidly stretching images and columns of text to any size to fit the full width of the window, the grid stays constant while shifting elements to fit at specific breakpoints, and resizing elements to reasonable presets. It’s a pleasant experience overall and allows the designers more control over the typography and visual relationships.

I only wonder why they didn’t take advantage of the known presets to make text type a bit larger at the widest column width. Also, the body text would read much better in the standard Roman weight of Basic Commercial (Linotype’s Akzidenz-Grotesk), not Light.

The New York Times Magazine did something new with the online edition of their 2013 Innovations Issue, building a dedicated section of their site for the 48 short essays, with color schemes and type to match the print edition designed by Arem Duplessis.

The typefaces are LL Circular, a new release from Lineto which even gets a mention up front, A2 Beckett for headlines, Georgia for text, and just a dash of the NYT’s custom bold condensed Stymie on the front page. The format isn’t complex, but it feels like a pretty special edition of the magazine due to the unique packaging, navigation, colors, and especially the type. The design also responds quite well to narrow window sizes

I have only two complaints. Some of the color backgrounds are a little too strong for reading, especially when they also include a halftone image like the “Sleep-Away Camp” article below. To counteract this, the designers added a tiny white drop shadow to the text (an increasingly popular practice on the web), but I think this does more harm than good — though the effect is sharper and more distracting in some of these screenshots (shown at reduced size) than as I experienced it in the browser.

The other beef is minor: the right margin is slightly cropped for me (see the comments link at top of all pages), probably because they only tested on a Mac which had the default hidden OS X scrollbars that only appear when scrolling. Oops.

Props for hanging the quote!

I don’t want to read this. That background image is just too intrusive.

The blog of Professor David Shields, Design Custodian of the Rob Roy Kelly American Wood Type Collection. A modified version of the iA³ WordPress template. FF Hydra, a typeface inspired by 19th-century type, is a great pick for headlines.

“Desktop”-sized website 

Lumi is a supplier of textile dye inks and offers a new photographic printing process. The fully (fluidly) responsive website is using Alright Sans. (Also on their Tumblr blog.)

Tablet-like viewport

Phone-optimized layout

Helsingborgs Dagblad (HD) is the prominent newspaper of Sweden’s fourth largest city. Founded in 1847, in 1892 it took the step to become one of the first daily papers in Sweden. Fast-forward to 2013, wherein HD took the step from using Arial to Siri for the digital edition. The brand new responsive HD.se works on your desktop, phone and tablet.

For Pista Malmø’s spring classic race, the 2013 site builds upon earlier years’ graphic profiles. With Neutraface as a starting point we needed a fitting text face and webfont stand-in for titling. Proxima Nova, albeit a tad ubiquitous at this point, was a good match. Mark Simonson’s Art Deco influences are toned-down, but still evident in the minuscule ‘a’, among other glyphs.

The titling stand-in proved to be difficult a task: Brandon Grotesque’s corners were too soft, Le Havre used a faux-bold and had other inconsistencies, and Relay had apertures that were far too open. The answer was in front of my nose – Norwegian foundry Monokrom’s recent release Telefon was a perfect match. With one exception – the ‘R’s leg connected near the stem, rather than right out on the bowl. Luckily, Monokrom was kind enough to sponsor with an alternate ‘R’, making for a special little event.

Photo © Gustaf Emanuelsson 2013

New site for Swedish bureau Kod & Form. 

Homepage.

Editorially is a new venture from some very familiar and competent faces:

Our goal is to make the very best tool for writers — one that helps you collaborate, and so helps you write better — while also taking advantage of the best the web has to offer.
Together, the team behind Editorially have worked as writers, editors, publishers, designers, and engineers; we’ve shipped products, books, and magazines, and enjoy debugging code as much as a good copyedit.
We’ve distilled our own expertise about writing and editing, along with that of advisors from every walk of the publishing world, into an application that we believe will change the way you write — for the better.

The site uses two proven low-contrast workhorses, Just Another Foundry’s Facit & TypeTogether’s Adelle. Not surprising, given the team’s surplus of ex-Typekitters.

Blog.

Beautiful and fully responsive website for the farm “The Grey Barn” on Martha’s Vineyard using Agenda for headlines, Apres RE for navigation and Poynter Serif RE and Poynter Old Style Text for body copy.

The website of Belgian bag designer Gerda de Beukelaire is a great example for a clear, responsive design. It uses Benton Sans RE in just two styles, which contribute to the simple, sophisticated athmosphere of the site.