The document discusses the differences between Bootstrap 3 and Bootstrap 2, including a smaller file size, refined components, more use of HTML5 tags instead of divs, font-based vector icons, and no support for older browsers. It also discusses responsive, mobile-first design which adapts layouts using fluid grids, flexible images, and CSS3 media queries. Responsive design focuses on mobile-first approaches and adding elements as viewports get larger rather than removing them.

1. designing with
Bootstrap 3

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. what is
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

6. what is
Responsive Design?
1) Grids
Grids organise & structure content.
Grids make websites easy to scan.
Grids reduce cognitive load on users.
http://sixrevisions.com/web_design/a-brief-look-at-grid-based-layouts-in-web-design/

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

8. what is
Responsive Design?
2) Images
img {
max-width: 100%;
height: auto;
display: block;
}
Flexible images are still a sticky problem for
responsive design.
http://alistapart.com/article/fluid-images/

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

10. what is
Responsive Design?
3) Media Queries
—>
Media Queries allow you to move, show &
hide content based on the viewport size.
http://alistapart.com/article/responsive-web-design/
http://stuffandnonsense.co.uk/

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. what is
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

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))