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

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

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

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

Из этой статьи вы узнаете:

  1. Зачем необходима адаптация под мобильные устройства
  2. Что лучше – адаптивный дизайн или мобильная версия
  3. Что дает адаптация сайта под мобильные устройства
  4. Как её проверить
  5. Адаптация сайта для Google
  6. Самостоятельная адаптация сайта
  7. Лучший и бесплатный плагин для Wordpress
  8. Адаптация таблиц сайта под мобильные устройства
  9. 6 лучших сервисов для адаптация сайта под мобильные устройства онлайн

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

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

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

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

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

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

В качестве примера возьмем данный показатель одного из российских сайтов:

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

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

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

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

  1. Выбрать меню «Обзор аудитории», применить опцию «Добавить сегмент».

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

  2. Выбрать опции «Трафик с мобильных устройств», «Трафик с планшетных ПК», «Трафик смартфонов и планшетных ПК». Нажать кнопку «Применить».

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

  3. В блоке «Обзор аудитории» вы сможете проверить процент мобильного трафика в целом, а также просмотреть трафик по типам устройств.

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

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

Помните, из-за этой ошибки немало пользователей покинет вас навсегда, о чем свидетельствует исследование фирмы «Equation Research». Ее специалисты выяснили: 46 % людей больше не заходят на тот сайт, где их не устроил уровень работы с мобильных гаджетов.

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

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

Что лучше – адаптивный дизайн или мобильная версия

Давайте для начала разберемся в разнице между этими двумя понятиями.

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

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

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

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

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

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

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

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

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

Мобильная версия обычно находится на поддомене основного: m.site.ru, mobile.site.ru. Эту особенность трудно отнести к положительным, если говорить с позиции SEO, так как в таком случае используется много условных редиректов с основной версии на мобильную. Ведь site.ru/page и m.site.ru/page с точки зрения поисковых систем остаются разными страницами.

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

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

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

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

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

  1. Быстрая загрузка сайта, благодаря отсутствию «тяжелых» фотографий, flash, дополнительных элементов дизайна.
  2. Понятная, удобная навигация. Используемые на мобильных устройствах ресурсы характеризуются вертикальной прокруткой, удобным модулем поиска, меню навигации Home, «Вверх», «Назад». В дополнение используется функция звонка, либо перед пользователем в шапке сайта отображается номер контактного телефона.
  3. Удобные меню, формы. Важно, чтобы человек мог без проблем активировать ссылку, пальцем нажав на другие элементы сайта.
  4. Читабельный контент. Гостю ресурса важно не испытывать затруднений при желании ознакомиться с текстом.
  5. Возможность перехода к полной версии сайта. Нельзя, чтобы портал автоматически направлял посетителей на главную страницу мобильной версии при их попытке увидеть полную версию с экрана гаджета.
  6. Функциональность, возможность конверсионных действий. Не допустимо, чтобы пользователь испытывал трудности при заказе, подписке на рассылку, скачивании документов при использовании мобильного устройства.
article_banner.png

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

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

  • Quirktools.

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

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

  • Ipadpeek.

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

Дает возможность проверить внешний вид сайта на iPad, iPhone.

  • F12.

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

Всегда самым простым вариантом останется применение стандартного приема: нажмите F12, затем кликните по значку телефона.

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

Если вы хотите провести адаптацию сайта под мобильные устройства в Google, вам пригодится бесплатный инструмент Developers.Google:

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

Здесь необходимо ввести адрес ресурса и нажать кнопку «Анализировать». В использованном нами примере уровень удобства для мобильных пользователей составляет 49 % из 100 %.

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

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

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

Если на вашем сайте используется поля ввода для имени пользователя / адреса, откажитесь от autocorrect, включите autocapitalize:

Ваше имя: <input type=text size=20 autocorrect=off autocapitalize=words>

Благодаря этому приему при адаптации сайта под мобильные устройства вы запретите системе автоматизированного ввода Т9 заменять имена, например, «Erwan» на «Erevan».

