Bootstrap 3 + responsive

  • Published on
    25-May-2015

  • View
    1.459

  • Download
    4

Embed Size (px)

DESCRIPTION

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.

Transcript

  • 1. designing withBootstrap 3

2. Signicant Differences over bootstrap 2Smaller le sizeRened components (some dropped)More HTML5 tags (not so many

s)Font-based Glyphicons (vector)No support for IE6, IE7 or other older browsers 3. Signicant Differences over bootstrap 2v2v334 lines18 lines 4. Signicant Differences over bootstrap 2Responsive, Mobile-rst architecture 5. what isResponsive Design? A site designed with RWD adapts the layout to the viewing environment by using uid, proportion-based gridsexible imagesCSS3 media querieshttp://alistapart.com/article/responsive-web-design/ http://alpha.responsivedesign.is/strategy/page-layout/mobile-rst 6. what isResponsive Design? 1) GridsGrids 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 isResponsive 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/uid-images/ 9. Exercise! What are some proposed responses to the exible image problem? 10. what isResponsive 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 nd out how the Edice navbar uses CSS media queries to alter its appearance at different viewport sizes. 12. what isResponsive Design? mobile rst 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-rst 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 gure 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 & benets 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))

Recommended

View more >