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


Содержание

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

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

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

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

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

Если не сделать так, то система автоматизированного ввода Т9 будет заменять имена, к примеру, “ Erwan ”, на что-то вроде “ Erevan ”.

Установка автоматического использования первых заглавных букв в типах words освободит пользователей от необходимости каждый раз включать капитализацию букв – то есть каждое слово будет начинаться с большой буквы (к примеру “ Ken burns ” станет “ Ken Burns ”):

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

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

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

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

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

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

Эта картинка демонстрирует лишнее место справа:

А эта картинка показывает правильно установленное значение ширины.

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

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

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

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

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

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

Когда посетитель пользуется увеличением, браузер при этом пользуется увеличением четкости картинки. Однако удостоверьтесь, что ваш сайт не имеет свойства user-scalable=no в теге meta . Если это не так — пользователь не сможет пользоваться зумом:

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

После того, как ширина изображений установлена через свойство max-width , сделайте похожий трюк с полями input . Просто добавьте в файл CSS – файл вашего сайта:

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

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

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

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

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

И если вы все-таки решили деактивировать кнопку submit — делайте это на несколько секунд.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример ниже, использующий метод медиа-запросов, покажет, как воплотить это в жизнь:

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

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

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

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

Для этого нужно написать два варианта CSS -правил. Один вариант для использования шрифта по умолчанию, а другой — для применения скачанного шрифта.

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

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

Заключение

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

Данная публикация представляет собой перевод статьи « 10 Ways to Make Your Website More Mobile Friendly » , подготовленной дружной командой проекта Интернет-технологии.ру

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

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

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

Уже несколько лет подряд в своем ежегодном исследование аудитории РунетаЯндекс отмечаетсущественный прирост пользователей, выходящих в интернет с мобильных устройств. Статистические данные подтверждают еще одну наметившуюся тенденцию — в ряде тематик доля пользователей, которые заходят на сайт с различных мобильных устройств, уже превышает долю пользователей ПК. Это прекрасно иллюстрируют сайты социальных сетей. Например, по состоянию на октябрь 2014 года мобильная аудиторияFacebookсравнялась с общей ежедневно активной аудиторией сервиса.

Возрастает и процент покупок, совершаемых с мобильных устройств. Постатистике Google39% пользователей смартфонов совершали покупки с помощью мобильных устройств, 55% пользователей, ищущих на смартфонах информацию о товарах или услугах, планируют совершить покупку в течение одного часа, 83% в тот же день. В 47% случаев такой поиск конвертировался в последующую покупку с ПК, в 82% в покупку в офлайн-магазине, в 17% в покупку с помощью смартфона.

Пакет «MUSTHAVE-2020» для digital-агентств и веб-студий

RUWARD анонсировал главный коммерческий пакет MUSTHAVE-2020 для digital-агентств и веб-студий на весь 2020 год.

В пакет включено сразу 7 различных крутых опций, сервисов и рекламных форматов в рейтингах Руварда на следующий год.

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

Варианты дружественных к мобильным устройствам сайтов

В настоящее время существует три основных решения для удобного пользования сайтом с мобильных устройств:

  • Мобильная версия сайта(у некоторых сайтов так же есть WAP-версия) – это вынесенные на отдельные URL ( www.domain.ru/mobile/page_1 ) или даже отдельный поддомен (m.domain.ru/page_1) страницы сайта. Чаще всего это урезанная версия основного сайта с ограниченным функционалом. В последнее время мобильные версии теряют свою актуальность из-за совершенствования CSS и ряда недостатков при разборе user-agent-ов на серверах. Дополнительное неудобство для пользователя — необходимость запоминать несколько URL сайта.
  • Мобильное приложение сайта —специальное приложение, разработанное под определенную мобильную платформу (iOS, Android, Windows Phone). Привлекательно наиболее тесной интеграцией с платформой, что позволяет реализовать привычный для пользователей интерфейс, также отличается высоким быстродействием. Оправданный вариант, если проект больше рассчитан на оффлайновую работу и на мобильных пользователей. Основной недостаток — необходимость скачивания приложения, в противном случае пользователь видит полную версию сайта в маленьком масштабе. Поэтому, даже если у вас есть мобильное приложение, этого не достаточно, в любом случае необходимо делать качественную мобильную версию ресурса.
  • Сайты с адаптивным дизайном —автоматически адаптируется под параметры того устройства, с которого осуществляется вход. Существенный плюс — один URL для всех устройств, что избавляет разработчиков от редиректов, а пользователей от необходимости запоминать адрес мобильной версии сайта. Наиболее популярный в последнее время вариант, так как позволяет работать над одним сайтом для всех типов устройств и дает существенную экономию на трудозатратах при внесении изменений в сайт и его последующую оптимизацию.

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

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

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

