Don't forget the Chrome Dev Summit, starting Monday at 10:00am (Pacific) and streaming live on YouTube. Schedule.

Ваш первый сайт для различных устройств

Создавать сайты для различных устройств проще, чем вам кажется. В этом руководстве мы покажем, как создать целевую страницу для нашего учебного курса по CS256 Mobile Web, которая будет отображаться на разных по ширине экранах.

несколько устройств, на экранах которых показывается готовый проект

На первый взгляд создание сайтов, которые будут одинаково хорошо открываться на устройствах с разной шириной и разрешением экрана, может показаться трудновыполнимой задачей.

На самом деле она гораздо проще, чем вы думаете. Убедитесь в этом сами, изучив материалы в этом руководстве. Мы разбили весь процесс создания сайта на два этапа:

  1. Определение информационной архитектуры и структуры страницы.
  2. Добавление элементов отзывчивого веб-дизайна, чтобы с сайтом было одинаково удобно работать на любых устройствах.

Работа с контентом и структурой сайта

Контент — это самый важный компонент любого интернет-ресурса. Именно контент определяет, каким должен быть дизайн сайта. В этом руководстве мы сперва определим, какие материалы будут представлены на сайте, затем опишем структуру страницы для этого контента и создадим страницу с простой линейной разметкой, которая одинаково хорошо выглядит как на узких, так и на широких экранах.

Создание структуры страницы

Итак, нам необходимы:

  1. Область, в которой в общих чертах будет рассказываться о нашем продукте С8256: курс по разработке мобильных сайтов.
  2. Форма для сбора информации. С ее помощью мы сможем собирать данные о прользователях, заинтересовавшихся продуктом.
  3. Подробное описание и видеоролик.
  4. Изображения, показывающие продукт в работе.
  5. Таблица со статистическими данными. В нашем случае она нужна для того, чтобы показать, каково процентное соотношение пользователей различных устройств.

TL;DR

  • Определите, с какими материалами вы будете работать.
  • Продумайте информационную архитектуру сайта для областей просмотра разной ширины.
  • Создайте эскиз страницы с материалами, но пока не добавляйте на нее дизайн.

Мы уже разработали примерную информационную архитектуру сайта и разметку для устройств с разной шириной экрана.

Вариант для устройств с узким экраном Вариант для устройств с широким экраном

Оба варианта легко преобразуются в разделы страницы, с которыми мы будем работать на протяжении всего проекта.

<!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>

Добавление контента на страницу

Основа сайта готова. Мы знаем, какие разделы будут на сайте, что будет в них отображаться и как расположить их относительно друг друга. Теперь можно начать создание сайта.

Создание заголовка и формы

Заголовок и поле для подписки на уведомления — важные элементы страницы. Пользователь должен сразу их видеть.

В заголовок поместим простой текст, описывающий суть курса:

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

Также нам необходимо создать форму. В ней будут следующие поля: имя пользователя, номер телефона и время суток, в которое удобнее всего звонить.

Все формы должны содержать плейсхолдеры и описания. Таким образом, пользователь легко будет ориентироваться в форме и понимать, что необходимо вписать в то или иное поле. Корректно составленное описание формы позволит программам для людей с ограниченными возможностями (например, экранному диктору) считать информацию и воспроизвести ее пользователю. Атрибут name помогает браузеру автоматически заполнять поля.

Чтобы пользователю было удобно вводить информацию на мобильном устройстве, опишем семантические типы элемента ввода. Например, когда необходимо ввести номер телефона, клавиатура переключится в режим набора номера.

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

Создание раздела с видеоматериалами и информацией

Этот раздел имеет более сложную структуру: в нем будет располагаться список функций наших продуктов и плейсхолдер для видеоролика о работе с ними.

<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="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4"></source>
      <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.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>

Видео часто используют, чтобы рассказать о продукте или идее в более интерактивном стиле или показать его в действии.

