by Reece George

Summary:

Building multi-device experiences is not as hard as it sounds. By following this guide, we will build an example product landing page that works well across all different device types.

Getting Started

Figure 1: Multi-device website landing page example.

birabahn

Building for multiple devices with differing capabilities, vastly different screen sizes and interaction methods may seem daunting, if not impossible to get started.

It is not as hard as you think to build fully responsive sites. To show you, this guide takes you the steps that you can use to get started. The process is broken into two simple steps:

  1. Defining the information architecture (commonly known as IA) and structure of the page
  2. Adding design elements to make it responsive and look good across all devices.

Section One: Create Your Content and Structure

Content is the most important aspect of any site. So let’s design for the content and not let the design dictate the content. In this section, we identify the content we need first, create a page structure based on this content, and then present the page in a simple linear layout that works well on narrow and wide viewports.

1.1 Create the page structure

We have identified we need:

  1. An area that describes at a high-level our product “Mobile web development” course
  2. A form to collect information from users who are interested in our product.
  3. An in depth description and video.
  4. Images of the product in action.
  5. A data table with information to back the claims up.
Action Points
  1. Identify the content you need first.
  2. Sketch out Information Architecture (IA) for narrow and wide viewports.
  3. Create a skeleton view of the page with content but without styling.

Figure 2 and Figure 3 shows the information architecture and layout for both the narrow and wide viewports.

Figure 2: Widescreen Information Architecture (IA)

birabahn

Figure 3: Narrow Information Architecture (IA)

birabahn

This can be converted easily in to the rough sections of a skeleton page that we will use for the rest of this project.


<!doctype html>
    <html>
      <head>
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Mobile Web development - structure</title>
      </head>
      <body>
        <div id="headline">
          <header>
            <h1></h1>
            <p></p>
          </header>
          <div id="blurb">
            <p></p>
            <ul>
              <li>
            </ul>
          </div>
          <form method="post" id="register">
          </form>
        </div>
        <div id="section1">
          <h2></h2>
          <p></p>
          <ul>
            <li>
          </ul>
          <video></video>
        </div>
        <div id="section2">
          <h2></h2>
          <p></p>
          <div id="images">
            <img>
          </div>
        </div>
        <div id="section3">
          <h2></h2>
          <p></p>
        </div>
        <div id="footer">
          <p></p>
        </div>
      </body>
    </html>
      

1.2 Add content to the page

The basic structure of the site is complete. We know the sections we need, the content to display in those sections, and where to position it in the overall information architecture. We can now start to build out the site.

Note: Styling will come later

Create the headline and form

The headline and request notification form are the critical components of the page. These must be presented to the user immediately.

In the headline, add simple text to describe the course:


    <div id="headline">
      <header>
        <h1>Mobile Web Development</h1>
        <p>Building Mobile Web Experiences</p>
      </header>
      <div id="blurb">
        <p>So you've heard mobile is kind of a big deal, and you're not
        sure how to transform your traditional desktop-focused web apps
        into fast, effective multi-device experiences.</p>
        <p>This course is designed to teach web developers what
        they need to know to create great cross-device web
        experiences.</p>
        <p>This course will focus on building mobile-first web apps,
        which will work across multiple platforms including:</p>
        <ul>
          <li>Android,
          <li>iOS,
          <li>and others.
        </ul>
      </div>
      <form method="post" id="register">
      </form>
    </div>
      

We need to also fill out the form. It will be a simple form that collects the users’ names, their phone number, and a good time to call them back.

All forms should have labels and placeholders to make it easy for users to focus elements, understand what is supposed to go in them, and to also help accessibility tools understand the structure of the form. The name attribute not only sends the form value to the server, it is also used to give important hints to the browser about how to automatically fill in the form for the user.

We will add semantic types to make it quick and simple for users to be able to enter content on a mobile device. For example, when entering a telephone number, the user should just see a dial pad.


    <form method="post" id="register">
       <h2>Register for the launch</h2>
       <label for="name">Name</label>
       <input type="text" name="name" id="name"
          placeholder="Thomas A Anderson" required>
       <label for="email">Email address</label>
       <input type="email" name="email" id="email"
          placeholder="neo@example.com" required>
       <label for="tel">Telephone</label>
       <input type="tel" name="tel" id="tel"
          placeholder="(55) 5555 5555" required>
       <input type="submit" value="Sign up">
    </form>
      

