Upload
benjamin-read
View
176
Download
2
Embed Size (px)
Citation preview
Bootstrap 3designing with
Significant Differencesover 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
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
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.
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.
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.
—>
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
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
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))