Вам нужно создать мобильный сайт, но не знаете как?

Казалось бы, причем здесь голуби? На теле взрослой птицы находится примерно 10 тысяч перьев. Чтобы это узнать, необязательно пересчитывать их рукой или даже обеими. Достаточно взять смартфон и ввести запрос в Яндекс или Google. «Удобство в кармане». Через смартфоны мы заказываем доставку из любимого магазина, узнаем новости, общаемся с друзьями и коллегами, смотрим фильмы.

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

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

Способы, которые позволяют сделать мобильную версию ресурса

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

Адаптивный дизайн

Поговорим о таких понятиях, как респонсивный (responsive design) и адаптивный дизайн. По сути они похожи, но имеют и минимальные отличия.

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

Если использовать адаптивный дизайн, вы получаете инструмент в виде нескольких макетов разных габаритов. То есть для пользователей планшетов будет один размер, для юзеров с небольшими мобильными телефонами — другой.

Тем не менее, есть общий момент: допустим, у вас свой интернет-магазин, который для пользователей по-разному виден в «большой» и мобильной версии. Контент сайта отображается с учетом адаптации и в соответствии с шириной страницы.

Плюсы такой версии:

• Десктопная вариация и сайт для мобильных устройств — один сайт, поэтому оптимизировать его с точки зрения SEO будет проще.
• Отсутствует необходимость в создании мини-сайта без какой-либо базы, с нуля.

Минусы:

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

Мобильный сайт с отдельным доменом

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

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

Плюсы мобильной версии:

• Сайт быстрее загружается, можете проверить.
• Можно установить и настроить актуальные опции и изменить структуру, для этого не придется собирать команду разработчиков, потому что мобильная версия автономна от версии для компьютера.
• Технологии разработки mobile-версий позволяют оставить на сайте те блоки и элементы, которые будут актуальны для доступа с мобильного браузера. К примеру, на большом сайте есть раздел «Наша команда» с фотографиями сотрудников, описаниями и историями достижений. Маловероятно, что пользователь захочет читать эти тексты и просматривать фото с экрана телефона. Это только затруднит процесс поиска информации, поэтому такой блок лучше будет убрать.
• Удобная система навигации: меню, кнопки, блоки располагают в оптимальных местах для комфортного взаимодействия мобильного пользователя с сайтом через экран карманного устройства. К тому же это может увеличить конверсию.
• Можно создавать современные рекламные кампании, которые ориентированы именно на юзеров мобильной платформы.

Отрицательные моменты:

• Могут возникнуть проблемы с ранжированием в поисковиках, потому что основной портал и сайт под мобильные устройства — различные ресурсы, их URL-адреса отличаются. Контент будет дублироваться, что негативно скажется на продвижении в Сети через поисковые системы. Отрицательно влияет на метрики и разное количество текстовой и иной информации.
• Два автономных сайта могут увеличивать технические, финансовые и временные ресурсы на ведение и оформление.
• Вы должны учесть, что десктопная и мобильная версии могут иметь разную эффективность. Допустим, в интернет-магазине есть бесплатная функция онлайн-примерки. Чтобы увеличить скорость загрузки, ее оставили только в полной версии сайта, а в мобильной делать не стали. Этого достаточно, чтобы пользователь ушел, потому что не смог найти привычную удобную опцию.

Мобильное приложение

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

Конструктор мобильных сайтов vs CMS: чем лучше воспользоваться

Конструкторы

Как сделать сайт, заточенный под мобильные устройства, когда нет желания разбираться с веб-дизайном, учиться на программиста и писать код? Ответ: можете использовать конструктор сайтов. Вы просто выбираете тему, инструменты сервиса, подходящие варианты готовых шаблонов и заполняете информацией. Как правило, через несколько минут (часов) у самых усердных получится свой сайт. И да, он будет хорошо выглядеть с экрана мобильного телефона.

Имеет смысл выбрать конструктор для создания сайта, потому что эти сервисы обычно не только с широким функционалом, но и с адаптацией дизайна. Поэтому не стоит удивляться, что сайт автоматически подстроится под экран мобильного девайса. Увы, некоторые сервисы, такие как Wix, ушли из России.