При помощи установки автоматического использования первых заглавных букв в типах words вы избавите гостей ресурса от необходимости постоянно включать капитализацию букв, иными словами в начале каждого слова будет ставиться большая буква (допустим, «Ken burns» превратится в «Ken Burns»):

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

Используйте поле email, если ваш сайт запрашивает у пользователя электронную почту, чтобы он не вводил символ @ с клавиатуры мобильного устройства:

Ваш email: <input type=email size=20>

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

Для этого откройте сайт в браузере своего компьютера, уменьшайте ширину окна программы, пока текст не перестанет быть читаемым. Так вы получите минимально допустимую ширину. Это текущее значение установите в свойство @viewport при помощи установки тега meta в заголовок страницы head:

<meta name=viewport content="width=700">

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

На представленной ниже иллюстрации оставлено лишнее место по правому краю:

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

А здесь значение ширины выбрано правильно:

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

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

Установите ширину картинок в 100 %

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

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

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

img {   max-width: 100% }

Если вы установили в качестве фоновой картинки какое-либо изображение не с помощью тега img, вам просто нужно установить CSS свойство background-size в значение contain. Так размер фона будет меняться, если разрешения экрана окажется недостаточным для передачи в 100 % масштабе:

.header {   background: url(header.png) 50% no-repeat;   background-size: contain }

Не стоит беспокоиться, что изображение потеряет четкость – современные мобильные устройства этого не допустят. Дело в том, что, когда гость сайта использует увеличение, браузер повышает четкость картинки. Правда, при этом стоит убедиться, что у вашего портала нет свойства user-scalable=no в теге meta, поскольку он не позволяет использовать зум:

<!-- ТАК ДЕЛАТЬ НЕ СТОИТ! --> <meta name=viewport content="user-scalable=no">

Установите ширину полей ввода в 100 %

Когда вы установили ширину изображений при помощи свойства max-width, сделайте тоже самое с полями input. Для этого просто добавьте в файл CSS – файл вашего сайта:

input, textarea {   max-width:100% }

Теперь поля input не выйдут за пределы экрана при использовании сайта с мобильного устройства.

Будьте аккуратны, когда используете Disable для кнопок подтверждения отправки форм

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

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

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

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

В длинных строках используйте word-wrap

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

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

Справится с этим word-wrap, при помощи которого строка будет переноситься, достигнув края экрана. Так гость сайта сможет видеть сразу всю информацию, не прибегая к прокрутке:

Здесь вам потребуется пароль:

<span style="word-wrap:break-word">435143a1b5fc8bb70a3aa9b10f6673a8</span>

Будьте осторожны, используя пробелы

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

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

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

<style> .split m {   padding: 0em 0.5em } </style>  Ваш код: <span class="split"><m>43514</m><m>3a1b5</m><m>fc8bb</m></span>

Как видите, между символами остаются пропуски, но с ними не нужно бороться при копировании. А это бережет время!

Преимущества медиа-запросов

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

<style> /* regular css */ .tabs {   padding: 10px 2em }  @media screen and (max-width: 500px) { /* applies only if the screen is narrower than 500px */   .tabs {     padding: 3px 1em   } } </style>

Избегайте fixed позиционирования

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

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

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

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

Пример показывает, как это работает на практике:

<style> /* regular css */ #header {   position: fixed }  @media screen and (max-width: 500px) { /* applies only if the screen is narrower than 500px */   #header {     position: static   } } </style>

Используйте стандартные шрифты

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

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

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

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

Но вам придется написать два варианта CSS-правил: первый для шрифта по умолчанию, еще один – для скаченного.

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

<script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script> <script> WebFont.load({   google: {     families: ["Open Sans"]   } }); </script> <style type="text/css"> .header {   font-family: Arial } .wf-opensans-n4-active .header {   font-family: "Open Sans" } </style>

Подчеркнем: селектор класса .wf-opensans-n4-active добавляется в код сайта динамически Font Loader'ом, но лишь, когда шрифт загружен.

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

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

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

