Responsive Design Archive

Grid Systems – 24 Columns Feels Nicer Than 12!

With many web development projects, you’ll find yourself reaching for a grid system to kick things off. Bootstrap and Foundation are usually the “go-to” for this, and that’s because they are both easy to use and easy to implement, while also boasting many features. Plus, they’re “battle tested”, so you more-or-less should know what to

Guide: How to Make Boostrap 3 Support IE8

Need to support IE8 when using Bootstrap 3? It isn’t too hard (thankfully). Follow this little tutorial and you’ll be on your way to success! 1) Use the latest version of Bootstrap! This is key. Older versions utilized max-height/width and min-height/width, and when joining that with box-sizing, it can cause compatibility issues. This was remedied

Bootstrap 3.2.0 Released! – Brings Responsive Video Embeds

Okay. So it brings a lot more than just responsive support to things like YouTube videos, but that is definitely one of the highlights! No longer will you be required to use things such as FitVids.js (an awesome script, by the way) in your Bootstrap projects just to make videos responsive. And if you did

Bootstrap 3: Change Stacking Order

Changing the stacking order of columns in Twitter’s Bootstrap 3 is actually easier than you may think. Excited yet? Calm down. Below is an example situation where you may want to change the stacking order. We have a nice 2 column row that has text on the left and an image on the right. This

CSS: How to Easily Hide Content On Only Mobile or Only Desktop

One of the great things about Twitter’s Bootstrap 2 and Bootstrap 3 are the responsive utility classes. It makes hiding / showing content on only specific resolution sizes or devices easy. Other than the grid system, it’s one of the key features utilized in the framework. What if you wanted to bring that over to

Bootstrap 3: How to Enable Hover and Toggle for Nav

By default, Bootstrap 3’s navigation has menus toggle’able — you click to have them open / show, and click to have them shut (hide). Wouldn’t it be nice to also have menus open through hovering your mouse over them? Luckily, it isn’t complicated to do! And the best part? It only takes minor CSS to

Outlook 2010 – Responsive Email Template Using Conditionals and Media Queries

Responsive design is thought of generally as just a technique for websites. People don’t generally think about the role it plays in emails. But they should. Designing for email is a different beast. If you thought designing for websites was a pain, then you haven’t had to deal with the different email clients out there