Уже давно функция адаптации дизайна под размер экрана необходима для каждого ресурса. Особенно, это касается коммерческих сайтов, основная задача которых состоит в продаже продуктов и продвижении услуг. Объяснить это можно тем, что все большая аудитория переходит к работе со смартфонами, отказываясь от совершения целевых действий со стационарного компьютера. Статистика фирмы Яндекс говорит, что в основном люди делают заказы, используя компьютер, но смотрят каталог и выбирают нужные позиции обычно с мобильных гаджетов. По статистике, выведенной Google, больше половины пользователей ищут товары первой необходимости, применяя свои мобильные телефоны.
Мобильная адаптация ресурса и ее понятие
Адаптивный дизайн – это тип разработки сайта, при котором все компоненты автоматически принимают вид, нужный для конкретного разрешения экрана. После адаптации весь контент показывается не полностью, а только основные его компоненты – самые важные вкладки, кнопки, линки, другое. Так меньший размер экрана отображает интерфейс в ограниченном виде. На странице остаются только те элементы, которые потребуются пользователю, чтобы получить нужный ему итог.
При работе с большого экрана люди получают большее количество кнопок на панели сбоку, дополнительные сведения, которые могут пригодиться, виджеты и другие графически отделенные от контента составляющих. Все они не слишком часто имеют практическое применение. Во время адаптации ресурса под смартфон остаются только главные функциональные компоненты. Например, для того, чтобы заказать или посмотреть что-то в онлайн-магазине, человеку будет достаточно просматривать только верхнюю панель с контактами, всплывающее меню и вкладки с продукцией. Для просмотра каталога и оформления заказов больше ничего не нужно. Остальное будет только отвлекать внимание.
Многие говорят, что предусмотреть эту функцию нужно на этапе разработки сервиса. На практике ситуация обстоит немного иначе: программистам не обязательно менять всю заготовку или систему для управления контентом, чтобы обеспечить адаптивность. Добиться результата можно на уже функционирующей платформе. При этом не нужно ничего серьезно менять или модернизировать существующий шаблон.
Цели мобильной адаптации ресурса
Статистика, выведенная компанией comScore из США, говорит о том, что процент мобильного трафика в Америке и европейских странах существенно выше, чем показатели, демонстрируемые персональными компьютерами. В Российской Федерации и других странах СНГ ситуация обстоит иначе: больше половины клиентов чаще делают покупки с компьютера, а целевое количество трафика становится гораздо больше. Это говорит о том, что ищут товары и рассматривают содержимое чаще всего со смартфонов.
Если активный пользователь смартфона пришел на вашу площадку, и она показалась ему удобной, шанс того, что он станет вашим постоянным клиентом или посетителем, сильно возрастет. Это работает и наоборот. Чем большее количество потенциальных клиентов уходят с сайта в течение нескольких секунд после его посещения, тем меньший уровень удовлетворенности человека и соответствия площадки предъявленным требованиям. Проведение тестирования адаптации сайта под смартфоны и планшеты покажет, что число отказов с гаджетов будет гораздо выше, чем с персонального компьютер. Это также оказывает негативный эффект на внутренние факторы поведения, ведет к потере потенциальных потребителей, способных заплатить за товар или услугу. Любой мастер может провести самостоятельную проверку числа лиц, использующих смартфоны с помощью Google Analytics. Для этого потребуется:
- Зайти во вкладку с обзором аудитории и кликнуть на кнопку добавления сегмента
- Поставить галочке на пункте трафика с сотовых устройств
- На экран будет выведена таблица, на которой отобразится общее количество гостей, отказов, просмотр по стадиям, время, которое пользователь потратил на просмотр контента.
Если не учитывать в работе потребность адаптировать сайт, можно оказаться на плохом счету у браузеров, которые переживают о том, чтобы гостям было комфортно. Так ваш сайт может оказаться на нижних позициях. Итогом станет пропажа целевого трафика. Конкуренты же напротив смогут привлекать к себе большее количество клиентов.
Что выбрать: адаптировать сайт под смартфоны или создать полную версию для мобильных устройств
Перед тем, как решить, какой из этих двух альтернатив пользуется большей эффективностью, потребуется понять, что значат оба этих термина. Адаптивная версия используется, чтобы дать ресурсу дизайн, который позволит правильно отображать контент на устройствах с разным разрешением экрана: стационарном компьютере, нетбуке, планшете, смартфоне. Мобильная версия – это радикально новое решение. Во время ее создания потребуется принять во внимание все потребности, которые могут появиться у пользователя, а потом создать простой и полностью понятный интерфейс.
Адаптированная версия
Этот способ позволить понести небольшие материальные и временные траты, чтобы подготовить комфортный веб-сервис, который можно применять с мобильного телефона, не теряя при этом качество. Если говорить коротко, в таком случае не понадобится разрабатывать специальный софт. Хватит совмещения размера страницы и размещенного контента с размером экрана каждого конкретного мобильного телефона или планшета. В итоге мы получим комфортный ресурс, который не лишен недостатков. В первую очередь, поменяется исключительно разрешения, а размер загружаемой страницы и ее содержимого. Также стоит учесть, что загрузка будет происходить достаточно медленно, поскольку скорость интернета на смартфонах меньше, нежели скорость проводного интернета. При такой ситуации возможно возникновение риска повышения числа отказов, ведь не каждый готов дождаться окончания загрузки. Пользователи могут просто закрывать вкладки.
Версия для мобильных устройств
Обычно это отдельная версию ресурса, которая располагается на поддомене и полностью дублирует основную страницу площадки. При этом потенциальном клиентам ее компоненты предоставлены в ограниченном виде сравнительно с персональным компьютером. Если смотреть на ситуацию с позиций оптимизации поиска, то создать мобильную версию мастеру будет сложнее. Ему придется применить большое количество вспомогательных инструментов, которые позволят автоматически переадресовать посетителей с первого URL-адреса на второй. С точки зрения машин для поиска ссылки для смартфонов и ссылки на компьютеры являются полностью разными. Адаптированная версия при этом отличается меньшим размером, загрузка происходит быстрее. При этом на ее создание потребуется больший бюджет.
Чтобы не ошибиться при выборе одного варианта, нужно понимать, в какой ситуации лучше применить адаптацию, а в какой – создать полноразмерную версию для смартфонов.
Разработчику не потребуется создать отдельную версию ресурса для смартфонов, если он имеет небольшой размер, на нем предоставляется только информация или услуги бьюти-студий, то хватит и того, чтобы сайт будет быстро адаптироваться под требуемое разрешение экрана.
Если сайт имеет крупные размеры, к нему подгружаются дополнительные страницы, подумайте о том, чтобы потратить время на разработку версию для мобильных устройств. Метод подойдет для крупных интернет-магазинов, порталов новостей. Такие площадки каждый день посещают более тысячи человек, а нагрузка на них очень высока.
Процесс адаптации ресурса для смартфона
Если площадка не прошла оптимизацию для просмотра с мобильных устройств, это нельзя назвать большой проблемой, ведь основная масса современных поисковых систем имеют функцию пинч-зума, регулировки шрифтов. Инструменты упрощают просмотр содержимого с мобильных гаджетов. Их и сейчас широко используют потребители. В случае, если бюджет недостаточно велик, а времени на проведение оптимизационных процессов под мобильные телефоны недостаточно, можно применить базовые адаптационные инструменты.
- Установить подходящие поля и формы. Для начала в поле для ввода информации: имени, никнейма, поискового запроса, потребуется отключить задачу автоматизированной корректировки и применить атрибут autocapitalize. Он контролирует введение и редактирование информации пользователем. Если этого не сделать, то инструмент автоматического ввода будет менять слова, которые пишет пользователь. Стоить учесть также и то, будут ли прописываться большие буквы в автоматическом режиме. Это позволит человеку во время регистрации или входа на ресурс не прибегать к применению клавиатуры.
- Установить подходящую ширину. Экспериментируйте с шириной текста, чтобы вам и пользователям было удобно его смотреть. Далее примените их в области, которая будет видна пользователю (viewport) с помощью отдельных тегов в названиях веб-страниц. Далее, когда страница будет прогружаться на планшете или мобильном телефоне, все подобранные поля отображения компонентов будут установлены автоматически.
- Подобрать ширину изображение. Когда вы зададите конкретную ширину на своем сайте, все загруженные изображения будут растягиваться самостоятельно. Чтобы больше не сталкиваться с этой проблемой, задайте максимальный параметр ширины картинок.
- Переносить слишком длинные слова и фразы. Часто во время адаптации сервиса под разный размер экрана строки с большой длинной не показываются полностью, поскольку часть введенного текста находится за экраном, вне зоны видимости пользователя. Инструмент поможет системе понять, должна ли она перенести длинные фразы, которые не помещаются по ширине в выбранную область.
- Создать абсолютную позицию в CSS. Если заголовки или боковая панель, которая закрепляется, зафиксирована, язык, описывающий дизайн документа установит параметр страницы относительно позиции в фиксированный. Тогда при увеличении страниц заголовки и панели будут менять свой размер пропорционально ему, что негативно отразится на восприятии. Чтобы решить проблему, откажитесь от фиксации позиций.
- Публиковать качественный материал, который удобно читать. Потребуется придумывать краткие заголовки, которые привлекут внимание, разбить информацию на абзацы, применить списки с марками или нумерацией, использовать картинки.
Инструменты – хороший помощник при адаптации CSS для уже готового сервиса. Используя эти советы, вы избавите посетителей от сложностей при посещении сайтов с мобильного или планшета. Если временных или финансовых ресурсов недостаточно, чтобы заниматься адаптацией самому, можно применить инструменты MoFuse, Convert Website.
- понятной интуитивно навигации по вкладкам. Все знают, что сервисы на смартфонах прокручиваются вертикально, а удобная система внутреннего поиска построеня «домашней» кнопкой, кнопками«Вверх», «Назад». Можете применять формы для обратной связи, расположение контактной информации на верхней панели;
- удобного чтения информации. Пользователь не должен дополнительно увеличивать текстовые блоки, чтобы рассмотреть их, потсояннорегулировать границы;
- простоты целевых действий. Стоит подумать о том, чтобы посетителю было комфортно просматривать страницы, выбирать вещи, добавлять их в корзину, оформлять заказ, подписываться на рассылку по электронной почтой и другое. Можете предоставить кнопку перехода к фулл-версии сайта.
- знакомиться с текстом удобно, его размеры не нужно менять для чтения; не нужен прикладной софт, дополнительные расширения, которые увеличивают размер страницы, мешая просмотру с небольшого экрана;
- не нужно будет прокручивать страницу горизонтально;
- хорошая скорость загрузки контента, можно без дополнительных сложностей переходить между вкладками и разделами.