Things were getting dusty with a faint hint of adaptive grid moldiness around here, so I finally took the plunge and retooled the design with the goal of moving to a fluid-grid responsive design focused on readability and large photo display.
We’re still coming to you live from Tumblr’s AWS servers, with static files served from my own S3 bucket. I toyed with the idea of moving over to Wordpress, but the cost-benefit analysis doesn’t add up for me. I love not having to maintain a server running MySQL, and Tumblr seems to have hit their stride on the uptime issues which have all but disappeared in the last year. No, I don’t have a copy of my blog’s data in a structured format, but I am backing up content to Dropbox via IFTTT in case of catastrophic data loss. Creating a new Tumblr theme from scratch was cake with Dave Santos’ Tumblr Boilerplate to establish a solid baseline of all the various content types.
The old layout was built on top of Dave Gamache’s great Skeleton grid and typography package. The new design abandons Skeleton in favor of a frankenstein monster of Bootstrap’s typography and mixins package and Zurb Foundation’s fluid grid. Bootstrap’s grid is solid, but the Zurb tool is slightly more robust with discrete mobile grid assignments and push/pull offsets. I opted to use LESS for preprocessing, which means the Foundation grid is included as pure CSS instead of the SASS component from the Foundation package. The LESS files are authored in Sublime Text and compiled with the LESS-build package before being shipped off to S3.
Visually, this is the most minimal design I’ve ever deployed on the site. Type-driven and stripped-down may be the flavor of the month, but I feel strongly that it’s the right toolkit for the mix of content the site has historically seen. Here’s hoping an uncluttered palette will be the catalyst for more and better content on the blog going forward.
David Carr’s excellent report on the last-ditch attempt to fund Homicide Watch through a Kickstarter campaign contains some important and thought-provoking observations about the state of philanthropic funding in the world of journalism.
I thought about Homicide Watch when I read Alan D. Mutter’s recent post about the big chunks of financing that are going to tiny experimental outfits named The Washington Post and The Los Angeles Times. In May, the Ford Foundation gave The Times $1 million over two years to hire five reporters to cover ethnic and prison issues even though the paper is owned by the Tribune Company, which may be in bankruptcy but has amassed nearly $2.4 billion in cash during its three and a half years in court.
In July, the foundation awarded The Washington Post $500,000 for government accountability reporting.
The numbers are staggering in comparison to the modest $40,000 goal to fund another year of homicide coverage in Washington. Carr agreed:
Shouldn’t financing meant for journalistic innovation go to the green shoots like Homicide Watch and not be used to fertilize giant dead-tree media? I am all for putting more reporting boots on the ground, but the existential dilemma confronting media will require new answers, not stopgap funds for legacy approaches.
Late Sunday evening the Homicide Watch campaign reached its goal with three days left on the clock and nearly $1,000 in additional contributions. I am thrilled for my friends, and so relieved that a broad coalition of supporters recognized the value of Laura and Chris’ work in a community severely underserved on this important beat.
Difficult questions remain, though, when successful bootstrapped journalism startups lose out to legacy news operations in the hunt for foundational giving.
So why hasn’t anyone managed to unseat Craigslist, a site that has barely changed in close to two decades?
It has dug an effective moat by cultivating an exaggerated image of “doing good” that keeps its customers loyal, while behind the scenes, it bullies any rivals that come near and it stifles innovation.
This is a great read that touched on a lot of questions I’ve had about the legality of Padmapper’s relationship to Craigslist, and I’m glad to see somebody call a spade a spade with regard to Craigslist’s bullying tactics.
How long can Craigslist defend their incumbent position through legal threats while refusing to improve their UX?
…no one was really super thrilled with maps as the main conduit for the analysis. Instead, they decided on minimizing the geography and using “bins” for states. (Shan has sort of been obsessed with “bins” since 2008, when his dream of having states magically fall into buckets on election night ultimately didn’t pan out. I personally had to cheer him up after that and it was not pretty.)
Here is another great reminder for map-happy news nerds that sometimes the important patterns of a story are not really geographic in a way that is best conveyed through a choropleth or proportional symbol map. This graphic is brilliant and the process behind it is well worth your time.
Mobile isn’t just ‘mobile’. It’s also the couch, the kitchen, the three-hour layover, all places where we have time and attention to spare. 42 per cent of mobile users say they use it for entertainment when they’re bored. Those aren’t 10-second sessions. That means we shouldn’t design only for stunted sessions or limited use cases.
Say it over and over until you’ve exorcised the mental image of your user typing furiously on her iPhone as she frantically runs down a crowded sidewalk, looking for her next 10-second morsel of information. That user undoubtedly exists, but we have to stop assuming this is the only mobile use case.
If you have done your time and learned design or coding, then frameworks offer you a great way to take some shortcuts, but only because you know how to tweak your way through them when things get rough. If you are using Bootstrap to quickly get a site out the door, I understand the importance of launching fast and early, but spend a couple of hours making sure your site doesn’t look like the thousand other Bootstrap sites out there.
Nailed it. Bootstrap is an incredible tool that is easily abused by those who see it as a theme. Don’t look at Bootstrap as a coat of paint to slap haphazardly onto your site. See it as a power sprayer that will let you blast through some of the solved problems of front-end code organization so you can focus on the details of the interface.
“These are “thought-leader gatherings” where “rock stars” emerge from their “silos” to learn about “disruptive” ideas that have been carefully “curated.” ”—Benjamin Wallace, New York Magazine, on the proliferation of TED and similar conferences.
“At the very least, Hitchens’s antireligious writings carried a whiff of something absent in many of atheism’s less talented apostles — a hint that he was not so much a disbeliever as a rebel, and that his atheism was mostly a political romantic’s attempt to pick a fight with the biggest Tyrant he could find.”—Ross Douthat
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.
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.
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.
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.
“Clutter is what happens when we fill a page with things the user doesn’t care about. Replace the useless stuff with links, copy, and content the users really want, and the page suddenly becomes uncluttered.”—Jared Spool
Historically developers have used Firefox’s Firebug add-on to develop and debug their websites, but more recently each browser has developed its own set of tools and each comes with its own advantages and disadvantages. Nowadays it seems hard to imagine ever building a website without one of these handy tools, which are normally accessible by either pressing “F12″ in Windows or “Cmd” ⌘, “Option” ⌥ and “I” on the Mac, or by right clicking on the page and selecting “Inspect Element”.
But are you using the developer tools to their full potential? The biggest positive about the developer tools is that they are incredibly easy to use, but as a result developers often miss out on a large proportion of the functionality provided. Inspired by a video talk by Paul Irish and Pavel Feldman, I’ve compiled a list of “secrets” of the developer console. I’m not expecting every one of these to be unknown to you, but hopefully some of these will help you to become an even better web developer.
My favorite Chrome trick is clicking to flip through the various methods of describing a color.
Building the fonts is the part of this story that so few anticipated or dared to face. It’s the hard part. So hard, in fact, that some font manufacturers skipped the process altogether, simply releasing their print-optimized fonts as “webfonts” without the significant changes required to make them read well on screen. To me, this is akin to shipping software that is bug-ridden at best. Still, the tech media touts the “thousands” of new fonts now available for web use. Most of what consumers read is about how many fonts you can get and how they are served, but not so much about how they look and read.
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.
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.
I’ve touched briefly before on some typefaces that I consider to be particularly good for on-screen reading. But now I wish to delve further into this realm of typography and consider: What makes a typeface good for screens and UI design in particular?
Thanks, Ian, for a great deep-dive into a tricky topic that is too often ignored when selecting typefaces for screen reading.
The guys at ZURB have built another nice responsive-grid framework to add to the rapidlygrowinglist:
Foundation is a rock-solid, responsive framework for rapidly prototyping and iterating into production code. It includes a 12-column, future-friendly grid and tons of great tools and elements that’ll get you up and running in no time. Clone the repo to get the marketing site, docs, and base source. You can also visit http://foundation.zurb.com to download just the base source as a starting boilerplate.
Along with the responsive grid, Foundation features ZURB-flavored buttons, forms, tabs, pagination, tables, image sliders and modals. The global CSS also includes baseline typography, though this isn’t described in the documentation.
“Allowing artist-illustrators to control the design of statistical graphics is almost like allowing typographers to control the content, style, and editing of prose.”—Edward Tufte, “The Visual Display of Quantitative Information”