Оптимизация CSS и настройка медиазапросов

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

Происходит это, потому что верстальщики, получая макет, по умолчанию прописывают значения ширины или высоты различных элементов в абсолютных величинах (в пикселях) для самых распространенных разрешений обычных ПК, например:

Избежать этого можно, если при обозначение размеров элементов на странице использовать вместо абсолютных величин относительные (например, в процентах):

Это позволит элементам страницы подстраиваться под изменения масштаба всей страницы.

Настройка области просмотра

Большинство сайтов при просмотре с экрана небольшого размера показываются пользователю в точно таком же разрешении (обычно это около 980 пикселей), как и при просмотре с ПК, например:

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

Использование специализированного метатега “viewport” помогает настроить ширину экрана под любое устройство:

Атрибут “initial-scale=1” указывает браузеру пользователя соотношение пикселей CSS и устройства (равное 1:1 независимо от ориентации дисплея) для корректного отображения в альбомной ориентации.

Оптимизация используемых плагинов

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

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

Дополнительные рекомендации

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

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

Пример оптимизации текста под смартфон и ПК


  • По возможности максимально оптимизируйте JavaScript.
  • Используйте понятную навигацию по сайту в верхней части страниц. Особенно это актуально для сайтов с гибким дизайном. Помните, что при «серфинге» с мобильной платформы пользователю должно быть так же удобно пользоваться сайтом, как и с ПК. Понятное меню и удобная навигация позволят не потеряться на страницах ресурса. Хороший вариант верстки лендинга с адаптивным дизайном —http://www.theverge.com/a/virtual-reality.

Пример навигации по сайту с адаптивным дизайном на экране ПК и смартфона

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

Заключение

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

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

Стоимость создания адаптивного сайта для мобильных. Доработки адаптивности

сроки выполнения : 21 день

От чего зависит цена

По вашему желанию,
цена будет снижена , если:

Заказать годовое сопровождение

Сократить объем работ
(меньше концептов)

Увеличить сроки выполнения

Аналитика рынка пользователей мобильного Интернета

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

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

По результатам исследования StatCounter, в 2020-ом году 51.3% юзеров ежедневно выходили в сеть с помощью мобильных гаджетов: со смартфонов выходов было вдвое больше, чем с планшетов. Статистика MobilizeToday.ru показала, что 46% пользователей не стали повторно заходить на ресурс с интуитивно не понятной навигацией, 23% пользователей, как правило, покидали подобный сайт в первую минуту, и только 31% продолжали работу с ним.

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

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

Цукерберг рекомендует:  Обучение - ArrayList и проверка индекса

Как формируется цена на создание адаптива?

  1. Версия с адаптацией предусматривает 3 ключевых способа размещения элементов: смартфон, планшет и десктоп. К ним продумываются и правила изменения сайта для других форматов гаджетов, альбомной и книжной ориентации.
  2. Стоимость доработки адаптивности зависит от имеющегося оформления и уровня верстки ресурса. Есть виды дизайна, которые несложно адаптировать под мобильные девайсы, но случается, что для адаптива необходимо создавать почти новое дизайн-оформление сайта.
  3. Точно обозначенной стоимости адаптива не существует. На странице нашей компании указана цена создания адаптивной версии с базовым перечнем работ.

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

  1. Мобильный сайт требует запуска отдельных приложений под каждый тип операционной системы. Поэтому цена разработки мобильной версии выше адаптива.
  2. Чтобы использовать приложение, его необходимо загрузить. Адаптивная верстка не требует каких-то дополнительных усилий от юзера.
  3. Мобильное приложение делит трафик на: трафик сайта плюс трафик приложения, что снижает показатели посещаемости сайта. Адаптив нацелен на сохранение всего объема трафика.
  4. Мобильная версия предполагает необходимость синхронизации контента основного сайта с контентом приложения. А это требует большей затраты временных и технических ресурсов.
  5. Мобильный дизайн — минимизация графических элементов для увеличения скорости загрузки (она выше по сравнению с адаптивной версией).

Преимущества адаптивного сайта

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

На этом преимущества от создания адаптивного сайта не заканчиваются. Перечислим главные из них.

  • Экономичность — адаптация сайта обойдется дешевле, чем создание мобильного приложения.
  • Практичность — разработка адаптивных сайтов предполагает, что все страницы сайта будут доступны по одному URL. А это, в свою очередь, избавит от проблем в вопросе SEO-продвижения.
  • Целостность — создать адаптивный сайт означает сохранить его структуру и узнаваемый дизайн для юзера любого устройства.
  • Прибыльность — интернет-пользователей с каждым годом становится все больше, а значит, посещаемость ресурса в перспективе будет возрастать, увеличивая конверсию и доход от бизнеса.
  • Лояльность — современный юзер, выбирая сайты одного направления, остановится на более удобном варианте, то есть с опцией адаптива под его гаджет.
  • Ранжируемость — создать адаптивный сайт значит повысить его шансы на попадание в топ поисковой выдачи. К слову, системы Google с 2015-го года отдают предпочтение ресурсам с адаптаций. Для повышения ранжируемости веб-проекта можно заказать доработку адаптивности на сайте нашей компании.