• Tilda
  Конструктор для создания сайтов. Адаптивный дизайн в комплекте (если нужно, его можно отключить). Доступны 550 блоков и подборка более 200 шаблонов, из которых собирается ваш собственный сайт. Есть встроенный графический редактор Zero Block, с которым можно делать блоки с любым дизайном.
• GetResponse
  Сервис, который поможет вам создавать email-рассылки и веб-страницы. Адаптивная версия получается по умолчанию, поэтому на практике сайт подойдет для всех устройств. Есть полезная функция, благодаря ей можно скрывать какие-то элементы, которые вы решили не добавлять в мини-версию. Конструктор позволяет масштабировать видео или картинку на весь экран гаджета. Сервис помогает изменить величину шрифта и подобрать отступы под создаваемые сайты.
• Weblium
  Отдельная настройка адаптивного дизайна для новой версии не понадобится, он появляется сразу. Также в конструкторе лучше воспользоваться позиционированием сайта, так, на разных платформах текст не станет наезжать на изображение и не уедет фон в результате ошибки отображения.
• uCoz
  Вы просто собираете сайт благодаря шаблонам по актуальным параметрам, к тому же не думаете, как же создать мобильную версию. Потому что конструктор предлагает адаптивность без дополнительных усилий. Если хотите, этот инструмент можно отключить. Есть возможность использовать редактирование кода, а это, в свою очередь, способствует созданию мобильной версии по вашему желанию.
• Profeat.Site
  Конструктор, с которым максимально приятно и быстро сделать мобильную версию идеального сайта. Это особенно актуально, если ваша аудитория чаще использует смартфоны или планшеты, поэтому лучше не тратить деньги на создание стандартного сайта, а потом еще его младшего собрата. С Profeat.Site есть возможность создать полноценный профессиональный сайт. Его можно будет открывать с телефонов и планшетов.
  • Подходит компаниям и экспертам.
  • Интерфейс конструктора настолько понятен, что разберетесь на раз-два без сложного руководства. Опыт в программировании не нужен.
  • Здесь много настраиваемых блоков, в которые вы самостоятельно добавите ссылки, кнопки, описания, кейсы.
  • Доступна интеграция сторонних сервисов.
  • Прежде чем поделиться ссылкой на сайт, можно внести какие-то изменения на страницу, если это необходимо.
  • Внутренняя аналитика сайта покажет в виде графиков просмотры и клики.
  • Платные тарифы дают возможность разместить на сайте карту Яндекс или Гугл. С ней пользователи смогут лучше понять, где находится ваш офис.
  • Можно подключить сервисы e-commerce, чтобы получать от клиентов оплату за товары или услуги.

  Ниже расскажем, как по шагам сделать мобильную версию вашего корпоративного или персонального сайта через аккаунт в Profeat.Site (для этого есть все необходимое):

  1. После регистрации по номеру телефона нужно посмотреть на типы сайтов, создать которые предлагает конструктор, и выбрать подходящий.
  2. Теперь — определить категорию, которая больше всего подходит вашему роду деятельности.
  3. Перед тем как выбрать блоки, продумайте план сайта. Если использовать шаблоны, станет гораздо легче.
  4. С помощью встроенных инструментов настройте блоки и добавьте контент.
  5. Затем следует настроить шрифты, тему и остальные визуальные моменты.

  Ваш готовый сайт доступен на iOS и Android.

CMS-системы

CMS занимают первое место среди конкурентов конструкторов сайтов. Например, система WordPress ориентирована на достаточно продвинутый пользовательский опыт, хотя, в сравнении с конструкторами, предоставляет больше инструментов и функций, чтобы смастерить сайт. Сможете загрузить плагины, прикрутить виджеты и расширить возможности страницы. Судя по отзывам, иногда обновления не стыкуются со сторонними плагинами. Отдельную версию для мобильных устройств выполнить не получится, но будет адаптивность сайтов.

Вам подходят инструменты CMS? Тогда нужно будет скачать тему, учитывающую функционирование сайта на мобильных устройствах. Выбирайте — найти полностью бесплатную или с определенной ценой. Далее — непосредственно формирование сайта.

Наполнение мобильного сайта: рекомендации

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

