responsive-design

Responsive Facebook Like Box mglaman Sun, 09/22/2013 - 11:31

We've all been there - create this awesome responsive design for a client's website and then you have to try and slap a Facebook Like Box in there..somehow..without breaking your responsive work. Sucks, doesn't it? But it doesn't have to. Using a little jQuery you can cause the Facebook Like Box to re-render on window load or resize allowing it to become responsive versus hardcoded.

 

A better responsive sidebar

Sidebar content always gives me a little twinge when it comes to responsive design. Typically a left sidebar will end up stacking directly above the content and a right sidebar directly below. This can be fine, unless your left sidebar has 5 different content areas and now the user has to scroll two screen lengths just to read an article. Or the right sidebar has an important call-to-action you apparent to each visitor, but it resides underneath the content on a mobile device.

Responsive Images

Responsive design is all about the ever growing number of mobile devices that individuals can view a website on. Creating a fluid grid system to adapt to these different screen resolutions and widths is a major undertaking. CSS3 and modern browsers have made it easier to migrate away from image heavy websites; however, photos speak a thousand words and clients will want larger header images or photographs.