Оптимизация сайта под мобильные устройства: 7 главных методов

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

1. Мета-тег meta viewport

web-mobile

Одно из основных отличий мобильной версии сайта от классической заключается в ширине страниц. Сайт без мобильной версии на маленьком дисплее телефона выглядит неважно: откройте самую простую страничку, сверстанную за 5 минут в браузере мобильного, и вы увидите невероятно мелкий шрифт. Чтобы что-то прочесть, требуется увеличивать масштаб и «таскать» текст пальцем. HTML-тег meta viewport решает эту проблему, масштабируя страницы по ширине дисплея устройства, на котором открыт сайт.

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

Добавление внутрь блока <head>:

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

Использование внутри каскадных таблиц стилей:

 @-viewport {  width: device-width; 
 }

Важно: meta viewport может быть использован и в неадаптивном веб-дизайне.

2. Media Queries: решение проблемы с мелкими изображениями

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

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

 @media screen and (max-width: 960px) {  /** Style Rules here **/ 
 }

Но ничто не мешает встраивать его прямо в код страницы:

<link href="style.css" rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 960px), projection" />

Важно: не все браузеры поддерживают возможности этого скриптового инструмента, особенно старые версии.

3. Поддержка сенсорного управления

Как сделать сенсорное управление на сайте.
Как сделать сенсорное управление на сайте.

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

  • уменьшение изображения;
  • zoom;
  • мультитач;
  • наклон и поворот

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

4. Java-скрипт Modernizr: помощь для устаревших браузеров

modernizr

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

Такой инструмент как Modernizr — это целая JavaScript-библиотека, которая определит версию браузера пользователя и, если программа не поддерживает современные возможности HTML5 и CSS3, то будет загружена упрощенная версия страницы без самых новых функций и продвинутых свойств. Разработчики назвали такую проверку feature detection. По своим возможностям она значительно превосходит простое определение версии браузера и операционной — системы. Проект поддерживает пользовательские разрешения.

5. Мини-адаптация для устройств Apple

Иконки

Пусть доля пользователей, которая перейдет на ваш сайт с iPhone или iPad несравнима с аудиторией фанатов Android, но и для первых стоит сделать полезную функцию. Помимо иконок приложений на рабочем столе iPad или iPhone можно сохранять иконки для быстрого доступа к любимым интернет-ресурсам. Чтобы в iOS ваш сайт мог отображать такую же иконку можно сделать следующее.

Добавьте в раздел <head> такую информацию:

<link href="touch-icon-iphone.png" rel="apple-touch-icon" /> 
<link href="touch-icon-ipad.png" rel="apple-touch-icon" sizes="72x72" /> 
<link href="touch-icon-iphone-retina.png" rel="apple-touch-icon" sizes="114x114" />

Хотя ссылки не всегда обязательны: достаточно сохранить в корневой каталог сайта три иконки с обязательной приставкой в названии — apple-touch-icon-«название иконки (если их несколько для каждого устройства как в примере выше)». Что будет без такой иконки? Safari в своих закладках создаст простую заглушку серого цвета, а иконка на рабочем столе будет отображать миниатюрный скриншот самой страницы.

6. Взаимодействие с Windows

win8

Как и в описанном случае с iOS, операционные системы Windows 8 и RT позволяют добавлять «плитки» на домашний экран. Вы можете реализовать такую «плитку» для мобильной версии вашего веб-ресурса. В ОС от Apple для этого применяется элемент link. Microsoft реализует эту задачу по-своему, используя мета-тег.

В нижеприведенном примере указан сначала цвет фона «плитки», а затем адрес изображения иконки.

<meta name="msapplication-TileColor" content="#000" /><meta name="msapplication-TileImage" content="icon.png" />

Не обязательно писать такой мета-тег вручную: вы можете воспользоваться сайтом Build My Pinned Site, где реализована автоматическая генерация тегов такого типа.

7. Заставка при загрузке iPhone или iPad

Любое мобильное приложение при запуске демонстрирует экран заставки. Обычно на нем изображен логотип программы, иногда реклама. Аналогичный экран можно сделать и для вашего сайта. Пользователь увидеть его, если будет загружать страницу, пользуясь экраном «Домой». Разумеется, добавлять рекламу не стоит: это может уменьшить аудиторию постоянных пользователей сайта, а вот красивый логотип существенно улучшит визуальное взаимодействие с ними.

Для реализации заставки добавьте следующий код в раздел <head>:

 <link href="splash-screen.png" rel="apple-touch-startup-image" />

Заключение

Эволюция электронных устройств диктует свои правила для работы веб-разработчиков. Описанные в этой статье способы адаптации веб-сайтов под мобильные устройства — лишь необходимый минимум. Без них ни одна html-страница не будет выглядеть достойно на экранах современных смартфонов и планшетов.



Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *