Мобильная версия сайта: как создать и избежать ошибок

Содержание

Мобильные сайты – вся информация о вас и вашем продукте на экране смартфона

Хотите заказать мобильные сайты для грамотного расширения своей целевой аудитории? IT-компания «Wellsoft» разработает качественные мобильные сайты и откроет для вас новый перспективный источник эффективных продаж!

Мобильная версия сайта — уверенный шаг к новым продажам

По статистике, более 30% потенциальных клиентов приходят на основной сайт с мобильного телефона, и с каждым годом этот показатель неуклонно растет. При этом в 20% случаев мобильная версия сайта отображается на планшете или смартфоне некорректно, мешая оставлять заявки или делать звонки.

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

Компания «Wellsoft» предлагает 2 решения такой проблемы:

  1. Создание сайтов с полноценной мобильной версией — отдельный проект с качественной оптимизацией контента, проработкой дизайна и юзабилити.
  2. Разработка адаптивных сайтов — создание веб-дизайна, автоматически подстраивающегося под экраны различных размеров. Такое решение обеспечит читабельность теста на любых устройствах (без горизонтальной прокрутки) и предоставит достаточные области для кликабельных элементов.

Оба варианта имеют свои достоинства и недостатки, а выбор технологии зависит, прежде всего, от сложности конкретного проекта.

Какие преимущества дают мобильные сайты?

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

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

  • Значительно повышают количество переходов на основной сайт компании. Основные поисковые системы Google и Яндекс заточены под алгоритм, при котором в поиске со смартфона приоритет отдается именно адаптивным/мобильным ресурсам.
  • Правильное отображение всех элементов с корректным функционалом без горизонтальной прокрутки. Адаптация сайта под мобильные устройства упрощает просмотр каталога или портфолио и позволяет сделать заказ всего в несколько кликов.
  • Быстрая загрузка на всех типах мобильных устройств.

Как создаются современные мобильные сайты — 4 шага для развития продаж

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

2 шаг. Уже через 5 дней специалисты компании «Wellsoft»предоставляют первый схематичный прототип, наглядно демонстрирующий расположение элементов на сайте.

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

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

Оставьте заявку прямо сейчас, и мы раскроем потенциал вашего бизнеса в качественном, стильном и информативном мобильном сайте!

Мобильная версия, веб-приложение, адаптивный дизайн или десктопный формат сайта?

Известно, что сайты в Сети различаются в зависимости от отображения на разных устройствах. Так, принято выделять:

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

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

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

Мобильные версии сайтов создаются специально для мобильных устройств. Часто они имеют свой собственный url-адрес (например. m.vk.com) и значительно отличаются от полной версии:

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

По сравнению с тем же адаптивным сайтом, мобильная версия отличается именно этим — собственным интерфейсом и содержимым.

Веб-приложение

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

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

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

Transport for London (tfl.co.uk) — это пример сайта с адаптивным дизайном. На скриншоте ниже вы видите, как полная версия преобразуется на разных экранах мобильных устройств

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

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

Пример адаптивной версии сайта Authenticjobs.com. Полная версия содержит контент, располагающийся в колонке справа. Например, предложение разместить объявление о вакансии, который отсутствует в мобильной

Как видите, в мобильной версии Authenticjobs.com некоторого контента просто нет

Ниже мы попробуем сравнить эти два варианта.

Мобильная версия или Адаптивный дизайн?

Перечислим несколько очевидных преимуществ и недостатков двух подходов:

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

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

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

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

5. Адаптивные сайты, как правило, обходятся своим владельцам дороже.

6. Адаптивный дизайн чаще работает медленнее, чем «шустрая» и подстроенная под устройство мобильная версия. Дело именно в отличии контента и функционала.

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

Главный минус мобильных версий сайтов — недостаток контента и функционала

 

Твитнуть цитату

Полная версия сайта на мобильном устройстве

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

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

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

Вместо заключения

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

Высоких вам конверсий!

По материалам: nngroup.comimage source nuon 

24-02-2016

Мобильное приложение или мобильная версия сайта: что лучше всего работает в 2021 году

Содержание:

 

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

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

Примерно 50% веб-трафика генерируется с мобильных устройств, но, с другой стороны, все большее число пользователей смартфонов тратят 50% + своего мобильного времени в приложениях.

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

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

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

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

 

Мобильные приложения и мобильный веб-сайт

Использование самой платформы

62% людей владеют смартфонами, а 50% – планшетами. Поскольку мобильные приложения стали неотъемлемой частью повседневной жизни миллионов людей, на рынке технологий произошел заметный подъем. Большинство пользователей смартфонов тратят более 50% своего времени в интернете на пользование мобильных приложений.

Однако мобильные устройства также будут обеспечивать 54,8% веб-трафика со всего мира в 2021 году. Поэтому мобильная версия сайта очень важна при постоянном увеличении числа пользователей мобильных телефонов.

 

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

Таким образом, многое зависит от типа продукта и услуг, которые вы предлагаете, и вашей целевой аудитории.

Вам нужно понимать, кто будет использовать приложение и кто посещать мобильные сайты.

 

Предпочтения пользователя

По данным Google, более 51% пользователей смартфонов открывают для себя новый продукт или услугу во время его использования. Но в то же время настольные компьютеры никуда не денутся.

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

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

Миллениалы особенно любят покупки через приложения: 61% миллениалов говорят, что загружают розничные приложения, а 58% миллениалов отметили, что предпочитают покупать через приложения.

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

 

Удобство использования офлайн и онлайн

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

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

Вы когда-нибудь задумывались, как пользователи будут получать доступ к вашим продуктам или оставаться на связи, если нет подключения к интернету?

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

 

Реклама и маркетинг

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

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

