Adaptive vs Responsive

Responsive design is fluid; using CSS3 media queries to respond to any screen sizes, where text can wrap and images can shrink to adjust along with your browser whereas Adaptive design uses a series of static layouts based on breakpoints.
– Excerpt from an article by Ryan Boudreaux

I think the above definition is self-explanatory; however I will try describing both with examples and used cases without getting into it that who started what and when.

Read more…

Cross-browser Responsive SVG with PNG fallback

Working with SVG is fun but putting it in action can be pain. There were two challenges that I faced; It is not supported by IE8 and below and It was not responsive enough on IE9 and above.

Internet Explorer is main culprit in cross-browser Responsive SVG. If we do not mention the height then IE assume the height of SVG as 150px by default and therefore the code max-width: 100%; height: auto failed. The SVG get stretched to fill the width but the height remains 150px.

Read more…