RBC LHC Bootstrap 3 + responsive

  • Published on
    14-Apr-2017

  • View
    165

  • Download
    2

Embed Size (px)

Transcript

  • Bootstrap 3designing with

  • Significant Differencesover bootstrap 2

    Smaller file size

    Refined components (some dropped)

    More HTML5 tags (not so many s)

    Font-based Glyphicons (vector)

    No support for IE6, IE7 or other older browsers

  • Significant Differencesover bootstrap 2

    v2 v3

    34 lines 18 lines

  • Significant Differencesover bootstrap 2

    Responsive, Mobile-first architecture

  • 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

    http://alistapart.com/article/responsive-web-design/http://alpha.responsivedesign.is/strategy/page-layout/mobile-first

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

    http://sixrevisions.com/web_design/a-brief-look-at-grid-based-layouts-in-web-design/

  • Exercise!

    What is your favourite website?

    How does that website use grids to structure content?

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

    http://alistapart.com/article/fluid-images/

  • Exercise!

    What are some proposed responses to the flexible image problem?

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

    >

    http://alistapart.com/article/responsive-web-design/http://stuffandnonsense.co.uk/

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

  • 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

    http://mobilewebbestpractices.com/strategy/dont-cram-10-gallons-of-content-into-a-1-gallon-container/http://alpha.responsivedesign.is/strategy/page-layout/mobile-first

  • Exercise!

  • Exercise!

    make this site responsive using the techniques you have just learned.

    >

  • Responsive Tools

    Modernizr / http://modernizr.comHelps 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

    http://modernizr.comhttp://necolas.github.io/normalize.css/http://getbootstrap.com

  • Responsive Toolsrwd.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))

    http://rwd.ishttp://rwd.ishttp://bradfrost.github.io/this-is-responsive/http://www.lukew.com/ff/http://alistapart.com

Recommended

View more >