Адаптация под мобильные устройства: Адаптация сайта под мобильные устройства: принципы и методы, как адаптировать сайт под телефоны

Содержание

Адаптация готового сайта под мобильные устройства

05.07.2019

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

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

Можно выделить два основных способа решения этой задачи.

1. Отдельный шаблон сайта для мобильных устройств. RESS подход

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

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

Мобильный шаблон может загружаться на дополнительном домене типа m.domain.com (так реализованы мобильные версии вконтакте, facebook, одноклассники) или прямо на основном, в зависимости от вашего желания или потребностей.

Сайт с отдельным шаблоном для мобильных устройств

2. Адаптивная верстка.

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

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

Рассмотрим плюсы и минусы такого подхода в общем случае:

Пример адаптивной верстки с резиновыми блоками

Варианты реализации адаптивной верстки

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

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

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

Среди разных подходов к реализации адаптивной верстки, можно выделить три основных. Читать дальше…

Вариант первый.

Переключение между состояниями происходит один раз. Например, до ширины экрана 980px мы видим десктопный вид страниц, а на ширине меньше – сразу мобильный вариант. Дизайнер рисует один макет – для мобильного устройства. В шапку сайта подключаются два файла adaptive.css и adaptive.js, которые и управляют состоянием страницы. Мы не вносим изменений в ваш сайт, не дорабатываем шаблоны сайта, все изменения происходят за счет этих двух файлов.

  • Если у шаблона сайта есть проблемы, то они не решаются, а просто маскируются с помощью «костылей».

  • Чаще всего при таком подходе, приходится изменять (вырезать, переставлять, добавлять) блоки с помощью JavaScript. Что негативно сказывается на сео-оптимизации.

  • Код для «мобильного вида» не интегрирован с кодом сайта, что может порождать проблемы при поддержке.

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

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

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

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

  • Это самое дешевое решение.

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

Шаблонная адаптация с резким переходом и резиной.

Вариант второй.

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

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

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

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

  • Это необратимо. Мы не пристраиваем немного своего кода в ваш сайт, мы дописываем и переделываем код вашего сайта.

  • Это дешевле постепенной адаптации страниц (о которой ниже), но нет таких проблем как с первым поверхностным решением.

  • Мы не закрываем проблемы верстки «костылями», мы решаем эти проблемы.

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

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

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

Вариант адаптивной верстки с резкими переходами «экранов» и «ушами».

Вариант третий.

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

Пример сайта с постепенной адаптацией.

Средняя стоимость адаптации готового сайта. И от чего зависит стоимость такой разработки.

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

В данном контексте под «шаблоном» мы будем понимать один типовой элемент сайта.