Кроме того, в случае с веб-сайтом вы можете использовать такие инструменты, как SEO, таргетинг по ключевым словам и многое другое. А конкретно для мобильного приложения это ASO (app search optimization). Еще один из факторов, который нужно оценивать по количество органического трафика в сторах.

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

 

Что быстрее?

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

Когда вы нанимаете разработчика приложения, вам необходимо создать приложение как и для iOS, Android и Windows. Но можно также сделать одно кроссплатформенное приложение, но нужно понимать, какой функционал оно сможет, а какой не сможет поддерживать. Это очень удобно в использовании: они позволяют пользователю изучать тысячи продуктов без каких-либо ограничений скорости.

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

 

Интерактивность и доступность

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

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

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

 

Узнаваемость бренда

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

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

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

 

Вывод: мобильная версия сайта или мобильное приложение – кто победитель?

В конце этой битвы позвольте мне пояснить, что окончательное решение о разработке мобильного приложения или мобильного веб-сайта зависит от потребностей вашего бизнеса.

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

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

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

Фото на обложке: pixabay.com

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

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

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

Адаптивный дизайн – это дизайн, который адаптируется под размер экрана пользователя. HTML-код при этом используется одинаковый, а размеры элементов страницы корректируются с помощью CSS.

Преимущества адаптивного дизайна:

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

Недостатки адаптивного дизайна:

  • юзабилити страдает — большие кнопки; изображения, занимающие половину экрана; иконки вместо текстового меню и т.д. Большая часть таких проблем связана с некачественно реализованной адаптивной версткой, но тем не менее они есть практически у 90% адаптивов;
  • потребности мобильной аудитории не учитываются. Не весь функционал сайта нужен пользователям мобильных телефонов. Например, пользователь зашел со смартфона на страницу банка. Скорее всего, он посмотрит адреса ближайших отделений, контакты. Но вряд ли будет читать статью про кризис в экономике из 10000 знаков;
  • долгая загрузка. Это влияет не только на поведенческие метрики, но и на продвижение в поисковой выдаче. Как сказано в определении Google выше, страницы имеют одинаковый html-код. А значит, объем информации загружают тоже одинаковый. Но если стационарные устройства и ноутбуки справляются с этим отлично, то у смартфонов, подключенных к wi-fi в местах общепита может быть не так все гладко;
  • отсутствие выбора. Если вы используете отдельную версию сайта для пользователей мобильных устройств, то у них всегда есть выбор – перейти на полную версию сайта. При адаптивной верстке такого выбора нет. И если пользователю не удобно изучать сайт с мобильного телефона, то он либо откроет его с декстопного устройства, когда до него доберется, либо уйдет к конкурентам.

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

Мобильная версия сайта -для пользователей смартфонов и планшетов создается отдельный сайт, для декстопных устройств – другой.

Страница «Ленты.ру» на экране десктопа


Мобильная версия сайта «Ленты.ру»



Преимущества мобильной версии

  • учитывает интересы пользователей. Согласно аналитике из Яндекс.Метрика и Google Analytics вы можете узнать, на какие страницы заходят пользователи смартфонов и планшетов, что им интересно. Далее у вас есть возможность публиковать уникальный и интересный контент, сделать удобную облегченную навигацию и меню – прислушаться к мнению пользователей;
  • быстрая работа. Это существенно облегчает доступ к информации, даже если пользователь подключается с общедоступного wi-fi или в местах, где плохо ловит 3G и 4G;
  • возможность выбора. Если пользователя не устраивает мобильная версия сайта и ему нужен доступ к полной, то он всегда может переключиться.

Недостатки мобильной версии

  • несколько адресов. Даже если вы используете только m.moysait.ru поисковые роботы определяют его как отдельный сайт и в выдаче он ранжируется без учета результатов основного сайта. Для seo-продвижения это несколько усложняет задачу, т.к. необходимо прописывать дополнительные мета-теги rel=«alternative» и rel=«canonical» во избежание дублированного контента, а также работать над продвижением мобильного сайта отдельно от основного. Это касается и внутренней, и внешней оптимизации;
  • продвижение регионов. Если с адаптивом все более или менее понятно. Для каждого города необходимо просто прописать spb.moysait.ru. Для мобильной же версии желательно делать привязку каждого региона через Яндекс. Справочник, а это зачастую требует общения с техподдержкой. Как вы понимаете, процесс может затянуться. Если же следовать стратегии и создавать отдельные поддомены для каждого региона, то потребуется дополнительное время на отслеживание статистики, исправление ошибок и постоянный мониторинг;
  • дополнительные расходы. Расходы на продвижение увеличиваются, на сопровождение – тоже. Дополнительно еще нужно собирать статистику и ее анализировать. Это требует не только времени, но и дополнительных рук, а, возможно, и ног.

А, может, RESS?

RESS (Responsive Web Design и Server Side Components) – в зависимости от устройства, с которого заходят на сайт, данная технология предлагает мобильную версию или адаптивную, используя данные на сервере.

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

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

Недостатки RESS

  • стоимость. Вам придется использовать разный html-код для разных устройств и для одного url-адреса. Это увеличит стоимость разработки;
  • загрузка страниц может быть не такой быстрой. Динамический показ увеличивает нагрузку на сервер, а значит, и страницы могут грузиться медленнее;
  • механизм определения устройств. Программисты должны заранее прописать html-код для разных устройств. Но бывает так, что не популярная модель телефона, не определяется данной технологией и, соответственно, страница грузится некорректно.

В заключении, отмечу, что выбирая между адаптивным дизайном, мобильной версией или динамическим показом (RESS), то не получите 100% работающую версию без минусов. Для начала определитесь с бюджетом – адаптив самый экономный вариант. Если 90% трафика вашего сайта приходится на мобильный, то логично для этой группы пользователей создать отдельный сайт. RESS – это уже следующий этап роста вашей компании и его разработка, безусловно, одно из лучших решений.

Мобильная версия Joomla сайта, три способа реализации

