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

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

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

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

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

Viewport

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

Пример Viewport

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

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

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

Modernizr

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

Modernizr

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

TouchSwipe

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

TouchSwipe

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

iOS иконки

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

IOS иконки

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

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

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

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

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

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