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

Выбор определенного типа веб-дизайна сайта в первую очередь обуславливается поставленными при его создании задачами. Исследования показали, что пользователей, юзающих Интернет при помощи мобильных устройств, с каждым днем становится все больше и больше. Только за последний год их количество возросло на 80%. По прогнозам к 2020 году 6 млрд. людей или около 80% населения будут пользоваться смартфонами.

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

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

• длительной загрузкой;
• мелким и нечитаемым текстом;
• отсутствием отступов от краев;
• неудобной навигацией;
• длинным путем до конверсии;
• горизонтальной прокруткой;
• не работающими flash и java скриптами;
• слишком длинными форматами захвата;
• телефонными номерами в виде картинок;
• кнопками и ссылками, не дружащими с тач-скрином и т.д.

Для решения подобных проблем было создано несколько видов дизайна сайтов, с которыми далее мы познакомимся более подробно.

Виды web-дизайна сайтов:

1. Резиновый дизайн

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

Преимущества:

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

Недостатки:

• непредвиденность конечных результатов «подстройки» под новые форматы;
• не всегда получается заточить элемент под один и тот же вид, что приводит к тому, что отдельные элементы на странице могут занять не свое место;
• скорость загрузки при таком дизайне занимает в 2-3 раза больше времени;
• многие браузеры требовательно относятся к резиновому дизайну, поэтому вероятность возникновения ошибок существенно возрастает.

2. Мобильная версия сайта

Мобильная версия — это отдельно разработанный сайт на поддомене. Ярким примером являются сайты m.vk.com, m.lamoda.ua или m.segodnya.ua, на которые попадает пользователь в случае использования мобильного устройства. Подобные версии сайтов создаются под мобильные экраны с шириной не более 620 пикселей. Мобильная версия является мини версией сайта, на котором собрана наиболее важная информация. Подобные сайты больше всего подходят для социальных сетей, интернет-магазинов и новостных веб-ресурсов.

Преимущества:

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

Недостатки:

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

3. Мобильные приложения

Мобильное приложение — это программа, специально разработанная под конкретную платформу, например Android или iOS. Веб-приложение является полностью переработанным вариантом веб-ресурса, существенно отличающимся от оригинального сайта или мобильной версии. Для использования приложения необходимо зайти на Google Play или App Store, скачать его там и установить на свой телефон.

Вот как выглядит сайт на десктопе:

А вот как выглядит приложение того же интернет-магазина:

Преимущества:

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

Недостатки:

• сложность разработки, связанная с учетом разных версий операционной системы;
• приложение должно отвечать требованиям производителя операционной системы к интерфейсу пользователя;
• размещение приложения в Google Play или App Store несет за собой немалые финансовые затраты;
• после обновления ПО гаджетов, необходима доработка программ, что также грозит дополнительными издержками.

4. Адаптивный дизайн сайта

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

Адаптивный дизайн в первую очередь полезен корпоративным сайтам, блогам, сайтам-визиткам и новостным порталам.

Например, официальный сайт таргетированной сети Yottos создан с использованием адаптивного дизайна:

Преимущества:

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

Недостатки:

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

Рекомендации Yottos:

Как мы уже увидели, вариантов сделать мобильный сайт достаточно много:

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

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