rbc lhc bootstrap 3 + responsive

Bootstrap 3designing with

Significant Differencesover bootstrap 2

• Smaller file size

• Refined components (some dropped)

• More HTML5 tags (not so many <div>s)

• Font-based Glyphicons (vector)

• No support for IE6, IE7 or other older browsers

Significant Differencesover bootstrap 2

v2 v3

34 lines 18 lines

Significant Differencesover bootstrap 2

• Responsive, Mobile-first architecture

Responsive Design?

“A site designed with RWD adapts the layout to the viewing environment by using

• fluid, proportion-based grids

• flexible images

• CSS3 media queries”

http://alistapart.com/article/responsive-web-design/ http://alpha.responsivedesign.is/strategy/page-layout/mobile-first

what is

Responsive Design?

1) Grids

what is

Grids organise & structure content.

http://sixrevisions.com/web_design/a-brief-look-at-grid-based-layouts-in-web-design/

Grids make websites easy to scan.Grids reduce cognitive load on users.

Exercise!

What is your favourite website?

How does that website use grids to structure content?

Responsive Design?

2) Images

what is

http://alistapart.com/article/fluid-images/

img { max-width: 100%; height: auto; display: block;}

Flexible images are still a sticky problem for responsive design.

Exercise!

What are some proposed responses to the “flexible image” problem?

Responsive Design?

3) Media Queries

what is

http://alistapart.com/article/responsive-web-design/ http://stuffandnonsense.co.uk/

Media Queries allow you to move, show & hide content based on the viewport size.

—>

Exercise!

Use the ‘Inspect Element’ tool to find out how the Edifice navbar uses CSS media queries to alter its appearance at different viewport sizes.

Responsive Design?

mobile first means adding elements (as the viewport gets larger) is easier than removing them (when the viewport gets smaller).

—>

http://mobilewebbestpractices.com/strategy/dont-cram-10-gallons-of-content-into-a-1-gallon-container/ http://alpha.responsivedesign.is/strategy/page-layout/mobile-first

what is

Exercise!

Exercise!

make this site responsive using the techniques you have just learned.

—>

Responsive Tools

Modernizr / http://modernizr.comHelps older browsers keep up

Normalize / http://necolas.github.io/normalize.css/Stops you having to figure out what vendor styles you need to override

Bootstrap3 / http://getbootstrap.com

Responsive Toolsrwd.is / rwd.is News, case studies, resources

This Is Responsive / http://bradfrost.github.io/this-is-responsive/ Essential RWD resources, patterns & news

Luke W / http://www.lukew.com/ff/Leading thinker & statitician on RWD use & benefits

A List Apart / http://alistapart.com Where it all started. (see “A Dao of Web Design” by John Alsopp (2000), and “Responsive Web Design” by Ethan Marcotte (2010))