I. Device Based Design

While some may say…

Start with the small screen first, then expand until it looks like shit. TIME FOR A BREAKPOINT!

Stephen Hay

or that…

Designing to fixed screen sizes is in fact never a good idea…there is just too much variation, even amongst ‘popular’ devices.

Stephanie Rieger

Device Based Breakpoints

Bootstrap expertly divides the web into devices based on Totally Not The iPad's Screen Size™:

• Extra Small Devices: Phones, <768px
• Small Devices: Tablets, ≥768px
• Medium Devices: Desktops, ≥992px
• Large Devices: Desktops, ≥1200px

While a widely held belief is…

Don't penalize users for the device they happen to be browsing with.

Brad Frost

Hide/Show Classes

Bootstrap provides an array of device based hide and show classes:

• .visible-xs
• .visible-sm
• .visible-md
• .visible-lg
• .hidden-xs
• .hidden-sm
• .hidden-md
• .hidden-lg
• .visible-print
• .hidden-print

II. Accessibility

Accessible Icons

Iconography is a huge part of modern web development, providing at-a-glance shortcuts.

Fortunately, Bootstrap has done the research and determined non-sighted users don't need these shortcuts.

• <span class="glyphicon glyphicon-shopping-cart"></span>
• <span class="glyphicon glyphicon-star"></span>
• <span class="glyphicon glyphicon-user"></span>
• <span class="glyphicon glyphicon-exclamation-sign"></span>

Color Blindness

It's also a good thing Bootstrap has determined that people are color blind don't use the Internet

• Success Text
• Danger Text
• Success Text (Red Blind)
• Danger Text (Red Blind)
• Success Text (Green Blind)
• Danger Text (Green Blind)

Font Sizing

It appears as if the user testing has been done and the authors of Bootstrap has found that no one with bad eyesight uses the Internet either!

• Base font size is 14px
• All font sizes measured in px. (It's not like the W3C recommends em for font sizes)
• Despite what some say, media queries written in px is also much better for accessibility too!

III. Consistency

…[C]onsistency is the hobgoblin of little minds

Ralph Waldo Emerson

UI and Markup Consistency

Most people preach consistency when creating style guides, that consistency is good for user experience, but what do they know?

• Form elements switch between flat UI and skeuomorphic UI
• There are three different colors for primary, success, info, warning, and danger states (not including disabled states)
• Navigation marked up with <ul>/<li> are sometimes marked up with role="presentation", sometimes not

IV. Performance

Bootstrap Core File Size

While Pew Internet claims that about 20% of all Americans mostly use their mobile phone for going online, performance really isn't a design constraint for Bootstrap Core, so it doesn't need to be for you!

• 97 KB of minified core CSS
• 16 KB of .woff fonts
• 28 KB of minified JS (before jQuery)

That's 141 KB of assets before any of your content or any of your site-specific theming, which on average 3G download speeds would take about 560ms to download

Responsive Images

As we know, responsive images are hard.

Bootstrap makes them easy! Just has you add a .img-responsive class!

This will make your full sized images, on average making up 654 KB on a site (2620ms at average 3G download speeds), squishy!

To put all this into perspective…

Every 100ms delay costs [Amazon] 1% of sales

Greg Linden

and…

At Google, a 500ms delay caused a 20% drop in traffic

Marissa Mayer

But those statistics are from 2006!

Surely with everyone now browsing the Internet exclusively on high-speed broadband that's no longer an issue

Haters Gonna Hate

Who are you going to listen to…

…nearly every line [of Bootstrap] is a joke.

Jacob Thornton (@fat), creator of Bootstrap

Don't listen to them

Bootstrap is pretty. True Story

Scott Kellum