Progressive Subcompact Publications: Structuring and Styling Content
We want our content to look awesome regardless of the device. How do we accomplish this?
A good starting point is Ethan Marcotte’s Responsive Web Design (or whatever Responsive Web Design book is your favorite). We want the experience to scale to whatever device or platform we’re targeting and, whatever design we choose, the first thing we need to make sure of is that it’ll work well in phones, tablets and desktops (in other words, everywhere there is a browser).
Once we have a layout we can start thinking about, what to me is, the most important part of any long form project: typography. I’ve written extensively on what typography is and how it works on the web now we need to take the next steps.
This is where the first set of choices happen: What layout do we choose? How do we create something engaging without becoming repetitive? How do we craft a reading experience that matches the content?
I first saw Jen’s presentation at SFHTML5. I see it as a challenge and an opportunity to think differently about the way we create and layout our content on the web. For longer form content this also speaks to letting the content dictate the layout and not the other way around. What is it that makes magazine layouts so interesting?
I collect electronic versions of GQ, Wired, Vanity Fair, Fast Company and Harvard Business Review and the biggest question when I read them is how can we make this reading experience in the open web? The ads from magazines are what intrigue me the most… and where a lot of my most radical ideas come from.
After watching this presentation from Beyond Tellerand I couldn’t help reading the new edition of Hardboiled Web Design. Clarke advocates that creativity should be at the center of our online design work... It speaks to the need of art directed web design and bespoke designs rather than using the same design over and over.
If we drop the book metahphor from our online reading experiences, There is no limit to what we can do with our online publications. We need to go back to our content and see how we can enrich it and what technologies we can use to do so… we have a lot of layout tools that, a few years ago, were only possible in InDesign and other Desktop Publishing Tools or took a lot of extra workarounds to do in CSS/HTML/JavaScript.
Now we need to get out our collective comfort zone and challenge both ourselves and our future readers with layouts that go beyond what we see on the web today.
One last example of what we can do with our new css tools and how much we can be true to our creative selves without having to lie to our web developer selves: Justin McDowell uses new CSS technologies to recreate works from the Bauhaus school.