Responsive Web Design with Bootstrap

RESPONSIVEWEB DESIGN

WITH BOOTSTRAPJason Stehle @jasonstehle

WHAT IS RESPONSIVE WEB DESIGN?Responsive Web Design is a way to make a website or web

application work well on devices of different shapes and sizes.

WHAT IS IT MADE FROM?CSS3 Media Queries

div.side-by-side { float: left; width: 48.93617021276595%;}

@media (max-width: 767px) { div.side-by-side { float: none; width: 100%; }}

BENEFITS OF RESPONSIVE WEB DESIGNOne codebaseBetter experience across screen sizesNo more m.*.comBetter future proofing

DRAWBACKS OF RESPONSIVE WEB DESIGNMore complexityMore testingMobile performance considerations (images, excesscontent, etc.)Legacy browser compatibility (Can I Use)

WHO USES RESPONSIVE WEB DESIGN?Microsoft, Boston Globe, etc.

Follow @rwd

WHAT IS BOOTSTRAP?Grid system, useful styles, component library.

*I have been informed by a hipster that it should not be referred to as "Twitter Bootstrap"

WHY DO I USE BOOTSTRAP?I am not a particularly talented front-end developerI am not a particularly talented visual designerGood for building a passable UI quicklyI have deadlinesI can use it how I wantIt has the "critical mass"It has an ecosystem (builtwithbootstrap, bootswatch,wrapbootstrap, jetstrap, divshot)It's (mostly) well documented

DRAWBACKS OF BOOTSTRAPEverything's going to look like default Bootstrap.

So buy a theme, they're like 20 bucks.

AND NOW, SOME CODE