Responsive design

Facebook Twitter
Articles Articles Time The closing talk from the Full Frontal conference held in Brighton in November 2013. The Power Of Simplicity
Multi-Device Layout Patterns

Multi-Device Layout Patterns

Through fluid grids and media query adjustments, responsive design enables Web page layouts to adapt to a variety of screen sizes. As more designers embrace this technique, we're not only seeing a lot of innovation but the emergence of clear patterns as well. I cataloged what seem to be the most popular of these patterns for adaptable multi-device layouts. To get a sense of emerging responsive design layout patterns, I combed through all the examples curated on the Media Queries gallery site several times. I looked for what high-level patterns showed up most frequently and tried to avoid defining separate patterns where there were only small differences.
Advertisement This article is the fifth in our new series that introduces the latest, useful and freely available tools and techniques, developed and released by active members of the Web design community. The first article covered PrefixFree; the second introduced Foundation, a responsive framework; the third presented Sisyphus.js, a library for Gmail-like client-side drafts and the fourth shared with us a free plugin called GuideGuide. Today, we are happy to present Erskine’s responsive grid generator: Gridpak. In the near 18 months since A List Apart published Ethan Marcotte’s article Responsive Web Design much has changed in the way we approach our design process. The new responsive attitude described in the article embraces device agnostic design, flexibility and the undefined canvas. Gridpak: The Responsive Grid Generator Gridpak: The Responsive Grid Generator
The Responsinator Responsinator · Make your own · About · Login iPhone 3+4 portrait · width: 320px We're hosted on - signup, they're great. Remove these ads - make your own customised Responsinator. iPhone 3+4 landscape · width: 480px

The Responsinator Introduction Foresight.js gives webpages the ability to tell if the user's device is capable of viewing high-resolution images (such as the 3rd generation iPad) before the image has been requested from the server. Additionally, it judges if the user's device currently has a fast enough network connection for high-resolution images. Depending on device display and network connectivity, foresight.js will request the appropriate image for the webpage. adamdbradley/foresight.js adamdbradley/foresight.js
Yiibu - Lovingly crafted mobile experiences