Вступление

Еще год назад я бы начинал эту статью, с рассказа об увеличении количества мобильных пользователей и убеждения о необходимости иметь мобильную версию сайта. Сейчас очевидность корректного отражения сайта на мобильных устройствах не вызывает сомнения и не требует убеждения. Стоит только разобраться, что такое Мобильная версия Joomla сайта и как её реализовать на практике.

Неоценимую помощь в самостоятельном создании сайта могут оказать онлайн курсы программирования. Они помогают получить базовые знания в необходимой области IT, понять мир интернет технологий и возможно найти свою новую специальность в сфере IT. Найти источник хороших курсов программирования не просто, рекомендуем почитать блог https://itvdn.com/ru/blog.

Три подхода к одной проблеме

Обратите внимание, что для пользователя, мобильная версия Joomla сайта это возможность читать и использовать ваш ресурс на своём мобильном устройстве. Пользователю не важно, как вы это реализуете, ему важен результат. Он должен открыть ваш сайт на своём мобильном устройстве и прочитать нужную информацию или совершить нужно действие, например, купить товар.

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

  • Создать мобильную версию сайта;
  • Использовать адаптивный дизайн;
  • RESS (адаптивный веб-дизайн + серверные компоненты).

Посмотрите все три этих решения и выберете лучшее для своих задач.

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

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

К серьёзным минусам этого способа относим:

  • Наличие полного дубля сайта, который нужно либо закрывать от поисковиков, либо работать с мета-тегами rel=» alternative» и rel=»canonical».
  • Не добавляет данный способ удобства для пользователя. Зачем пользователю запоминать ваш сайт по двум адресам или искать кнопку переключения.

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

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

Адаптивный дизайн сайта это способ при котором ширина сайта (max-width: ) автоматические перестраивается под размеры используемого мобильного устройства.

Реализовать адаптивный дизайн не сложно. Выручают CSS3 и HTML5, а также браузеры, которые их поддерживают. При верстке сайта используется метод mobile-first, который по умолчанию показывает сайт в виде одной колонки и меню под кнопкой в «три полоски». С увеличением экрана, сайт начинает раздвигаться.

Адаптивный дизайн Joomla сайта реализуется на уровне шаблонов, который называются отзывчивые (responsive) или просто адаптивные.

Установив именно такой шаблон, вы не будете иметь проблем с отображением вашего сайта на мобильных устройствах. Только нужно в настройках шаблона включить этот «отзывчивый режим».

По теме статьи: Что такое адаптивный шаблон Joomla 3 и Где скачать шаблон Joomla

Явные плюсы этого способа не требуют комментариев. Так как найти отзывчивый шаблон для Joomla 3 это не проблема, больше того, практически нельзя найти не адаптированный шаблон для Joomla 3.x, то этот вариант лучший.

Расширения адаптивного дизайна

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

Responsivizer

Компонент для создания адаптивного мобильного сайта, на версиях Joomla 1.5, 1.6, 1.7, 2.5, 3.x. Стоит компонент 59$. Вот его адрес в каталоге расширений: https://extensions.joomla.org/extension/responsivizer/.

Mobile Joomla!

Хорошее расширение, позволяющее адаптировать ваш сайт Joomla для iPhone, iPad, Android. К сожалению, работает только на версиях Joomla! 1.5, 1.6, 1.7, 2.5, 3.0, 3.1. Вот адрес сайта этого инструмента:  https://www.mobilejoomla.com/.

RESS

В начале статьи я упоминал о способе RESS (адаптивный веб-дизайн + серверные компоненты). На Joomla он реализовывался расширением Mobile Joomla!.  Возможно будут другие попытки.

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

Вывод

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

©joomla3-x.ru

Еще статьи

{module Шаблоны Any}

 

{module Подписка}

Почему мобильная версия вашего сайта необходима для вашего бизнеса уже сегодня!

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

Сегодня веб-сайт, оптимизированный для мобильных устройств, просто необходим. Портативные устройства — это то, что большинство людей используют для доступа в Интернет, и данные, потребляемые каждый день, просто огромны.Интересно, что к 2021 году оценочное использование данных во всем мире на всех мобильных устройствах составит колоссальные 49 экзабайт (1 экзабайт = 1 миллион терабайт) в месяц.

Ниже приведены 4 основные причины, по которым ваш веб-сайт должен иметь мобильную версию:

1. Google любит это

Основным фактором, который помогает определить рейтинг веб-сайта в результатах поиска Google, является удобство пользователей. Адаптивность к мобильным устройствам, естественно, делает веб-сайт более удобным для пользователей, и у него больше шансов занять более высокое место в рейтинге по сравнению с другими.

2. Рост числа пользователей мобильных телефонов

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

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

3. Пользователи мобильных телефонов приносят прибыль

Согласно опросу, впечатляющие 74% пользователей мобильных телефонов совершают покупки через поисковые системы.Удивительно, но более 83% готовы совершить покупку в течение 24 часов, тогда как 55%, скорее всего, сделают то же самое всего за 1 час.

4. Актуальность маркетинга в социальных сетях

 

Сегодня маркетинг в социальных сетях имеет решающее значение для любого предприятия. Продвижение вашего бизнеса в Facebook, Snapchat, Instagram и т. д. поможет вам достичь миллионов с минимальными усилиями. Однако, поскольку 91% действий в социальных сетях происходит на мобильных телефонах, весьма вероятно, что трафик, поступающий из социальных сетей на ваш веб-сайт, будет заходить на ваш сайт на их телефонах, что делает обязательным для вас сделать свой веб-сайт удобным для мобильных устройств.

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

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

7 веских причин, почему вам нужен мобильный сайт в 2019 году

В среднем люди проводят со своими смартфонами 5 часов в день. И нет, это не только видео с кошками на YouTube (хотя их много).

