Bootstrap 3 + responsive

  • Published on

  • View

  • Download

Embed Size (px)


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.


  • 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 queries 6. what isResponsive Design? 1) GridsGrids organise & structure content. 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. what isResponsive Design? 2) 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 exible image problem? 10. what isResponsive Design? 3) Media Queries>Media Queries allow you to move, show & hide content based on the viewport size. 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).> 13. Exercise! 14. Exercise! make this site responsive using the techniques you have just learned.> 15. Responsive Tools Modernizr / Helps older browsers keep up Normalize / Stops you having to gure out what vendor styles you need to override Bootstrap3 / 16. Responsive Tools / News, case studies, resources This Is Responsive / Essential RWD resources, patterns & news Luke W / Leading thinker & statitician on RWD use & benets A List Apart / Where it all started. (see A Dao of Web Design by John Alsopp (2000), and Responsive Web Design by Ethan Marcotte (2010))


View more >