Presented by Lindsey Norman
There are a lot of arguments and it is very complicated.
Scenario
Large retail client with a lot of imagery
Big Lesson #1: Responsive may seem old hat already, but it’s still new in a lot of organizations.
Responsive Web Design podcast
Big Lesson #2: Style Guides = awesome
Keeps everyone on the same page and is a reference point for changes.
Retina Revolution
- Create image at 1.5 to 2 times larger than necessary and export at high compression
Percentage Crop
- Full size for desktop, but crop for mobile
- Involves moving the viewable area of image for smaller viewports
- Addresses art direction use case
- fast solution
- easy to understand with minimal code
Creative team wanted more control with more crop sizes so created a Sass function
<picture> element allows to rearrange elements and show different sizes
picturefill.js – more time and code intensive, so only used for important pages
make sure you use the correct media queries
Be thorough when discussing media queries
Make sure you explain all of the new HTML5 elements
<picture> element with absolutely positioned links
What do YOU think? Let me know...