Для описания этого правила в английском есть довольно емкое слово «snackable» (от англ. «снэк» — закуска). Так вот, контент для таких пользователей должен быть именно snackable, то есть удобным для быстрого чтения, беглого просмотра в движении.

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

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

Адаптируйте электронные письма к чтению с маленького экрана

Провести адаптацию email к чтению с экранов мобильных устройств вам помогут такие инструменты для рассылки:

  • MailChimp.
  • AWeber.
  • Constant Contact.

Замените ссылки на «тапабельные» кнопки

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

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

  • Apple считает, что оптимальный размер для кнопок, навигационных элементов начинается с соотношения 44 на 44 пикселя.
  • Nokia рекомендует минимальные габариты 48 на 48 пикселей или 0,7 на 0,7 см при создании подобных элементов.
  • Microsoft советует кнопки 34 на 34 пикселя.

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

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

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

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

  • Standout Color Boxes and Buttons. С его помощью вы создадите удобные кнопки разного размера, цвета, а контекстное меню, адаптированное под мобильных пользователей.
  • Responsive Menu. Этот плагин позволит создать удобное меню «гамбургер».

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

JetPack

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

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

И скорее всего, он уже установлен среди ваших базовых плагинов. Если так оно и есть, кликните по ссылке «JetPack» в меню администратора сайта, перейдите на страницу модулей. Здесь вам необходимо лишь активировать «Mobile Theme».

MobilePress

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

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

WPtouch

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

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

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

Wapple Architect Mobile Plugin

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

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

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

Mobile Detector

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

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

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

Ключевые преимущества:

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

WP Mobile Edition

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

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

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

WordPress Mobile Pack

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

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

Помимо этого, в плагине вы найдете:

  • переключатель между мобильной, классической настольной темой;
  • набор поддерживаемых, распознаваемых устройств, включая темы для Nokia, браузеров на WebKit;
  • настройку цветовой палитры по темам с поддержкой твиков в CSS;
  • автоматическую адаптацию картинок, разбиение постов, страниц;
  • мобильную панель администратора;
  • виджет мобильной рекламы, поддерживающий такие платформы как AdMob или Google’s Mobile Adsense;
  • мобильную аналитику;
  • виджет для добавления бар-кодов на сайт, позволяющий быстро добавлять сайт в закладки на мобильном устройстве во время его просмотра на экране настольного компьютера.

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

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

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

В первую очередь давайте посмотрим на внешний вид таблицы:

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

Bootstrap-способ верстки адаптивной таблицы

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

Для применения на практике этого способа таблица обернута в div, которому задана максимальная ширина в 100 %, overflow: auto.

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

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

Верстка по-настоящему адаптивной таблицы

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

В первую очередь необходимо подключить плагин (скачать на GitHub / подключить с CDN), инициализировать его:

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

Но есть одна тонкость в адаптации сайта под мобильные устройства: скрипт считает ширину таблицы, а не ширину viewport-а. Поскольку нам необходимо эту ошибку устранить, важно чуть «модернизировать» скрипт: 

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

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

Далее для ячеек в шапке таблицы, посредством data-атрибутов указываем на каких размерах какие колонки будут скрываться:

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

Что мы имеем в виду? На планшетах будут скрываться колонки «RAM», «Диагональ», «PPI», «Аккумулятор». При использовании на еще меньшем, телефонном экране, скроется также «Цена».

В инициализации можно установить контрольные точки:

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

Получается, в диапазоне 0-720 правилу подчиняются mobile, 720-1024 — tablet, а выше 1024 — desktop. При необходимости вы можете создать большее количество правил.

Еще у вас есть возможность раскрыть определенную колонку по умолчанию. В таком случае указываем data-атрибут data-expanded=«true»:

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

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

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

  1. mobiSiteGalore

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

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

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

  1. MobStac

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

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

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

  1. Mofuse

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

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

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

  1. Mobile App America

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

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

  1. bMobilized

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

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

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

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

  1. Mobify

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

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

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

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

article_banner.png

Опубликовано Генератор Продаж