• Мобильный интернет — это обычно не бесконечный трафик. Он молниеносно заканчивается, если приходится загружать тяжелые сайты. Именно поэтому сайты для мобильных устройств не должны быть «каменными». Не стоит наполнять их файлами, из-за которых человек может остаться без интернета. Преимущество сайта для мобильных пользователей — быстрая загрузка. Если пользователю приходится смотреть в экран в ожидании чуда более двух секунд, вы рискуете упустить клиента. Ведь все помнят, что время — $.
• Оптимизация формы и содержания. В эпоху клипового мышления и Twitter люди привыкли быстро получать любые сведения. Обязательно поработайте над тем, чтобы человек на вашем сайте не превратился в ежика в тумане и смог быстро найти то, для чего пришел. Конкуренты, как мы знаем, не дремлют.
• Смартфоны, конечно, мощные, но не очень. Компьютеры и ноутбуки содержат видеокарты и процессоры, а они предназначены для обработки материалов больших объемов. Многие возможности стационарных устройств пока недоступны для уровня мобильных, поэтому, когда будете разрабатывать мобильную версию страницы, остерегайтесь контента, который может не загрузиться на экране размером с ладонь. Это может быть HD-видео высокой четкости или какая-то суперсложная анимация.

Что делает версию mobile вашего сайта актуальной: советы

Вот кое-какие особенности, с которыми авторам макетов лучше смириться при работе над «смартфонным» сайтом:

• Шрифт
  Человек хочет легко прочитать текст и не прилагать к этому каких-то усилий. По этой причине лучше использовать классические шрифты без засечек, с четким начертанием. К таким можно отнести, например, Roboto и Open Sans.
• Размер шрифта
  Если буквы на страницах сайта мелкие, человеку, возможно, придется использовать такой инструмент, как зум. Если шрифт излишне крупный, мобильному пользователю придется стереть палец, чтобы найти на экране необходимое. Оптимальной величиной текста для мобильного сайта является показатель, равный 16–18 кеглей. Кстати, у Apple на этот случай есть методические рекомендации. У Гугл тоже есть.
• Заголовки
  Их желательно делать больше, чем основной текст, чтобы привлечь внимание, когда люди заходят на лендинг. Можно взять какой-то другой шрифт, но он тоже должен быть удобным для чтения. Желательно рассчитать символы и сделать заголовок не больше, чем на три строчки. Чем меньше будет знаков в заголовке, тем проще воспринимать информацию с мобильного устройства. Самый удобный размер — 28 кеглей. Существует такое понятие, как шрифтовые пары. Вы можете с помощью специальных сервисов подобрать пару «текст и шрифт», а можете потрудиться над этим сами. Лучше выбрать что-то похожее, но с некоторыми отличиями.
• Межстрочные интервалы
  

Главное — не забывать, что визуально объекты, которые расположены на близком расстоянии один от другого, считываются как соединенный объект. Поэтому, когда на вашем сайте несколько блоков с текстом и заглавиями (подзаголовками), то важно соблюсти интервал между последними в пару-тройку раз меньше, чем от одного блока до другого.

• Тема
  Когда создаете компактную версию сайта, важно предусмотреть, в какой обстановке мобильные пользователи будут его использовать. Может быть, в квартире, в офисном центре или на улице. Днем или в ночные часы. Не рекомендуется задействовать много разных цветов, потому что это создает лишнюю нагрузку на зрение.
• Прокрутка
  Рекомендуем этот параметр сделать вертикальным, ведь предложить пользователям листать сайт на мобильном устройстве горизонтально — нонсенс.
• Всплывающие окна
  Желательно игнорировать этот инструмент, потому что на смартфонах это не совсем удобно, действия несколько ограничены. Если необходима форма для сбора обратной связи или что-то подобное, создайте отдельную вкладку. Можно попробовать добавить кнопку для перехода в эту форму.

Заключение

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

Создать мобильную версию может быть сложно. Но это не относится к сервису Profeat.Site. С ним можно редактировать ваш сайт, когда посчитаете необходимым. Легко опубликовать его в сети, при этом не придется думать о хостинге и домене. В конструкторе много блоков, и все они разработаны специально для мобильных устройств. Вам останется только расположить их в нужном порядке, наполнить уникальным контентом — и получите свой продающий лендинг.