Responsive design is a strategy of displaying HTML content in a way that is
optimal for user experience regardless of the end user’s viewing environment.
Responsive Design is achieved with HTML and CSS practices that allow a
page design to adapt to the device or viewing environment of the reader, be it a
smartphone, tablet, or desktop computer.
Responsive design has become the standard for design on the open web because
it allows designers to target specific viewing environments based on device
constraints, including width, height, device width, device height, resolution/pixel
density, aspect ratio, and screen colour.
Prior to the arrival of smartphones, most web design was done with pixel
measurements, and media queries were primarily used for print page designs
(printer-friendly pages). After the first iPhone was released, mobile browsers
began to alter the level of zoom on web pages so that websites designed
for desktop browsers didn’t look completely disastrous on smartphones. This
made pixel measurements somewhat arbitrary because there was no longer a
relationship between the pixels in CSS files and pixels on a screen.
As a result, it became advantageous to use relative measurements within CSS
files to create designs that were flexible and could adapt to a device’s viewing
environment. The main ways of measuring page designs for the web became
liquid (fluid, percentage-based) layouts and elastic (em-based) layouts.
Both elastic and fluid layouts will conform to the width of a device’s viewing
environment, to some extent. However, as page widths increase and device
aspect ratios change, some presentational features can look squished or break,
even with the use of relative measurements. The best fix in these instances are
On the web, media queries read the dimensions of a phone, tablet or desktop
browser’s viewport (the area of the screen that displays a website) and will
either deliver a CSS file specific to that screen size, or a portion of a single CSS
file specific to the device.
This isn’t to say that responsive design on the web is perfect, many designers
still use media queries to deliver CSS files tailored to older versions of
Internet Explorer. But for the most part responsive design streamlines design
by delivering adaptive layouts that will resize relative to a user’s viewing
- All Major browsers
- Clear view on small screens
- Plenty of designs
QA about Responsive Design
Elastic layouts allow for all aspects of the page measured in ems to resize
relative to the text size.
In digital type the em dash is a square unit that is always the same size as the
font being used. If the font size is 12px, the em unit will be 12px wide and 12px
tall. The advantage of ems is when a reader alter their font size while reading,
all page components that are measured in ems will scale in conjunction with the
Before using media queries, make sure that you have enough time to test them
fully before adding queries to your ebooks. It’s advisable to test media queries in
sample files before introducing them to your ebooks.
If devices didn’t have different aspect ratios, orientations and resolutions, using
relative measurements in CSS would likely make ebooks and HTML documents
responsive. Media queries are a way to alter layouts to device constraints
that would otherwise break our page designs, even when using relative
An example of a broken layout would be poetry that isn’t formatted correctly
for small screens, or a small image that looks fine in a portrait setting but gets
lost in a landscape mode.
On the web, there are a few different approaches for where to introduce media
queries. These locations are generally called “breakpoints”, and for good reason:
media queries are inserted into CSS at where the CSS breaks and stops looking
good for a given screen size or viewing environment.
Some web designers use media queries to define general screen sizes like
smartphones, tablets and desktop devices, while others use resolution or
orientation to differentiate their page designs.
A good way to approach inserting media queries into ebooks is to only include
them at points where the design stops looking good, rather than inserting new
CSS for each change in screen size.
Rather than recreate your default CSS within your device-specific CSS,
only include element styles that differ from the default CSS. This keeps your
secondary CSS files clean and easy to alter.