Your First Multi-device Site

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 screen-size.

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:

The viewport lives in the head of the document and only needs to be declared once.

Apply simple styling

Our product and company already has a very specific branding and font guide-lines supplied in a style guide.

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.

Colors

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.

#headline {
  padding: 0.8em;
  color: white;
  font-family: Roboto, sans-serif;
  background-image: url(backgroundimage.jpg);
  background-size: cover;
}

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 .

@media (min-width: 600px) {

}

There is more space on a larger screen so there is more flexibility with how content can be displayed.

In the context of our product page, it looks like we will need to:

• 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.

Constrain the maximum width of the design

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 about 800px.

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:

<div class="container">...</div>

Alter the padding and reduce text size

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 screen.

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.

Adapt elements to wide viewport

Our narrow viewport was a stacked linear display. Each major section and the content inside them was displayed in order from top to bottom.

A wide viewport gives us extra space to use to display the content in an optimal way for that screen. For our product page, this means that according to our IA we can:

• Move the form around the header information.
• Position the video to the right of the key points.
• Tile the images.
• Expand the table.

Float the Form element

The narrow viewport means that we have a lot less horizontal space available for us to comfortably position elements on the screen.

To make more effective use of the horizontal screen space, we need to break out of the the linear flow of the header and move the form and list to be next to each other.

Float the Video element

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.

Tile the Images

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.

Make images responsive to DPI

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.

<img src="photo.png" srcset="[email protected] 2x">

Tables

Tables are very hard to get right on devices that have a narrow viewport and need special consideration.

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.

Wrapping up

CONGRATULATIONS. By the time you read this, you will have created your first simple product landing page that works across a large range of devices, form-factors, and screen sizes.

If you follow these guidelines, you will be off to a good start:

1. Create a basic IA and understand your content before you code.
2. Always set a viewport.
3. Create your base experience around mobile-first approach.
4. Once you have your mobile experience, increase the width of the display until it doesn’t look right and set your breakpoint there.
5. Keep iterating.