You don’t have mobile and desktop anymore.
You have devices!
Small devices equates to mobile, medium ones to tablets, large to desktops and extra large to retinas. I understand the whole responsive thing to an extent but in order to learn a bit more about the tools and techniques out there, I took the Responsive Images course at Udacity. It was to the point, concise and absolutely free. Here are a few things I picked up:
- SVG Optimiser
- pixel density across different phones
- Picture element and the srcset attribute to provide a list of fallback options to the browser. srcset passes the responsibility of downloading and rendering the right image for the right device.
- calc for figuring out the margin and width dynamically.
- There’s an easy way to create your responsive images via grunt. I couldn’t find a similar thing for webpack, as webpack works quite differently from grunt (or gulp).
All in all, I really enjoyed going through the videos and doing the exercises and and highly recommend it to anyone feeling a bit weak on the whole responsive thing.