Более половины пользователей смартфонов обнаружили новую компанию или продукт при поиске на своих смартфонах.

Наличие в 2019 году веб-сайта, оптимизированного для мобильных устройств, — это не просто хорошая идея, это необходимо. Прочтите 7 причин, по которым он нужен вашей компании.

1. Ваши клиенты используют мобильные устройства

Самая важная причина номер 1, по которой вам нужен адаптивный веб-сайт, заключается в том, что ваши клиенты используют свои мобильные устройства. 57% всего веб-трафика приходится на мобильные устройства.

Более половины ваших клиентов проверяют вас со своих смартфонов. Какой опыт вы им даете?

2.Построить доверие

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

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

3. Будьте конкурентоспособными

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

Как вы думаете, какой бизнес выберет ваш клиент при просмотре со своего смартфона?

4. Расширьте свою видимость

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

Адаптивные веб-сайты упрощают обмен информацией в Интернете, поэтому ваши посетители с большей вероятностью будут делиться информацией на своих социальных платформах.

Кроме того, удобство для мобильных устройств — это символ рейтинга в Google. Это означает, что сайты, оптимизированные для мобильных устройств, занимают более высокие позиции в результатах поиска.

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

5. Удерживайте их внимание

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

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

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

Не теряйте большую часть потенциальных клиентов. Сделайте свой сайт адаптивным.

6. Улучшение просмотра для ваших посетителей

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

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

Навигация по сайту проста и интуитивно понятна. Делиться контентом естественно и легко. Самое приятное то, что сайт загружается быстро, а текст легко читается и помещается на маленьком экране.

7. Упростите клиентам возможность связаться с вами

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

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

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

Спасибо за прочтение! Мы надеемся, что эти 7 причин, по которым вам нужен сайт, оптимизированный для мобильных устройств, убедили вас сделать его своим главным приоритетом.

Затем ознакомьтесь с этими 4 важными советами по поисковой оптимизации, которые помогут вам стать рок-звездой.

8 инструментов для простого создания мобильной версии вашего сайта

Кредит:

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

Мобильная сеть развивается. По данным Netmarketshare, использование iOS, операционной системы для мобильных устройств Apple, таких как iPhone и iPad, почти удвоилось всего за семь месяцев (с марта 2010 г. по октябрь 2010 г.). Это показатель того, сколько людей все больше и больше просматривают веб-сайты через свои мобильные устройства, а не через компьютеры.

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

Как работают эти инструменты

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

Эти инструменты работают, обнаруживая пользовательский агент посетителей вашего сайта, что является всего лишь причудливым разговором о том, использует ли посетитель обычный веб-браузер или мобильный веб-браузер. Если пользовательский агент является мобильным браузером, пользователи перенаправляются на мобильную версию вашего сайта. Обычной практикой является присвоение мобильной версии вашего сайта субдомена m.yourwebsite.ком. Таким образом, трафик вашего сайта разветвляется на два сегмента, предоставляя всем посетителям вашего сайта оптимальный опыт просмотра.

1. Мобифай

Кредит:

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

Если у вас есть интернет-магазин, еще лучше! У Mobify есть платформа Mobile Commerce, специально предназначенная для интернет-магазинов для мобильного Интернета.

Mobify работает по модели freemium, но его бесплатная версия очень щедра и включает возможность для личного домена (например, m.yourwebsite.com). Платные планы начинаются с 249 долларов в месяц и включают такие функции, как удаление логотипа Mobify на вашем мобильном сайте, мобильную аналитику для отчетов о статистике трафика сайта и так далее.

2. Wirenode

Кредит:

Такие компании, как Ford, Nokia и Reebok, используют Wirenode, генератор мобильных веб-сайтов, который помог более чем 50 000 веб-сайтов создать версии своих сайтов для мобильных устройств.

Бесплатный план включает в себя удобный редактор для разработки вашего мобильного сайта, бесплатный хостинг до трех мобильных сайтов, отчеты о статистике веб-сайта и многое другое. Платные планы начинаются с 15 евро в месяц (около 19,80 долларов США) с такими обновлениями, как поддержка пользовательских доменов и удаление рекламы Wirenode.

3. Миппин Мобилизатор

Кредит:

Если у вас мало времени, Mippin Mobilizer — это инструмент без излишеств, который займет у вас несколько минут.Все, что вам нужно сделать, это ввести URL-адрес RSS-канала вашего сайта, настроить некоторые параметры, зарегистрировать учетную запись, установить код на свой сайт, и все готово! Когда вы настраиваете свой мобильный сайт, он имеет предварительный просмотр в реальном времени с правой стороны, чтобы вы могли видеть прогресс дизайна вашего сайта по мере его настройки.

4. Онлайн

Кредит:

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

5. Винксайт

Кредит:

Если вы заинтересованы в создании онлайн-сообщества на основе вашего мобильного сайта, попробуйте Winksite, веб-приложение для создания мобильного сообщества для вашего сайта.

Он даже генерирует ваш собственный QR-код, двумерный код, читаемый мобильными устройствами со сканерами QR и используемый для автоматического извлечения текста, фотографий, видео, музыки и URL-адресов.Есть много способов использовать QR-коды для маркетинга малого бизнеса. Вы можете распечатать свой QR-код на своей визитной карточке, в печатной рекламе и других фирменных материалах, и когда мобильные пользователи захотят посетить ваш мобильный сайт, им просто нужно будет использовать камеры своих мобильных устройств для сканирования QR-кода.

Если вы хотите сгенерировать QR-код без использования Winksite, воспользуйтесь бесплатным веб-инструментом под названием QR-Code Generator.

6. МобилПресс

Кредит:

