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

С 22 февраля Яндекс перестал отображать тег «Мобильный сайт» в результатах поисковой выдачи. Если раньше наличие мобильного сайта считалось преимуществом, то сейчас адаптация сайта под мобильные устройства – необходимость.

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

Основной особенностью смартфона является разрешение дисплея от 320px до 414px в случае с Apple iPhone и Android, что предъявляет определенные требования к разработке.

Основные моменты создания сайтов для смартфонов и планшетов

Существует много подходов к разработке мобильной версии сайтов. Основной подход «smartphone-pad-desktop», когда из версии для смартфона создается версия для планшета, а потом – десктопная. Данный подход оправдан, если имеются макеты дизайна под все версии. Если макетов все же нет, то мы рекомендуем верстать зеркально «desktop-pad-smartphone». С применением Яндекс БЭМ это позволит создавать мобильные версии в кратчайшие сроки.

Мы рекомендуем использовать адаптивную верстку. Кратко рассмотрим ее плюсы: отсутствие редиректов, единая система управления контентом, не требуется поддерживать два разных сайта. Использование поддоменов было популярно в 2007-2012 годах, в связи с небольшой производительностью устройств и пропускной способностью каналов связи. Сегодня поддомены оправданы в случае наличие старого legacy решения, перевод которого на адаптивную верстку не целесообразен и создания веб-приложения для корпоративной системы.

На мобильном сайте следует вырезать лишние блоки, особенно использующие тяжелый JavaScript. Фотографии должны быть обрезаны и оптимизированы по размеру. На нашей практике встречалось и такое, что для мобильной версии сайта использовались изображения размером в 5Мб каждое. После проведения первого этапа технической оптимизации время загрузки на 4G, упало с 4.29 секунд до 1.

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

Потребление контента пользователем при использовании сильно отличается от обычного. Мы не любим вчитываться в текст, мы любим визуальное представление информации, позволяющее быстро донести до нас основные моменты. Заголовки должны быть крупными и с соответствующим font-weight. Сам текст должен быть читабелен с большим line-height, чем на десктопной версии. Вся важная информация обязана попадать на первую страницу прокрутки. Основной принцип создания контента и верстки блоков — «fast-food»: быстро и сразу.

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

И последний момент, который мы хотим рассмотреть это использование плагинов для создания мобильной версии. Например, у многих «seo-блоггеров» можно встретить рекомендацию использовать WPtouch и ему подобные. Использование плагинов оправдано, только в одном случае – если мобильная версия сайта Вам нужна исключительно для галки, ибо любая кастомизация под себя подобных решений превращается в небольшой филиал ада с соответствующей оплатой разработчику.

Наша команда занимается созданием сайтов и интернет-магазинов с 2009 года. Мы выполним адаптацию Вашего сайта под смартфоны или создадим отдельный сайт на поддомене Вашей организации. Цены и другую интересующую Вас информацию, Вы сможете найти на странице «Мобильные сайты».