Чтобы без труда встроить видеоролик на свой сайт, воспользуйтесь этими советами:

  • чтобы пользователю было удобно проигрывать видео, добавьте атрибут controls;
  • чтобы сразу было понятно, о чем видео, включите в него изображение для заставки;
  • добавьте несколько элементов для видео в разных форматах;
  • для случаев, когда браузер не может проигрывать видео на странице, добавьте фолбэк-текст со ссылкой на скачивание видеоролика.
<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>

Создание раздела Изображения

Сайты с изображениями выглядят интереснее, чем сайты, содержащие только текст. Существует два типа изображений:

  • Контент-изображения. Они являются частью контента на сайте и пополняют информативную функцию.
  • Стилистические изображения. Их обычно помещают на фон страницы. Они делают внешний вид сайта более приятным. Подробнее об этом читайте в следующей статье.

Раздел Изображения на нашем сайте будет содержать подборку контент-изображений.

Такие картинки крайне важны для передачи информации. Например, невозможно представить себе газеты и журналы без фотографий и рисунков. В этом курсе мы используем фотографии преподавателей Криса Уилсона, Питера Лубберса и Шона Беннета.

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

Эти изображения расположены так, чтобы заполнить экран по широкой стороне. Такую верстку удобнее всего использовать для устройств с узким экраном. На мониторах стационарных компьютеров она выглядит хуже. Подробнее о том, как сделать верстку удобной для разных экранов, мы поговорим в разделе Отзвычивый дизайн.

У слабовидящих и незрячих людей нет возможности читать информацию на экране, поэтому они используют экранный диктор, который начитывает контент. Важно, чтобы все контент-изображения на странице имели содержательный тег alt. С его помощью экранный диктор сможет прочесть описание изображения.

Убедитесь, что текст максимально емко и кратко описывает картинку. В нашем примере для атрибута используется формат Имя: должность. Таким образом, пользователь поймет, что на этой странице рассказывается про авторов курса и их профессии.

Добавление раздела с таблицей

Последний раздел содержит таблицу со статистическими данными о продукте.

Используйте таблицы только для предоставления табличных данных (например, для информационных матриц).

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

Добавление подвала страницы

Чтобы внизу страницы всегда отображались ссылки на такие разделы, как Условия использования, в большинство сайтов необходимо встраивать подвал (footer).

На нашем сайте такими разделами будут Контакты, Условия использования и Социальные сети.

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

Заключение

Мы успешно создали макет сайта и обозначили его основные элементы. Также мы убедились, что контент сайта располагается в нужных разделах.

Content

Наверное, вы уже заметили, что сейчас страница выглядит некрасиво. Мы намеренно оставили ее в таком виде. Контент — это неотъемлемая часть любого сайта. Поэтому сперва мы создаем условия для удобного отображения информации, а затем приступаем к оформлению внешнего вида сайта. Теперь у нашего сайта есть надежная структура. А о стиле мы поговорим в следующем разделе.

Сделайте дизайн сайта отзывчивым

Пользователи заходят в Интернет с различных устройств, начиная от смартфонов и заканчивая стационарными компьютерами. У каждого устройства есть свои преимущества и недостатки. Ваша задача как веб-разработчика — сделать сайт удобным для любых устройств.

Наша задача — сделать сайт, который будет открываться на любых устройствах. В [предыдущей главе]# мы разработали информационную архитектуру сайта и создали его базовую структуру. В этой главе мы продолжим работу со структурой и контентом. Мы также объясним, как улучшить внешний вид страницы и сделать его доступным для любых экранов.

Контент
Контент и структура
Designed site
Конечная версия сайта

Мы следуем принципу Mobile first и сначала разрабатываем версию для устройств с узким экраном. Затем переходим к созданию версии для более широких экранов: постепенно увеличиваем ширину окна конструирования и оцениваем, насколько удачно выглядит страница при новых параметрах.

Ранее мы создали несколько вариантов высокоуровневых проектов. В каждом из них контент располагался по-разному. Теперь необходимо адаптировать страницу к этим проектам. Для этого определим, где будут располагаться точки разрыва (определенные размеры экрана, при которых меняется стиль и верстка).