Используете ли вы платформу публикации WordPress для своего веб-сайта? Если это так, вам повезло, потому что существует множество подключаемых модулей WordPress для автоматического создания мобильной версии вашего веб-сайта.Одним из таких плагинов является MobilePress, бесплатный плагин WordPress для создания мобильной темы для вашего сайта на базе WordPress. Еще один плагин WordPress, который стоит рассмотреть, — это WordPress Mobile Edition.

7. iWebKit

Кредит:

iWebKit — это простая платформа для создания собственных приложений для iPhone/iPod touch. Его можно использовать, например, для создания приложения, такого как приложение Mashable для iPhone.

Хотя iWebKit может использоваться кем угодно, даже без знания HTML, он не так удобен для пользователя, как другие инструменты, упомянутые выше, и требует, чтобы вы загрузили и установили приложение, а также прочитали руководство пользователя.Но за небольшие временные затраты (деньги не нужны, платформа iWebKit бесплатна) вы можете получить свое собственное приложение для iPhone, как у больших детей.

8. MoFuse

Кредит:

MoFuse загружается с большим набором функций для создания и управления вашим мобильным сайтом. Он предназначен для агентств, новостных СМИ и малого и среднего бизнеса. Цены варьируются от 7,95 до 199 долларов в месяц и включают такие функции, как отчеты по аналитике сайта, поддержку более 5000 различных мобильных устройств, поддержку клиентов, менеджер QR-кода и многое другое.

Бонус: ресурсы для тестирования и оценки

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

mobiReady — этот инструмент проверит ваш сайт на соответствие dotMobi и W3C mobileOK, наборам стандартов мобильных веб-сайтов, которые обеспечивают оптимальное и доступное взаимодействие с мобильным сайтом.Он также ищет ошибки и предоставляет удобный отчет обо всех обнаруженных ошибках. Его легко использовать — просто введите URL-адрес своего мобильного сайта.

W3C mobileOK Checker — у W3C есть официальный инструмент для проверки мобильного сайта на «удобство для мобильных устройств».

iPad Peek — У вас нет iPad? Ничего страшного, вы все еще можете увидеть, как ваш мобильный сайт выглядит на популярном мобильном устройстве Apple, используя этот инструмент, который имитирует то, что люди видят на iPad.

Рекомендации по мобильному Интернету 1.0 — W3C, орган по стандартизации многих веб-технологий (таких как CSS, HTML и JavaScript), имеет документ, в котором излагаются передовые методы мобильного Интернета. Это предназначено для веб-разработчиков и может быть довольно сухим чтением, но стоит потратить несколько минут, чтобы прочитать и просмотреть его.

Дополнительные бизнес-ресурсы от Mashable:

— 5 тенденций дизайна, которые малый бизнес может использовать в 2011 году

— 10 бесплатных тем WordPress для малого бизнеса

— 5 красивых тем Tumblr для малого бизнеса Бизнес

— 5 важных вопросов в социальных сетях от владельцев малого бизнеса

Мобильный, адаптивный, адаптивный или десктопный сайт?

В Интернете не все веб-сайты одинаковы.На мобильном устройстве пользователи могут столкнуться с одним из следующих типов сайтов:

.
  • Мобильные выделенные сайты предназначены для мобильных телефонов.
  • Веб-приложения — это специальный тип мобильного сайта, который выглядит и воспринимается как приложение.
  • Сайты с адаптивным дизайном — это сайты, предназначенные для множества устройств с разными размерами экрана; они автоматически подстраивают макет своего контента под доступный размер экрана.
  • Полный (или рабочий стол) Сайты предназначены для настольных компьютеров и не оптимизированы для мобильных устройств.

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

Сайты, предназначенные для мобильных устройств, — это сайты, разработанные специально для мобильных телефонов. Они часто находятся под отдельным URL-адресом (например, m.site.com) и полностью отличаются от полного сайта. Они содержат функции или контент, которые считаются подходящими для мобильных устройств; часто это лишь часть того, что доступно на рабочем столе.Их часто противопоставляют адаптивным сайтам, которые обычно содержат одинаковый контент и функциональные возможности для мобильных устройств и настольных компьютеров, но перестраивают эти функции на мобильных устройствах.

Веб-приложения

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

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

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

Transport for London (tfl.gov.uk) — это адаптивный сайт. На рабочем столе содержимое было отформатировано в 3 столбца. В версиях tfl.gov.uk для планшетов (слева) и для мобильных устройств (справа) содержимое рабочего стола отображалось в двух и одном столбцах соответственно.

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

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

Адаптивный сайт Authenticjobs.com: в настольной версии была возможность опубликовать новую вакансию, которой не было в мобильной версии. Мобильная версия Authenticjobs.com: хотя сайт был адаптивным, мобильная версия не включала все функции, доступные на настольном компьютере.

Специализированные мобильные сайты и адаптивные сайты

