Bootstrap 3 + responsive

2,129 views
1,932 views

Published on

Doing a talk on new features of Bootstrap3, and what constitutes Responsive Web Design for a group of database developers, software engineers and coders from various parts of London.

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,129
On SlideShare
0
From Embeds
0
Number of Embeds
42
Actions
Shares
0
Downloads
98
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Bootstrap 3 + responsive

  1. 1. designing with Bootstrap 3
  2. 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. 3. Significant Differences over bootstrap 2 v2 v3 34 lines 18 lines
  4. 4. Significant Differences over bootstrap 2 • Responsive, Mobile-first architecture
  5. 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. 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. 7. Exercise! What is your favourite website? How does that website use grids to structure content?
  8. 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. 9. Exercise! What are some proposed responses to the “flexible image” problem?
  10. 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. 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. 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. 13. Exercise!
  14. 14. Exercise! make this site responsive using the techniques you have just learned. —>
  15. 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. 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))

×