Выбор определенного типа веб-дизайна сайта в первую очередь обуславливается поставленными при его создании задачами. Исследования показали, что пользователей, юзающих Интернет при помощи мобильных устройств, с каждым днем становится все больше и больше. Только за последний год их количество возросло на 80%. По прогнозам к 2020 году 6 млрд. людей или около 80% населения будут пользоваться смартфонами.
В связи с этим появилась проблема, которая последним временем обрела глобальный характер, это проблема, касающаяся неподходящей традиционной верстки для мобильных девайсов, связанная с размерами дисплея смартфонов, отличающимися от размеров диагонали монитора компьютера, из-за чего и возникают проблемы с несоответствием структуры и графики.
Использование подобных сайтов с мобильных устройств становится неудобным в связи с:
- длительной загрузкой;
- мелким и нечитаемым текстом;
- отсутствием отступов от краев;
- неудобной навигацией;
- длинным путем до конверсии;
- горизонтальной прокруткой;
- не работающими flash и java скриптами;
- слишком длинными форматами захвата;
- телефонными номерами в виде картинок;
- кнопками и ссылками, не дружащими с тач-скрином и т.д.
Для решения подобных проблем было создано несколько видов дизайна сайтов, с которыми далее мы познакомимся более подробно.
Виды web-дизайна сайтов:
-
Резиновый дизайн
Резиновый дизайн отличается от остальных тем, что здесь ширина ячеек задается не в пикселях, как все привыкли, а в процентном соотношении от ширины окна. Проще говоря, резиновый дизайн — это дизайн, предусматривающий раскрытие сайта на весь экран по ширине, независимо от его разрешения.
Преимущества:
- характерное преимущество рассматриваемого дизайна заключается в полном занятии страницей всего дисплея девайса независимо от размера экрана;
- пользователи смартфонов не сталкиваются с горизонтальной прокруткой, а пользователи широкоформатных гаджетов могут наслаждаться эффективностью использования всей площади дисплея.
Недостатки:
- непредвиденность конечных результатов «подстройки» под новые форматы;
- не всегда получается заточить элемент под один и тот же вид, что приводит к тому, что отдельные элементы на странице могут занять не свое место;
- скорость загрузки при таком дизайне занимает в 2-3 раза больше времени;
- многие браузеры требовательно относятся к резиновому дизайну, поэтому вероятность возникновения ошибок существенно возрастает.
-
Мобильная версия сайта
Мобильная версия — это отдельно разработанный сайт на поддомене. Ярким примером являются сайты m.vk.com, m.lamoda.ua или m.segodnya.ua, на которые попадает пользователь в случае использования мобильного устройства. Подобные версии сайтов создаются под мобильные экраны с шириной не более 620 пикселей. Мобильная версия является мини версией сайта, на котором собрана наиболее важная информация. Подобные сайты больше всего подходят для социальных сетей, интернет-магазинов и новостных веб-ресурсов.
Преимущества:
- удобная в использовании, потому как не перегружена контентом, большими элементами навигации и дизайна;
- легко поддается изменениям, так как является отдельным сайтом;
- быстрая загрузка страниц за счет элементов, имеющих меньший вес;
- предусматривает переход на основную версию сайта в случае неисправности или отсутствия отдельных страниц.
Недостатки:
- немалая стоимость разработки;
- для поддержки работы версии на разных устройствах необходимо будет тратить деньги на обслуживание;
- отсутствие части информации, которая, возможно, некоторым пользователям была бы полезной.
-
Мобильные приложения
Мобильное приложение — это программа, специально разработанная под конкретную платформу, например Android или iOS. Веб-приложение является полностью переработанным вариантом веб-ресурса, существенно отличающимся от оригинального сайта или мобильной версии. Для использования приложения необходимо зайти на Google Play или App Store, скачать его там и установить на свой телефон.
Вот как выглядит сайт на десктопе:
А вот как выглядит приложение того же интернет-магазина:
Преимущества:
- приложение для сайта выглядит более «родным» для операционной системы;
- за счет интеграции с платформой приложение работает значительно быстрее;
- на приложения падает больше уникальных действий, так как в них посетители находятся дольше.
Недостатки:
- сложность разработки, связанная с учетом разных версий операционной системы;
- приложение должно отвечать требованиям производителя операционной системы к интерфейсу пользователя;
- размещение приложения в Google Play или App Store несет за собой немалые финансовые затраты;
- после обновления ПО гаджетов, необходима доработка программ, что также грозит дополнительными издержками.
-
Адаптивный дизайн сайта
Адаптивный дизайн сайта — это современная технология, позволяющая внешнему виду и функционалу сайта полностью подстраиваться под используемое устройство. При использовании данного дизайна, у пользователей на экране будет отображаться то, что вписывается в формат экрана посетителя. В процессе разработки такого сайта верстальщики создают страницы веб-ресурса, состоящие из элементов, которые будут автоматически подстраиваться под формат экрана. В этом случае блоки будут изменять свое расположение или же вовсе не отображаться на дисплее.
Адаптивный дизайн в первую очередь полезен корпоративным сайтам, блогам, сайтам-визиткам и новостным порталам.
Например, официальный сайт таргетированной сети Yottos создан с использованием адаптивного дизайна:
Преимущества:
- простота разработки и относительно небольшая стоимость, если сравнивать с созданием мобильной версии веб-сайта;
- грамотное расположение страниц и элементов сайта на девайсах с разным разрешением экрана;
- возможность показывать разный контент пользователям с разных устройств;
- seo преимущество нет надобности заниматься привлечением трафика на мобильную версию;
- используется один домен, что позволяет избежать перенаправления пользователей;
- посетителям не приходится запоминать дополнительные URL-адреса;
- привлекательность внешнего вида исходного сайта сохраняется на всех устройствах.
Недостатки:
- большой вес веб-страниц, влияющий на скорость загрузки. Это связано с тем, что замена десктопных элементов на более облегченные не осуществляется. Здесь необходимо уделить внимание оптимизации скорости загрузки;
- нет возможности перехода на обычную версию сайта в случае возникновения проблем на адаптивной верстке;
- подготовка изображений разного размера для десктопных и мобильных версий;
- создание отдельного компактного меню для устройств с малым экраном.
Рекомендации Yottos:
Как мы уже увидели, вариантов сделать мобильный сайт достаточно много:
- создание отдельного сайта — здесь проблема наблюдается в сопровождении и разработке, конечно, при создании подобного сайта возможна минимизация объема передаваемого контента, но все же этот вариант недостаточно хорош, в связи с чем им уже давно никто не пользуется;
- сделать резиновый сайт — это также на сегодняшний день уже не актуальное решение, так как в большинстве случаев заточить элементы под один и тот же вид достаточно проблемно;
- создание одного адаптивного сайта — это современное решение, позволяющее сделать сайт, который будет изменять свой вид и структуру в зависимости от размеров экрана;
- при создании приложения под девайс вы столкнетесь с проблемами сопровождения, разработки и дороговизны, но при этом получите гораздо большую скорость работы и множество других плюшек, способных перекрыть собой все имеющиеся недостатки.
В связи с этим, мы считаем, что последние два варианта: адаптивный сайт и приложение, являются наиболее актуальными и эффективными на сегодняшний день.
Комментарии