Bootstrap 3 User Experience Validation
One of the first projects I tackled while I was at Bio-Techne was validating Bootstrap 3 as a responsive framework from a user experience perspective. I was already very familiar with Bootstrap, but since Bio-Techne wanted to use it as the foundation of their new design framework, I wanted to see if it had any shortcomings that we needed to address during development. As with every framework, it has quirks, so here’s a list of things that needed to be better based on our Bootstrap 3 user experience validation:
- The entire menu structure
- The pre-defined mobile breakpoint for CSS media queries
- Overall styling changes to match company branding
- Vertical alignment challenges
- Lack of slider support
Validating Bootstrap 3 Menu UX
Let’s start with a brief discussion of the Bootstrap 3 menu, specifically, hover elements. By default, the Bootstrap 3 menu doesn’t open on hover. I can understand why: hover menus are difficult to implement in a way that easy enough for the user to use without interfering with their mouse interactions. Most developers opt for superfish-style hover menus that rely primarily on HTML, CSS, and a little JavaScript for compatibility. We knew we would have to modify the Bootstrap 3 menu behavior to put it more in line with modern usability standards. We’ll dive into how we did that in a future post, but we were able to create a great menu experience for desktop and mobile browsers that shared the same structural elements. We simply used a CSS media query to adjust the design after our mobile breakpoint.
Validating Bootstrap 3 Breakpoint UX
Speaking of mobile breakpoints: Bootstrap 3 defaults to mobile styling for any screen size smaller than 768 pixels. Am I the only who thinks that’s an odd choice? I don’t think they chose that number at random; I’m assuming their intention was to serve the iPad the full desktop version of a website even in portrait orientation. After much discussion and testing, our team determined that changing Bootstrap 3’s default mobile breakpoint to 769 pixels would give customers a better user experience by allowing them to choose between designs with the orientation of their device. If they want our mobile layout, they can use their device in portrait. If they want the full desktop experience, they can use their device in landscape orientation. By changing the default mobile breakpoint, we were able to use the same mobile layout for every mobile device simplifying our design and development process tremendously.
Validating Bootstrap 3 Design UX
The next issue: Bootstrap 3 isn’t exactly pretty. I’m willing to bet that any designer would choose to replace the default bootstrap styling with something a little more modern and in line with their brand. That’s exactly what we did. Bootstrap has a great CSS reset, but we replaced the styles for nearly every Bootstrap element we used on the site. We also made those stylings available to our content managers who can now use Bootstrap to build content pages that align with the rest of our design without much interaction from the design team. It’s been a great benefit to productivity.
Validating Bootstrap 3 Column Height UX
Bootstrap’s lack of vertical alignment consistency drives me crazy. If you style a content block with a simple 1-pixel border, the height of that element will vary based on content inside the div. So, if you have two tiles next to each other, one could be significantly taller than the other. It’s a bit twitch-inducing for people like me. I would prefer that everything lines up perfectly with matching tile heights and spacing. A simple jQuery fix allowed us to add a class to columns that needed equal heights. We based our code on the window resize function in jQuery. It’s not enough to just check for the tallest object and make the others match; we need to do that every time the window changes size as well. Otherwise, you’ll get some pretty funky visuals as you test out your breakpoints. It’s not something that’s terribly jarring, but it’s necessary to fully fix the problems with Bootstrap 3 column heights.
Validating Bootstrap 3 Slider UX
Finally, we noticed a distinct lack of pre-made slider options that worked within the Bootstrap framework. The built-in carousel was too limited for our scope, so we had to look elsewhere. Most sliders use a general fluid width that doesn’t adapt well to Bootstrap 3’s breakpoints. Knowing this, we started building our new framework expecting to add a custom Drupal slider that worked within Bootstrap 3. After investigating many jQuery slider solutions, we determined that Slick slider would allow us to define the structure of our slides without having to write custom animations and functionality from scratch. We built our templates and created a custom entity type in Drupal so our content managers could add new slides directly from the admin interface. It’s been a huge hit with our content team, and it looks so pretty.
That’s certainly not an exhaustive list of user experience problems within Bootstrap 3, but those are the biggest issues that came up during our validation of the framework. Bootstrap 4 brought a lot of changes, some of which invalidate issues we brought up here. However, since 4 wasn’t available during the project, we made Bootstrap 3 into a good user experience for our customers.