HTML and CSS Reference
In-Depth Information
OPTIMIZE ONE SITE FOR DIFFERENT BROWSERS/DEVICES
The third method for optimizing web content across devices generally involves
using responsive/adaptive design techniques to create a single set of content that
will automatically change depending on features of the browser accessing it, such
as screen width and height, resolution, and more.
Usually these techniques involve:
Feature detection
to see if a feature will work in a browser and serving
fallback content if it doesn't (e.g., using Modernizr).
Using flexible layout techniques
, such as CSS multi-col and percentages
for container widths, so that layouts will breathe and still look good on
smaller screens and browser windows.
Serving smaller images
, videos, and other media to smaller screen devices
that don't need the bigger versions and could really benefit from being
saved some bandwidth.
Using smart layout optimization
technologies, such as CSS media queries
and viewport, to change how content is displayed depending on screen
width, resolution, orientation, and other features of the browsing device.
Support for the nu-school features discussed in this chapter is summarized
in
Ta b l e 8 . 1
.