Разберем на примере среднего интернет-магазина.

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

  1. Шапка и футер сайта. Выделяем в один типовой шаблон, т.к. эти элементы повторяются на всех страницах и для всех страниц они одинаковы.

  2. Главная страница. Все, что находится на главной Вашего сайта. В стандарте, это 1-2 одинаковых слайдера с банерами, 1-2 слайдера с товарами (например, «новинки» и «популярные товары», небольшой статичный текстовый блок.

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

  4. Карточка товара. Страница с подробной информацией о товаре, состоит из картинки (или слайдера с картинками товара), описания продукта, списка характеристик и блока «купить».

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

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

  7. Оформление заказа. Представляет собой форму для отправки заказа с кратким описание состава заказа, проверяемыми полями для пользовательского ввода и кнопкой «отправить заказ».

Средняя оценка разработки.

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

  1. Отдельный шаблон для мобильной версии – 200-350 часов.

  2. Адаптивная верстка, в зависимости от варианта:

    1. Первый вариант (один-два экрана, без внесения изменений в шаблон, только скрипты и стили) – 50-100 часов,
    2. Второй вариант (с изменением шаблона, внедрением стилей в сайт, ограниченное число состояний) — 100-250 часов,
    3. Третий вариант (с изменением шаблона, внедрением стилей в сайт, плавные переходы состояний страниц) – 200-300 часов.

О чего еще зависит цена адаптации сайта?

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

  1. Сложность дизайн макета. (Для всех вариантов).

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

  2. Сложность переносимого функционала. (Для мобильной версии шаблона).

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

  3. Сложные по структуре страницы. (Для адаптивной верстки).

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

  4. Большое количество интерактивных элементов на сайте. (Для адаптивной верстки).

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

  5. Резиновая верстка сайта. (Для адаптивной верстки).

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

  6. Качество верстки. (Для адаптивной верстки).

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

  7. Соответствие дизайна для мобильного устройства существующему виду страниц. (Для адаптивной верстки).

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

Не останавливаемся на одном варианте.

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

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

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

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

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

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

Согласно исследованию Hootsuite за 2020 год 50,1% трафика приходится на мобильные устройства. Это значит, что мобильные версии сайтов и писем — обязательное условие высоких конверсий.

Конструктор UniSender позволяет не просто адаптировать письмо под мобильные, а сделать для них отдельную версию письма. Рассказываем, как настроить разные блоки письма, чтобы оно было адаптивным.

 

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

Настроить размеры картинок

Ширина и расположение картинок на мобильной и десктопной версии отличаются.

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

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

В свойствах блока есть 3 настройки, которые влияют на отображение картинки.

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

Ползунок показывает размер в процентах и пикселях

Автоширина. Нажимаем — и картинка всегда занимает максимальную ширину. Применяется одновременно и для десктопа, и для телефона.

Картинка занимает 65% от всей ширины письма, но если выбрать «автоширину», она всегда будет занимать 100%

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

Картинка на десктопе занимает 45% ширины, а на телефонах — 100%. Такое возможно, только если выбрать «Полная ширина на мобильном»

Свернуть меню

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

Меню поломано, пункт «Бесплатные книги» перенесся на вторую строку

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

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

В блоке «Сворачиващееся меню» есть 5 настроек внешнего вида.

  1. Размер иконки можно регулировать, выбрав из выпадающего меню варианты размеров.
  2. Иконка может быть круглая или квадратная.
  3. Цвет полосочек в сворачивающемся меню задается с помощью палитры или HEX-кода в настройке «Цвет переднего плана».
  4. Цвет самого блока сворачивающегося меню задается в настройке «Цвет фона».
  5. Превью блока сворачивающегося меню всегда доступно в блоке настроек. Можно посмотреть, как будет выглядеть этот блок.

Кликаем на «Сворачивающееся меню» и меняем его настройки

Выровнять карточки товаров

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

Три карточки товаров в ряд. Так они отображаются на десктопе

Картинки, тексты и кнопки стоят друг под другом

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

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

Адаптивность отключили, из-за этого кнопки слегка «прыгают»

Скрыть блоки в мобильной версии

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

Для этого в новом конструкторе в каждом блоке есть настройка «Скрыть». Она располагается в «Свойствах блока» в самом низу.

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

Можно выбрать, какие блоки скрыть на ПК или на мобильном. В одну строку можно поставить 2 блока: один отображать только на десктопе, а второй — только на мобильном.

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

Обратите внимание, на каждой из версий — своя кнопка. А в редакторе их две

Настроить кнопку «Позвонить»

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

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

Чтобы настроить кнопку со звонком, в выпадающем меню «Тип ссылки» выбираем «Позвонить». Если хотим, чтобы при нажатии на кнопку человек переходил на сайт, устанавливаем «Открыть ссылку».

Кнопка «Перейти в магазин» должна вести на сайт магазина. А в мобильной версии можно добавить ссылку, по которой человек будет сразу звонить менеджеру

Настроить обратную последовательность блоков

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

Это значит, что если у вас в письме есть два блока: слева — с изображением, справа — с текстом и кнопкой, то на мобильном пользователь сначала увидит картинку, потом текст и, наконец, кнопку.

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

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

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

Чтобы выбрать обратный порядок, кликните на нужную строку и в свойствах включите режим «Обратный порядок блоков на мобильном устройстве».

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

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

Посмотрите видео о том, как сделать адаптивное письмо в конструкторе

Полезные ссылки

Как работать с блоком меню
Как вставить картинку
Как вставить кнопку
Как адаптировать письмо под мобильные устройства
Правила оформления рассылок для отправки через UniSender

Адаптация сайта под мобильные устройства

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

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

Адаптация сайта под мобильные устройства

И тут есть два варианта:
Создайте свой блог с нуля, чтобы он был доступным для мобильных устройств.
Если вы хорошо разбираетесь в создании веб-сайтов, при создании блога, примите во внимание следующее:
1. Размер экрана
Понятно, что размер экрана мобильного телефона намного меньше, чем в ноутбуке, и многие WAP браузеры просто демонтируют каскадную таблицу стилей (CSS), из-за чего страница отображается в виде текста. Это не совсем эстетично. Что вам нужно сделать, так это убедиться в том, что у вас есть мобильная версия вашего сайта, которая не содержит изображений и максимизирует функциональность вашего сайта.
2. Действующий код
Убедитесь в отлаженности кода вашего веб-сайта, так как мобильные поисковые машины не в состоянии переварить неправильный код.
3.  Следуйте традиционным и лучшим SEO практикам
Пишите краткие, сжатые заголовки постов на блоге, так как именно они будут тем, что мобильный пользователь сначала видит и что заставит его щелкнуть по названию статьи.
Убедитесь в том, чтобы URL структура была как можно более простой. Это означает, что вашим посетителям будет легче ввести адрес вашего сайта или блога.
Используйте лучшую платформу для вашего блога –WordPress

Адаптируем с помощью плагина

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

И как тут работать? Мелкий шрифт, плохо видно… А как пальцем нажимать на сенсорном экране? В общем — всё плохо.

В качестве альтернативного варианта, если вы уже используете WordPress на своем сайте или блоге, вы просто можете установить плагин WP Mobile Detector Mobile Plugin.

В панели управления перейдите в раздел Плагины,затем Добавить новый введите в поиске «WP Mobile Detector Mobile Plugin», как показано ниже, и следуйте инструкциям.

1. Введите плагин, который вы ищите
2. Выберите нужный и нажмите кнопку установки.
3. Ваш плагин должен начать автоматическую установку, которая позволит вам потом его активировать. После активации плагина заходим в Google -PageSpeed Insights и видим уже другую картинку:

Вот теперь всё видно и понятно. Кстати, данный плагин может менять темы оформления. Для этого в панели управления в левой колонке найдите WP Mobile Detector  и в контекстном меню выберите Mobile Themes, откроется страница на которой Вы можете сменить мобильную тему.

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

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

Адаптация сайта под мобильные устройства

Почему нужно адаптировать сайт под мобильные устройства?

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

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

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

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

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

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

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

Почему нужно адаптировать сайт под мобильные устройства

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

Использование адаптированного дизайна сайта является одним из факторов ранжирования, который положительно влияет на продвижения сайта как в Яндексе, так и в Гугл.

Что такое адаптивность сайта?

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

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

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

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

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

Как проверить сайт на адаптивность?

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

  1. Вручную. Перейдите на большой монитор, и начинайте менять расширение в браузере, сдвигая рамку браузера слева и справа. Сайт при изменении расширения должен отображаться корректно, и не терять с экрана важную информацию. Зайдите на свой сайт через телефон или планшет различных размеров, и посмотрите, как он отображается, удобно ли на нем находиться, просматривать категории и делать заказы. 
  2. Панель разработчика. Нажмите F12 и посмотрите версии Вашего сайта на различных устройствах iPad,iPhone,Nexus,Galaxy, и прочие.  
  3. Специальные онлайн сервисы: Google Mobile Friendly, Яндекс Вебмастер (beta), Mobile Checker от W3C, mattkersley.com и прочие.

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

 

Улучшение адаптивности сайта

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

  1. При просмотре адаптированного сайта, дизайн его меняется, картинки видоизменяются и сужаются, блоки разделов и подразделов переставляются.
  2. Сам сайт гораздо быстрее прогружается, так как в мобильной версии отсутствуют лишние графические элементы, «тяжелые» картинки и flash.
  3. Навигация простая и комфортная для пользователя. Ресурс имеет комфортный поиск, вертикальную прокрутку, всю навигацию. Также посетитель должен видеть опцию заказа, корзину и номер телефона компании.
  4. В адаптированной версии посетитель может легко пройти по ссылке, перейти в другой раздел, использовать любой элемент управления.
  5. Тексты на адаптированном сайте читабельны, посетитель не должен испытывать дискомфорт при просмотре товара, характеристик, отзывов.

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

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

  • Продвижение
  • Веб-сайт

Олег Крицкий

Руководитель

Готовы начать?

Позвоните нам:


+7(987)10-55-799

Заинтересованы в сотрудничестве ? Вы можете заказать продвижение своего сайта прямо сейчас

Олег Крицкий

Руководитель

Готовы начать?

Позвоните нам:


+7(987)10-55-799

Заинтересованы в сотрудничестве ? Вы можете заказать создание своего сайта прямо сейчас

Адаптация таблиц под мобильные устройства / Хабр

Для кого эта статья

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

Проблема

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

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

Подопытный набор данных

Для того чтобы понимать лучше суть проблемы, мы придумаем себе таблицу, и будем ее адаптировать.

Колонки:

  1. Номер

  2. Фото

  3. ФИО

  4. Телефон

  5. Email

  6. Дата

  7. Текст описание

  8. Статус

  9. Действия

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

  1. С фиксированной шириной и переносом строк

  2. С шириной по контенту

Анонс следующей статьи “О списках в интерфейсах и как их применять по феншую”.

Десктоп

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

Варианты адаптации

Проблема — наша таблица по ширине не влезает в телефон.

Ошибочные решения

  1. Уменьшать шрифт

  2. Убирать колонки

  3. Делать растровую картинку с таблицей и вставлять ее в макет

Возможные верные решения по убыванию

  1. Каждую строку таблицы делать блоком

  2. Горизонтальный скроллинг

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

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

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

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

Второй вариант — горизонтальный скроллинг таблицы

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

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

Вывод

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

Если вы заметили ошибки, или вам есть что дополнить — дайте мне знать, я обязательно это сделаю. Спасибо за внимание!

Адаптация сайта под мобильные устройства( любая система управления)

Заказать услугу

Адаптивный веб-дизайн (англ. responsive web-design) — проектирование интернет-страниц, создающее правильное отображение сайта, не только на компьютерах, но и на других устройствах — планшетах, ноутбуках и телефонах. Такое программирование сайта предусматривает динамическое подстраиваение отображения контента под размеры экрана. До использования этой технологии сайт отображался одинаково на различных устройствах, если только не была создана специальная мобильная версия. С каждым годом количество пользователей, заходящих на сайт через мобильные устройства, увеличивается, поэтому в настоящее время или мобильная версия или адаптивность становятся всё более важным условием создания качественного сайта. Основные особенности мобильной версии:
— адаптированные (уменьшенные) изображения;
— меньшее количество изображений;
— одноколоночный макет.

Адаптация сайта под мобильные устройства — термины:

  • Mobile first — подход к созданию сайтов, при котором прототипирование сайта начинается с мобильной версии .
  • Адаптивный веб-дизайн, Отзывчивый веб-дизайн (responsive web-design ) — дизайн, который автоматически меняется в зависимости от размеров экрана пользователя.
  • Мобильная версия — версия для мобильных устройств. Появилась задолго до возможности реализации адаптивного веб-дизайна. Выбор отображения при этом чаще всего основан не на определении ширины окна браузер определении типа устройства.

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

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

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

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

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

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

Тенденции в области мобильных веб-сайтов, с нашими рекомендациями:

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

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

Адаптация сайта под мобильные устройства — стоимость

Стоимость адаптации начинается от 4000 р. При оценке сроков и стоимости работынужно учесть много параметров, таких как:

  • Качество верстки
  • Количество страниц
  • Сложность верстки
  • Система управления
  • Наличие анимации и других сложно-масштабируемых элементов.

1. Необходимость адаптации к мобильному — объемы трафика с мобильных платформ

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

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

2. Необходимость адаптации к мобильному — преимущества

Аспект изображения

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

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

Сервис / конверсия

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

Конкурентный аспект

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

Совместимость и поисковые системы

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

3. Адаптация сайтов к мобильным платформам — текущее состояние и тематические исследования

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

4. Техническая настройка мобильных совместимых сайтов

С технической точки зрения, есть две основные конструкции для адаптации сайта к мобильным платформам; 1) на основе игураций (либо на уровне HTML, либо на уровне Uraragraph —>

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

Эта конфигурация уровня URL имеет ряд недостатков:

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

Разработки на уровне кода, а также офицleин URL, одну конфигурацию кода (хотя они таке нительной информации нажмите), сделали эту конфигурацию самой обычной и рекомендуемой сегодня. Эта конфигурация называется Responsive Design, поскольку сам веб-сайт распознает, что такое платформа просмотра (и в большинстве случаев — конкретно определяет размер экрана на платформе просмотра), и реагирует на это. Код на веб-сайте в реальном времени адаптирует дизайн веб-сайта к мобильному устройству. В адаптивном дизайне, независимо от того, какая платформа к нему обращается, всегда используется только один URL-адрес и один и тот же код, который содержит относительные и неопределенные рекомендации по дизайну. Руководство по проектированию «ликвидируется» — иными словами, различные объекты, такие как текст или изображение, не имеют определенного размера, например 100 пикселей, а определяются относительно, например, для представления в 50% от размер экрана мобильной платформы. Эта конфигурация имеет множество преимуществ:

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

Резюме

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

5. Контентная стратегия

При адаптации веб-сайтов для мобильных платформ встает вопрос о стратегии контента. Должны ли мы показывать пользователям мобильных устройств тот же контент, который видят пользователи настольных компьютеров (полностью или частично), или разрабатывать отдельный веб-сайт для каждой организации? Кроме того, имеет больше значение дизайн контента из-за размера экрана мобильных платформ. Некоторые мобильные сайты скрывают или скрывают некоторые менее используемые функции, которые появляются в!-ading {«level»:3} —>

5.1 Структура контента

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

5.2 Объем текста

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

5.3 Макет контента

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

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

5.4 Состав контента — выделенный или дублированный?

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

Это оптимальный способ обработки контента со всех сторон:

  • Это экономит время и работу по созданию контента.
  • Это обеспечивает максимальную совместимость с мобильными устройствами и сохраняет силу в поисковых системах.
  • Это идеальный пользовательский интерфейс для мобильных устройств — пользователь не «наказан» и не пропускает контент только потому, что ю ктура предоставляет пользователю самый богатый и полный контент).
  • Это обеспечивает максимальную прибыль для компании — пользователь получает доступ ко всему контенту и внеь что-то меньшее, просто потому что просмотр осуществляется с мобильной платформы.

