Get a bootstrap makeover and speed up your site
The term responsive design was coined by Ethan Marcotte in the May 2010 article of A List Apart. It is pretty straightforward: a website should adapt given the screen size and orientation to allow for a more readable and enjoyable experience for the users.
Fast forward to today and you will see a good set of tools and templates for developers to create websites that are responsive in nature. One of the most popular ones is Bootstrap. Here is a list of tips and tricks to help you spruce up your designs and speed them up too.
There are other frameworks that allow for the responsive flexibility that bootstrap does too. Check out one of our previous articles on inititlizr for a template that integrates HTML5 Boilerplate and Bootstrap. Another framework gaining popularity is Foundation by the guys at Zurb. It has an add-ons section to help developers save time and effort with HTML templates and icon fonts they can use.
One consideration when building responsive designs is that a big chunk of the users will be on lower bandwidth networks like cellphones or tablets. For them readability needs to be paired with speed. When creating content consider your mobile strategy as part of the process. Create smaller size/resolution images for mobile customers and use some of the techniques like graceful degradation or progressive enhancement to handle your images. I prefer to start small and if the user has the capabilities then move to higher grade content. See some examples here:
If you want a good jQuery plugin, I personally recommend Response.js. Response.js, “provides tools for building performance-optimized, mobile-first responsive websites. Its breakpoint sets use HTML5 data attributes to dynamically swap markup based on breakpoints so that rich content can be served progressively.”
It’s been mentioned before but I will repeat it… minify your CSS and JS files and if possible enable GZip compression on your site. This will be one of the easiest performance gains you can accomplish.
As important as functionality is, a good aesthetically pleasing design is key for any good website. For those of us who need a bit of help, here are some good starting points for bootstrap templates:
- My personal favorite is Bootswatch. It has a very good mix of (free) designs and now supports version 3 of bootstrap. Just change your CSS files for these ones and you are ready to go. Don’t ask me why but I keep coming to Amelia for some of my designs.
- Bootstrappage has an extensive mix of free and paid templates, both standard and responsive.
- Wrapbootstrap has a large collection of paid templates; check the live demos first as some templates are better than others in mobile devices.
- Themeforest and Codecanyon have some good content too. I like some of their flat designs like Metrostrap.
- Lastly, check out Creative Market for some high end designs.
Leave a comment and let me know, what your favorite responsive design template is and what other tricks you have implemented when building mobile web solutions.