TL;DR

  • Всегда используйте метаэлемент viewport.
  • Всегда начинайте с разработки версии для узких экранов.
  • Внедряйте точки разрыва, если контент на странице начал выглядеть неаккуратно.
  • Разработайте высокоуровневый дизайн вашей разметки для различных точек разрыва.

Добавление тега viewport

Даже создавая самые простые страницы, вы всегда должны включать в код метатег viewport. Он является самым важным компонентом в отзывчивом веб-дизайне. Без него ваш сайт будет плохо выглядеть на мобильных устройствах.

Тег viewport сообщает браузеру, что масштаб страницы необходимо изменить, чтобы она полностью помещалась на экране. Вы можете задать несколько параметров для этого тега. Мы рекомендуем следующие параметры по умолчанию:

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

Помещать тег viewport нужно только один раз в раздел head.

Применение простых стилей

В нашей компании уже разработаны инструкции по работе со шрифтами и оформлением; они описаны в руководстве по стилю.

Руководство по стилю

В таком руководстве понятно и доступно объясняются правила и нюансы работы с внешним видом страницы.

Цвета
#39b1a4
#ffffff
#f5f5f5
#e9e9e9
#dc4d38

Добавление стилистических изображений

В предыдущей главе мы добавляли на страницу контент-изображения. Их основная функция — визуально дополнять контент на странице. В отличие от них, стилистические изображения — необязательная часть контента. Однако они оживляют страницу в целом, а также могут привлекать внимание пользователя к нужной ее части.

Хорошим примером использования таких изображений является картинка в верхней половине страницы. Ее назначение — побудить пользователя почитать о продукте подробнее.

Готовый сайт с дизайном

Встроить такие изображения на страницу очень просто. В нашем проекте мы поместим картинку на фон в верхней части экрана с помощью несложного кода CSS.

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

Чтобы фоновое изображение не отвлекало пользователя от информации на странице, мы выбрали фотографию не в фокусе. Она будет занимать все пространство на экране. Таким образом, при изменении ширины экрана фоновая картинка будет растягиваться.

Использование точек разрыва

На ширине 600 пикселей страница уже выглядит неаккуратно. Дело в том, что длина строки при таких настройках превышает удобные для восприятия 10 слов. Попробуем это исправить.

Чтобы элементы на странице автоматически перераспределялись, нам необходимо внедрить здесь точку разрыва. Сделать это можно с помощью технологии Media Queries.

@media (min-width: 600px) {

}

На широких экранах больше места, поэтому контент на странице можно разместить в разных комбинациях.

В нашем случае потребуется сделать следующее:

  • задать максимальную ширину страницы;
  • изменить отступ и уменьшить размер текста;
  • определить стиль заголовка как in-line и float и подвинуть форму;
  • определить стиль видеоэлемента как float;
  • уменьшить размер изображений и расположить их в более удобной сетке.

Задание максимальной ширины

Выберем два основных вида верстки: для узких и широких экранов. Это сильно упростит нам задачу.

Для обоих видов удобнее будет располагать на странице текст без полей. Следовательно, нам необходимо задать максимальную ширину экрана, чтобы в очень широкой области просмотра текст не выстраивался в одну длинную строку. Допустим, мы выбрали максимальную ширину в 800 пикселей.

Зададим ее, не забыв расположить элементы по центру. Нам необходимо создать контейнер вокруг каждого большого раздела и применить стиль margin: auto. В результате на широких экранах контент будет располагаться по центру с максимальной шириной 800 пикселей.

Контейнер будет выглядеть как простой тег div:

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

Изменение отступа и уменьшение размера текста

На узких экранах мобильных устройств места очень мало, поэтому необходимо сильно сокращать размер и вес типографики, чтобы гармонично уместить его в мобильной версии.

У устройств с большим экраном есть другая особенность: пользователь обычно находится дальше от экрана, и мелкий текст в этом случае воспринимается труднее. Чтобы это исправить, мы можем увеличить размер и вес типографики, а также изменить отступы, чтобы выделить те или иные области.

