Sign in Subscribe

Design with Bootstrap

Garrett van Wageningen

• 3 min read

Whenever I think about building an app, I rarely give any thought to UI or UX design up front. I tend to focus on aspects of engineering like speed, efficiency, and maintainability. I am by no means an expert in any of these fields, but they are the aspects of development that fuel my passion and curiosity and so are naturally what my thoughts gravitate towards.

Despite my leanings, I actually think that UI and UX design are the most important parts of app development. Why? Because the design is what gets people in the door. If we can't get anyone in the door, we can't impress them with our content. My opinions are likely influenced by the large amount of time I spent in an industry heavily reliant on sales, but numbers don't lie, and salesmen often get paid hefty commissions to get people in the door compared to the people in the office doing the grunt work. We all say not to judge a book by its cover, but we all do. I know that I, at least, am more willing to give a book with a nice cover a chance than the one that looks like one of my sixth-grade art projects. The assumption is as simple as quality on the outside equates to quality on the inside. The same principle applies to web apps. An app without design is going back on the shelf, and its content will never be consumed.

The solution to adding good design to my apps seems simple, learn some css. The reality is I can only learn so many things at once, and becoming a css expert requires a significant amount of time and effort. Since I've chosen to focus this stage of my development on things like algorithms and data structures, I haven't been able to dedicate as much time to aspects of UI and UX design like advanced css, animations, and the like.

Learning to embrace abstraction is a mammoth-sized struggle for me. I want to know how everything works down to the bit, and be able to recreate it from scratch too. The cure? A library so well well documented and well crafted that it is effortless to use. Luckily, this is exactly what Twitter's Bootstrap is.

With so many people consuming web content on phones, it is important to design with mobile in mind. Not all apps are meant to be used on a small mobile device, but for the ones that are, Bootstrap helps me get a responsive site up and running quickly. For example, with Bootstrap I can create a responsive navigation bar with just a few lines of code:

I can easily transform those nasty looking standard buttons and radio buttons. If you resize your browser window, you can see the buttons respond to the smaller screen size.

Last, but certainly not least, tooltips. I can actually make tooltips look halfway presentable with very little effort thanks to Bootstrap.

The icing on the cake is Bootstrap's documentation. The documentation is easy to navigate and easy to understand. It also provides examples for almost every single snippet of code. If you're brand new to coding, it's a great place to start learning to use documentation. It's the first documentation I used, and it helped me get over my fear of using documentation as the primary source for a new language or library. Now, documentation is the first place I go for help (except for Java, I still can't stand Oracle's documentation).

Some people will judge my Bootstrap recommendation as so blasphemous and insulting that they would have me branded a heretic and burned at the stake, never to speak of design again. They might have a point, I'm no designer and I don't have extensive industry experience. But I'm not recommending that everyone use Bootstrap for design. If someone wants to be a designer, I do think they should spend the time learning the intricacies of CSS and learn how to make responsive web apps without Bootstrap, even if they decide to use it to speed things up. I'm speaking to developers like me who understand the importance of design, want to have a nice looking interface for their users, but want to focus on other aspects of the code. For those like me, I imagine using Bootstrap will be a welcome relief. If I spent hours making the best freshly squeezed lemonade in the neighborhood, but only had paper cups to serve it in, I'd be relieved if someone offered to let me serve my top-notch lemonade in their Pottery Barn glasses.

References: Bootstrap, Bootstrap Examples, Bootstrap Documentation

Sign up for more like this.

Enter your email
Subscribe