Вот некоторые относительные преимущества и недостатки этих двух подходов.

  • Адаптивные сайты могут поддерживать различные устройства и размеры экрана с помощью одной реализации. Выделенные сайты зависят от устройства: компании должны создавать отдельные сайты для мобильных и настольных компьютеров. Напротив, один и тот же адаптивный сайт может хорошо работать на различных устройствах и размерах экрана, от смартфонов до планшетов и настольных компьютеров.
  • Адаптивные сайты предлагают одинаковый контент и функции (по крайней мере, в некоторой степени). В отличие от мобильных сайтов, по крайней мере теоретически, одинаковый контент и функциональность доступны на всех версиях адаптивного сайта. (Мы видели, что на практике некоторые адаптивные сайты пропускают контент и функции для мобильных устройств, но в меньшей степени, чем мобильные сайты.) Больше не нужно решать, какие функции важны для мобильных устройств, а какие следует исключить. Хотя вам все еще нужно расставить приоритеты функций и решить, как их размещать на небольших экранах.
  • Раньше адаптивные сайты было легче найти с помощью поисковой системы. Мобильные сайты имеют другой URL-адрес, чем сайты для настольных компьютеров, и изначально они не всегда унаследовали высокий поисковый рейтинг от своего родственного сайта для настольных компьютеров. В результате мобильные сайты могли отображаться ниже в результатах поиска.И даже если настольные сайты обнаружат мобильных клиентов и перенаправят пользователей на соответствующий мобильный сайт, перенаправление может занять дополнительное время и ухудшить работу мобильных пользователей (плюс, это также может повлиять на SEO).
    Поскольку один URL-адрес соответствует всем версиям адаптивного сайта, адаптивным сайтам не нужно беспокоиться о поисковой оптимизации или переадресации.
    Однако в настоящее время современные поисковые системы научились работать с мобильными сайтами и перенаправляют пользователей на мобильную версию сайта, если она доступна.
  • Адаптивные сайты сохраняют содержимое и поддерживают функции. Один сайт и один репозиторий содержимого легче поддерживать, чем несколько отдельных сайтов. Однако любое изменение интерфейса должно быть проверено на всех устройствах.
  • Разработка адаптивных сайтов, как правило, обходится дороже. Наши клиенты сообщают, что процесс создания всего адаптивного сайта с нуля может быть более дорогостоящим, чем просто создание отдельного мобильного сайта. Кроме того, для адаптивных сайтов требуются более продвинутые навыки разработки.
  • Адаптивные сайты работают медленнее. Несмотря на то, что существуют методы повышения производительности адаптивных сайтов, поскольку один и тот же контент доставляется на все типы устройств, загрузка адаптивной страницы может занять больше времени, чем загрузка страницы для мобильных устройств.
  • Адаптивные сайты хуже подходят для сложных задач и контента. Сложные задачи трудно одинаково хорошо выполнять на всех устройствах. Сложные электронные таблицы, сравнительные таблицы и визуализации часто трудно масштабировать на маленьких мобильных экранах.Сайты, посвященные мобильным устройствам, часто могут принять решение опустить такой контент, особенно потому, что пользователи стараются избегать выполнения сложных задач на смартфонах.
  • Адаптивные сайты плохо интегрируются с существующими сторонними сервисами. Если вы создаете сайт, который опирается на отдельную независимую серверную службу (например, систему бронирования на сайте отеля), часто сложно интегрировать интерфейс этой службы в адаптивный сайт.

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

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

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

Основное преимущество адаптивного дизайна заключается в том, что он решает проблему медленного времени отклика , которая часто мешает адаптивному дизайну.

Полные сайты на мобильных устройствах?

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

Наконец, пользователи время от времени заявляют, что мобильный сайт оболванен: он слишком простой и бедный. Один из наших участников пытался забронировать номер на мобильном сайте отеля. Первое, что она сказала, увидев сайт, это то, что он был очень скромным, и она ожидала более яркого веб-сайта от этой компании (которая оказалась большим отелем-казино в Лас-Вегасе).Тем не менее, она смогла быстро закончить оговорку. В конце концов, она оценила простоту сайта и была приятно удивлена ​​тем, насколько легко ей было выполнить задание.

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

Заметка о фаблетах

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

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

Заключение

Выделенный для мобильных устройств, отзывчивый или адаптивный — все это возможные способы реализации мобильных пользовательских интерфейсов. (Размещение десктопного сайта на мобильном устройстве тоже возможно, но мы не рекомендуем его.) У каждого из них есть преимущества и недостатки, и они даже влияют друг на друга . Для пользователей нет различия между ними. Обычные люди не признают, что отзывчивые или адаптивные сайты отличаются от мобильных сайтов, и не относятся к ним по-разному. (Единственный способ, которым вы, как конечный пользователь, можете сказать, что сайт реализован в адаптивном дизайне, — это изменить размер окна, в котором он отображается на рабочем столе, чтобы проверить, перестраивается ли содержимое. И это не то, что пользователи будут делать, если они не повторное участие в нашем семинаре Масштабирование пользовательских интерфейсов .)

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

Отзывчивый против отдельного мобильного сайта против динамического обслуживания

ОБНОВЛЕНИЕ

— 25 октября 2017 г.: несколько человек спрашивали меня, актуальны ли приведенные ниже рекомендации в свете индексации Google для мобильных устройств, которая, вероятно, будет постепенно внедряться где-то в 2018 г. Ответ: да.Приведенная ниже информация по-прежнему актуальна, и, в частности, можно будет иметь отдельный мобильный сайт. Ключевым моментом является то, что ваш отдельный мобильный сайт должен иметь полный контент, метаданные, структурированную разметку и т. д., которые есть на ваших страницах для настольных компьютеров, если вы хотите, чтобы они сохраняли тот же рейтинг. Поскольку сложно поддерживать два отдельных веб-сайта, полностью адаптивный дизайн часто имеет смысл, но это все же не является жестким требованием. Еще неизвестно, будет ли у Google обнаруживаемая предвзятость к любому из трех вариантов ниже — адаптивный, отдельный мобильный сайт или динамическое обслуживание — когда мы на самом деле начнем измерять ранжирование в индексе mobile-first.-JR

ОБНОВЛЕНИЕ

— 11 мая 2016 г.: я изначально написал этот пост до обновления Google «Mobilegeddon» в апреле 2015 г., и я был рад видеть, что так много людей считают его полезным при выборе между адаптивным дизайном и отдельным дизайном мобильного сайта. а также динамическое обслуживание. С моей точки зрения, все, что вы здесь прочтете, по-прежнему актуально, так что читайте с уверенностью! -JR

Индустрия SEO гудит разговорами о грядущем обновлении алгоритма Google для мобильных устройств 21 апреля 2015 года.Если вы получаете значительный поисковый трафик с мобильных устройств и у вас нет мобильного веб-сайта, есть вероятность, что это изменение затронет вас через пару недель.

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

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

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

