Веб-разработка под мобильные устройства

Этот перевод не завершён. Пожалуйста, помогите перевести эту статью с английского

На этой странице даётся обзор основных методов разработки веб-сайтов, корректно работающих на мобильных устройствах. Если вы ищете информацию о проекте Firefox OS от Mozilla, смотрите страницу Firefox OS. Возможно вас также интересует подробная информация о  Firefox для Android.

Статья разбита на два раздела: разработка под мобильные устройства и кросс-браузерная совместимость.
См. также руководство от Jason Grlicky по дружелюбность-к-мобильным для веб-разработчиков.

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

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

Работа с  маленькими экранами

Адаптивный веб-дизайн – это термин, означающий набор методов, позволяющих вашему веб-сайту адаптировать разметку под среду, в которой он просматривается. Как правило, это изменяющиеся размеры и ориентация. Основные методы адаптивного веб-дизайна:

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

Meta-тег viewport указывает браузеру, каким образом отображать ваш сайт в подходящем масштабе на устройстве пользователя.

Работа с сенсорными экранами

Для использования сенсорного экрана вам понадобится работать с DOM Touch events. Вы не сможете использовать псевдо класс CSS :hover, а при проектировании интерактивных элементов (к примеру, кнопок) нужно будет учитывать тот факт, что пальцы толще, чем указатели мыши. Дополнительные материалы в статье проектирование под сенсорные экраны.

Вы можете использовать медиа-запрос -moz-touch-enabled, чтобы использовать нужные вам правила CSS на устройствах, поддерживающих обработку нажатий на экран.

Оптимизация изображений

Чтобы помочь пользователям, чьи устройства имеют медленный или дорогой доступ к сети, вы можете оптимизировать изображения, загружая изображения под соответствующие размеры и разрешение экрана устройства. Это делается в CSS указывая в медиа-запросах height, width, и pixel ratio.

Также вы можете использовать свойства CSS чтобы применить визуальные эффекты типа gradients и shadows без использования изображений.

API для мобильных устройств

Наконец, вы можете воспользоваться преимуществом новых возможностей, предлагаемых мобильными устройствами, такие как orientation и geolocation.

Кросс-браузерная верстка

Пишите кросс-браузерный код

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

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

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

Смотрите этот список Gecko-специфических свойств, и этот список WebKit-специфических свойств, и таблицу вендор-специфических свойств от Peter Beverloo.

Использование инструментов, наподобие CSS Lint может помочь обнаружить подобные проблемы в коде, а такие препроцессоры, как SASS и LESS могут помочь вам создавать кросс-браузерный код.

Позаботьтесь об анализе user agent

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

Если вы это делаете, удостоверьтесь что ваш алгоритм точный, и вы не отправляете неверный тип контента на устройство из-за того что вы не знаете какой-то специфической для браузера user agent строки. Смотрите данное руководство по использованию user agent строки чтобы определить тип устройства.

Проверяйте на многих браузерах

Проверяйте ваш веб-сайт на многих браузерах. Это означает тестирование на многих платформах — по крайней мере на iOS и Android.