Подписаться на рассылку

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

29.11.2016 2585 0
Время на чтение:7 мин. Нет времени читать?

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

 

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

 

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

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

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

 

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

 

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

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

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

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

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

Недостатки:

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

 

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

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

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

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

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

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

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

Недостатки:

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

 

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

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

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

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

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

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

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

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

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

Недостатки:

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

 

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

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

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

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

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

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

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

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

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

Недостатки:

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

 

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

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

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

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

Комментарии