Posts tagged design

CSS Grid Is Here

Eric Meyer, writing for A List Apart:

It’s been decades since CSS first emerged, but it’s never contained a system anything like this. And Grid is already supported in both Chrome and Firefox, with Safari coming soon (its Technology Preview releases support Grid as of this writing). A new era in digital design is dawning right now.

So awesome. I haven’t been this excited to try something since reading Ethan Marcotte’s seminal “Responsive Web Design.”

Mar. 27, 2017 design webdev

24 Ways

It’s that time of year again:

24 ways is the advent calendar for web geeks. Each day throughout December we publish a daily dose of web design and development goodness to bring you all a little Christmas cheer.

Dec. 2, 2011 design webdev

The Holy Grail

Roger Black on web advertising:

What we have now is the ugliest advertising in the history of the media. I used to say that web sites looked like the walls of a third-world futbol stadium, but that was unfair to the stadiums. Most content sites look so bad they actually repel readers rather than attract them.

Dec. 1, 2011 advertising design journalism publishing webdev

David Cole’s Personal Canon

Some great writing on creativity, design and the web.

Nov. 21, 2011 creativity design ideas webdev

Magazine Content and the Web

Context is king.

That holds true everywhere we publish, analog or digital. Anyone can sling content — and on the web, everyone will — but an article out of context is no more useful than a printed book chock full of typed-out URLs, which would be screwy, intrusive, frustrating and a distraction from the reading I’d want to do. Context can elevate content, but the wrong frame can tear it down just as easily.

But what does context mean on the web? There’s no single answer, and that’s the very crux of the internet: The web is whatever we need it to be, just as water changes shape when poured into a new glass. The web is more than a medium for publishing or communications or commerce — it’s a customer service medium, and websites and services sprout to fill every possible need.

I’m going to limit the scope here to magazines, simply because, well, that and the web are what I know.

Let’s consider a printed magazine, maybe a small regional publication about a certain lifestyle, history and culture. You know the type, I’m sure.

Then flip to a section like, say, travel reviews, punchy little things with an overview and maybe a recommendation. Is a reader of this section looking for a new place to visit? Quite possibly. Sure, many folks read travel stories like fiction, as a way to mentally get away. But a lot of people clip out the intriguing destinations or save whole magazines for future reference. It’s a casual, mostly passive act: That sounds interesting, I’ll have to try it sometime.

So now this magazine’s next issue is going to press, and the web editors have a whole book full of stories to parcel out on the website. (This works in reverse, too, in a digital-first workflow, where the print editors must put web content onto a different platform with a different context.) The simple solution — and, sadly, the one I see way too often — is the cut-and-paste: InCopy to CMS to website to social media. Repeat. But what about context?

Let’s consider the travel section again, this time on the magazine’s website.

Don’t call me a reader or user, no, here I’m a hunter of information. I’m planning a trip and I’ve come to your website to do it. I know what I want: Someplace family-friendly, and outdoors, in a three-state radius; it’s only a long-weekend trip, plus the kids’ll kill each other if they’re in the car together for too long. Alright, I’ll click on the travel section and see what matches… What? A long list of travel-related magazine stories?

A magazine reader is not the same as a web user; it’s a casual vs. mission-driven act. On the web, I want those travel reviews sliced and diced, sorted and tagged; I want the facts; I want the metadata. And, without the space restrictions of print, why limit the review to a few paragraphs, a link and a photo? Tell me a story about the experience, relate to people, and encourage your community of readers to do the same. That’s how you build a useful web resource — and best serve your customers.

But enough about travel sections. What do you do with a feature? The default response these days — especially in magazines’ tablet editions — is, “Add multimedia!” And I’m not fundamentally opposed; why shouldn’t we take advantage of all the different ways to tell a story on the web? But it has to make sense. A video produced just to have a video doesn’t serve anybody. Multimedia have to add a new dimension to the storytelling.

I love the work of Jonathan Harris. In other hands, his latest project, Balloons of Bhutan, could have been a drab, text- and statistics-heavy story of a tiny nation. But by giving faces and voices to the men and women of Bhutan, he’s created something powerfully human, something printed words can never match. And that’s the best way to use multimedia on the web.

How about the feature itself? Often, the text of a good magazine story transcends the medium. You can (and should) add links, restore photos cut for space, spin off sidebars into full-bodied articles of their own, or even embed a YouTube video instead of describing it, but a compelling story — the core of the article — is no less compelling whether in print or on the web.

What’s so often left behind, though, is the design of the feature. Print designers don’t lay out stories just for fun. Great editorial design is as much a part of the story as the text: It sets the mood, elevates the drama, and inserts critical elements like photographs precisely when and where they’re needed. In short, the design adds context. When you funnel a story through a CMS into the same template as a 200-word blog post, you’ve lost all of that.

