MozFest 2012: Notes from Responsive Design Session

Techniques & Tips

  • flexible grids
  • media queries that aren’t pixel dependent
  • media queries to selectively adapt the page
  • responsive images (max-width: 100%, can hide small (767px)/medium(1296px)/large (1440px))
  • can use modernizr to detect if touch device
  • Foundation has flex classes for embeds to resize YouTube videos, etc.
  • For iframes, can use padding: % of ratio of iframe/embed
  • Responsive iframes by NPR will do it for you as well
  • Source code order (for screen readers especially)

Download Foundation (basic responsive, reset files) – uses 12 columns

Thoughts

Coding on the fly is great if the space is setup to be a hack session type thing, but the way the room was set was very much just presentation style. I just feel like I’m not really learning much when someone is coding in front of me. Demo is totally fine, but just watching them enter text seems like a bit of a waste of time.

I know mozfest is open for everyone, but somehow I expected it to be more advanced. I don’t think this covered anything I didn’t already know, and I wasn’t a huge fan of the fact that it was based on an existing package.

Definitely a great session to have for those who don’t know anything about responsive design though.

Published by

Cynthia

A librarian learning the ways of technology, accessibility, metadata, and people

Leave a Comment

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s