Responsive is the flavour of the month

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.

About andhapp

Namastey (Hello) Stranger, This is not the geekiest blog on the planet yet it is not the dumbest one either. I am a small time developer who likes to explore new technologies. I usually program in Java, Groovy and Ruby and take keen interest in the surrounding geeky developments.
This entry was posted in Programming and tagged . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>