Blog

Why Bootstrap is no replacement for design sense: a case study

Jun 1, 2013 • Karen

Top of the mosh project home page.

Until recently, the website for the mosh open source software project (a mobile shell that has a bunch of useful features missing in regular ssh) looked like this: http://rose.makesad.us/~nosve/old_moshweb/

Standard Twitter Bootstrap site. Not without flaws--the content in the hero box could use some clarity--but clearly a step up from typical 90s-tastic, roughly-styled FOSS project sites, right?

Wrong.

1.) Just because there's an easy-to-use grid system in Bootstrap, doesn't mean you should use EVERY GRID ARRANGEMENT POSSIBLE EVER.

From that bootstrapparific hero section, we scroll down a bit...

A list of features in two rows. Row one has three equal columns. Row two has four equal columns.

Immediate response: AAAAH! AAAAAH! AAAAAH! WHY?!

Consistent layouts are good. Consistent gutters are good. These divide a page into different areas, making it clear what content goes together and what content is separate. They also are good for readability.

Not every page has to have the same layout--some pages you might want a main content area and a sidebar, some pages you might just want a main content area. Some parts of you might want to divide into equal columns, say for listing of features, as in this use case.

What you never, ever want is a page that looks like a brick wall--every gutter colliding into something else.

Another case of Bootstrap grid abuse, further down the page:

wtfgrid

Wat. The three columns are each different widths for no apparent reason, and they give you no sense whatsoever which box of content to read first, which box is most important, or really any semantic hint whatsoever what's going on here.

And another example:

morepain

The pain. The pain. Make it stop.

2.) Alignment is important, even when Bootstrap doesn't force you to have it.

installation

Here, the installation instruction section is close to great. The icons are cute and you can use them to easily scan for your appropriate platform. It could use a little spacing in places, and the first row (not shown) has some trouble due to the inconsistent size of the instruction box, but--overall, a good idea.

The killer problem? One of these things is not like the other...

installation-with-guides

In fact, several of these things are not like the others. It happens that most of the icons are around the same height, so the headers of each platform box mostly line up. But the Android icon is too tall and the Homebrew icon isn't included, and a few other headers vary slightly from the others in height, marring what could be beautiful alignment.

Hold yourself to a header height and make all your icons fit it. Even if Homebrew doesn't have a good logo like the others, even a coffee-brown square there would be better than nothing. In order to implement this sort of thing, see item 3...

3.) Even with Bootstrap, you basically-inevitably will still need to write CSS.

A list with spaces between each list item--created not with CSS, but through the use of unclosed paragraph tags.

You can't see it, but in between each list item in the news section is an unclosed paragraph tag--all because vanilla Bootstrap does not style lists to have space between each item, a feature that this project wanted (and is a good thing to have in this use case). This is one of a variety of HTML sins on the page.

When the only tool you have is (non-standards-compliant) HTML, everything looks like a nail. Don't do it. If a piece of HTML markup is only there for style, not for semantics or content, you are Doing It Wrong. There is CSS that can solve your problem. If you're not sure what to do, ask a friend!

Many of these issues I took a stab at fixing several weeks ago, so if you go to mosh.mit.edu now, many of the issues mentioned will no longer be present. (I haven't touched the Usage section yet, though, so some of the site's former "glory" is still visible.)

Takeaways: Bootstrap can, in fact, easily be used to make websites with terrifying readability and UX. Even if you're "just" a developer or project maintainer, learning about basic design and UX principles is important. Relevantly, if you're interested in learning more about this sort of thing, you have two days left to sign up for Summer of Design, a free 12-week design-for-engineers course that may be helpful. (I don't know the guy teaching it, but I signed up for curiosity's sake.)