Раздельная конфигурация — тенденция, зависящая от характеристик сайта

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

Контентные сайты

Резюме

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

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

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

  • Визуальный акцент — крупные объекты, четкость в призыве к действию.
  • Визуальная «чистота» — минимальное количество объектов на странице.
  • Вертикальный макет — размещение наиболее важных объектов в верхней части страницы.
  • Обычная и эффективная структура — от 1 до 3 критических ссылок в верхней части страницы, за которыми следует визуальный объект и которые основываются на меню.
  • Адаптивный дизайн — контент идентичный исходным страницам. В мобильных веб-сайтах компаний электронной коммерции — обычно это выделенный веб-сайт с очень сильным акцентом на призыв к действию.

Уникальные особенности, которые характеризуют мобильные сайты

Помимо ключевых функций, описанных выше в отношении контента (таких как крупные объекты, минимальное количество объектов на странице и четкое меню), на большинстве мобильных веб-сайте— /wp:paragraph —>

6.1 Автоматическое перенаправление в соот/hing —>

В тех случаях, когда два (или более) отдельных сайта были созданы с использованием разных URL-адресов, многие веб-сайты выбирают стратегию взаимного перенаправления, чтобы гарантировать, что каждая платформа направлена ​​на веб-сайт, который был разработан специально для его размера экрана. Таким образом, пользователи настольных компьютеров, которые обращаются к мобильному веб-сайту, немедленно переводятся (без уведомления и до загрузки сайта) в настольную версию и наоборот. Это один из недостатков этого метода. При использовании Responsive Design нет необходимости активировать сложные процессы, которые определяют, какой пользователь достигает какого сайта, и нет необходимости обновлять список перенаправлений каждый раз, когда на рынке появляется новая мобильная модель.

