роль навигации
Роль навигации и текстов в посещаемости сайта
31.07.2018
digest-1
Новостной дайджест #1
10.08.2018

Методы и подходы при разработке мобильных версий сайта

mobile-methods
Разработать профессиональную мобильную версию вашего сайта
Вышлем индивидуальное предложение за 8 секунд


"В последние годы среди пользователей интернета наблюдается тенденция “срастания со смартфоном” - доля мобильного трафика в 2014 году перевалила за половину и продолжает увеличиваться. Этот фактор непременно нужно учитывать, ведь сайты в первую очередь делаются для людей, а не для выставки или начальства. При создании сайта всегда помните от тех 60-и процентах пользователей, которые променяли компьютер на смартфон и планшет - не позволяйте им сожалеть о сделанном выборе."

Сергей Рогов, веб-дизайнер Cart-Power


Если ваш проект максимально суров, и нужды пользователей вас беспокоят в последнюю очередь, сделайте адаптив ради SEO. Поисковые системы научились оценивать удобство просмотра сайта с мобильных устройств. Если ваш сайт оценивается как неудобный (проверить можно здесь), то поисковик отправит его в выдаче туда, где не ступала нога человека.
Перед началом разработки сайта подумайте, какое решения для мобильных устройств вам подойдет? Есть два решения: адаптивная верстка и мобильная версия сайта. Их плюсы, минусы относительно друг друга чуть позже, а пока давайте ознакомимся с путями разработки, если не заморачиваться с мобильными версиями.

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

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

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

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

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

Отзывчивая и адаптивная вёрстка

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

Если вы захотите самостоятельно подробнее изучить вопрос, то в поисковой выдаче на первых местах будут статьи на тему неудобства использования адаптивной верстки. Мол грузятся такие сайты долго, они тяжелые и неповоротливые. В настоящее время, такие высказывания справедливы только по отношению к массивным сайтам: обилие картинок, big data, все дела.

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

Подведя итог

Если резиновый сайт - не вариант, выбирайте между адаптивной и мобильной версией. Последний метод подойдет, если на сайте много данных, которые в маленький экран поместятся только с большим трудом. Или если его функционал можно урезать до одной-двух кнопок КУПИТЬ/ ЗАКАЗАТЬ. В остальных случаях выбирайте адаптивную вёрстку.

Остались вопросы?
Ответим на любой!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>