+7-978-839-68-16 | office@udvstudio.com

UDV в facebookUDV в google+UDV в Вконтакте

Меню

Мобильность сайта что это такое и для чего необходимо?

Всё чаще в последнее время у заказчиков сайта возникают вопросы про мобильность и адаптивность дизайна сайта. Вопрос очень актуальный, который нужно было решать и поднимать уже вчера. На данный момент согласно статистике LiveInternet (большого ресурса по сбору данных о посещаемости в русскоязычном сегменте интернета)? на мобильный трафик приходится 51% от общего числа выходов в интернет — это значит что более половины пользователей нуждаются в мобильном сайте и если он не отвечает таким требованиям, его попросту игнорируют и уходят к конкуренту, который заблаговременно решил эту проблему. Очень важным моментом является то, что при продвижении сайта его мобильность играет большую роль. Так, что адекватное отображения сайта на разных устройствах, не только удобство пользователей, но и бонус  проекту от поисковых систем.

Так что же такое мобильность сайта.

Мобильность сайта — это его способность одинаково удобно, полно и информативно отображаться и функционировать на различных устройствах (персональном компьютере, ноутбуке, планшете и смартфоне). Простыми словами, вам придётся прокручивать страницу только вверх или в низ, а не вправо и влево что бы найти нужное на странице сайта, все кликабельные элементы достаточного размера, что бы нажиматься с первого раза, а не промахиваться и нажимать всё, что можно. Формы заказа и обратной связи удобны и вполне могут быть заполнены с мобильного телефона и не вызовут неудобств. Текст шрифта легко читаем и не требует увеличения. Зачастую пользователь при виде неадаптивного сайт просто покидает его, если ресурс не содержит уникальной и очень необходимой информации.
Проверка мобильности и адаптивности
Проверить мобильность сайта можно зайдя на него с мобильного или планшета, либо воспользоваться сервисом http://www.responsinator.com/ в левом верхнем углу вводим адрес (URL) нажимаем GO и видим результат. Так же проверить проект и его готовность к мобильным устройствам можно используя инструменты для вебмастеров от Яндекс и Google. Если результаты нас не устраивают и вы понимаем, что адаптивность в проекте не используется, то необходимо, что-то решать.
Хорошей веб студии вполне по силам исправить ситуацию с мобильностью на уже существующем сайте, но удовольствие не из дешёвых, цена может быть равна половине суммы заплаченной за созданный сайт с нуля (в зависимости от выбранного варианта решения проблемы). Лучшим решением будет продумать данный нюанс при создании сайта и чётко прописать это условие в техническом задании заказать сайт с адаптивным дизайном.

Варианты реализации мобильности сайта

Существует несколько вариантов выхода из данного положения:

1.

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

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

 Сайт веб студии с компьютера

Сайт веб студии на ПК

Адаптивный дизайн сайта веб студии

Сайт веб студии на мобильном

 

 

2.

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

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

lari

Сайт на ПК.

Адаптивный дизайн сайта стоматологии

Сайт на мобильном.

 

3.

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

Метод заключается в том, что вы имеете два сайта, один для мобильного, другой для персонального компьютера. Мы создаём два сайта site.com (обычный) и m.site.com (который отображается автоматически для мобильных устройств). Сайты имеют идентичный дизайн, но обычно у второго варианта более урезанный функционал. Сложность метода в том, что вам необходимо заказывать разработку сразу двух сайтов и продвигать по сути придется их по отдельности, так же по отдельности придётся наполнять их материалами, должна быть очень тонкая техническая настройка, что бы мобильный сайт и основной показывались чётко на тех устройствах, которых должны а не наоборот. Данный метод подходит минимальному количеству сайтов, для остальных является дорогим пережитком прошлого.
Пример, популярная социальная сеть вконтакте, правда она использует ещё и приложение для мобильных телефонов, так как мобильная версия сайта не полностью справляется с задачей.

Сайт VK на компьютере

Версия сайта VK на компьютере

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

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

4.

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

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

Мобильное приложении футбольного сайта

Мобильное приложении футбольного сайта

Футбольный сайт на ПК

Футбольный сайт на ПК

Проверить мобильность сайта наглядно, можно при помощи этого сервиса responsinator или этого webmark — в них всё интуитвно понятно, необходимо лишь ввсети адрес тестируемого сайта и увидеть результат . Ниже приведён скриншот сайта студии в данном сервисе. Так же можно получить рекомендации и информацию о мобильности вашего сайта в инструментах вебмастеров Яндекс и Гугл.

Тест мобильности сайта

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

Заказать настройку мобильности

Для консультации и заказа настройки мобильности сайта, воспользуйтесь формой обратной связи, телефоном или почтой. Цена от 5 000 рублей, сроки выполнения до 1-го месяца.

phoneТелефон: +7-978-839-68-16 (viber unnamed)

mailaltПочта: office@udvstudio.com

 

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

    • Александр

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

  • Имхо, сейчас все более менее уважающие сайты сначала делают мобильную версию сайта, а после уже создают приложения для Android и iOS. Дань моде, я лично считаю, что приложения не нужны, если есть мобильная версия сайта. Согласны?

Оставить комментарий

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

Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.

Сервис обратного звонка RedConnect