6.2 Ссылка на параллельный сайт в нижнем колонтитуле

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

6.3 «Складные» панели инструментов и зоны

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

6.4 Боковые панели инструментов

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



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

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

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

Восстание (мобильных) машин

По данным Исследовательского центра Пью, 95% взрослых в США в настоящее время имеют мобильные телефоны, и 77% из них — смартфоны. Число владельцев смартфонов еще выше в возрасте до 50 лет (89% в возрасте 30-49 лет и 94% в возрасте 18-29 лет).Неудивительно, что за последние несколько лет также резко увеличилось время просмотра веб-страниц на смартфонах в месяц. Мобильные устройства в настоящее время занимают более 53% от общего объема использования Интернета, в то время как настольные компьютеры удерживают 46%.

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

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

Использование возможностей социальных сетей

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

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

Сегментация органической аудитории

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

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

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

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

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

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

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

Инженерия управления | Адаптация к новой среде мобильных устройств

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

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

Телефоны и другие мобильные устройства на производстве обогнали планшеты, хотя планшеты по-прежнему играют полезную роль.Предоставлено: Индуктивная автоматизация[/caption]

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

Правильные меры безопасности

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

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

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

Важно, чтобы платформа поддерживала веб- и мобильные устройства через собственные приложения. Предоставлено: Индуктивная автоматизация[/caption]

