Chapter 8
Integrating CSS3 Animation
with Responsive Web Design
and JavaScript
Now it’s time to bring all the elements you’ve looked at so far together on your web pages. To do this you will
integrate CSS3 Transforms, Transitions, and Animations with current site development principles, including
Responsive Web Design (RWD).
At a basic level, a responsive site will consist of a fluid design, with most elements measured in percentages,
rem, em, vh, or vw units, rather than pixels, combined with a series of CSS breakpoints defined in CSS media
queries. The position of these breakpoints is usually defined by the values at which the page design “breaks”
when the width of the browser (more correctly referred to as a viewport) changes. For convenience, these values
are usually measured in pixels, although there are good arguments for measuring in rems or ems to break away as
much as possible from the concept of “screen sizes.”
Designing a site with responsive web design principles allows visitors to have a smooth, continuous, and
uninterrupted experience with every device they use to access it: desktop browser, tablet, mobile phone, and
devices yet to come.
It’s a good practice to designate breakpoints at the widths where your design fails, rather than use the set
display dimensions of the latest iPhone or iPad model. Mobile devices change rapidly, and there is much more
variety in smartphone and tablet dimensions, particularly in the Android market, than most people realize.
It’s far better to have the site respond to dimensions that are relevant to your design, rather than the arbitrary
resolutions of this year’s technology.
At each breakpoint, you specify changes in layout: elements are resized or repositioned, and appear or
disappear. A mobile first philosophy reverses the typical development process: from its inception you design
a site for small screens (with a horizontal resolution of 320 pixels or less) and adapt the page as the viewport
widens, allowing the site more room to “breathe.” Mobile first has the advantage of enabling you to concentrate
development on features that the site absolutely needs, given the severely restricted space and bandwidth of
most mobile devices.