The Pale Blue Dot
Fifteen magical minutes. You left us much too soon, Jim.
I was 17 and playing basketball thousands of miles from home with kids whose halting English still made a mockery of my infantile Mandarin. But it didn’t matter; it never does.
It’s a hackneyed thread, about sports as a global language and cross-cultural connective tissue. It’s true, though.
What did they think of us? Two American teenagers, dribbling a basketball on an empty court outside a school in Beijing. Heads popped out of dormitory windows, from floors high and low, as if the students had been waiting for something to shatter the monotony of a languid mid-week afternoon. “What the hell?” they must have said, before rushing downstairs to play.
I most remember their faces, so exuberant and curious. We were just kids playing ball. Nothing else mattered.
Distant music flitted on the air as the sun set in China.
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.