While historically, it’s been difficult at best to create print-quality PDF books from markup alone, CSS3 now brings us the Paged Media Module, which targets print book formatting. “Paged” media exists as finite pages, like books and magazines, rather than as long scrolling stretches of text, like most websites. With a single CSS stylesheet, publishers can take XHTML source content and turn it into a laid-out, print-ready PDF. You can take your XHTML source, bypass desktop page layout software like Adobe InDesign, and package it as an ePub file. It’s a lightweight and adaptable workflow, which gets you beautiful books faster. Nellie McKesson, eBook Operations Manager at O’Reilly Media, explains how to build books with CSS3.
Grizzled job hunting veterans know too well that a sharp résumé and near-flawless interview may still leave you short of your dream job. Competition is fierce and never wanes. Finding new ways to distinguish yourself in today’s unforgiving economy is vital to a designer/developer’s survival. Happily, web standards whiz and mobile web developer Andrew Hoffman has come up with a dandy differentiator that is just perfect for A List Apart readers. Learn how to author a clean résumé in HTML5/CSS3 that scales well to different viewport sizes, is easy to update and maintain, and will never grow obsolete.
CSS & Mobile To The Future | Embrace Users, Constrain Design | An Event Apart Seattle 2012 Day II
TUESDAY, 3 APRIL 2012, was Day II of An Event Apart Seattle, a sold-out, three-day event for people who make websites. If you couldn’t be among us, never fear. The amazing Luke Wroblewski (who leads a day-long seminar on mobile web design today) took excellent notes throughout the day, and shares them herewith:
In his The Future is Now talk at An Event Apart in Seattle, WA 2012 Eric Meyer talked about some of the visual effects we can achieve with CSS today. Create shiny new visual elements with no images using progressive enhancement and CSS that is available in all modern browsers.
In his A Philosophy of Restraint talk at An Event Apart in Seattle, WA 2012 Simon Collison outlined his design philosophy and how he applies it to web projects. Embrace constraints; simplicity and complexity; design aesthetic; design systems as foundations that prepare us for future projects and complexity; affordances and type; focus and content; audit and pause — prevent catastrophic failures and shine a new light on what you’ve learned with each project.
In his Touch Events talk at An Event Apart in Seattle, WA 2012 Peter-Paul Koch talked about touch support in mobile browsers and how to handle touch events in web development. Includes a ranking of current mobile browsers; interaction modes in mobile versus desktop (mouse) and keyboard — how do we adjust scripts to work with touch?; touch events; supporting modes; event cascade; and “stick with click.”
Mobile to the Future – Luke Wroblewski
Alas, Luke could not take notes on his own presentation. Here’s what it was about: When something new comes along, it’s common for us to react with what we already know. Radio programming on TV, print design on web pages, and now web page design on mobile devices. But every medium ultimately needs unique thinking and design to reach its true potential. Through an in-depth look at several common web interactions, Luke outlined how to adapt existing desktop design solutions for mobile devices and how to use mobile to expand what’s possible across all devices.Instead of thinking about how to reformat your websites to fit mobile screens, attendees learned to see mobile as way to rethink the future of the web.
In her What’s Your Problem? Putting Purpose Back into Your Projects talk at An Event Apart in Seattle, WA 2012 Whitney Hess outlined the value of learning about opportunities directly from customers. Understand the problem before designing the solution. Ask why before you figure out how. There is no universal solution for all our projects, we need to determine which practices are “best” through our understanding of problems. Our reliance on best practices is creating a world of uniform websites that solve no one’s problem. Leave the desk and interact with people. Rather than the problem solver, be the person who can see the problem.
At An Event Apart in Seattle WA 2012, Jared Spool walked through what makes a design intuitive, why some users need different treatment, and the role of design. Current versus acquired knowledge and how to bridge the gap (how to train users, thus making your site or app “intuitive”). Redesigns and how to avoid disaster. Design skills. The gap between current knowledge and target knowledge is where design happens. Why intuitive design is only possible in small, short iterations.
Day III begins in 90 minutes. See some of you there.
Web Type Will Save Us (Or, Who’s Afraid of the Big, Bad Retina Display?)
WITH RETINA DISPLAY technology on the verge of ubiquity and some of today’s best web design minds rightfully fretting about it (see PPK, Stephanie Rieger, Brad Frost, and Stuntbox if you’ve missed this latest Topic Of Concern), it seems to this old web slinger that web type is poised to replace photography as the dominant element of web design aesthetic appeal in the next few years.
But type is type is type, and the higher the resolution of the device, the better that type will look, with no bandwidth overhead.
In that spirit, although we haven’t yet worked with it ourselves, we welcome the launch of TypeButter. Developed by David Hudson and designed by Joel Richardson, TypeButter is a plug-in that “allows you to set optical kerning for any font on your website.”
Soon, CSS and browsers will let us set type properly without the need for widgets and plug-ins. Until then, widgets and plug-ins fill the gap. Thank you, David and Joel, and all you beautiful web type designers and polyfill wizards.
Replacing the -9999px hack (new image replacement)
The Daily Report’s 2003 redesign uses (and our book explained) an image replacement technique intended to combine the benefits of accessibility with the power of graphic design. We christened this method Fahrner Image Replacement (FIR) in honor of Todd Fahrner, who first suggested it to us. Douglas Bowman’s tutorial popularized the technique, which was first developed by C. Z. Robertson in 1999. (Robertson, Fahrner, and Bowman each developed the idea independently.)
Preceding web type by a decade, Fahrner gave us the ability to use fonts other than Verdana and Georgia on web pages (i.e. to set type in Photoshop and export it as an image—an ancient web design practice) but to conjure these images of text via semantic HTML markup (the words the text pictured, set in appropriately structural HTML elements).
Then came Phark’s Accessible Image Replacement, which improved on the Fahrner method by avoiding edge case failures and accessibility problems inherent in FIR. The principal aspect of the Phark method—the part of it all of us remember and use to this day—was this little piece of code:
So popular was this method, we made a tee shirt out of it, and it sold, baby, it sold.
But despite its enduring popularity, Phark has drawbacks of its own: chiefly, a performance hit caused by the need to draw a giant 9999px box offscreen. (Yes, the browser really does this.)
My friend Scott Kellum, design director at Treesaver, has now sent me this refactored code for hiding text, which I hereby christen the Kellum Method:
Really long strings of text will never flow into the container because they always flow away from the container.
Performance is dramatically improved because a 9999px box is not drawn. Noticeably so in animations on the iPad 1.
Getting Started with Sass – A List Apart
CSS’ simplicity has always been one of its most welcome features. But as our sites and apps get bigger and become more complex, and target a wider range of devices and screen sizes, this simplicity—so welcome as we first started to move away from font tags and table-based layouts—has become a liability.
Fortunately, a few years ago developers Hampton Catlin and Nathan Weizenbaum created a new style sheet syntax with features to help make our increasingly complex CSS easier to write and manage—and then used a preprocessor to translate the new smart syntax into the old, dumb CSS that browsers understand.
Learn how Sass (“syntactically awesome style sheets”) can help simplify the creation, updating, and maintenance of powerful sites and apps.
Okay, that last one isn’t a web design link and the Apple comment could go either way, but that’s how I roll. Follow me on Twitter for more snarkeractive funucation!
Must-read: Switching the display of content and navigation based on browser size
JEREMY KEITH: “Right after I wrote about combining flexbox with responsive design—to switch the display of content and navigation based on browser size—I received an email from Raphaël Goetter. He pointed out a really elegant solution to the same use-case that makes use of display:table.”
LUKE WROBLEWSKI: “In her ‘Our Best Practices Are Killing Us’ presentation at An Event Apart in Minneapolis MN, Nicole Sullivan walked through common CSS best practices that have outlived their usefulness and what we can do instead to improve CSS performance and maintenance long term. Here’s my notes from her talk:” LukeW | An Event Apart: CSS Best Practices.
An Event Apart: Using Flexible Boxes – Eric Meyer
“IN HIS ‘USING FLEXIBLE BOXES’ presentation at An Event Apart in Atlanta, GA 2011 Eric Meyer outlined how you can start using the CSS flex-box specification now and how to take into account the limitations and inconsistencies that currently exist when you do so. Here are my notes from his talk:” LukeW | An Event Apart: Using Flexible Boxes.