As you probably already know if you've seen any tech news this week, Twitter Bootstrap 3 came out of RC and was officially released this past Monday. There are a plethora of changes in the new version, but the two most visible changes are a "mobile first" responsive grid and a new flat graphical style, ala Windows 8.
The flat styling has been especially controversial. If you didn't need to differentiate a site with distinctive design (e.g. internal admin sites), you could usually get away with using previous versions of Bootstrap without any stylistic modification, but not so much with Bootstrap 3.
Unfortunately for those uses, the default styling in Bootstrap 3 is fairly bland until you customize it a bit or augment it with a full theme. Bootswatch and WrapBootstrap are two great resources to accomplish the latter. To simply bring Bootstrap 3 most of the way back to Bootstrap 2.3.2′s look and feel, there's also an official theme you can apply.
So, I think the brouhaha over flat vs. gradient defaults is overblown. More importantly, that change has had an interesting side-effect that seems to have been mostly overlooked this week: Performance.
"Mobile first" means performance is crucial
In a "mobile first" world, Bootstrap's biggest weakness has always been performance. It's surprising if you haven't delved into the topic before, but the impact of structural choices in a CSS framework can have a tremendous impact on layout and rendering performance – particularly on under-powered mobile devices. Even between pages that look nearly identical, small differences can make or break achieving the all-important 60 FPS draw rate for scrolling and animation.
Adobe's relatively bare-bones Topcoat framework is a great example of just how much performance you can squeeze out of a mobile browser when that's your primary focus. They even have a running benchmark of each build's rendering and layout times as part of their CI workflow. Compared to less-optimized frameworks, the difference in jank is stark on slower devices and/or browsers.
Coming back to Bootstrap 3, what hasn't been discussed very much this week is that the new release has had a significant impact on rendering performance. To illustrate that, Paul Irish used Chrome's dev tools to took a look at the performance difference between Bootstrap 2.3.2 and Bootstrap 3 RC1 a few weeks ago:
Pretty impressive.
In Bootstrap 3′s case, it's likely that the improvement stems almost entirely from the flat styling, as gradients and shadows are expensive to render. Regardless of the root cause, Bootstrap 3 is much more viable for sites that need to work well on under-powered mobile and tablet devices.
You've been reading The big change in Bootstrap 3 that no one's talking about, originally posted at Encosia. I hope you enjoyed it, and thanks for reading.
If you've got any feedback, please click through and leave a comment; I'd love to hear from you. You can click here to jump directly to the comment section of this post.
Related posts:
No comments:
Post a Comment