Bootstrap in POP Forums, and why I resisted

posted by Jeff | Wednesday, September 24, 2014, 8:58 PM | comments: 1

I haven't been writing much lately, in part because I spent a good portion of my free time in the last week overhauling the POP Forums UI to use the Bootstrap framework. You can see what it looks like on the demo site. It took me a long time to cave and do this, but I think I had pretty good reasoning.

The forum app has always been at the core of my personal site projects, chief among them CoasterBuzz. I'm a little meticulous about markup and CSS. I hate having too much of it. I hated using jQuery UI because it felt like bloat. Grid frameworks always seemed to require more markup (and they still do) and global CSS almost always causes trouble with other stuff when you drop it in. All prior experiments with these things failed, and let's be honest... a two-column layout is a nut that has long since been cracked and requires very little markup or CSS. In order to bend the forums a little to match the rest of the site it would be contained in, there's incentive to keep it light in terms of CSS.

I mostly achieved this. The number of overriding classes was not huge, and more global stuff around common elements mostly worked. You could basically drop the forum inside of a div and be on your way. It even worked pretty well on tablets, and in my last significant set of tweaks back in 2012, doing a responsive design didn't feel like a priority.

And then there was the mobile experience. One of the trade-offs for responsive is that you typically end up with more markup and CSS instead of less, so I wasn't ready to fully embrace that. Some people still weren't on LTE networks either, so I was bit conscious. Since the UI rendering was done by ASP.NET MVC, it was easy to strip down the UI to mobile-specific views, and it only took a few hours to do it for the entire app, as well as CoasterBuzz. I also didn't force it, and users could choose mobile with a link at the bottom of the page. In fact, you can see it today on CB if you scroll to the bottom. It's super fast, super light weight and concentrates on the reading of text. You can debate the merits of different views vs. responsive all day, but in this case it did exactly what I wanted with very little effort.

Around the time of that CB release in 2012, Twitter open sourced Bootstrap and it was starting to get popular. Early last year, it seemed like the web in general was starting to adopt its own look and feel, largely due to Bootstrap. It's like the web as an OS started to have a UI style guide. I was finally starting to think seriously about it because its use was so widespread, and they were even baking it into the MVC project templates. Then they released v3, and it broke a lot of stuff. That threw me back into caution mode.

Since that time, several things have motivated me to reconsider Bootstrap. Again there's the bigger issue of adoption, which has become pretty epic in scope. Then there's the large number of themes, which are available in great numbers, and range from free to cheap. It isn't hard to make your own either. I've also been dissatisfied with using mobile ad formats, because they don't pay, and the regular ones aren't well suited to mobile specific UI. After two years of phone upgrade cycles, more people have more bandwidth and faster connections. On top of that, the devices themselves are faster at rendering. Oh, and most importantly, Bootstrap itself has very clearly matured. That's pretty compelling.

So I made the revisions and committed them. The admin pages haven't been updated, but I'll get there. I feel like this gives me a good fresh start to make more changes and continue to see its evolution.


Comments

Dennis

September 25, 2014, 9:39 AM #

I'm wresting with exactly the same stuff right now. There's always a trade off in engineering between "share code" and "fork code for a specific case."

With shared you may fix a bug in one usage and unintentionally affect/break other usages.

With forked you may fix the bug in multiple places but you can make focused spot fixes without concern for unintended consequences.

Responsive seems clearly in the "shared" court. The win however seems to be in dealing with all the mid-size screens.

And advertising is a whole other thing.

I'm gonna ping you on FB and we can discuss.

Dennis


Post your comment: