Presenting the second annual ALA Summer Reading Issue—a deep pool of editor’s picks from the recent archives of A List Apart, sprinkled with some of our favorite outside links. This summer’s picks are arranged in clusters that echo the design process, and like all good summer reading, they travel light. (This issue is also available as a Readlist, suitable for reading on Kindle, iPhone, iPad, Readmill, or other ebook reader.) Dive in!
Topic: Responsive Design
Designing for Breakpoints
Text, navigation, and tables, oh, my! What’s a responsive web designer to do? How can you confine your design to as few major breakpoints as possible? Where and when will you sketch minor breakpoints? How should you think about content while sketching? Is it possible to sketch on actual devices, and what are the accessibility implications of doing so? The answers to these and other profound questions will be found in this exclusive excerpt from Chapter 7 of Responsive Design Workflow, Stephen Hay’s new book, available now from New Riders.
Hack Your Maps
Web maps have come a long way. A ubiquitous and critical component of many apps, they’ve also become one of the mobile space’s most successful transplants. The core web map UI paradigm itself—a continuous, pannable, zoomable surface—has even spread beyond mapping to interfaces everywhere. Yet nearly five years since Paul Smith’s landmark article, “Take Control of Your Maps,” web maps are still a blind spot for most web designers. It’s time to integrate maps into our designs in powerful, creative, progressively enhanced new ways. Young Hahn starts us on the journey to map mastery.
Font Hinting and the Future of Responsive Typography
Font hinting has been the source of countless headaches for type designers and users. In the meantime, some of the most fundamental and important elements of typography still can’t be addressed with the web of today. Rather than being seen as a tedious chore whose demise will be celebrated, hinting might actually provide the essentials for truly responsive design, and vastly expand the possibilities of digital typography for designers, publishers, and readers.
The Infinite Grid
Grid systems are a key component of graphic design, but they’ve always been designed for canvases with fixed dimensions. Until now. Today you’re designing for a medium that has no fixed dimensions, a medium that can and will shape-shift to better suit its environment—a medium capable of displaying a single layout on a smartphone, a billboard in Times Square, and everything in between. You’re designing for an infinite canvas—and for that, you need an infinite grid system. Discover techniques and guidelines that can help bring structure to your content whatever the screen size.
Responsive Comping: Obtaining Signoff without Mockups
If you’re making websites, chances are you’ve given some thought to what constitutes a responsive-friendly design process—and you’ve probably found that adding a mockup for every breakpoint isn’t a sustainable approach. Designing in code sounds like the answer, but you may be mystified at where to begin—or feel unmoored and disoriented at the prospect of giving up the approach you’ve long relied on. Enter responsive comping. This new, mockup-less web design process makes it easy to get that Photoshop monkey off your back, and have a fresh new beginning with your old friend the web browser.
Mo’ Pixels Mo’ Problems
Mobile devices are shipping with higher and higher PPI, and desktops and laptops are following the trend as well. There’s no avoiding it: High-pixel-density, or “Retina,” displays are now becoming mainstream—and, as you’d expect, our websites are beginning to look a little fuzzy in their backlit glory. But before we go off in the knee-jerk direction of supersizing all our sites, we must identify the problems ahead and figure out the most responsible way forward—keeping our users in mind first and foremost.
A Case for Responsive Résumés
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.
Responsive Images and Web Standards at the Turning Point
Responsible responsive design demands responsive images, images whose dimensions and file size suit the viewport and bandwidth of the receiving device. As HTML provides no standard element to achieve this purpose, serving responsive images has meant using JavaScript trickery, and accepting that your solution will fail for some users.
Then a few months ago, in response to an article here, a W3C Responsive Images Community Group formed, and proposed a simple-to-understand HTML picture element capable of serving responsive images. The group even delivered picture functionality to older browsers via two polyfills: namely, Scott Jehl’s Picturefill and Abban Dunne’s jQuery Picture. The WHATWG has responded by ignoring the community’s work on the picture element, and proposing a more complicated img set element.
Which proposed standard is better, and for whom? Which will win? And what can you do to help avert an “us versus them” crisis that could hurt end-users and turn developers off to the standards process? ALA’s own Mat Marquis explains the ins and outs of responsive images and web standards at the turning point.
Dive into Responsive Prototyping with Foundation
There are hundreds of devices out there right now that can access the full web, as Steve Jobs once put it. They come with different capabilities and constraints, things like input style or screen size, resolution, and form. With all these devices set to overtake traditional desktop computers for web traffic next year, we need tools to help us build responsively. Jonathan Smiley shows how to dive into responsive design using Foundation, a light front-end framework that helps you rapidly build prototypes and production sites.
