This presentation was made when we upgraded to Bootstrap 3 on the Edifice project. It was designed to build support amongst team members for the new, simpler syntax and provide some training in browser dev tools for newer members of the team.

1. Bootstrap 3
designing with

2. Significant Differences
over 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

3. Significant Differences
over bootstrap 2
v2 v3
34 lines 18 lines

4. Significant Differences
over bootstrap 2
• Responsive, Mobile-first architecture

5. 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

6. 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.

7. Exercise!
What is your favourite website?
How does that website use grids to structure
content?

8. 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.

9. Exercise!
What are some proposed responses to the “flexible
image” problem?

10. 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.
—>

11. 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.

12. 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

13. Exercise!

14. Exercise!
make this site responsive using the techniques you
have just learned.
—>

15. Responsive Tools
Modernizr / http://modernizr.com
Helps 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

16. Responsive Tools
rwd.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))