Creating multi-device experiences is not as hard as it might seem. In this guide, we will build a product landing page for the CS256 Mobile Web Development course that works well across different device types.

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

It is not as hard to build fully responsive sites as you think, and to show you, this guide takes you through the steps that you can use to get started. We have broken it 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.

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 guide, 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.

Create the page structure

We have identified we need:

  1. An area that describes at a high-level our product “CS256: 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

TL;DR

  • Identify the content you need first.
  • Sketch out Information Architecture (IA) for narrow and wide viewports.
  • Create a skeleton view of the page with content but without styling.

We have also come up with a rough information architecture and layout for both the narrow and wide viewports.

Your First Multi-Device Site

Caution: This article has not been updated in a while and may not reflect reality. Instead, check out the free Responsive Web Design course on Udacity.

Paul Kinlan

ByPaul KinlanPaul is a Developer Advocate

many devices showing the final project

Creating multi-device experiences is not as hard as it might seem. In this guide, we will build a product landing page for the CS256 Mobile Web Development course that works well across different device types.

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

It is not as hard to build fully responsive sites as you think, and to show you, this guide takes you through the steps that you can use to get started. We have broken it 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.

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 guide, 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.

Create the page structure

We have identified we need:

  1. An area that describes at a high-level our product “CS256: 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

TL;DR

  • Identify the content you need first.
  • Sketch out Information Architecture (IA) for narrow and wide viewports.
  • Create a skeleton view of the page with content but without styling.

We have also come up with a rough information architecture and layout for both the narrow and wide viewports.

Narrow Viewport IA
Narrow Viewport IA
Wide Viewport IA
Wide Viewport IA

This can be converted easily into 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">
     <title>CS256: 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>
    <footer>
      <p></p>
    </footer>
<script>
  (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
  function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
  e=o.createElement(i);r=o.getElementsByTagName(i)[0];
  e.src='//www.google-analytics.com/analytics.js';
  r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
  ga('create','UA-52746336-1');ga('send','pageview');
  var isCompleted = {};
  function sampleCompleted(sampleName){
    if (ga && !isCompleted.hasOwnProperty(sampleName)) {
      ga('send', 'event', 'WebCentralSample', sampleName, 'completed');
      isCompleted[sampleName] = true;
    }
  }
</script>
  </body>
</html>

Try it

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: We’ll add the styling later

Create the headline and form

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

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

<div id="headline">
  <div class="container">
    <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>
        <li>iOS,</li>
        <li>and others.</li>
      </ul>
    </div>
    <form method="post" id="register">
    </form>
  </div>
</div>

Try it

We need to also fill out the form. It will be a simple form that collects the users’ name, email address, and phone number.

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="(555) 555 5555" required>
   <input type="submit" value="Sign up">
</form>

Try it

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">
  <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="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.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>
  <br>
</div>

Try it

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 into your site:

  • Add a controls attribute to make it easy for people to play the video.
  • Add a poster image to give people a preview of the content.
  • Add multiple <source> elements based on supported video formats.
  • Add fall-back text to let people download the video if they can’t play it in the window.
<video controls poster="udacity.png">
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.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>

Try it

Create the Images Section

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

  • Content images — images that are in-line in the document and are used to convey extra information about the content.
  • Stylistic images — images that are used to make the site look better; often these are background images, patterns and gradients. We will cover this in the next section.

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>Who will teach me?</h2>
  <p>The world's leading mobile web developers.</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>

Try it

The images are set to scale to 100% of the width of the screen. This works well on devices with a narrow viewport, but less well on those with a wide viewport (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 adding 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.

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><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-IN-monthly-201303-201403">India</a></td>
        <td>32%</td>
        <td>1%</td>
        <td>67%</td>
      </tr>
      <tr>
        <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-GB-monthly-201303-201403">GB</a></td>
        <td>69%</td>
        <td>13%</td>
        <td>18%</td>
      </tr>
      <tr>
        <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-US-monthly-201303-201403">US</a></td>
        <td>69%</td>
        <td>9%</td>
        <td>22%</td>
      </tr>
      <tr>
        <td><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-CN-monthly-201303-201403">China</a></td>
        <td>86%</td>
        <td>4%</td>
        <td>10%</td>
      </tr>
    </tbody>
  </table>
  <br>
</div>

Try it

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’ll just create a simple placeholder footer.

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

Try it

Summary

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.

Content
Content and structure
Designed site
Final site

You will notice that the page looks terrible right now; 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 guide has given us an excellent base to build upon. We will style our content in the next guide.

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. 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. We’ve crafted the Information Architecture of the page and created a basic structure. In this section, 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 to 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.

LEAVE A REPLY

Please enter your comment!
Please enter your name here