Доля мобильных пользователей ежегодно растет. За последний год она увеличилась на 12,5% (по даннымРИФ+КИБ 2016) и составляет около 20-30% от пользователей Рунета (по даннымВедомостей). Найти информацию по пути на работу или оставить заявку, стоя в очереди за утренним кофе, давно стало обыденным процессом. Клиенты привыкли к мобильности. А можно ли назвать ваш сайт mobile-friendly?
Каждый руководитель современной компании сталкивается с проблемой выбора мобильного решения для бизнеса. Достаточно ли респонсив-верстки, нужна мобильная версия сайта или даже мобильное приложение? Есть ли спрос на B2B-приложения, как выбратьоперационную систему и нужно ли вам это?
Давайте попробуем разобраться.
Содержание
Респонсивная и адаптивная версии сайта
Обе верстки служат для того, чтобы сделать сайт более комфортным для доступа с мобильных устройств. Различия заключаются в технике подстройки под девайсы.
Респонсивный дизайн (от англ. responsive – отзывчивый, гибкий) плавно подстраивается под ширину устройства, тогда как адаптивный (от англ. adaptive – подстраиваемый) ориентируется на основные точки. Другими словами, сайт с адаптивным дизайном меняет вид только при критичных различиях в ширине, а респонсивный даже при небольших изменениях параметров.
Преимущества этих версий:
- Удобство для чтения на различных мобильных устройствах;
- Небольшие затраты на запуск – не нужно создавать отдельный сайт;
- Соответствует политике ранжирования Google.
Недостатки:
- Представление полного объема информации – контент не адаптируют под нужды мобильных пользователей;
- Ухудшается пользовательский опыт с ПК – дизайн, ориентированный на удобство просмотра с мобильного экрана, часто смотрится неудачно на экранах десктопов.
Мобильная версия сайта
Урезанная версия основного сайта, на котором содержится только та информация, которую открывают с мобильных девайсов. Часто используют поддомен, добавляя m. или mobile. в URL сайта.
Преимущества:
- Быстрая загрузка страниц, так как информация значительно сокращена;
- Легкость правки: мобильная версия обособлена от основного сайта;
- Удобная навигация, так как учитываются нужды пользователя;
- Интерактивные функции, которые улучшают пользовательский опыт. Например, использование геолокации для поиска ближайшего офиса вашей компании.
Недостатки:
- Затраты на поддержку двух сайтов. Чтобы мобильная версия была актуальной, нужно дублировать все обновления с основного сайта.
- Разные структуры сайтов. Если клиент привык к навигации на сайте, могут возникнуть трудности при поиске на мобильной версии.
- Дополнительный поддомен особенно неудобен при шеринге информации. Например, если вы скинули ссылку на интересную группу коллеге со своего сматрфона. При переходе с компьютера, вы попадете на «растянутую» мобильную версию страницы. Мелочь, но неприятная.
Мобильная версия ВКонтакте на десктопе
Мобильное приложение
Специально разработанное приложение для мобильных ОС (iOS, Android, Windows), независимое от сайта компании. Распространено заблуждение, что разработка собственного приложения обеспечит конкурентоспособность компании. Это не совсем так: само приложение не сделает работу за вас, однако при верном использовании этот инструмент обладает высоким потенциалом.
Ситуации, когда приложение разрабатывать не стоит:
- Для размещения информации. Пользователи привыкли обращаться к поисковикам за информацией. Клиенты установят приложение, только если предоставить особенно полезные функции.
- Для статуса. Приложения конкурентов – не причина для разработки собственного. Проанализируйте, пользуются ли спросом приложения конкурентов. Разберитесь, что привлекает пользователей – понятная навигация, режим офлайн, оплата банковской картой?
- Для резкого увеличения количества клиентов. Поймите, простого размещения мобильного приложения недостаточно для успеха. Чтобы привлечь новых клиентов, приложение должно быть в разделе «популярное» или нести большую ценность. Например, приложение от «Тинькофф Банк» позволяет без процентов совершать переводы с любых карт. Сделайте постоянных клиентов счастливее – они не только станут лояльными, но и расскажут всем своим знакомым.
Чтобы мобильное приложение было актуальным для клиентов, нужно в первую очередь выяснить их потребности:
- Отследите действия клиентов, выполняемые с помощью гаджетов;
- Определите, после какой страницы пользователи покидают сайт;
- Выясните причины возникновения «брошенной» корзины;
- Изучите достоинства успешных приложений.
Используйте приложение как дополнительный инструмент с уникальными возможностями, на которые не способен ваш сайт:
- Безопасная оплата банковской картой;
- Премиум-функции;
- Элементы дополнительной реальности и игрофикации;
- Интеграция с CRM;
- Программа бонусов зарегистрированным пользователям;
- Распознание QR-кодов;
- Онлайн-консультация специалиста и др.
Преимущества:
- Приятный интерфейс для мобильных устройств;
- Скорость работы;
- Возможность добавления интерактивных функций;
- Увеличение лояльности клиентов;
- Улучшение узнаваемости бренда.
Недостатки:
- Высокая стоимость разработки;
- Правила и ограничения магазинов приложений;
- Время разработки приложения.
Лучшая стратегия для разработки B2B-приложения – создавать его на iOS. Многочисленность бизнес-пользователей iPhone, а также поддержка Apple в развитии рынка с помощью B2B App Store, оправдывают выбор операционной системы.
Подведем итог
Респонсивная версия сайта – недорого и без излишеств. Отличный вариант, чтобы сайт был доступен с мобильных устройств и не потерял позиции в поисковиках. Актуально компаниям малого бизнеса с основным доходом, не завязанным на интернет-продажах.
Мобильная версия сайта – быстрота, удобство в навигации. Урезанная версия сайта, предоставление актуального функционала для доступа с гаджетов. Дешевле мобильного приложения, однако учитывайте затраты на поддержание двух сайтов и оптимизацию. Подходит для компаний со средним заработком через интернет, клиенты которых регулярно посещают сайт и пользуются дополнительными возможностями.
Мобильное приложение – современно и эффективно. Независимая от сайта платформа с уникальными интерактивными возможностями. Рекомендуется для средних и крупных компаний, готовых сделать вложения в развитие узнаваемости бренда и увеличение уровня лояльности существующих клиентов.
Невозможно дать однозначный ответ, какой из методов взаимодействия подойдет вам лучше всего. Экспериментируйте и общайтесь с клиентами – они подскажут, чего вам не хватает.
CMS «Web.Perspective» разработана специалистами Центра БГУ с учетом всех нормативно-правовых актов РБ и современных интернет технологий.
В данной системе созданы и функционируют множество сайтов, в том числе:
- портал Министерства образования — edu.gov.by
- сайт БГУ — bsu.by
На сегодняшний день пользователями CMS «Web.Perspective» являются:
- более 50 управлений и отделов образования
- более 1200 общеобразовательных школ и гимназий
- более 400 учреждений дошкольного образования
- более 100 учреждений дополнительного образования
- более 100 учреждений профессионально-технического образования
Учебный центр БГУ «Шаг в Будущее» Республиканского научно-исследовательского унитарного предприятия «Центр информационных ресурсов и коммуникаций» подготовил ряд практических семинаров.
Основная тематика семинаров связана с работой в системе «WebРerspective».
Целевая аудитория всех практических семинаров — это:
- Ответственные за сопровождение официального сайта (работающие в детских дошкольных учреждениях, средних школах, гимназиях, лицеях, колледжах, центрах детского творчества, интернатах, отделах и управлениях образования, учреждениях дополнительного и профессионально-технического образования образования)
- Инженеры-программисты
- Операторы ЭВМ
- Учителя информатики учреждений образования
- Представители администрации учреждений образования, ответственные за информатизацию.
Программа и тематика семинаров подобраны с учетом особенностей и специфики работы с сайтом в CMS WebPerspective.
Мы понимаем, что поддерживать сайт в надлежащем виде с актуальной информацией, функциями «одного окна» и т.п. требует наличия на местах грамотного специалиста, разбирающегося в основах обработки веб-страниц. Нередко такие специалисты переходят на новые места работы, и в этом случае сайт учреждения «прекращает» работать – новости не обновляются, посетители вашего сайта не имеют возможности воспользоваться актуальной информацией, узнать ФИО руководителя, расписание занятий и иной важной информацией.
Чтобы помочь справиться с такой работой, для сотрудников, ответственных за наполнение сайта актуальной информацией, на нашей базе проводятся постоянные семинары-практикумы. На семинарах-практикумах наши ведущие специалисты, согласно отработанной программе смогут в короткий срок обучить ваших ответственных управлять важными объектами CMS «WebРerspective». Будут отработаны практические навыки использования основных возможностей CMS «WebРerspective».
Наши семинары подготовлены с учетом принятого 1 марта 2013 года ГОСУДАРСТВЕННОГО СТАНДАРТА РЕСПУБЛИКИ БЕЛАРУСЬ СТБ 2105-2012 «ИНТЕРНЕТ-САЙТЫ ГОСУДАРСТВЕННЫХ ОРГАНОВ И ОРГАНИЗАЦИЙ.
Наш Учебный центр провёл более 100 Республиканских семинаров по CMS WebPerspective, опытные преподаватели, продуманные практические задания, необходимый теоретический материал — приглашаем Вашего сотрудника, ответственного за сайт, пройти обучение по работе с CMS «WebРerspective»!
| № |
Название |
Стоимость | Дата проведения семинара | Длительность семинара |
Уровень |
Что необходимо иметь |
|
|---|---|---|---|---|---|---|---|
| 1 |
Основы работы с официальным сайтом учреждения образования в системе Web.Perspective (для новичков) |
||||||
 |