На изображении ниже показан типичный сценарий адаптивного дизайна. Как видите, буквально одна и та же страница доставляется на все устройства, будь то десктоп, мобильный или планшет. Каждый пользовательский агент (или тип устройства) вводит один URL-адрес и получает один и тот же HTML-контент.

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

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

[Tweet «Адаптивный дизайн — отличный выбор для мобильных устройств, но не единственный вариант SEO-оптимизации для мобильных устройств.”]

Плюсы и минусы адаптивного дизайна:

Плюсы Минусы
  • Проще и дешевле в обслуживании.
  • Один URL для всех устройств. Нет необходимости в сложной аннотации.
  • Нет необходимости в сложном обнаружении и перенаправлении устройств.
  • Большие страницы, которые подходят для настольных компьютеров, могут медленно загружаться на мобильных устройствах.
  • Не предлагает полностью ориентированный на мобильные устройства пользовательский интерфейс.

 

Отдельная мобильная площадка

Вы также можете разместить мобильную версию своего сайта на отдельных URL-адресах, таких как мобильный поддомен (m.example.com), совершенно отдельный мобильный домен (example.mobi) или даже в подпапке (пример .com/мобильный). Любой из них хорош, если вы правильно реализуете двунаправленную аннотацию между настольной и мобильной версиями.

Обновление

(25.10.2017): Хотя приведенное выше утверждение по-прежнему верно, следует подчеркнуть, что отдельный мобильный сайт должен иметь тот же контент, что и его эквивалент для настольных компьютеров, если вы хотите сохранить тот же рейтинг после того, как Google будет ориентирован на мобильные устройства. выкатывается индекс.Это включает в себя не только контент на странице, но и структурированную разметку и другие теги заголовков, которые могут предоставлять важную информацию для поисковых систем.

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

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

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

Плюсы и минусы отдельного мобильного сайта:

Плюсы Минусы
  • Предлагает дифференциацию мобильного контента (возможность оптимизации для мобильных устройств)
  • Возможность адаптации пользовательского интерфейса, полностью ориентированного на мобильные устройства.
  • Более высокая стоимость обслуживания.
  • Более сложные требования SEO из-за двунаправленной аннотации. Может быть более подвержен ошибкам.

Динамическое обслуживание

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

На изображении ниже показан типичный сценарий для отдельного мобильного сайта.

Google рекомендует вам дать им подсказку о том, что вы изменяете контент на основе пользовательского агента, поскольку не сразу видно, что вы это делаете.Это достигается путем отправки HTTP-заголовка Vary, чтобы сообщить Google, что Googlebot для смартфонов должен посетить версию URL, оптимизированную для мобильных устройств.

Плюсы и минусы динамического обслуживания:

Плюсы Минусы
  • Один URL для всех устройств. Нет необходимости в сложной аннотации.
  • Предлагает дифференциацию мобильного контента (возможность оптимизации для мобильных устройств)
  • Возможность адаптации пользовательского интерфейса, полностью ориентированного на мобильные устройства.
  • Комплексная техническая реализация.
  • Более высокая стоимость обслуживания.

Какой метод подходит именно вам?

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

Каким бы ни был ваш подход, сообщение ясно и ясно: ваш веб-сайт должен быть оптимизирован для мобильных устройств. Учитывая, что обновление алгоритма для мобильных устройств, как ожидается, окажет значительное влияние, я предсказываю, что 2015 год будет напряженным для фирм, занимающихся веб-дизайном.

Делиться заботой!

Если вы выбираете между настольным или мобильным сайтом, выберите мобильный

Джон Мюллер из Google недавно заявил, что владельцы сайтов должны отдавать приоритет своему мобильному сайту, если у них есть и настольная, и мобильная версии.

Эта тема обсуждалась в видеовстрече Google Webmaster Central, состоявшейся 1 мая 2020 г.

Вопрос: Сосредоточиться на мобильной или настольной версии для SEO?

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

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

С точки зрения поисковой оптимизации, на какой версии сайта владелец должен посвятить свое время и ресурсы?

Вот что говорит Мюллер.

Ответ Джона Мюллера

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

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

В связи с этим, по словам Мюллера, владелец сайта должен сосредоточиться на мобильной версии.

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

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

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

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

Прослушайте полный вопрос и ответ в видео ниже:

«Итак, в целом, если бы мы переключили веб-сайт на индексирование с приоритетом мобильных устройств, а сейчас мы переключили большинство веб-сайтов на индексирование с приоритетом мобильных устройств, то мы будем использовать только мобильную версию для индексирования в качестве основа для понимания того, что находится на сайте…

[Мы будем использовать только мобильную версию] в качестве основы для понимания контекста между отдельными URL-адресами веб-сайта, поэтому мы действительно будем использовать для этого только мобильную версию.

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

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

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

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

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

Таким образом, переход на адаптивный дизайн сделал бы это намного проще.

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

Дополнительные ресурсы

Должен ли мой сайт быть мобильным? (Да, должен.)

Как маркетинговое агентство, занимающееся веб-разработкой, мы проводим много времени, общаясь с владельцами бизнеса об их веб-сайтах. Поскольку мы в основном обслуживаем рынок B2B, один из наиболее частых возражений, который мы слышим: «Должен ли мой веб-сайт быть мобильным? Никто не будет покупать у меня на свой телефон!»

Ответ: Да. Ваш веб-сайт

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

Представьте, что ваш отдел продаж проигнорировал бы половину звонков клиентов, которые они получили в течение дня. Представьте, если бы они проигнорировали 20%. Представьте, если бы они проигнорировали 5% . Вы были бы в порядке с этим?

Очевидный ответ: , конечно, не . Ни одна компания никогда не будет следовать такой опрометчивой стратегии.