At the Chronicle, I’ve tried to champion, and web-ify, that ethos. In print magazines, I love the full-bleed photos, the careful typography, the feeling you get when you open up a gorgeous spread.

Why can’t I feel that way when I read a web feature, too?

Long live context. Long live the king.

Nov. 18, 2011 design journalism publishing storytelling

Lost and Found

The latest at the Chronicle. This one was a lot of fun to design. The animation is all CSS, and the whole page is responsive.

Sep. 16, 2011 baseball css design storytelling webdev


Now more than a bookmarklet:

Here’s how it works: every time you use Readability on a particular article, a portion of your subscription fees go right to the content creators. You get a fantastic reading experience. Publishers and writers get compensated for the content you enjoy. Everyone reads happily ever after.

Feb. 1, 2011 design publishing webdev


Craig Mod:

Bibliotype is a (very) simple HTML, CSS and JS based library for rapid prototyping long-form typography and reading on tablets.

Launched in conjunction with his thoughtful A List Apart article.

Jan. 11, 2011 design ebooks publishing webdev


Thibaut Sailly:

This article is for the curious among you as it details the ideas and choices gone into the conception and the process used to get Bureau on its feet, back in september.

Great piece on some great design work.

Dec. 15, 2010 design webdev

Jim Henson, Making Muppets

Fifteen magical minutes. You left us much too soon, Jim.

Sep. 29, 2010 creativity design jimhenson muppets

A Responsive Design

It’s no secret: The Baseball Chronicle isn’t just a celebration of baseball and the narrative. It’s also a place for me to experiment with the latest in web design and development.

I’m a tinkerer by nature, and the Chronicle has become, perhaps even more than this site, that with which I tinker. After months of reading about HTML5, CSS3 and @font-face, I started on a redesign incorporating all of them. What better way to learn? What good is unapplied knowledge?

So after I read Ethan Marcotte’s spectacular “Responsive Web Design” at A List Apart, of course I had to implement it at the Chronicle. I’d long thought about creating a mobile version of the site, but it always seemed excessive. I didn’t need to add content or functionality for mobile users. The site simply needed to be a little more usable for readers with small screens. Enter media queries:

Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts.

I started in July on a rudimentary responsive front page, but vacation and other happenings shelved the project until mid-August, while designing “Sunday Fly,” the second story of the bespoke era. (As part of the redesign, I create original designs for every story, using Movable Type logic to search for and apply a style sheet whose name matches the post’s title. Pre-redesign posts, as yet lacking custom styles, inherit a base design.) I tack on the responsive code to the end of each post’s style sheet.

The responsive styles for “The Man on the Mound” begin:

@media screen and (max-width: 750px)

Screens less than 750 pixels wide receive any subsequent styling, which eliminates floats, resizes type and margins, and adds many a width: auto;. The effect is a legible and usable design at any screen size, across devices, without a dedicated mobile subdomain or new style sheet.

For more on responsive design, read the A List Apart article and check out the websites of Dan Cederholm, Simon Collison and Jon Hicks for further inspiration and guidance.

Sep. 13, 2010 css design webdev


Look, I love the SI Vault.1 But the reading experience induces headaches. If the tiny Verdana type2, flashing advertisements and general cruft don’t do it, then clicking through 11 pages to read a single Gary Smith story surely will.

Without Readability or Safari Reader, I struggle to finish even the most compelling stories. And that’s a shame. I’d readily pay for access to a well-designed Vault with a usable search function and logical architecture. (Oh, to easily browse by writer!)

But alas, for now I can only hope for something better.

[1] When I can get to and stay at the Vault, that is. First: Why does the homepage link, labeled “THE VAULT” right there in the banner, lead instead to the App Store listing for the magazine’s iPad app? How does that make any sense? Instead users must poke around for alternate entry points, head to a search engine, or manually enter the URL (if they know or guess it). Is a few more apps sold worth the frustrating user experience?

And second: Why send me away, again to the App store, when I try to read stories from recent issues? When I click a link that says, “Read all articles,” I expect a table of contents, and nothing else. Even if I were browsing the Vault on an iPad, this sort of deception wouldn’t be right.

[2] I’ll warn you now, don’t touch that text-size widget; the hideous result is far worse than the original. In fact, every article on sports tiny, sans-serif type. Who enjoys reading that?

Aug. 9, 2010 bookmarklets design webdev

FontShop’s Educational Docs

This amateur designer enjoyed the PDFs immensely.

Jul. 7, 2010 design typography

Responsive Web Design

Stunning. I’ll be adding this functionality to the Chronicle this week. And Jon Hicks’ implementation is equally inspiring.

Jul. 6, 2010 css design webdev

People Will Scroll

The myth of the page fold.

Oct. 7, 2009 design webdev