Presented by Clarissa Peterson.
- Foundation: made by Zurb
- Responsive grids are based on flexible columns. Foundation is based on a 12-column grid.
- ZURB Soapbox: example site based on Foundation
- Inculdes class names that can be used to show or hide content for particular media queries (e.g. show-for-xlarge, show-for-portrait).
- Designer/Developer virtuous cycle/feedback loop is key to the responsive design workflow. Prototyping in the browser serves as a moving wireframe. Frameworks make prototyping really easy.
- Make sure all clients/stakeholders understand what’s happening in a responsive design.
- Bootstrap: made by Twitter
- 320 and Up: Andy Clarke’s “small-screen first” framework
- HTML5 Boilerplate
- Should the UX Designer learn the framework to build their own prototypes? Sure! For most frameworks, a basic understanding of HTML is all that’s necessary.
- Is hiding elements in a responsive design a good idea for a production site? Frameworks are great for prototyping, but include too much for production sites.
- Brad Frost’s Responsive Patterns
- Example: Gravitate
- Example: Temple University: On mobile, all you can see is navigation
- Example: Starbucks: Ye olde Hamburger Icon
max-heightbetween 0 and some value to show/hide navigation by swapping
Left Nav Flyout
- Example: Emeril’s Restaurants: this is Ye Olde Hamburger and Basements example.
- Media Queries using
pxs? We’ve started using
ems instead of
pxs because a pixel isn’t really a pixel anymore.
ems can be more consistent across devices as pixel density changes.
- Using different navigation patterns for different devices? Make two different navigations in the markup and show/hide based on media query/screen size. This isn’t advisable since it’s duplicative markup. The ideal is to have one piece of HTML and use CSS to make the navigation look and behave differently.
They add awesome features like Nesting, Mixins, and Variables
@mediaBubbling: Embed media queries in selectors
- The biggest problem facing responsive design is bandwidth-wasting images.
<picture>element proposal is akin to
- Otter Surfboards uses different crops of the same picture for mobile vs. large screen. Uses media queries to do art direction (slightly controversial).
- Picturefill uses
data-*attributes and conditional comments to supply images to various browsers.
- Adaptive Images is a server-side technique using Apache and PHP. Stores screen size in a cookie and passes that back and forth between the browser and the server.
- Adaptive Images is limited in that it fixes you with a particular browser size. Not much of an issue though since web developers are the only people who resize browsers.
- Responsive background images or sprites? It can be done! No good solution for background images, though.
Responsive Data Tables
- CSS Tricks’ Responsive Table: Pretty complicated, setting a
display: blockand do some other heinous things.
- Code that is added to replicate behavior that doesn’t work in all browsers.
- Modernizr detects HTML5 and CSS3 features and adds classes to the
- Customized Modernizr builds are the way to go. Add only the tests you need!
- HTML5 Cross-Browser Polyfills
- If you were a browser maker, what would you do to make responsive technology better? Support for older browsers is a real problem. Browser makers, Microsoft in particular, could do a better job of encouraging users to upgrade. Consistent support across browsers would be super helpful, too!