Но что, если я скажу вам, что тысячи компаний ДЕЙСТВИТЕЛЬНО придерживаются такой стратегии каждый день, только немного по-другому. Вместо того, чтобы игнорировать половину своих телефонных звонков, они игнорируют половину посетителей своего веб-сайта.(Сюда входит и самый важный, которым оказался паук. Но мы доберемся до него.)

Зачем компании это делать? Потому что их сайт не оптимизирован для мобильных устройств.

А как насчет вашей компании? Знаете ли вы, есть ли у вас мобильный веб-сайт B2B или B2C? Потратьте 30 секунд и воспользуйтесь этим мобильным адаптивным тестовым инструментом, чтобы выяснить это.

Как дела? Если ваш сайт получил плохой отчет, не волнуйтесь. Это просто означает, что вы находитесь в правильном месте. Потому что сегодня мы поговорим о том, почему ваш веб-сайт действительно должен хорошо работать на смартфонах, планшетах и ​​других устройствах.

Пойдем шаг за шагом.

Почему так важен мобильный сайт (даже для B2B)

Знаете ли вы, что 51,89% глобального веб-трафика приходится на мобильные устройства? В ближайшие годы это число будет только расти. Но если это так, то почему так много компаний (особенно B2B) спрашивают: «Должен ли мой сайт быть мобильным?» и вернуться с «нет»?

Есть две причины. И мы слышим их все время:

  1. «Никто не просматривает наш сайт с телефона.
  2. «Никто не занимается бизнесом по телефону».

Если вы читаете это и согласно киваете головой, у меня для вас плохие новости. Оба эти утверждения ложны. Продолжайте читать, и я докажу это вам.

«Никто не просматривает наш сайт с телефона».

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

Смартфоны есть у 77% американцев, и у многих есть планшеты. Вероятность того, что 90 257 кого-то 90 258 зайдет на ваш сайт с мобильного устройства, высока.

Зачем тебе это?

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

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

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

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

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

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

Должен ли мой веб-сайт быть мобильным? Гугл говорит да.

Даже в том маловероятном случае, если никто не зайдет на ваш сайт со своего мобильного устройства, будьте уверены, что Google это сделает.

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

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

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

Это означает, что если ваш сайт не отвечает, Google увидит в вас врага.И вы будете оштрафованы за плохой мобильный опыт.

Кикер? Есть только один индекс — это не мобильные и десктопные версии. Они объединены. Даже если у вас есть красиво оформленный веб-сайт, оптимизированный для настольных компьютеров, ваш рейтинг упадет, если вы не позаботитесь о своем мобильном присутствии.

Если ваш рейтинг SEO низкий, меньше людей увидит ваш сайт. А значит меньше конверсий. Обращаясь к алгоритму Google, вы на самом деле просто обращаетесь к людям, для которых он был так тщательно разработан — вашим клиентам, вашим будущим сотрудникам, СМИ и многим другим.

Итог: Да, люди ДЕЙСТВИТЕЛЬНО просматривают ваш сайт на своих телефонах. И самый простой и безболезненный способ заставить людей увидеть ваш контент — сделать сайт удобным для мобильных устройств.

«Никто не занимается бизнесом B2B по телефону».

В частности,

предприятия B2B часто подвержены так называемому «проецированию». Именно тогда они делают предположение о том, как думают клиенты, основываясь не на каких-то конкретных данных, а на том, как они сами думают и чувствуют.

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

Может быть, вы не ищете решения B2B на мобильном устройстве. Но часть ваших клиентов, безусловно, делает.

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

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

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

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

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

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

.
  1. Запросы на таблицы стилей
  2. Проценты
  3. Навигация

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

Запросы СМИ CSS

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

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

На ноутбуке ваши столбцы могут выглядеть так:

Но на iPad эта же страница распределяет столбцы по-другому, чтобы соответствовать мобильным устройствам, например:

Хотя это может показаться незначительным изменением, на самом деле это так.

На техническом жаргоне эти инструкции выглядят так:

(Ого, да? Вот почему вы оставляете это разработчику.) 

Проценты

Чтобы создать сайт, удобный для мобильных устройств, вместо указания ширины и высоты объектов в пикселях используйте проценты.(Другими словами, не говорите, что что-то должно быть шириной 200 пикселей. Скажите, что оно должно покрывать 30% страницы.) Проценты обеспечивают гибкость, которая является основной концепцией адаптивных веб-сайтов.

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

Вернемся к нашему примеру со столбцом.

На рабочем столе вы можете спроектировать его таким образом, чтобы левый столбец занимал 33% области просмотра, а правый — 66%, как показано ниже:

Это позволяет таблице стилей знать, как настроить в соответствии с различными размерами области просмотра.

Кроме того, вы можете сообщить таблице стилей с помощью другого медиа-запроса, что, если область просмотра опустится до точки останова iPad, размер столбцов должен быть 50/50. Для iPhone вы можете создать правило для каждого столбца на 100%:

.

Навигация

И последнее, но не менее важное: давайте поговорим о том, как работать с панелью навигации.

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

Вот почему самый распространенный способ справиться с панелью навигации — это скрыть ее, чтобы она не переполняла окно просмотра — вот так:

Примечание: Если вы хотите, вы можете сделать еще один шаг (и выиграть много баллов Google), развернув AMP — технологию Google, предназначенную для максимально быстрой доставки контента в любую сеть.Это выходит за рамки адаптивности и требует фундаментальных изменений в коде веб-сайта.

Заключение: «Должен ли мой сайт быть мобильным?» Да!

Каждый бизнес — B2C или B2B — должен думать о дизайне сайта, удобном для мобильных устройств. Игнорирование этого факта может означать игнорирование до половины вашей клиентской базы.

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

Altitude Marketing знает, как веб-сайты B2B должны выглядеть, чувствовать и реагировать на все типы устройств. Мы знаем, потому что мы проверяли, что работает, и учились на том, что не работает, снова и снова.

Leave a Reply