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.