Защита данных

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

Существуют потенциальные риски для безопасности, но преимущества использования мобильных устройств на заводе перевешивают риски.Предоставлено: Индуктивная автоматизация[/caption]

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

Трэвис Кокс — соруководитель отдела продаж компании Inductive Automation. Под редакцией Криса Вавры, производственного редактора, Control Engineering , CFE Media, [email protected]ком.

БОЛЬШЕ ОТВЕТОВ

Ключевые слова: мобильные устройства, кибербезопасность

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

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

Потенциальные риски мобильных устройств необходимо рассматривать в свете их потенциальных преимуществ.

Рассмотрим это

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

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

Zhang, D.: Адаптация веб-контента для портативных мобильных устройств.коммун. ACM 50, 75-79

В настоящее время, в связи с распространением Интернета и растущим использованием множества подключенных к Интернету устройств, вопросы безопасности и конфиденциальности считаются основными темами в обучении студентов. Например, семантические атаки (также известные как социальная инженерия), такие как фишинг, направлены на то, чтобы обмануть или заманить людей посетить, казалось бы, законную гиперссылку в надежде раскрыть их личную информацию. Подобные атаки направлены на взлом вычислительных устройств и узурпацию личной информации пользователей с помощью вредоносных программ.Все эти виды атак используют недостаток знаний человека, а не уязвимости системы. Это вполне ожидаемо, так как атаки такого рода, как правило, неизвестны человеку, не разбирающемуся в безопасности, в то время как для некоторых других знание мер защиты и конфиденциальности в основном классифицируется как второстепенная задача. За последние десятилетия концепция интеграции обучения и развлечения появилась в области информационных технологий (ИТ) и сформировала новые термины, включая обучение в игре, образовательное развлечение (Edutainment) и обучение на основе игр (GBL).Сегодня в контексте электронного обучения DGBL обычно относится к развертыванию различных форм цифровых игр для поддержки преподавания и обучения. В такие игры можно играть через Интернет, на персональных компьютерах, смартфонах или на определенных мобильных или традиционных игровых консолях. GBL также относится к цифровым настольным играм, карточным играм и т. многие другие, которые требуют стратегии. В литературе DGBL часто называют цифровым игровым обучением (DGBL). С другой стороны, интеллектуальные мобильные устройства считаются контекстно-зависимыми и одной из самых сложных технологических областей в формальном обучении или обучении на протяжении всей жизни из-за присущих им характеристик, таких как портативность, возможность подключения, встроенные датчики и т. д.Воспользовавшись этой технологической тенденцией, некоторые исследователи считают, что электронное обучение породил самостоятельный тип обучения, который известен как мобильное обучение (m-Learning). Это преобразование поддерживает возможности обучения «точно вовремя» и «точно на месте», позволяя учащимся (и преподавателям) иметь мгновенный доступ к учебным материалам и совместным действиям в любое время и с произвольных типов устройств и платформ. Кроме того, несколько усовершенствований мобильного оборудования, таких как множество датчиков и беспроводных интерфейсов, предлагаемых этими устройствами, также способствовали новому преобразованию мобильного обучения, известному как повсеместное обучение (u-Learning).Итак, множество контекстной информации, которую можно обнаружить в среде u-Learning, привели к контекстно-зависимым обучающим приложениям. В этом контексте, в этой кандидатской диссертации. В диссертации проводится обзор литературы, чтобы определить несколько аспектов (m)DGBL для улучшения учебного опыта студентов, охватывающий период с 2004 по 2016 год. Этот обзор также способствует выявлению различных мобильных характеристик и основных тенденций в средах mDGBL. уже. Мы также заплатили спец. внимание на то, используют ли существующие мобильные игры в значительной степени технологические возможности мобильных технологий для поддержки инновационных и педагогически эффективных контекстно-зависимых учебных сред.В связи с этим мы использовали шестимерную структуру для тщательного изучения неотъемлемых составляющих обучающих игр и выдвижения на передний план важных вопросов, относящихся к мобильным и вездесущим контекстно-зависимым DGBL. Кроме того, эта докторская диссертация посвящена проектированию и разработке новой обучающей платформы, состоящей из системы управления учебным контентом (LCMS) и мобильного приложения DGBL (mDGBL) для обучения и повышения осведомленности пользователей об основных вопросах кибербезопасности и конфиденциальности. В частности, внедренное приложение mDGBL, а именно CybeAware, включает в себя набор быстрых игр, в которые можно играть как в автономном режиме, так и в режиме клиент/сервер, и предназначено для поддержки учащихся начальной и средней школы в формальном и неформальном обучении. изучение основных вопросов безопасности и конфиденциальности в Интернете.Кроме того, мобильную версию приложения CyberAware можно использовать как классную комнату или как учебную деятельность на открытом воздухе. В отличие от аналогичных исследований, найденных в литературе до сих пор, на этапе проектирования приложения мы сосредоточились не только на его технологических аспектах, но и уделяли особое внимание образовательному фактору, применяя конкретную модель мотивации. Наши выводы как из обзора литературы, так и из оценки CyberAware показывают, что в области информационной безопасности и конфиденциальности DGBL является, скорее, наиболее эффективным методом обучения молодых учащихся.Тем не менее, необходимы дополнительные усилия по оценке, чтобы лучше оценить и оценить положительное влияние этого вида обучения на эту конкретную область.

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

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

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

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