1.3 Create the Video and Information section

The Video and Information section of content will contain a little more depth. It will have a bulleted list of features of our products and will also contain a video placeholder that shows our product working for the user.


      <div id="section1">
      <div class="container">
        <h2>What will I learn?</h2>
        <p>After completing this class, you'll have built a web application with a first-class mobile experience.</p>
        <p>You'll understand what it takes to:</p>
        <ul>
          <li>build great web experiences on mobile devices</li>
          <li>use the tools you need to test performance</li>
          <li>apply your knowledge to your own projects in the future</li>
        </ul>
        <video controls poster="udacity.png">
          <source src="udacity.mp4" type="video/mp4"></source>
          <source src="udacity.webm" type="video/webm"></source>
          <p>Sorry your browser doesn't support video.
             <a href="udacity.mov">Download the video</a>.
          </p>
        </video>
        <br>
      </div>
    </div>
      

Videos are often used to describe content in a more interactive manner and are frequently used to show a demonstration of a product or a concept.

By following the best practices, you can easily integrate video in to your site:


    <video controls poster="udacity.png">
      <source src="udacity.webm" type="video/webm"></source>
      <source src="udacity.mov" type="video/mov"></source>
      <p>Sorry your browser doesn't support video.
         <a href="udacity.mov">Download the video</a>.
      </p>
    </video>
      

1.4 Create the Images Section

Sites without images can be a little boring. There are two types of images:

The Images section in our page is a collection of content images.

Content images are critical to conveying the meaning of the page. Think of them like the images used in newspaper articles. The images we are using are pictures of the tutors on the project: Chris Wilson, Peter Lubbers and Sean Bennet.


    <div id="section2">
      <h2>Instructors</h2>
      <p>The worlds leading mobile autorities</p>
    
      <div id="images">
        <img src="chriswilson.png" alt="Chris Wilson: Course Instructor">
        <img src="peterlubbers.png" alt="Peter Lubbers: Course Instructor">
        <img src="seanbennett.png" alt="Sean Bennet: Course Developer">
      </div>
    
      <br>
    </div>
      

The images are set to scale to 100% of the width of the screen. This works well on devices with a narrow vieport, but less well on those with a wideviewport (like desktop). We will manage this in the responsive design section.

Many people don’t have the ability to view images and often use an assistive technology such as a screen reader that will parse the data on the page and relay that to the user verbally. You should ensure that all your content images have a descriptive alt tag that the screen reader can speak out to the user.

When added alt tags make sure that you keep the alt text as concise as possible to fully describe the image. For example in our demo we simply format the attribute to be “Name: Role”, this presents enough information to the user to understand that this section is about the authors and what their job is.

1.5 Add the Tabulated Data Section

The final section is a simple table that is used to show specific product stats about the product.

Tables should only be used for tabular data, i.e, matrices of information.


    <div id="section3">
      <h2>Mobile. Why should I care?</h2>
      <p>It is huge.  Everywhere.</p>
      <table>
        <caption>
          <p>Data from <a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-ww-monthly-201303-201403">StatsCounter</a></p>
        </caption>
        <thead>
           <tr>
             <th>Country</th>
             <th>Desktop share</th>
             <th>Tablet share</th>
             <th>Mobile share</th>
           </tr>
        </thead>
        <colgroup>
           <col span="1">
           <col span="1">
           <col span="1">
           <col span="1">
        </colgroup>
        <tbody>
         <tr>
            <td data-th="Country"><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-IN-monthly-201303-201403">India</a></td>
            <td data-th="Desktop share">32%</td>
            <td data-th="Tablet share">1%</td>
            <td data-th="Mobile share">67%</td>
          </tr>
          <tr>
            <td data-th="Country"><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-GB-monthly-201303-201403">GB</a></td>
            <td data-th="Desktop share">69%</td>
            <td data-th="Tablet share">13%</td>
            <td data-th="Mobile share">18%</td>
          </tr>
          <tr>
            <td data-th="Country"><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-US-monthly-201303-201403">US</a></td>
            <td data-th="Desktop share">69%</td>
            <td data-th="Tablet share">9%</td>
            <td data-th="Mobile share">22%</td>
          </tr>
          <tr>
            <td data-th="Country"><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-CN-monthly-201303-201403">China</a></td>
            <td data-th="Desktop share">86%</td>
            <td data-th="Tablet share">4%</td>
            <td data-th="Mobile share">10%</td>
          </tr>
        </tbody>
      </table>
      <br>
    </div>
      

1.6 Add a Footer

Most sites need a footer to display content such as Terms and Conditions, disclaimers, and other content that isn’t meant to be in the main navigation or in the main content area of the page.

In our site, we will just link to Terms and Conditions, a Contact page, and our social media profiles.

  
    <div id="footer">
      <div class="container">
        <p>We always need a footer.</p>
      </div>
    </div>
    

Summary of Section One

We have created the outline of the site and we have identified all the main structural elements. We have also made sure that we have all the relevant content ready and in-place to satisfy our business needs.

You will notice that the page looks terrible right now (Figure 4); this is intentional. Content is the most important aspect of any site and we needed to make sure we had a good solid information architecture and density. This section has given us an excellent base to build upon. We will style our content in the next section.

Figure 4: Website Content (Unstyled)

birabahn

See Live Site

Section Two: Make It Responsive

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. Web developers 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 section, we crafted the Information Architecture (IA) of the page and created a basic structure. In this section, we will take our basic structure with content and turn it in to a beautiful page (Figure 5) that is responsive across a large number of screen sizes.

Figure 5: Styled Content

birabahn

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 contents fits the screen-size.

Action Points
  1. Always use a viewport.
  2. Always start with a narrow viewport first and scale out.
  3. Base your breakpoints off when you need to adapt the content.
  4. Create a high-level vision of your layout across major breakpoints.

2.1 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:

  
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    

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

2.2 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 through out the design.

Colors
#39b1a4
#ffffff
#f5f5f5
#e9e9e9
#dc4d38
Add stylistic images

In the previous section, 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.

birabahn

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

Note: 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 need to:

2.4 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>
    
  
    <div id="section1">
      <div class="container">
        <h2>What will I learn?</h2>
    
  
.container {
      margin: auto;
      max-width: 800px;
    }
    

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

  
#headline {
      padding: 20px 5%;
    }
    

2.6 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:

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

 
    #headline #blurb {
      float: left;
      font-weight: 200;
      width: 50%;
      font-size: 18px;
      box-sizing: border-box;
      padding-right: 10px;
    }

    #headline #register {
      float:right;
      padding: 20px;
      width: 50%;
      box-sizing: border-box;
      font-weight: 300;
    }
      

    #headline {
      padding: 20px 5%;
    }
      

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

  
    #section1 ul {
      box-sizing: border-box;
      float: left;
      width: 50%;
      padding-right: 1em;
    }
    
    #section1 video {
      width: 50%;
      float: right;
    }
    

2.9 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 the 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.

birabahn

  
#section2 div img {
       width: 30%;
       margin: 1%;
       box-sizing: border-box;
       border-radius: 50% 50%;
       box-shadow: black 0px 0px 5px;
     }
    

2.10 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="photo@2x.png 2x">
    

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

  
    @media screen and (max-width: 600px) {
      table thead {
        display: none;
      }

      table td {
        display: block;
        position: relative;
        padding-left: 50%;
        padding-top: 13px;
        padding-bottom: 13px;
        text-align: left;
        background: #e9e9e9;
      }

      table td:before {
        content: attr(data-th) " :";
        display: inline-block;
        color: #000000;
        background: #e9e9e9;
        border-right: 2px solid transparent;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 33%;
        max-height: 100%;

        font-size: 16px;
        font-weight: 300;
        padding-left: 13px;
        padding-top: 13px;
      }
    }
    

Wrapping up Section One and Two

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.
See Live Site
References

Article derived from Google Developers website. The original article is licensed under CC 3.0. It has been reworked for clarity, the original article was viewed 29 Jun. 2014 and can be found here: https://developers.google.com/.