Designing for the happy path—where users always enter ideal data and clients choose perfect images—can leave your layouts warped and broken when your users stray. Steven Garrity suggests you take a walk on the wild side and design with difficult data to become a better designer.
Topic: Layout & Grids
Web page layouts: ways and means and meaning. Grids and rules; columns fixed, flexible, fluid, liquid, and elastic. Ponder the 500 “standard” viewports your user’s Android device may support. Size, color, and contrast. To center or not to center. Scaling text and columns. Beyond pixels. Layout and genre. Print paradigms and viewport-agnostic approaches. A new aesthetic. Let the web be the web.
The Story of CSS Grid, from Its Creators
Designers have used grids for centuries. And after more than 20 years of waiting, they are finally here for the browser. This is the story of CSS Grid. It took a lot of people in the right place and at the right time to make it happen.
Practical CSS Grid: Adding Grid to an Existing Design
CSS Grid is here—and easier than you might expect. Eric Meyer shows us how to use Grid on an existing design without breaking things for non-grid browsers. With pictures! Also a couple of gotchas.
Can Email Be Responsive?
Love it or hate it, there’s no denying the popularity of HTML emails. And, like the web before it, the inbox has officially gone mobile, with over 50 percent of email opens occurring on mobile devices. Still, email design is an outrageously outdated practice. (Remember coding before web standards became… standards?) But coding an email doesn’t need to be a lesson in frustration. While email designers still have to build layouts using tables and style them with HTML attributes and—gasp!—inline styles, a number of intrepid designers are taking modern techniques pioneered for the web and applying them to the archaic practice of email design. Jason Rodriguez shows how to apply the principles of responsive web design to the frustrating but essential realm of email design.
Creating Style Guides
A style guide, also referred to as a pattern library, is a living document that details the front-end code for all the elements and modules of a website or application. It also documents the site’s visual language, from header styles to color palettes. In short, a proper style guide is a one-stop guide that the entire team can reference when considering site changes and iterations. Susan Robertson shows us how to build and maintain a style guide that helps everyone from product owners and producers to designers and developers keep an ever-changing site on brand and on target.
Content-out Layout
Grids serve well to divide up a predefined canvas and guide how content fits onto a page, but when designing for the web’s fluid nature, we need something more responsive. Enter ratios, which architects, sculptors, and book designers have all used in their work to help set the tone for their compositions, and to scale their material from sketch to final build. Designers can apply a similar process on the web by focusing on the tone and shape of our content first, then working outward to design fluid, ratio-based grid systems that invite harmony between content, layout, and screen. Nathan Ford takes the next step toward more sophisticated, content-focused layouts on the web.
Surveying the Big Screen
We’ve been designing responsively for more than three years, now, and have the small-screen pattern libraries and portfolios to prove it. But what about larger screens? While we commonly use liquid design for smaller breakpoints, allowing our content to expand and contract as needed, few of us consider what happens beyond a maximum width of 960 pixels or so—which can leave a heap of unused pixels on a contemporary desktop display. Mike Pick explores how to use negative space, scale, density, and layout devices such as grids, modules, and columns to break through the 1024-pixel layout barrier.
He Ain’t Snowfalling, He’s My Brother
Not many newsrooms have the wherewithal to produce their own “Snow Fall,” and that, some say, dooms the NYT’s experiment to becoming a mere blip in the history of periodical web design. But it’s not all about per-article cost-effectiveness. The ambition that drives these efforts is exactly what the publishing business needs.
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.
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.
