Как оптимизировать сайты под мобильный трафик

При этом нужно учитывать, что в некоторых странах, например, в Китае и Индии, мобильный трафик уже доминирует.

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

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

Успейте купить корпоративный пакет COSSA-2025 со скидкой!

Cossa анонсирует главный рекламный формат на весь 2025 год: сразу 8 различных опций.

Пакет идеально подходит для онлайн-сервисов, стартапов, интернет-компаний и digital-агентств.

Успейте приобрести пакет до повышения цены!

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

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

Адаптивная верстка или мобильная версия сайта?

На самом деле не так все просто, как кажется. Адаптивная верстка — это очень серьезный тренд. В общем и целом мы его тоже поддерживаем (в силу своих возможностей, конечно). Но нужно понимать, что тренд диктуется не только реальными преимуществами адаптивной верстки перед созданием специализированных версий, но и модой. Адаптивная верстка вызывает сразу несколько глобальных проблем. Прежде всего — многократное усложнение разработки при многократном же упрощении структуры. То есть, структура сайта становится камнем преткновения. Чем проще структура — тем меньше необходимой информации вы можете предоставить пользователям. Более сложная структура увеличивает трудозатраты на производство. Адаптивный дизайн хорош для блогов, небольших сайтов. Но если у вас огромный проект с большим количеством страниц (и — главное — типов страниц), адаптивный дизайн может ваш проект просто похоронить. В общем, вопрос не столь однозначный, как может показаться на первый взгляд. В каждом случае мы призываем отдельно — и очень ответственно — принимать решение — создавать мобильную версию сайта или же идти путем адаптивной верстки.

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

Упрощение дизайна

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

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

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

Оптимизируйте контент

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

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

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

Делайте навигацию простой и понятной

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

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

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

Кроме этого, помните о неудобствах, возникающих у пользователей при необходимости ввода текста с мобильных устройств. Позаботьтесь, чтобы посетители могли найти все необходимые данные с минимальной необходимостью вводить буквы. Выпадающее меню и предварительно заполненные формы помогут вам в этом.

Сокращайте время загрузки

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

Например, откажитесь от флеш-анимации, оставив ее для основной версии сайта (если она там вообще уместна). Стоит ли напоминать, что продукты компании Apple вообще не поддерживают флеш-технологии? А ведь эта компания удерживает 30% рынка смартфонов в мире. Java также увеличивает скорость загрузки сайтов. Поэтому лучше откажитесь от анимации, автоматически запускаемого аудио и видео, оптимизируя сайт под мобильный трафик.

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

Работайте над узнаваемостью вашего бренда

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

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

Автор: Денис Савельев, Дмитрий Дементий