30 руб. |
19 сентября |
1 день (5 часов) |
начальный (базововый уровень владения компьютером) | конспект, ручку, пароль пользователя editor для входа в систему CMS WebPerspective | ||
| 2 | Эффективная работа с официальным сайтом учреждения образования в системе WebPerspective | ||||||
 |
35 руб. |
28 сентября |
1 день (7 часов) |
базовый (есть минимальные навыки работы с CMS WebPerspective, вы умеете выполнять простейшие операции на сайте учреждения образования) | конспект, ручку, пароль пользователя designer или admin для входа в систему CMS WebPerspective | ||
| 3 |
Дополнительные возможности системы Web.Perspective. |
||||||
 |
35 руб. |
октябрь 2019 года |
1 день (7 часов) |
базовый (есть lдостаточные навыки работы с CMS WebPerspective, умеете выполнять простейшие операции на сайте УО) | конспект, ручку, пароль пользователя designer или admin для входа в систему CMS WebPerspective, желательно наличие эл. почты www.gmail.com | ||
| 4 |
Создание тематического сайта для учреждения образования в системе Web.Perspective |
||||||
 |
35 руб. |
декабрь |
1 день (7 часов) |
начальный или базовый (базовый уровень владения компьютером) | конспект, ручку, пароль пользователя designer или admin для входа в систему CMS WebPerspective | ||
| 5 |
Создание 3d панорам и виртуальных экскурсий на официальном сайте учреждения образования в системе Web.Perspective |
||||||
|
35 руб. |
осень 2019 года |
1 день (7 часов) |
базовый (есть минимальные навыки работы с CMS WebPerspective, вы умеете выполнять простейшие операции на сайте учреждения образования) | конспект, ручку, пароль пользователя designer или admin для входа в систему CMS WebPerspective | |||
| 6 |
Каскадные таблицы стилей CSS – основа создания профессионального сайта |
||||||
|
44 руб. |
осень 2019 года |
4 дня (16 часов) |
средний (вы знаете основы HTML, слышали о CSS, уверенно пользуетесь CMS Web.Perspective, выполняете все основные операции на сайте учреждения образования) | конспект, ручку, хорошее настроение |
|||
| 7 |
JavaScript: первый уровень — базовые возможности |
||||||
|
44 руб. |
осень 2019 года |
4 дня (16 часов) |
средний (вы знаете на базовом уровне HTML, знаете основы CSS, слышали о JavaScript, уверенно пользуетесь CMS WebPerspective, выполняете все основные операции на сайте учреждения образования) | конспект, ручку, хорошее настроение |
|||
| 8 |
Реализация слайдеров на главной странице официального сайта учреждения образования в системе WebPerspective |
||||||
|
35 руб. |
зима |
1 день (7 часов) |
средний (вы знаете на среднем уровне HTML, знаете основы CSS, слышали о JavaScript, уверенно пользуетесь CMS WebPerspective, выполняете все основные операции на сайте учреждения образования) | конспект, ручку, пароль пользователя designer или admin для входа в систему CMS WebPerspective | |||
В настоящее время, всё больше и больше людей используют электронные устройства для упрощения своей жизни. Использование громоздких ПК плавно перетекло в ноутбуки, а теперь и в смартфоны. Крупные компании, как Apple, Dell и Microsoft хотят получить часть рынка смартфонов: ожидается, что к концу 2011 года, мировые продажи смартфонов побьют мировые продажи ПК.
Именно поэтому мобильная веб разработка очень актуальна сейчас. Продажи смартфонов растут каждый день и это говорит о необходимости повышенного внимания к интерфейсам для мобильных устройств. Как удовлетворить все запросы от пользователей, которые становятся все более и более требовательными? Как сделать так, чтобы люди могли смотреть сайт, как на Full HD монитор, так и на мобильном телефоне?
У веб-разработчиков всегда были проблемы с кросс-браузерностью. Теперь у них есть еще одна головная боль: кросс-платформенность, потому что Android приложение никогда не будет работать на iPhone и наоборот.
Целью данной статьи является рассмотрение проблем веб-разработчиков, в связи с появлением смартфонов, предложение пути их решения и показ эффективного решения на практике, изпользуя фреймворк Sencha Touch. Основная проблема заключается в том, что все больше и больше людей используют и хотят использовать интернет на своих мобильных устройствах, но не все сайты готовы предоставить эту услугу.
Обзор мобильного веба
Прежде всего, важно понять, почему людям на самом деле нужна мобильная версия сайта. Может быть, кто-то скажет, что слишком маленький процент пользователей, посещают веб-сайт с помощью мобильного телефона, чтобы думать над этим. На самом деле, он не прав. Согласно статистике Facebook «более чем 250 миллионов активных пользователей в настоящее время заходят на Facebook через мобильные устройства. » Facebook насчитывает более 500 миллионов активных пользователей, так что 50% из них являются мобильными пользователями. 75% пользователей YouTube сообщают, что мобильный является их основным способом доступа к контенту.
Почему так? Потому, что люди не всегда могут носить с собой компьютер или ноутбук, а мобильный телефон всегда рядом.
Самый простой способ узнать процент посетителей, использующих мобильные девайсы, это запустить Google Anlytics. Не забудьте обратить внимание на типы устройств и операционных систем, которые используются вашими пользователями. Попытайтесь понять, почему пользователи посещают сайт, используя мобильное устройство и какие функции необходимы им.
В настоящее время многие разработчики после создания веб-сайта тестируют его в различных браузерах (IE, Firefox, Chrome, Opera и Safari) и не думают о том, как их создание будет смотреться на мобильном устройстве. Компании должны правильно оценивать, то как быстро смартфоны и другие мобильные устройства меняют способ доступа клиентов в Интернет, как делает BBC.
Варианты создания
Есть несколько возможностей создать приложение для сматрфонов. Первый способ: нанять Objective-C программиста, который пишет код для iPhone и iPad, Java-программиста, который пишет для Android, BlackBerry и. NET программиста, который пишет для Windows Phone 7.
Как видите это не самое лёгкое решение, поэтому я предлагаю ещё одно: веб-приложение.
Вот основные преимуществ для создания веб-приложения, а не native:
• Кросс-платформенность.
• Гораздо проще найти HTML программиста, чем эксперта в Objective-C или. NET.
• Гораздо проще переделать один веб-сайт, чем изменить дизайн для каждого native приложения.
• Вы можете обновлять свой сайт в любое время.
• Пользователи предпочитают браузеры, а не собственные приложения .
Часто компании начинают задумывать о мобильной версии с того, что «нужно iPhone или Android приложение» вместо того, чтобы разобраться, что их пользователи используют не только эти платформы.
Есть много приложений для сматрфонов с операционной системой Android или iOS, но а как насчёт Windows Phone 7, Blackberry и Symbian? Кто хочет учить ещё одну SDK, кто хочет учить ещё один язык? Кто будет обновлять код на всех платформах при малейших изменениях?
Стоит разрабатывать native приложение только в том случае, если вам нужен доступ к камере, акселометру и т.д. Да и то, это до поры до времени.
Существует только один способ поддержки всех платформ: использование веб-стандартов, и сейчас этот стандарт HTML5 .
Проблемы мобильной разработки
В дополнении к проблеме кросс-платформенности о которой я писал выше, на любом девайсе может быть разные веб-браузеры. Например, пользователь с Android телефоном может зайти ваш сайт используя, как браузер по умолчанию, так и Opera Mini или Firefox Mobile.
Общие проблемы для разработчиков под мобильные девайсы:
• Размер экрана. Девасов много и у всех разный размер, начиная с 240 x 320 и заканчивая 800 x 480. Это значит, что разработчик не может делать дизайн фиксированой ширины, он должен меняться в зависмости от устройства.
• Ориентация. Мало того эти 240 x 320 легко могут превратиться в 320 x 240.
• Touchable. Должно быть достаточно места между разными кликабельными элементами.
Рекомендации по созданию мобильных приложений
Основная цель разработки для мобильных устройств заключается в изменении макета для меньшего дисплея.
Мобильный веб-страницы можно просматривать в двух режимах: портрет и пейзаж. Используя JavaScript вы можете получить доступ к window.orientation:
• 0 — портретная ориентацию
• -90 И 90 — альбомная ориентация
Вы можете также использовать событие orientationchange для выполнения какие-либо действия, когда пользователь переворачивает устройство. Этот пример просто устанавливает атрибут класса при изменении текущей ориентации:
window.onorientationchange = function() { var orientation = window.orientation; switch(orientation) { case 0: document.body.setAttribute(«class»,»portrait»); break; case 90: document.body.setAttribute(«class»,»landscape»); break; case -90: document.body.setAttribute(«class»,»landscape»); break; } }
После загрузки страницы на мобильном устройстве URL строка ввода исчезает только при прокрутке.
Но можно это сделать и программно:
window.addEventListener (‘load’, функция () { setTimeout (ScrollTo, 0, 0, 1); }, False);
Оптимизация для мобильного сайта означает, что вы должны уменьшить количество запросов к серверу:
• Используйте один CSS.
• Используйте CSS Sprites.
• Используйте HTML5 local storage для кэширования данных.
Советы по дизайну
• Не пытайтесь заполнить все пустое пространство на экране. Все пользователи имеют разные скорости соединения, поэтому сайт не должен «весить» слишком много. Чрезмерное количество изображений, текста, кода и т.д. не только ухудшает восприятие пользователями сайта, но и значительно увеличивает время загрузки.
• Даже на маленьком экране, пользователь не должен иметь проблем с чтением текста.
• Около интерактивных элементов сайта должно быть достаточно пространства, чтобы нажать на них. Всё, чего пользователь касается должна быть не менее размера среднего пальца.
• Показывайте прогресс загрузки с помощью анимации.
Тестирование мобильных приложений
Существует очень широкий спектр мобильных устройств, но, к сожалению, веб-разработчики не могут так легко проверить свои веб-приложения, как они делают это на PC. С одной стороны, тестирование должно проходить на реальных устройствах, но покупка устройства для каждой платформы глупо. Для большинства платформ есть эмуляторы устройств, некоторые из них даже онлайн. Об одном даже писали на хабре.
Upd: Спасибо easyman: «Живые» Nokia для тестов.
Создание собственных мобильных приложений
Фреймворков для мобильный приложений достаточно, я пробовал вот эти пять: jQTouch, iWebKit, Wink Toolkit, jQuery Mobile и Sencha Touch. Три первых не очень хороши — они поддерживают только одну или две платформы. Два оставшихся — это то из чего стоит выбирать. Прочитав это, я решил начать с Sencha Touch. Кроме того, я уже имел опыт работы с Ext JS (продукт из семейства Sencha). Последнее время руководствуюсь такой схемой при новом проекте: если надо поддержка большого количества платформ, то использую jQuery Mobile, но обычно заказчикам хватает iOS + Android, тогда мой выбор: Sencha Touch — там действительно великолепная документация.
Sencha Touch поддерживается следующими платформами: iOS, Android, WebOS, BlackBerry + на Chrome, Safari.
В качестве примера покажу простенькую игру, платформы все вышеперечисленные.
Это моя первая и пробная статья, хочу понять насколько пользователям интересна данная тема, вообще собираюсь писать статьи/уроки по разработке мобильных веб приложений, используя фреймворки Sencha Touch и jQuery Mobile.
Ссылки
Facebook Statistics www.facebook.com/press/info.php?statistics
YouTube Mobile users report googlemobileads.blogspot.com/2010/11/75-of-youtube-mobile-users-report-that.html?m=0
