Responsiveness with Bootstrap


Bootstrap is a javascript\css framework created by developers of Twitter. It functions as a framework for responsive design of websites. Bottomline: it ensures that your website will look good on mobile devices as well as on desktop computers or tablets.

What to think about when using Bootstrap?

We discussed some effects that bootstrap can have on your design and functional design. In this light we can give the following advise. Prevent the usage of background images that do not have an aspect ratio of 1:1. Also be carefull with fixed block heights, margins and paddings. Rather use an equal amount of padding in your block of content to release empty space on the side, bottom and top. If you have to use fixed width than don't use one that goes over 768px, because this is the max mobile device width and your content will overflow the viewport horizontally on mobile devices. From a business perspective it's important to figure out how to streamline the content creation process and make sure there is some smart way of easilly adding the extra images, find some technical solution for that or find a way to work around that. Besides this I advise to put your primary focus on mobile first and make sure it loads quick and fast on mobile devices, maybe not use background images at all. Keeping in mind that the quicker your page loads the better it will be found in Google. After that, you can always optimise it's look and feel on desktops. However that is of lesser importance.