over bootstrap 2
Smaller ﬁle size
Reﬁned components (some dropped)
More HTML5 tags (not so many <div>s)
Font-based Glyphicons (vector)
No support for IE6, IE7 or other older browsers
over bootstrap 2
Responsive, Mobile-ﬁrst architecture
“A site designed with RWD adapts the layout to the
viewing environment by using
ﬂuid, proportion-based grids
CSS3 media queries”
Grids organise & structure content.
Grids make websites easy to scan.
Grids reduce cognitive load on users.
What is your favourite website?
How does that website use grids to structure
Flexible images are still a sticky problem for
What are some proposed responses to the “ﬂexible
3) Media Queries
Media Queries allow you to move, show &
hide content based on the viewport size.
Use the ‘Inspect Element’ tool to ﬁnd out how the
Ediﬁce navbar uses CSS media queries to alter its
appearance at different viewport sizes.
mobile ﬁrst means adding elements (as the viewport
gets larger) is easier than removing them (when the
viewport gets smaller).
make this site responsive using the techniques you
have just learned.
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
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 & beneﬁts
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))