Making your content mobile-ready isn’t easy, but if you take the time now to examine your content and structure it for maximum flexibility and reuse, you’ll have stripped away all the bad, irrelevant bits, and be better prepared the next time a new gadget rolls around. This excerpt from Karen McGrane’s new book, Content Strategy for Mobile, will help you get started.
Topic: Mobile/Multidevice
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.
The Web Aesthetic
Today, when every device begs to be connected, it has become easier—almost necessary—to accept the adaptable nature of the web. Responsive web design is an emerging best practice, and our layouts are becoming more flexible. But often, innovation is focused on technical implementations while the visual aesthetic remains ignored. To put it another way, we’re embracing “responsive” but neglecting the second part: “design.” Now is the time to seek out an aesthetic that is truer to the medium.
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.
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.
A Pixel Identity Crisis
The pixel has long been the atomic particle of screen based design: a knowable, concrete unit of measurement. But layouts based on the hardware pixel are fast becoming an endangered species. Even the introduction of a new, W3C standard reference pixel, although it promises stability in the long-term, can’t help us navigate the current chaos. Consider the two “standard” pixel definitions and 500 “standard” viewports your user’s Android device may support. To create designs that transcend platform differences, the promise of the web and standards, you must normalize pixels across devices. Scott Kellum shows how math and media queries can keep you sane and help you design consistently across platforms.
Organizing Mobile
When organizing content and actions on mobile, solid information architecture principles like clear labeling, balanced breadth and depth, and appropriate mental models remain important. But the organization of mobile web experiences must also align with how people use their mobile devices and why; emphasize content over navigation; provide relevant options for exploration and pivoting; maintain clarity and focus; and align with mobile behaviors. In this exclusive excerpt from his new book, Mobile First!, Luke Wroblewski explains how to do all that.
A Simpler Page
Want to design a book? There are mountains of beautifully designed examples to inspire you. But what about digital books? How do you create elegantly typeset, gloriously balanced reading experiences when tablets render type differently and support different fonts, text can extend in every direction, and type can change size? Craig Mod (Flipboard, Art Space Tokyo) addresses these questions and presents the initial release of Bibliotype, an HTML baseline typography library for tablet reading.
Smartphone Browser Landscape
Users expect websites to work on their mobile phones. In two to three years, mobile support will become standard for any site. Web developers must add mobile web development to their skill set or risk losing clients. How do you make websites mobile compatible? The simple answer is to test on all mobile devices and fix any problems you encounter. But with at least ten operating systems and fifteen browsers out there, it is impossible to do that. Nor can we test only in iPhone and Android and expect to serve our market. PPK surveys the mobile web market, as well as phone platforms and their browsers, and shows how to set up a mobile test bed that works.