Осанка
Планшеты, смартфоны и ноутбуки, как правило, располагают намного ниже стандартного монитора, что приводит к неправильной осанке и создает большую нагрузку на область головы и шеи. Исследователи из Гарвардской школы общественного здравоохранения считают, что пользователи планшетов рискуют получить боль в шее и плечах. Физические воздействия от неправильного и чрезмерного использования цифровых устройств и планшетов известны под немедицинскими и медицинскими ярлыками, такими как Text Neck, Text Claw, iPad Shoulder, Mobile Phone Elbow и Cubital and Radial Tunnel Syndrome.

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

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

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

Полезные советы по работе с мобильными устройствами
Учитывайте классические и более современные правила цифровой и удаленной эргономики, т. е. положение сидя, климат и расположение монитора, время использования экрана и положение устройства.
1. Кратковременное использование
2. Используйте устройства с дисплеем с низким коэффициентом отражения
3. Снимите нагрузку с рук и спины: e.g., используйте держатели лотков, кронштейны для планшета
4. При использовании планшета в течение длительного времени используйте мышь и клавиатуру
5. Делайте регулярные перерывы
6. Используйте мобильные представления для получения оптимального отображения
7. Используйте облегченные технические устройств
8. Соблюдайте идеальное расстояние между экраном и глазами, от 500 мм до 700 мм

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

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

