A List Apart

Menu

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.

  • Can Email Be Responsive?

    by Jason Rodriguez · Issue 395 ·

    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

    by Susan Robertson · Issue 393 ·

    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

    by Nathan Ford · Issue 392 ·

    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

    by Mike Pick · Issue 386 ·

    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

    by David Sleight ·

    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

    by Chris Armstrong · Issue 363 ·

    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

    by Paul Robert Lloyd · Issue 362 ·

    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.

  • Mo’ Pixels Mo’ Problems

    by Dave Rupert · Issue 362 ·

    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

    by Andrew Hoffman · Issue 353 ·

    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: How they Almost Worked and What We Need

    by Mat Marquis · Issue 343 ·

    With a mobile-first responsive design approach, if any part of the process breaks down, your user can still receive a representative image and avoid an unnecessarily large request on a device that may have limited bandwidth. But with several newer browsers implementing an "image prefetching" feature that allows images to be fetched before parsing the document's body, some of the web's brightest developers are abandoning responsive images in favor of user agent detection, at least as a temporary solution. For us standardistas, UA detection leaves a bad taste in the mouth. More importantly, as the number and kinds of devices continue to grow, UA detection will quickly become untenable—just as browser detection did back in the bad old days before web standards. What's really needed, argues Mat Marquis, is a new markup element that works the way the HTML5 video element works. Sound crazy? So crazy it just might work.

  • Fluid Images

    by Ethan Marcotte · Issue 328 ·

    Learn to how to make fixed-width images fluid and how to add them to your fluid grids to build a site that responds to the size of the viewport without sacrificing aesthetics. We are delighted to present an excerpt from Ethan's new book, (and the fourth title from A Book Apart), Responsive Web Design.

  • CSS Floats 101

    by Noah Stokes · Issue 325 ·

    The float property is a valuable and powerful asset to any web designer/developer working with HTML and CSS. Tragically, it can also cause frustration and confusion if you don't fully understand how it works. Test or refresh your knowledge as Noah Stokes explores float theory and behavior, and guides us through common float-related coding pitfalls.

  • Designing Web Registration Processes for Kids

    by Debra Levin Gelman · Issue 323 ·

    Designing websites for kids is a fascinating, challenging, rewarding, and exasperating experience: You’re trying to create a digital experience for people who lack the cognitive capacity to understand abstraction; to establish brand loyalty with people who are influenced almost exclusively by their peers; and to communicate subjective value propositions to people who can only see things in black-and-white. Fortunately, it’s possible to create a successful registration process for these folks with an understanding of how their brains work. Debra Levin Gelman explores how to design effective registration forms for kids based on their context, technical skills, and cognitive capabilities.

  • A Simpler Page

    by Craig Mod · Issue 321 ·

    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.

  • CSS Positioning 101

    by Noah Stokes · Issue 318 ·

    If you're a front end developer or a designer who likes to code, CSS-based layouts are at the very core of your work. Designer slash developer Noah Stokes scrutinizes the CSS position property to show how you can use it to create standards-compliant, table-free CSS layouts. Test or refresh your knowledge of static, relative, absolute, fixed, and inherited positioning, and how they work together to create any web layout the mind can conceive.

  • Art Direction and Design

    by Dan Mall · Issue 317 ·

    Sure, your design’s composition is perfectly balanced, the typographical hierarchy works, and the contrast is bang on. But, when you step back and take a look, how does it make you feel? Does your design evoke the right emotion? Dan Mall explains the difference between art direction and design on the web and challenges us to do it again, this time with feeling.

  • The Look That Says Book

    by Richard Fink · Issue 313 ·

    Hyphenation and justification: It’s not just for print any more. Armed with good taste, a special unicode font character called the soft hyphen, and a bit o’ JavaScript jiggery, you can justify and hyphenate web pages with the best of them. Master the zero width space. Use the Hyphenator.js library to bottle fame, brew glory, and put a stopper in death. Create web pages that hyphenate and justify on the fly, even when the layout reflows in response to changes in viewport size.

  • Responsive Web Design

    by Ethan Marcotte · Issue 306 ·

    Designers have coveted print for its precision layouts, lamenting the varying user contexts on the web that compromise their designs. Ethan Marcotte advocates we shift our design thinking to appropriate these constraints: using fluid grids, flexible images, and media queries, he shows us how to embrace the “ebb and flow of things” with responsive web design.

  • Web Standards for E-books

    by Joe Clark · Issue 302 ·

    E-books aren't going to replace books. E-books are books, merely with a different form. More and more often, that form is ePub, a format powered by standard XHTML. As such, ePub can benefit from our nearly ten years’ experience building standards-compliant websites. That's great news for publishers and standards-aware web designers. Great news for readers, too. Our favorite genius, Joe Clark, explains the simple why and how.

  • Taking the Guesswork Out of Design

    by Daniel Ritzenthaler · Issue 283 ·

    Clients, like other humans, often fear what they don't understand. Daniel Ritzenthaler explains how sound goal-setting, documentation, and communication strategies can bridge the gap between a designer's intuition and a client's need for proof.

Topics