A List Apart

Menu

Topic: Responsive Design

  • Responsive Images and Web Standards at the Turning Point

    by Mat Marquis · Issue 351 ·

    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

    by Jonathan Smiley · Issue 348 ·

    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.

  • Style Tiles and How They Work

    by Samantha Warren · Issue 347 ·

    How do you involve your client in a successful design process? Many of our processes date back to print design and advertising. It’s time we evolved our deliverables to make clients a more active participant in the process. The style tile is a design deliverable that references website interface elements through font, color, and style collections delivered alongside a site map, wireframes, and other user experience artifacts. Learn how style tiles can align client and designer expectations, expedite project timelines, involve stakeholders in the brainstorming process, and serve an essential role in responsive design.

  • 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.

  • 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.

  • Creating Intrinsic Ratios for Video

    by Thierry Koblentz · Issue 284 ·

    Have you ever wanted to resize a video on the fly, scaling it as you would an image? Using intrinsic ratios for video and some padding property magic, you can. Thierry Koblentz shows us how.

  • Fluid Grids

    by Ethan Marcotte · Issue 279 ·

    How awesome would it be if you could combine the aesthetic rigor and clarity of fixed-width, grid-based layouts with the device- and screen size independence and user-focused flexibility of fluid layouts? Completely awesome, that's how awesome. And with a little cunning and a tad of easy math, ALA's Ethan Marcotte gets it done. We smell a trend in the offing.

Topics