Danny DeBelius

Stephen Coles:

Despite the emphasis on maintaining the newspaper’s identity, BostonGlobe.com is not merely a skeuomorphic replication of the printed paper. Font sizes, column widths, and navigation are informed by best practices in digital media, and specifically “responsive” design, resizing and repositioning text and images for optimal viewing at any window size. Not every window width results in a beautiful page, but overall it’s a much better and more consistent experience from the big screen to the iPhone than most digital newspapers today.

The calculus of brand consistency vs. page weight is critical in making decisions about typography on the web, particularly for a responsive site that will see significant mobile browser use.

This is as complex a case study as you’ll find on the subject, and the insight from Miranda Mulligan, Upstatement and Filament Group is invaluable.

Rian van der Merwe:

As advertising clickthrough rates continue to drop, the ads become more desperate and invasive, and readers are starting to notice and do something about it. I’m doing the majority of my reading in RSS and Instapaper where I can read in peace without being pummeled by distractions.

The chorus decrying the exodus of readers to quiet alternative reading experiences is growing. My hope is that this exodus will serve as a wake-up call to publishers deluded in their belief that readers have an endless well of patience to endure intrusive advertising and cluttered pages.

Required reading for editorial experience designers.

Mark Boulton:

Recently at Mark Boulton Design, we’ve been working on a redesign of the global visual language for a large sports network. Like many web sites delivering news and editorial content, they rely on advertising for their revenue — either through multiple ad slots on the page, or from video pre-rolls.

Early on in the project, we discussed Responsive Web Design at length. From an editorial and product perspective, it makes perfect sense. Who wouldn’t want their content adapting to a device their reading it on? Who wants to pinch-zoom again and again? From a business and product perspective, we’ve seen this from multiple clients who want to take advantage of certain interactions on certain devices — swiping for example — for users to better engage with the content in a more native way. All good. And then advertising comes along and things get challenging.

There’s a lot of good thinking in this piece on a topic I’ve been wrestling with since the BostonGlobe.com design started making waves. For sites that rely on display ad revenue, I’m not sure responsive design solves more problems than it creates.

/via Al Shaw

Johannes Tonollo:

Meaningful Transitions have the purpose to communicate the process of the interaction and the structure of the user interface. They focus on specific events, or explaining the user’s interaction by animation. All transitions are clustered in 6 categories in order to differentiate the certain field of use. The aim is to present a scaleable collection of existing transitions. The transitions are documented in an abstract visualization to explain their purposes and filled with concrete examples. The close look at a transition offers the field of use, the mental model, the consistency, the cognitive benefit and the illusion.

Great resource.

Frédéric Filloux:

Web design is in bad shape. In the applications boom, news-related websites end up as collateral damage. For graphic designers, the graphics tools and the computer languages used to design apps for tablets and smartphones have unleashed a great deal of creativity. The transformation took longer than expected, but great designs begin to appear in iPad applications (in previous Monday Notes, we discussed Business Week+ and the new Guardian app). The best applications get rid of the print layout; they start from a blank slate in which a basic set of rules (typefaces, general structure of a page, colour codes) are adapted to the digital format. Happily, we just stand at the very beginning of a major evolution in news-related graphic design for apps. And this new world proves to be a killer for the traditional web which, in turn, seems to age fast.

The graphic evolution of the web must deal with two negative forces: its language framework doesn’t evolve fast enough, and it faces the burden of messy advertising.

Particularly interesting in this column is a roundup of how display ads are positioned across a handful of major news sites. It would be difficult to overstate the damage overgrown advertising real estate inflicts on the reading experience of the worst offenders Filloux investigates.

Khoi Vinh:

I would guess that there are less than a few dozen people in the world who can create superb software for editorial products, who can combine the holistic, systems-level thinking of UX with the incisive storytelling instincts of editorial design. I’m not even talking about a designer who can ‘do both,’ who can create a great digital publication one day and then create a great print publication another day. There are almost assuredly even fewer of those in the world, if any.

Instead, I’m talking about the kind of person who can build a great digital product out of great editorial content, a difficult enough challenge on its own. For lack of a better term, I call them editorial experience (or ‘ed-ex’) designers. A few of them include Marcos Weskamp from Flipboard, Oliver Reichenstein from iA, Ian Adelman from NYTimes.com, and the now-independent Mark Porter, formerly of The Guardian. There are more names than just these of course, but not very many.

Editorial experience design is delightfully clarifying in what seems like an endless stream of job titles assigned to those of us who do the work of shepherding the digital product design of media organizations.

From the project’s GitHub docs:

FitVids automates the Intrinsic Ratio Method by Thierry Koblentz to achieve fluid width videos in your responsive web design.

Scaling video dimensions is one of those heartburn-inducing pain-points in implementing a responsive design to a media-rich site, and this seems like a great start to a robust solution.

Hiawatha Bray, for the Boston Globe:

Building BostonGlobe.com meant thinking about how to publish for people who often do not use traditional desktop computers. Globe developers knew that readers will be just as likely to view the site on smartphones, tablet computers, and even televisions. That meant figuring out formats to fit a host of gadgets varying in screen size, computing power, and storage capacity.

Many companies have addressed the format issue by building different versions of a site - one for desktop computers, another for mobile users. Or they build customized software apps for different mobile devices.

BostonGlobe.com developers, with help from the Boston Web design company Filament Group, have adopted a different approach, called “responsive Web design.’’ It is a way of building sites that vary their appearance and features depending on the device used to access them, so the same page, with no alterations, looks just right whether it is displayed on a large desktop monitor or on a smartphone.

Beautiful work.