Как сделать и доработать адаптивность — 5 основных шагов

  1. Регулировка разрешения экрана. Верстать сайт под каждое устройство достаточно проблематично и времязатратно. Тут и может прийти на помощь адаптивная доработка сайта, а именно, гибкая верстка. Детально эта информация представлена в издании Зои Микли Джилленуотер «Flexible Web Design: Creating Liqu >
  1. Опциональное отображение контента, или сжатия и смена расположения элементов. Функция делает их компактными для расположения на маленьких экранах, упрощает навигацию, заменяет списки на колонки для лучшей презентации контента.
  2. Настраиваемый макет страницы — возможность сделать адаптивный сайт путем изменения расположения элементов страницы, реализовывается с помощью системного файла со стилями.
  3. Внедрение медиазапросов, или @media. Позволяет при условии меньшего размера экрана, чем указанный, применить вложенное в код CSS-правило.

Особенности разработки адаптивного дизайна в компании KOLORO

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

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

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

Остались вопросы? Расскажите нам о своем проекте и получите бесплатную консультацию уже сейчас!

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

В апреле 2015 года Google запустил алгоритм mobile-friendly, а в феврале 2020 года Яндекс выкатил алгоритм «Владивосток», который расставил все точки над i в вопросе адаптации пользовательских сайтов под различные гаджеты.

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

Протестируйте свой сайт

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

Сделайте резервную копию сайта

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

Обновите ПО

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

Оптимизируйте используемую тему оформления для мобильных устройств

Тему необходимо найти в панели управления вашей CMS и затем посмотреть, есть ли в ее описании такие понятия, как mobile (мобильный) или responsive (адаптивный). Если в теме доступна демонстративная страница, ее нужно проверить на удобство просмотра с мобильных устройств. Быстродействие используемого шаблона можно проверить с помощью инструмента PageSpeed Insights .

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

Обсудите детали с разработчиком

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

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

Настройте конфигурацию сайта для устройств разных видов

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

  • Адаптивный дизайн. В этом случае сервер отправляет один и тот же код HTML всем устройствам, но код отображается по-разному. Поисковики рекомендуют использовать этот вариант.
  • Динамический показ. Здесь для разных устройств используется один URL, но разные варианты кода HTML. Система будет руководствоваться доступной информацией о браузере пользователя при выборе нужного варианта.
  • Разные URL. Для разных устройств используются разные варианты кода и разные URL. Система определяет тип устройства, а затем перенаправляет на нужную страницу с помощью переадресации HTTP и HTTP-заголовка Vary.

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

Сообщите поисковику

Первое, что советует сделать Google – это сделать адаптивный дизайн сайта. Второй способ – это разные сайты для десктопов и мобильных устройств. В этом случае следует обязательно прописать атрибут rel=”alternate”, который будет отсылать к мобильной версии сайта. Так Google поймет, что есть две версии одного и того же сайта – мобильная и обычная. Для мобильной версии сайта следует прописать атрибут rel=”canonical”, который будет отсылать на обычную версию сайта.

Яндекс же рекомендует для начала проверить сайт на дружественность к мобильным устройствам в новом Вебмастере . Проверка ресурса может послужить для Яндекса подсказкой, что у сайта есть мобильная версия. Как именно она должна выглядеть, можно узнать здесь . Также необходимо использовать мета-тег meta name=»viewport» content=»w >

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

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

