Как сделать мобильный клиент для сайта
Обновлено: 08.07.2024
Как быстро и просто сделать адаптацию сайта под мобильные устройства
Зачем нужна специальная мобильная версия сайта?
Все основные поисковые системы лучше ранжируют те ресурсы, которые удобны для использования с любых устройств. Если ваш сайт не адаптирован под мобильные устройства, шансы попасть в ТОП-3 выдачи Яндекса или Google очень малы.
Наличие адаптационного дизайна увеличивает конверсию посетителей в заказчики, а также уменьшает показатель отказов, который важен при ранжировании.
Для примера показатели из Метрики одного русскоязычного ресурса без адаптационной верстки:
Показатель отказов при входе со смартфонов в 2,5 раза выше, а с планшетов – почти в 2 раза, чем со стационарных компьютеров или с ноутбуков. Это говорит о потере потенциальных клиентов из-за отсутствия специального сайта для мобильных устройств. А так как количество людей, использующих переносные гаджеты с небольшими экранами, постоянно растет, количество упущенных заявок через интернет-сайт будет постоянно расти, а позиции в поиске – снижаться.
Согласно исследований Equation Research 46 % пользователей не заходят повторно на сайт, если в предыдущий раз им что-то не понравилось. То есть где-то половина из тех, кто составляет статистику по отказам – это те, кого вы упустили практически навсегда.
Что лучше и удобней: адаптивный дизайн или специальная верстка под мобильные устройства?
Благодаря адаптивному дизайну сайт будет хорошо автоматически отображаться с любого устройства. Сделать так несложно, но вес страницы при заходе с мобильного будет таким же, как с компьютера. То есть через мобильный интернет сайт будет открываться чуть дольше, чем со стационарного компьютера или ноутбука, подключенных через вай-фай или провод. Это может привести к закрытию сайта пользователем из-за нежелания ждать.
Так выглядит один и тот же сайт с адаптивным дизайном на разных устройствах
Мобильная версия – это полноценный индивидуальный дизайн специально для пользователей мобильных устройств, находящийся на поддомене, куда посетителя перенаправляют автоматически. Это удобно для пользователей, так как страницы быстро грузятся. Но это не очень хорошо, если смотреть с позиции SEO-продвижения сайта, так в этом случае поисковая система воспринимает домен и поддомен как два разных ресурса, а переход с одного на другой происходит через редирект. К тому же, этот вариант более дорогой в реализации.
Так выглядит сайт на планшете и смартфоне с полноценной мобильной версией
Что дает сайту адаптация под мобильные гаджеты?
Как просмотреть сайт на экранах с разной диагональю без соответствующих гаджетов?
Чтобы увидеть оптимизацию сайта для мобильных устройств или ее отсутствие, используйте:
● Quirktools – просто введите адрес сайта и выберете интересующие вас устройства;
● Ipadpeek – для проверки отображения на гаджетах компании Apple;
● F12 – нажмите на клавишу, а потом на значок с телефоном. Самый простой и доступный вариант, который не требует захода на специальные сервисы.
Оценка удобства сайта для мобильных устройств
Как улучшить сайт под мобильные устройства?
Кое-что для улучшения отображения ресурса на мобильных вы можете сделать самостоятельно, без обращения к программистам, верстальщикам или дизайнерам.
Задайте правильные атрибуты у полей
Если на вашем сайте авторизация проходит через ввод имени пользователя и пароля, откажитесь от autocorrect в пользу autocapitalize:
Для удобства ввода адреса почты:
Удобная ширина экрана для мобильных устройств
- Откройте сайт и уменьшайте размер браузера до тех пор, пока контент не станет нечитабельным. Так узнаете минимальную ширину для @viewport.
- Пропишите этот тег в head страницы:
Сделайте ширину изображения равной 100 %
Избежать превышения размера используемых изображений на мобильных устройствах можно путем установки ширины для них в 100 % в CSS-коде сайта:
Для фоновой картинки задайте:
Еще одна рекомендация по картинкам:
Измените ширину полей ввода на 100 %
Для ширины полей input добавьте в CSS-код:
Благодаря этому поля будут по ширине экрана используемого пользователем гаджета.
Используйте word-wrap для длинных строк
Хотите, чтобы посетители вашего сайта под мобильные устройства не сталкивались с подобным? Тогда вам следует использовать word-wrap. Для этого пропишите:
Обратите внимание на пробелы
Выполните замену пробелов отступами при помощи:
Ваш код: 43514 3a1b5 fc8bb
Это сделает удобным копирование информации при посещении сайта с планшета или смартфона.
Специальные стили для мобильной верстки сайта
Задайте целевые стили в медиа-запросах:
Уберите fixed позиционирование
Фиксированное размещение на странице заголовка или сайдбара может навредить, заняв весь экран мобильного устройства:
Создать мобильную версию сайта можно тремя способами:
- Сделать отдельный сайт для мобильных устройств на поддомене;
- Создать мобильные приложения под популярные мобильные ОС (iOS, Android, Windows Phone);
- Использовать адаптивную верстку на сайте.
Со вторым пунктом всё ясно: если вы умеете программировать под мобильные платформы, то это не составит труда, а если нет - нужно заплатить денег профессионалам.
Мобильная верстка
Основные принципы создания мобильной версии сайта:
Если говорить об адаптивности мобильной версии под мобильные устройства, то нужно учитывать, что элементы на экране должны быть достаточно большого размера, разнесены между собой. При верстке необходимо использовать "резиновую" сетку (это означает, что размеры элементов должны меняться в зависимости от размера экрана). Этих принципов стоит придерживаться при проектировании мобильной версии.
Адаптивная верстка
Основные варианты использования адаптивной верстки:
- Использование CSS3 Media Queries (в стилях сразу указываются все необходимые данные для нескольких вариантов разрешения экрана). Пример:
- На сайте происходит детектирование разрешения экрана пользователя и в зависимости от него подгружается определенный CSS-файл с соответствующими стилями:
Здесь параметр screen относится к обычным компьютерам, а handheld - к мобильным устройствам.
Здесь файл nubexMobile.css подгружается для устройств с шириной экрана меньше 480 px.
Таким образом, в зависимости от типа вашего сайта можно выбрать подходящий тип поддержки мобильных устройств. При верстке мобильной версии может оказаться полезным сервис от Google: PageSpeed Insights, который укажет на ошибки и недочеты при разработке.
Сегодня трудно найти популярный сервис или сайт, который не имел бы приложения для Android. Проблема в том, что многие из этих приложений слишком громоздкие и требовательные к системным ресурсам. С помощью Hermit вы сможете сами создать Android-приложение для любимого сайта, содержащее только те функции, которые вам действительно нужны.
Программа Hermit позволяет создавать мобильные приложения для операционной системы Android на основе мобильных версий различных сайтов. Такой подход обеспечивает сохранение полной функциональности данного ресурса и вместе с тем добавляет несколько полезных дополнительных функций, в том числе интеграцию с системой уведомлений Android.
Для того чтобы создать lite-версию клиента для своего любимого сайта, следуйте этой инструкции.
- Установите приложение Hermit с помощью ссылки для скачивания, размещённой в конце статьи.
- Откройте приложение и нажмите на круглую кнопку в правом нижнем углу.
- Введите адрес сайта или выберите один из уже имеющихся в библиотеке Hermit.
- Укажите название для создаваемого вами приложения и нажмите на кнопку Create.
- Настройте параметры своего приложения. Для этого перейдите в раздел Customize и активируйте необходимые вам опции.
Иконка созданного вами приложения автоматически добавляется на рабочий стол. По умолчанию используется значок Hermit, но вы можете всегда поменять его на свой собственный. Точно так же легко настраивается внешний вид приложения: цвета, шрифты, загрузка картинок и так далее. В результате созданная вами lite-версия приложения будет иметь точно такой вид, какой вы захотите.
Не рекомендуется использовать содержание данной статьи для освоения новой функциональности.
Полное описание новой функциональности будет приведено в документации к соответствующей версии.
Полный список изменений в новой версии приводится в файле v8Update.htm.
Реализовано в версии 8.3.12.64 мобильной платформы.
Мы реализовали новую технологию – мобильный клиент. Она позволяет создавать приложения для мобильных устройств, которые сочетают в себе удобный интерфейс мобильной платформы и онлайн-работу с информационной базой по аналогии с тонким клиентом.
Сценарии мобильной работы
Эта технология позволяет создавать специализированные офф-лайн мобильные приложения, обладающие удобным и функциональным мобильным интерфейсом. Мобильные приложения разрабатываются для решения конкретных мобильных задач, максимально для них оптимизированы с точки зрения архитектуры и интерфейса. Такие приложения реализуют именно мобильные сценарии работы, с ними удобно работать как на планшетах, так и на смартфонах.
Получается, что неохваченным оказывается значительный круг задач, обладающий следующими характерными особенностями:
Мобильный клиент
Для решения такого класса задач мы разработали мобильный клиент. Мобильный клиент это тонкий клиент для мобильных устройств, который обладает интерфейсом, аналогичным мобильной платформе. Дистрибутив мобильного клиента содержит все необходимые исполняемые файлы, из которых разработчик может собрать приложение для мобильного устройства аналогично тому, как собираются мобильные приложения из мобильной платформы.
Такое приложение, с одной стороны, может напрямую взаимодействовать с кластером серверов 1С:Предприятия точно так же, как это делает тонкий клиент. С другой стороны мобильный клиент обеспечивает автоматическую трансформацию форм, декларативно описанных в конфигурации, в интерфейс, аналогичный интерфейсу мобильной платформы.
Формы, разработанные для настольной версии 1С:Предприятия, он автоматически компонует таким образом, чтобы обеспечить удобство работы с ними на маленьких экранах мобильных телефонов на приемлемом уровне.
Конечно, для того, чтобы эта трансформация выполнялась ещё лучше, специально для мобильного клиента нужно указать некоторые новые свойства элементов формы, избавиться от каких-то особенных и нестандартных интерфейсных решений. То есть требуется некоторая переработка прикладного решения именно под мобильного клиента. Но эта переработка гораздо проще, чем создание специализированного полнофункционального мобильного приложения.
Потенциальные пользователи
Также мобильный клиент будет востребован в небольших компаниях, у которых нет ни бюджета, ни времени для разработки специализированных мобильных приложений. Ведь по нашим оценкам наиболее сложным этапом разработки мобильных приложений является как раз создание системы обмена данными.
Функциональность
Другое преимущество мобильного клиента заключается в том, что он работает не только с той версией сервера, для которой он был собран. Он будет работать почти что с любой версией сервера до тех пор, пока не произойдёт какое-то существенное изменение протокола обмена или архитектуры платформы. Мы сделали это потому, что публикация мобильных приложений достаточно трудоемкий и длительный процесс, который практически невозможно выполнить одновременно с переводом кластера серверов на новую версию платформы.
Другое ограничение, впрочем, как и для мобильной платформы, заключается в недоступности некоторых объектов встроенного языка и некоторых элементов интерфейса. Но мы будем стараться эти различия минимизировать по мере развития мобильного клиента.
Автоматизация построения интерфейса форм
При создании мобильного клиента мы уделили много внимания тому, чтобы адаптация конфигурации для мобильного клиента требовала минимальных усилий. Мы разработали несколько технологий и подходов, чтобы большие формы, разработанные для настольной версии, автоматически адаптировались к маленьким экранам мобильных устройств.
Например, мы выяснили, что большие формы, как правило, имеют незначительное количество важных элементов. То есть таких элементов, работа с которыми идет постоянно. И в то же время в них есть много менее важных элементов, работа с которыми работа выполняется время от времени.
Соответственно чтобы обеспечить достаточный уровень удобства работы с формой, мобильный клиент важным элементам даёт больше места на форме, а менее важным элементам даёт меньше места, убирая их, например, в сворачиваемую группу.
Во-вторых, мобильный клиент разворачивает горизонтальные группы вертикально, если они не помещаются по ширине экрана. На мобильных устройствах не принято и неудобно прокручивать форму по-горизонтали, поэтому такое решение вполне удобно и оправдано.
Адаптация конфигураций к мобильному клиенту
Несмотря на всю автоматизацию, от разработчика конфигурации все равно потребуются некоторые усилия для адаптации прикладного решения для мобильного клиента.
Не углубляясь в подробности можно сказать, что все такие доработки укладываются в два основных направления.
Первое, это избавиться от особенных и специфических интерфейсных решений, больше полагаясь на автоматическую компоновку форм, выполняемую платформой на основе информации о типах данных. Такими специфическими решениями могут быть фиксированные размеры полей, жестко установленная горизонтальная группировка элементов и тому подобное.
Другое направление – это подсказать мобильному клиенту дополнительную информацию об элементах формы. Мы научили мобильный клиент легко распознавать элементы в стандартных или в небольших формах, и определять их важность. Но если форма нестандартная или большая, то будет полезно вручную указать, какие из ее элементов являются более и менее важными. Для этого вы можете использовать новое свойство элементов – ВажностьПриОтображении: высокая, обычная, низкая и т.д.
Также, вероятно, нужно будет проанализировать те места прикладного решения, в которых алгоритмы работы для тонкого клиента и для веб-клиента различаются. Это нужно сделать для того, чтобы указать, какой из алгоритмов будет использоваться при работе в мобильном клиенте. Для этого мы добавили новую директиву компиляции МобильныйКлиент.
Дистрибутив, сборка и публикация
Поэтому мы не публикуем мобильный клиент как отдельное универсальное приложение. Мобильный клиент поставляется вместе с мобильной платформой в виде набора исполняемых файлов. На основе этих файлов разработчик должен собрать приложение, которое будет работать на мобильном устройстве. Процедуры сборки и публикации приложений, что для мобильной платформы, что для мобильного клиента, схожие. Используется один и тот же инструмент – сборщик мобильных приложений.
Чтобы мобильный клиент, публикуемый в магазин приложений, имел фиксированную функциональность, при его сборке необходимо указать конкретные конфигурации, с которыми будет работать это приложение. В процессе работы мобильный клиент проверяет, что используется только одна из заданных конфигураций и без существенных изменений. Это специальная защита для того, чтобы мобильный клиент, который опубликован для определенных конфигураций, не мог работать с другими конфигурациями. Как показывает практика, пользователям удобно, чтобы одно мобильное приложение соответствовало какой-то одной конфигурации, или схожим конфигурациям.
Читайте также: