You may have noticed Responsive Web design, the practice of using CSS media-queries to style content appropriately for device and context, is becoming more prevalent. In fact, at the time of writing this post, MediaQueri.es, a blog dedicated to showcasing Responsive Web designs was a trending post on Twitter.
Among user experience practitioners, this adoption is a welcome movement as we move into an era where digital consumption is happening on a growing range of devices – from smart phones, to tablets to even large area displays like televisions.
To support the practice in Interaction Design, we’ve created an OmniGraffle stencil that compliments Joni Korpi’s LessFramework 4 adaptive CSS grid system. Less Framework is a great base for developers to create adaptive interfaces for the Web.
The stencil provides a grid for the four key layouts in Less Framework: Mobile, Wide Mobile, Table and Default/Fallback. It’s based on the exact dimensions defined in Less Framework: Multiples of 68px columns, 24px gutters and various margin widths depending on the device type.
With this stencil interaction designers can consider the appropriate content structure for each of the main device categories in wireframes and early concept prototypes. It is important to design for real content and considering the appropriate grid system as early as possible in your designs will go a long way in ensuring your content renders correctly for the appropriate context.
Download the Less Framework OmniGraffle Stencil
Please retweet if you download this stencil.
Update:Now available on our github, where future updates of this and other resources will be posted.
Update (July 13th): A new update is available via the download link above and our github that corrects the Tablet size grid margins to the correct width.