link rel=»alternate» media=»only screen and (max-w

Артур Смирнов, Head of Mobile, Adventum :

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

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

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

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

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

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

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

С помощью быстрых исправлений вы можете спасти свой сайт от Мобайлгеддона, и обеспечить ему прохождения теста Google на совместимость.

Введение

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

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

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


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

Итак, на что же обращает внимание тест на мобильную совместимость от Google?

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

1. Конфигурация окна просмотра

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

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

3. Избегайте использования плагинов

Flash, Java и Silverlight доставляют много неудобств пользователям мобильных устройств. Делайте выбор в пользу родных веб-технологий (например, HTML5).

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

5. Размер кнопок и ссылок

Учтите, что маленькие ссылки и кнопки трудны в использовании на сенсорном экране.

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

Некоторая справочная информация

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

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

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

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

Ну что ж, давайте попробуем сделать это.

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

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

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

Итак,

*У вас есть существующий сайт;

*Вы хотите внести минимальные изменения в HTML и CSS веб-сайта.

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

Измените шаблон вашего сайта

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

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

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

Возможность менять дизайн мгновенно.

Доступно несколько тысяч тем (некоторые бесплатно).

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

Новая конструкция не всегда может соответствовать вашему бренду.

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

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

Такие ресурсы, как bMobilized и Mobisitegalore могут сделать за вас всю грязную работу, но если у вас есть время, и нет денег, лучше закатать рукава и сделать все самому.

Для многих сайтов, этапы создания мобильного сайта следующие:

  1. Создание мобильного поддомена, например, «m.vk.com». В зависимости от вашего тарифного плана на хостинге, это обычно легкая задача, которую можно выполнить при помощи панели управления. Чтобы изменения вступили в силу, возможно, придется немного подождать.
  2. Разработка дизайна и содержимого новых мобильных страниц. Помните, что сайт должен отвечать вашим бизнес-целям и в то же время быть привлекательным для посетителей. Поэтому держите курс на простоту и сосредоточьтесь на контенте. Когда закончите – переносите все на ваш мобильный поддомен.
  3. Перенаправление мобильного трафика на ваш новый мобильный сайт. В идеале этот редирект состоится на сервере, установив соответствующие заголовки HTTP-ответов. Можно также использовать JavaScript – так быстрее и проще.
  4. А теперь тестируем. Заходим с мобильного девайса на основной сайт – вас должно автоматом перекинуть на новый, мобильный.

Дополнительные работы будут заключаться в следующих мелочах:

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

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

Не влияет дизайн «основного» сайта.

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

Возможно возникновение проблем с SEO в связи с дублированным контентом.

Необходимо поддерживать два веб-сайта.

Вы можете использовать бесплатный плагин Restive.JS, чтобы достичь нужного эффекта. Это позволит внести минимальные изменения в коде.

Установка и настройка всего нескольких строк кода.

Решение из разряда «установил и забыл».

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

Требуется JQuery, который может не работать на веб-сайте.

Выводы

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

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

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

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

Цукерберг рекомендует:  25 бесплатных jQuery плагинов для создания табов и аккордеонов

Для чего нужна адаптация

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

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

Разница отображения между обычным и адаптивным сайтом

Поисковые системы и ранжирование

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

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

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

Влияние на конверсию

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

Рекламные кампании

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

Распределение трафика по активностям и приложениям

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

Преимущества и недостатки создания адаптации

Подытожим все ранее сказанное, чтобы выделить основные достоинства решения:

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

Если же говорить о недостатках адаптации, то сюда могут входить следующие пункты:

  • упрощение интерфейса, функциональности ресурса, что означает уменьшение списка возможностей пользователя;
  • затраты средств на привлечение специалистов или расход времени при самостоятельной адаптации;
  • комплексная переработка содержимого площадки;
  • необходимость разработки ресурса «с нуля» в случае, если его возраст превышает 3-5 лет. Это объясняется использованием устаревших технологий, а также их влиянием на скорость загрузки страницы;
  • важность серьезного предварительного тестирования перед запуском адаптации.

Это означает, что владельцу проекта необходимо затратить время и/или деньги для получения положительного результата, с учетом разнообразия разрешений экранов. Рациональность этого решения подтверждает статистика: по данным Яндекс.Метрики в России трафик с мобильных устройств (более 49%) уже в начале 2020 года превзошел объем посещений сайтов с ПК (почти 47%).

Демонстрация распределения трафика в Яндекс.Метрике

Методы адаптации

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

Популярные варианты:

  • адаптивный дизайн;
  • версия для мобильных телефонов;
  • динамическая демонстрация.

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

Рассмотрим особенности этих способов.

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

Самое простое и быстрое решение. Особенность метода в отправке одинакового кода HTML для разных устройств. В этом случае у адаптированной версии сохраняется единый адрес, что полезно для SEO-продвижения площадки. Способ предполагает использование HTML5, CSS3.

Преимущества адаптивного дизайна:

  • единый URL;
  • относительная простота разработки;
  • минимальные сроки реализации;
  • упрощение индексации поисковыми системами;
  • суммирование показателей переходов всех устройств;
  • отсутствие переадресации.


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

Недостатки:

  • возможные проблемы со скоростью загрузки страницы;
  • важность упрощения интерфейса (рекомендация поисковиков);
  • у пользователя нет выбора режимов отображения.

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

Адаптивный дизайн сайта на разных типах дисплея

Viewport

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

Метатег Viewport для выполнения адаптации

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

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

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

В отличие от предыдущего варианта, мобильная версия сайта разрабатывается отдельно от десктопной, имея разный код, разные адреса, с точки зрения поисковой системы. Адаптированная версия располагается на поддоменах. Если стандартный URL ресурса SITE.COM, то оптимизированный для смартфонов – M.SITE.COM. В редких случаях отдельно разрабатывается версия для планшета.

Варианты отображения мобильной версии сайта

Преимущества метода:

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

Недостатки:

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

Мобильная версия сайта на разных устройствах

Мобильная и стандартная версии, фактически, являются двумя разными площадками, объединенными в одно целое. Чтобы поисковые системы не идентифицировали одинаковый контент как дубликат, необходимо через тег LINK на десктопной версии указать ссылку на мобильную при помощи специального атрибута rel=»alternate».

Пример того, как выглядит код на стандартной странице:

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

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

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

Приложение

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

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

Приложение как альтернатива мобильной версии ресурса

Динамическая демонстрация

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

Преимущества:

  • адаптация под конкретное устройство или разрешение;
  • отсутствие переадресации;
  • единый URL;
  • комбинированная верстка;
  • разнообразие вариантов упрощения стандартной версии.

Недостатки:

  • затраты времени или средств на проработку разрешений;
  • существование нестандартных размеров экрана;
  • возможные ошибки при определении типа устройства.

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

Наглядный пример динамической демонстрации

Готовые решения

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

В каких случаях используются методы

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

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

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

Требования поисковых систем к сайту

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

Согласно требованиям Яндекса, площадка должна быть:

  • с указанием тега viewport;
  • без горизонтальной прокрутки;
  • без элементов Flash;
  • без Java-апплетов;
  • без устаревших плагинов, включая Silverlight;
  • без мелкого шрифта (менее 12 размера).

Проверка соответствия сайта требованиям Яндекса

Требования Гугла имеют незначительные отличия. В этом случае ресурс должен быть:

  • без мелкого шрифта;
  • без устаревших и несовместимых плагинов;
  • без близкорасположенных ссылок;
  • без горизонтальной прокрутки;
  • с выделенной областью просмотра.

Проверка ресурса на соответствие требованиям Google

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

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

Способы проверки:

  1. Самостоятельное тестирование на реальных устройствах. Чем их больше, тем достовернее результат.
  2. При помощи сервисов для вебмастера от Яндекса и Google. В этом случае можно проверить сайт на соответствие, найти ошибки и изучить способы устранения.
  3. В браузере Гугл Хром. Для этого нужно нажать клавишу F12, выбрав в появившемся окне значок смартфона. У пользователя присутствует возможность переключаться между несколькими моделями устройств.
  4. Сервис Screenfly. Инструмент позволяет проверить отображение на нескольких видах устройств с различным разрешением.
  5. PageSpeed Insights от Гугл. Проверяет скорость загрузки страницы, а также дает рекомендации по ускорению.

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

Проверка отображения ресурса на мобильных устройствах через Chrome

Оформление контента

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

Несколько советов:

  1. Необходима четкая структура текста для удобства беглого ознакомления.
  2. Восприятие информации обеспечивают списки, графики, таблицы.
  3. Рекомендуется использовать стандартный шрифт.
  4. Не стоит запрещать масштабирование страницы в браузере, но можно указать ограничения.
  5. Чтобы предотвратить выход изображения из зоны просмотра, необходимо задать инструкцию в таблице CSS: img < max width: 100% >.
  6. Лучше отказаться от фиксированных позиций и размеров в пикселях, а при их использовании – проявлять аккуратность.
  7. Альтернатива ссылок – кнопки. С мобильного устройства их проще нажать, а вероятность тапнуть по соседним ссылкам снижается.
  8. Рекомендуется упростить форму обратной связи, а также разметку телефонного номера.

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

Неправильное использование контейнеров и размеров шрифта

Полезные сервисы

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

Список полезных инструментов:

  1. MobiSiteGalore – простой и удобный редактор, позволяющий адаптировать ресурс для устаревших мобильных телефонов с небольшим разрешением.
  2. MobStac – сервис для разработки адаптаций по технологии HTML5. Пользователю предложены гибкая настройка, создание, использование шаблонов, а также план монетизации. MobStac находится в состоянии бета-тестирования.
  3. Mofuse – платный инструмент, позволяющий выполнить все необходимое для оптимизации площадки собственными руками или же воспользоваться услугами специалистов компании.
  4. Mobify – предназначен для площадок, связанных с торговлей. Коммерческий сайт можно разработать самостоятельно или заказать разработку. Сервис является платным.
  5. Wirenode – удобный конструктор, распространяемый в бесплатной и платной форме. Предназначен для ресурсов с RSS-лентой.
  6. Bootstrap – CSS-фреймворк, подходящий для разработки проектов по принципу Mobile First. Содержит необходимые компоненты для создания качественной адаптации.

Говоря о полезных сервисах, стоит сказать о решениях, разработанных для одной из самых популярных CMS – WordPress:

  1. AMP – ускоритель загрузки мобильных страниц, представляющий собой библиотеку. Увеличение скорости обеспечивают отключение скриптов и оптимизация страницы.
  2. WPtouch – плагин для создания адаптированной версии под мобильные устройства со встроенным эмулятором.
  3. PageBuilder – конструктор для разработки адаптивных макетов с упрощенным управлением.
  4. Mobile Smart – специальный плагин, определяющий тип устройства и выполняющий соответствующее перенаправление.
  5. WP Mobile Edition – комплексный конструктор для разработки мобильной версии на поддомене.
  6. Standout Color Boxes and Buttons – плагин для создания кнопок вместо текстовых ссылок.
  7. JetPack – популярный плагин с высокой эффективностью и интуитивно-понятным оформлением. Этот набор инструментов обычно входит в список предустановок.

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

Подведем итоги

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

Влияние адаптации ресурса на конверсию

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

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

Стационарные ПК уже давно не являются единственным источником информации. Находясь в движении пользователь также стремиться быть в курсе всего необходимого, что может предложить глобальная сеть интернет. Текущая ситуация такова, что актуальность мобильных версий ресурса становится неоспоримой. За последнее десятилетие мобильные гаджеты перешли из категории «предметов роскоши» в категорию «предметов обязательной необходимости». Коммерческие ресурсы для сохранения уровня конверсии должны чутко реагировать на такие изменения. Мобильная версия сайта стала неотделимой частью ЛЮБОЙ интернет платформы реализующей товары или услуги.

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

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

Но тенденция к росту доли мобильного трафика есть и у Яндекса, значит скоро мы будем стоять на пороге “мобилизации сайтов” — верстальщикам будет хватать работы…

Более того, 80% процентов людей, которые в принципе посещают Интернет, являются владельцами смартфонов. Даже клиенты, которые посещают проект при помощи стационарного компьютера, в следующий раз могут сделать это с телефона. И остаться недовольными.


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

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

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

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

Проанализируйте Вашу целевую аудиторию (ЦА)
Прежде чем перейти к вопросу создания корректной мобильной версии сайта, необходимо тщательно изучить собственную аудиторию. Создание мобильной структуры – это комплексный подход, в котором необходимо учесть множество факторов влияющих на успешную оценку пользователями. Поэтому, нужно знать все аспекты Вашей ЦА. Статистика сообщает, что чем ниже возрастная категория аудитории, тем более вероятен тот факт, что посещение ресурса будет происходить ТОЛЬКО с мобильной версии.

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

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

1. Создание отдельной версии сайта с собственным URL. Фактически – это поддомен ресурса, который является полноценным двойником основного сайта. Правда, зачастую с сильно сокращенным функционалом. Такое решение обладает несколькими плюсами: возможность коррекции контента на каждом сайте отдельно, идеальное отображение и отсутствие необходимости в компромиссном дизайне. Однако, для пользователя такой вариант не самый удобный. Ему придется запоминать отдельный адрес, что может привести к путанице. Для владельца проекта есть и свои недостатки – необходимость отдельного администрирования нового сайта, финансовые затраты. Да и ввиду совершенствования CSS, отдельная мобильная версия становится все менее продуктивной;

Цукерберг рекомендует:  Развиртуализация оффлайн-встреча со студентами GU

2. Самый простой способ адаптации к мобильным гаджетам – снабжение ресурса внешними плагинами. Плагин — это программный модуль, которые расширяет возможности движка сайта. Решение дешевое и удобное, но нефункциональное. Даже лучшие плагины все равно содержат массу ошибок, всплывает некорректное отображение страниц. Примером может быть плагин WP Mobile Edition для WordPress CMS, соответственно. Решение не подходит для компаний с серьезным каналом трафика;

3. Разработка мобильного приложения. Это весьма удобное решение для пользователя. Приложение разрабатывается под конкретное ПО (IOS, Android). В результате, пользователь работает с наиболее привычным для себя функционалом. Правда, для этого необходимо само приложение скачать. А убедить пользователя в том, что необходимость посещения данного ресурса для него настолько важна, что он должен установить внешнее ПО (программное обеспечение) – задача сложная. Поэтому, зачастую такое решение используется, как дополнительная мера при уже существующей полноценной мобильной версии сайта;

4. Адаптивный дизайн. Если задуматься, для чего нужна мобильная версия сайта в принципе, то легко прийти к выводу, что это упрощение в первую очередь для клиентов обладающих ПК и смартфоном ОДНОВРЕМЕННО. Поэтому, если пользователь посещает ресурс с разных устройств в разное время, адаптивный дизайн – лучший выбор. Это более трудоемкое решение. Но оно позволяет создать ресурс, который автоматически подгоняет визуальную картинку под любую ширину экрана, и пользователь всегда видит корректное отображение информации.

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

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

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

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

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

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

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

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

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

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

• HTML compressor, который корректирует размеры скриптов и самого кода на странице;
• JavaScript compressor, сжимающий скрипты Java;
• CSS compressor, соответственно, работающий с таблицами стилей.

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

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

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

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

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

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

В идеале, ресурс должен отказать от плагинов в принципе. Если это не приведет к потере функциональности или аспектов дизайна. Это планка, к которой ресурс должен стремиться.

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

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

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

Автор статьи: Анатолий Улитовский
Директор компании Seoquick —
грамотная раскрутка сайтов и сео продвижение.

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

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

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

Взял верстку с ходу. Верстал всё в процентах. Но при отображении в мобильном устройстве (Android и IOs) верстка выглядела немного странно. Больше всего раздражал маленький размер шрифта текста для абзацев. Отсюда и возникла идея написания этого совета. Итак, разберем всё по частям и найдем самое оптимальное решение, чтобы не выглядело как «на костылях».

Итак, для верстки нам потребуются следующие элементы:

  1. Общее понимание разрешений мобильных устройств.
  2. Задание размера viewport.
  3. СSSи MediaQuery.

Общее понимание разрешений мобильных устройств

Да, это именно так. Яндекс выдает нам множество вариантов. Становится ясно, что разрешений очень много. Верстать под все разрешения нет возможности.

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

  1. devicePixelRatio
  2. screen.width
  3. screen.height

Эти три параметра могут дать нам море информации. Пишем простую функцию:

Например на Iphone мы увидим «2 320 568 640 1136», на айпад «2 768 1024 1536 2048». Lenovo P780 cообщит «1,5 360 640 540 960». Т.е. ширины экранов у перечисленных устройств будут 640, 1536, 540 пикселей соответственно. Делаем выводы: нам надо сделать версию для экранов, например, меньше 986 пикселей (стандарт для узких мониторов). Образно говоря, будет две верстки. Одна для экранов с разрешением более 986 пикселей, другая — для меньших. Особенности CSS-верстки будут описаны в последнем разделе.

Задание размера viewport

О viewport можно найти в поиске много мусора. Почти везде идет ширпотреб без объяснения логики. На самом деле тут всё очень просто:

Вьюпорт (viewport) — это видимая часть окна браузера (мобильного или десктопного).

Размер вьюпорта можно менять, используя следующую конструкцию в head:

Для верстки используем только два параметра width и user-scalable. Первым задаем размер видимой части, второй разрешает ее увеличивать (применять zoom двумя пальцами).

Обозначив w >

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

Более подробно про viewport можно прочитать в статье «Адаптация сайта на мобильных устройствах».

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

MediaQuery разжевано на множестве сайтов, уделять внимание описанию не будем. Лишь опишем ряд проблем в виде маленького ЧАВО.

Какой диапазон выбрать для MediaQuery при адаптивной верстке?

В работе мы использует три брекпоинта для носимых устройств: 1024px, 800px, 420px. Это рекомендация, вы можете спокойно добавить свои.

Мелкий текст в адаптивной/мобильной верстке сайта.

Решение: стоит увеличить размер шрифта в соответствии с devicePixelRatio или просто в 1,5 раза. Например, так:

Изменяется размер шрифта при смене ориентации/вращении мобильного устройства.

Гироскопом уже никого не удивишь, его ставят китайцы даже в самые дешевые смартфоны. Удивить можно верстальщика. Решение:

Сбрасываем форматирование для элементов форм

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

Safari в IOs увеличивает шрифты в верстке

Mobile Safari в Ios (а также Chrome для Android, Mobile Firefox и IE Mobile) автоматически увеличивают размер шрифта внутри широких блоков. Это можно пофиксить двумя строчками CSS:

Правило @media CSS для адаптации сайтов под мобильные устройства.

Подробнее про работу со свойством @media смотрите в этом курсе.

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

Каким образом можно решить такую задачу?

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

Это становится возможным с помощью медиа-правил.

Синтаксис здесь следующий:

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

Для адаптивной верстки достаточно пока использовать следующее выражение:

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

Давайте посмотрим на конкретном примере, каким образом работает данное правило.

Подробнее про работу со свойством @media смотрите в этом курсе.

Мобильная версия сайта или адаптивный дизайн?

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

На текущий момент при построении мобильных версий сайтов существуют 3 основных способа их построения:

  • Адаптивный дизайн;
  • Отдельная мобильная версия сайта;
  • RESS (Responsive Design + Server Side).

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

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

Для реализации адаптивного дизайна обычно используются CSS3 Media Queries. В зависимости от размера экрана, пользователь будет видеть разную картинку:

Преимущества адаптивного дизайна
Недостатки адаптивного дизайна
  • Разные задачи — типовые задачи «мобильных» пользователей крупных сайтов обычно отличаются от задач пользователей ПК. Если вы являетесь клиентом банка, то, скорее всего, в мобильной версии сайта вас будет интересовать очень ограниченный спектр информации — адреса ближайших отделений, банкоматов и т.д.
    В целом, при адаптивной верстке самый распространенный подход — делать копию обычного сайта, реализовать в верстке под телефоны потребности всех групп целевой аудитории. Но тогда о юзабилити можно забыть. Нужные пяти процентам посетителей второстепенные разделы создадут неудобства для основной массы клиентов.
  • Медленная загрузка — «вес» сайтов остается серьезным препятствием для пользователей мобильных телефонов. Это означает, что некоторые типичные для десктопных сайтов активные элементы, в том числе embedded-карты, ролики, кредитные калькуляторы и меню с анимацией на мобильных сайтах должны быть заменены на более легкие альтернативы. Может ли адаптивный дизайн дать нам такую возможность? В популярной реализации пользователь с маленьким экраном должен загрузить страницу целиком, чтобы увидеть лишь ее часть. Например, если десктопная версия верстки главной весит 200 Кб, а мобильная — еще 50 Кб, для просмотра придется скачать 250 Кб. Конечно, можно использовать сжатие кода страницы, но лишние запросы к серверу все равно будут идти.
  • Безысходность — Одно из неоспоримых преимуществ мобильной версии: если не нравится, ее можно отключить, перейти на обычный домен. Сайты с адаптивным дизайном не дают этого простого, но важного выбора. Если адаптированная верстка неудобна, забагована или если она скрывает важный элемент навигации, пишите пропало: вы ничего не можете сделать, чтобы увидеть его снова. Придется бежать искать десктоп или сайт конкурента. Можно придумать «костыли» для обхода этого ограничения (использовать cookie и подключать разные таблицы стилей). Но такой подход усложняет разработку.

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

Отдельная мобильная версия сайта

Преимущества мобильной версии
Недостатки мобильной версии
  • Несколько адресов — для десктопной и мобильной версии разные адреса. Для одних это может оказаться плюсов, для других же — крайне раздражительным фактором, когда для того, что бы удобно посмотреть сайт, нужно запоминать ещё один адрес. Так же есть проблемы и с поисковиками: во избежание дублированного контента SEO-специалистам нужно использовать мета-теги rel=«alternative» и rel=«canonical». Кроме того, когда пользователь мобильного поиска Google кликнет по ссылке в результатах, он попадет на десктопную версию или перенаправлен на мобильную. Но если мобильная версия этой страницы не существует, он получит сообщение об ошибке.
  • Неудобство для пользователя — для десктопной и мобильной версии разные адреса. Для одних это может оказаться плюсов, для других же — крайне раздражительным фактором, когда для того, что бы удобно посмотреть сайт, нужно запоминать ещё один адрес. Так же есть проблемы и с поисковиками: во избежание дублированного контента SEO-специалистам нужно использовать мета-теги rel=«alternative» и rel=«canonical». Кроме того, когда пользователь мобильного поиска Google кликнет по ссылке в результатах, он попадет на десктопную версию или перенаправлен на мобильную. Но если мобильная версия этой страницы не существует, он получит сообщение об ошибке.
  • Ограниченность — создание отдельного мобильного сайта означает избавление от части содержания и функциональности. Кроме того, у вас может быть два различных набора контента, который может негативно сказаться на общей информационной картине.

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

Сам Google, хоть и поддерживает использование веб-мастерами адаптивного дизайна, однако в своих продуктах использует иную систему. Если зайти, к примеру, на главную страницу под разными User-Agent-ами, то можно увидеть различный HTML для различных устройств. RESS — Responsive Design + Server Side. Пример реализации, набросанный «на коленке»:

Плюсы RESS
Минусы RESS
  • Сложность в разработке — подобный метод потребует соответствующей настройки сервера и труда большего количества программистов. Так же необходимо будет делать несколько различных вариантов верстки.
  • Механизм определения устройств — к сожалению, даже в наше время ещё не доведен до совершенство. Истории с тем, как чей-то редкий телефон не определился как мобильное устройство, всплывают довольно часто.

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

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