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.