The web is accessible on a huge range of devices from small-screen phones through to huge-screen televisions. Each device presents its own unique benefits and also constraints. As a web developer, you are expected to support all ranges of devices.
We are building a site that works across multiple screen sizes and device
types. In the previous
article, we crafted the
Information Architecture of the page and created a basic structure.
In this guide, we will take our basic structure with content and turn it into
a beautiful page that is responsive across a large number of screen sizes.
Following the principles of Mobile First web development,
we start with a narrow viewport — similar to a mobile phone —
and build for that experience first.
Then we scale up to larger device classes.
We can do this by making our viewport wider and
making a judgment call on whether the design and layout look right.
Earlier we created a couple of different high-level designs for how our content
should be displayed. Now we need make our page adapt to those different layouts.
We do this by making a decision on where to place our breakpoints — a point
where the layout and styles change — based on how the content fits the
Always use a viewport.
Always start with a narrow viewport first and scale out.
Base your breakpoints off when you need to adapt the content.
Create a high-level vision of your layout across major breakpoints.
Add a viewport
Even for a basic page, you must always include a viewport meta tag.
The viewport is the most critical component you need for building multi-device experiences.
Without it, your site will not work well on a mobile device.
The viewport indicates to the browser that the page needs to be scaled to fit
the screen. There are many different configurations that you can specify for
your viewport to control the display of the page. As a default, we recommend:
Our product and company already has a very specific branding and font guide-lines supplied
in a style guide.
A style guide is a useful way to get a high-level understanding of the visual representation
of the page and it helps you ensure that you are consistent throughout the design.
Add stylistic images
In the previous guide, we added images called “content images”. These were
images that were important to the narrative of our product. Stylistic images
are images that are not needed as part of the core content but add visual flare
or help guide the user’s attention to a specific piece of content.
A good example of this is a headline image for the ‘above the fold’ content. It
is often used to entice the user to read more about the product.
They can be very simple to include. In our case, it will be the background to the
header and we will apply it via some simple CSS.
We have chosen a simple background image that is blurred so it doesn’t take away
from the content and we have set it to cover the entire element; that way it
always stretches whilst maintaining the correct aspect ratio.
Set your first breakpoint
The design starts to look bad at about 600px wide. In our case, the length of
the line is going above 10 words (the optimal reading length) and that is
where we want to change it.
600px appears to be a good place to create our first breakpoint as it will give us scope
to reposition elements to make them fit the screen better. We can do this
using a technology called Media Queries.
There is more space on a larger screen so there is more flexibility with how
content can be displayed.
You don't have to move all the elements at once, you can make smaller adjustments if needed.
In the context of our product page, it looks like we will
Constrain the maximum width of the design.
Alter the padding of elements and reduce the text size.
Move the form to float in-line with the heading content.
Make the video float around the content.
Reduce the size of the images and have them appear in a nicer grid.
We have chosen to have only two major layouts: a narrow viewport and a wide
viewport, which greatly simplifies our build process.
We have also decided to create full-bleed sections on the narrow viewport that
stay full-bleed on the wide viewport. This means we should constrain the
maximum width of the screen so that the text and paragraphs don’t extend into one
long, single line on ultra-wide screens. We have chosen this point to be
To achieve this, we need to constrain the width and center the elements. We
need to create a container around each major section and apply a margin:
auto. This will allow the screen to grow but the content remain centered
and at a maximum size of 800px.
The container will be a simple div in the following form:
<divid="section1"><divclass="container"><h2>What will I learn?</h2>
On the narrow viewport, we don’t have a lot of space to display content so
the size and weight of the typography is often drastically reduced to fit the
With a larger viewport, we need to consider that the user is more likely to be
on a larger screen but further away. To increase the readability of the
content, we can increase the size and weight of the typography and we can also
alter the padding to make distinct areas stand out more.
In our product page, we will increase the padding of the section elements by
setting it to remain at 5% of the width. We will also increase the size of
the headers for each of the sections.
The video in the narrow viewport interface is designed to be the full width of
the screen and positioned after the list of key features. On a wide viewport,
the video will scale up to be too large and look incorrect when placed next
to our list of features.
The video element needs to be moved out of the vertical flow of the narrow
viewport and should be displayed side-by-side with the bulleted list of content.
The images in the narrow viewport (mobile devices mostly) interface are set to
be the full width of the screen and stacked vertically. This doesn’t scale
well on a wide viewport.
To make the images look correct on a wide viewport, they are scaled to 30%
of the container width and laid out horizontally (rather than vertically in
the narrow view). We will also add some border radius and box-shadow to make
the images look more appealing.
When using images,
take the size of the viewport and the density of the display into consideration.
The web was built for 96dpi screens. With the introduction of mobile devices,
we have seen a huge increase in the pixel density of screens not to mention
Retina class displays on laptops. As such, images that are encoded to 96dpi
often look terrible on a hi-dpi device.
We have a solution that is not widely adopted yet.
For browsers that support it, you can display a high density image on a high density display.
Tables are very hard to get right on devices that have a narrow viewport and need
We recommend on a narrow viewport that you make your table into two rows,
transposing the heading and cells in a row to make the columnar.
In our site,
we had to create an extra breakpoint just for the table content.
When you build for a mobile device first, it is harder to undo applied styles,
so we must section off the narrow viewport table CSS from the wide viewport css.
This gives us a clear and consistent break.