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

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

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

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

Viewport

Тег meta viewport – это обыкновенный HTML-код, который отвечает за отображение сайта на экране мобильного устройства и изменении масштаба страницы. Этот тег позволяет прописать масштаб страницы при первой загрузке сайта, а также указать максимальное значение масштабирования страницы или полностью отключить увеличение страницы.

meta viewport выглядит примерно так:

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

initial-scale указывает масштаб сайта при первом посещении сайта в окне мобильного браузера,

maximum-scale указывает максимальное значение увеличения страницы сайта.

Для разработки адаптивного шаблона этот тег просто незаменимый, однако его можно применять и в неадаптивных шаблонах. Этот мета тег необходимо использовать в паре с спецификацией Media Queries.

Media Queries

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

Встроить Media Queries можно прямо в шаблон страницы:

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

Modernizr

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

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

TouchSwipe

TouchSwipe – это специальный плагин jQuery, с помощью которого можно организовать управление сайтом на  сенсорных экранах мобильных устройств или планшетов.

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

iOS иконки

Владельцы продукции компании Apple – IPhone или IPad могут добавлять иконки сайтов на главный экран. Добавить иконку сайта для продукции Apple не составит труда.

Реализовать отображение иконки с помощью следующего кода:

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">

Данный код необходимо вставить в раздел head. При этом необходимо добавить изображение иконки в корень сайта. Название файла должно начинаться с фразы apple-touch-icon-.

Экран заставки

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

Добавить заставку можно путем вставки следующего кода в шапку сайта:

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

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