Чтобы получить дополнительную информацию по этой теме, эргономическим оценкам или сопутствующему оборудованию и настольным принадлежностям, свяжитесь с нами [email protected] или посетите наш веб-сайт: https://adapt-global.com/en-us/ergo-squad/

Анализ двигателей

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

«То, что сработало для настольных компьютеров, просто не сработает для мобильных устройств», — говорит консультант по пользовательскому опыту Карен МакГрейн.

Мы не могли не согласиться.

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

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

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

Вот некоторые из преимуществ адаптации к революции мобильного контента.


1. Улучшенная информация для клиентов

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


2. Больше продаж

Исследование Google Mobile Path to Purchase показало, что более половины пользователей мобильных устройств хотят совершить покупку в течение часа после исследования, а значительное число желающих совершить покупку в течение следующего дня. Получите нужную информацию в их руки, и 93% совершат покупку.

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


3. Более быстрый веб-сайт

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

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

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


4. Улучшение взаимодействия с пользователем

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

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

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


5. Улучшенная доставка контента

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

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

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

6 способов адаптировать вашу стратегию мобильного обучения к потребностям современных учащихся

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

1. Оцените цифровую грамотность вашей рабочей силы

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

2. Выбирайте LMS со стратегической точки зрения

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

3. Учитывайте требования к данным                                 

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

4. Небольшие учебные блоки

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

5. Гибкость стратегии мобильного обучения

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

  6. Обучение по мере необходимости

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

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

Шелковый путь к приложениям для телефона и планшета

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

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

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

Различные устройства, размеры экрана и ориентация

«Мир смартфонов в 2016 году сильно фрагментирован как с точки зрения размеров экрана, так и с точки зрения разрешения экрана, используемого самыми популярными производителями телефонов.Разрешение экрана варьируется от 240×320 до огромных 2160×3840 (4K), используемых в Sony Xperia Z5 Premium». — Павел Пейко, DeviceAtlas

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

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

Давайте посмотрим, как нам справиться с доступным пространством на экране.

Горизонтальное пространство: Перейти на всю ширину

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

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

Пространство по вертикали: высота экрана и прокрутка

Есть два основных сценария для вертикального пространства.

Содержимое отображается сверху вниз с прокруткой

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

Бесконечная прокрутка для вертикального отображения всего содержимого.

Содержимое не заполняет экран по высоте

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

Рассмотрите другие варианты вместо контента, заполняющего всю высоту экрана.

Изменение ориентации: переключение вещей

Поворот телефона или планшета вызывает событие изменения ориентации, и значения ширины и высоты меняются местами.

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

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

Настраивайте элементы при вращении, чтобы добиться идеального отображения содержимого.

Как обращаться с адаптивным: пространство экрана и форм-факторы

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

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

Вот результат нашего исследования:

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

Мобильные шаблоны пользовательского интерфейса Silk для ускорения разработки

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

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

Отображение списков и сведений

Это то, что мы находим почти в каждом приложении электронной почты или чата.

На планшете у нас слева список предметов, а справа отображается деталь. На телефоне мы можем видеть только список. Когда мы выбираем один из пунктов, телефон отображает деталь, занимая весь экран. Телефоны iOS будут отображать кнопку «Назад» в левом верхнем углу, а телефоны Android позволяют снова просмотреть список с помощью кнопки «Назад».

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

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

Использование адаптивных столбцов

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

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

На телефоне наш экран ограничен, поэтому достаточно использовать одну или две колонки.

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

Добавление специй с помощью пользовательских макетов

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

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

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

Упростите себе путь к адаптивной адаптации

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

Но на самом деле не верьте нам на слово. Загрузите бесплатную версию этой платформы и опробуйте фреймворк Silk UI сами!

.

Leave a Reply