На нашей странице мы увеличим отступ до 5% от общей ширины. Также мы увеличим размер текста заголовка в каждом разделе.

#headline {
  padding: 20px 5%;
}

Адаптирование элементов для устройств с широким экраном

Итак, на узких экранах содержимое сайта отображается линейно. Разделы располагаются в вертикальном порядке.

На широком экране есть дополнительное место для оптимального размещения контента. Это значит, что, согласно информационной архитектуре, которую мы создали, мы можем:

  • перемещать форму для заполнения относительно заголовка;
  • расположить видеоролик справа от списка основных аспектов курса;
  • разместить изображения в разных областях экрана;
  • растянуть таблицу.

Плавающая форма

В узкой области просмотра недостаточно места по горизонтали, чтобы в нем можно было удобно разместить все элементы.

Чтобы эффективно использовать пространство на широком экране, необходимо разбить на части контент в заголовке и поместить форму рядом со списком.

#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 br {
  clear: both;
}
#headline {
  padding: 20px 5%;
}

Плавающий видеоролик

На узком экране видеоролики занимают всю ширину и располагаются после списка основных аспектов курса. Если использовать эти же настройки для широкого экрана, видео слишком сильно растянется и будет отображаться некорректно.

Поэтому необходимо поместить его на одном уровне со списком, а не после него.

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

#section1 video {
  width: 50%;
  float: right;
}

Размещение изображений друг за другом

Как и в случае с видео, изображения на узких дисплеях также располагаются одно под другим и их ширина соответствует ширине экрана. Если открыть страницу с такими настройками на широком экране, картинки растянутся и будут смотреться плохо.

Мы предлагаем ограничить размер изображений 30-ю процентами от общей ширины контейнера и расположить картинки горизонтально. Также мы добавим тень и небольшие отступы по краям, чтобы сделать изображения более привлекательными.

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

Адаптирование параметров изображения в соответствии с разрешением экрана

При работе с изображениями помимо размера области просмотра необходимо учитывать плотность данных.

Изначально стандарты, применяемые в Интернете, подразумевали, что контент будет просматриваться на устройствах с разрешением в 96dpi. С появлением мобильных устройств сильно возросла плотность пикселей на экранах. Особенно заметно это на дисплеях класса Retina. Изображения, плотность пикселей у которых составляет 96dpi, очень плохо смотрятся на таких экранах.

У нас появилось решение этой проблемы, которое пока не слишком распространено. Некоторые браузеры позволяют добавить два варианта изображения: обычное и высококачественное. Последние будут показываться только в том случае, если экран имеет высокое разрешение.

<img src="photo.png" srcset="photo@2x.png 2x">

Таблицы

Настроить отображение таблиц на устройствах с узким экраном непросто.

Если ваша таблица состоит из трех столбцов и более, мы рекомендуем разбить в ней информацию так, чтобы получилось два столбца.

В код сайта мы вынуждены встроить еще одну точку разрыва специально для работы с таблицей. Поскольку мы начинаем создание сайта с версии для мобильных устройств, в CSS стилях отделите секцию для узких экранов от секции для широких экранов. Таким образом, получается отдельный раздел.

@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;
  }
}

Завершение работы

ПОЗДРАВЛЯЕМ! Вы только что создали свою первую несложную страницу с описанием продукта. С этой страницей удобно работать на любых устройствах.

Следуйте рекомендациям ниже, и работа над отзывчивым дизайном сайта будет легкой и приятной:

  1. Создайте базовую информационную архитектуру и определите, какой контент будет на сайте перед тем, как начинать писать код.
  2. Всегда определяйте ширину области просмотра.
  3. Всегда начинайте разработку с версии для мобильных устройств.
  4. После этого увеличивайте ширину окна до тех пор, пока контент не начнет выглядеть неаккуратно. В этом месте необходимо будет встроить точку разрыва.
  5. Повторяйте последнее действие до тех пор, пока вы не достигнете максимально возможной ширины экрана.