Responsive Facebook Like Box

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. By using separate regions and floats a single sidebar can easily be broken into two creating a responsive sidebar and giving you more room to play with responsive design.

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.