Как настроить смартфоны и ПК. Информационный портал
  • Главная
  • Вконтакте
  • Не оптимизировано для мобильных устройств. Учтите, что конкуренты не спят! Адаптируем шаблон для удобства мобильных пользователей

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

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

Сообщение о не оптимизированной странице в выдаче Google

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

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

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

Если Вы читали о решение данной проблемы в интернете, то можно найти множество способов решений, которые не принесут реального результата. Для решения проблемы достаточно решить всего одно несоответствие. Нет необходимости в правке CSS кода и изменения PHP кода сайта. Мой способ подойдет не только для сайта на wordpress, но и для других админок где открыта настройка размеров медиафайлов. Мне кажется, большинство ошибок происходит из-за того, что Google сообщает о неправильном расположении интерактивных элементов сайта. Вебмастера сосредотачиваются именно на решение этого вопроса, теряя на нее много времени, однако данная проблемы второстепенна – она вытекает именно из-за более широкого контента.

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

Сообщение о том, что Ваш контент шире экрана

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

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

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

  1. Выделим на сайте все возможные медиафайлы, начиная от тега Head и заканчивая Footer.
  2. Запишем размеры каждого медиафайлы
  3. Сделаем размер каждого медиафайла меньше 600 пикселей

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

Проверьте себя, все ли вы делаете для высокого ранжирования в мобильной выдаче?

Содержание статьи:
-
-
-
-
-
-
-

1. Специфика мобильной оптимизации


Мобильная оптимизации имеет свои особенности и сложности, состоящие в том, что удобство и простота взаимодействия пользователя с сайтом является самым важным показателем качества мобильного сайта. Кроме того, результаты мобильного поиска локализированы, то есть привязаны к местоположению пользователя, поэтому мобильный трафик, зачастую, это региональный трафик. Также несколько усложняет мобильную оптимизацию, тот момент, что частотность запросов в мобильном поиске отличается от частотности в обычном поиске и статистику запросов мобильной выдачи приходится собирать отдельно, таким образом и семантическое ядро мобильной версии сайта будет отличаться. Кстати, проверить частоту запросов в мобильной выдаче можно с помощью Yandex.Wordstat . А проанализировать список запросов в мобильной выдаче поиска, по которым ваш сайт показывается в мобильной выдаче, вы можете с помощью Google Webmaster Tools и Google Analytics.

Как проверить мобильность сайта?


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

  • Основной инструмент - Page Speed Insights – не только проверяет лояльность сайта к пользователям мобильных, но и дает рекомендации по ускорению и оптимизации сайта под мобильные.
  • – с помощью это инструмента вы сможете увидеть как мобильный робот поисковой системы Google видит ваш сайт.
  • - внутренний сервис поисковой системы, проверяющий насколько ваш сайт соответствует требованиям мобилопригодности.
  • TestMySite - внешний сервис, красиво и наглядно проверяет мобайлфрендли, мобильную скорость сайта и скорость загрузки на десктопных устройствах.
  • W3 mobile checker - инструмент для веб - разработчиков, которые хотят сделать свои веб - страницы или веб - приложение лучше работающим на мобильных. Пока находится на доработке.
  • Resizer - интерактивная программа просмотра, которая помогает дизайнерам тестировать контент сайта на настольных компьютерах, мобильных и планшетах
  • Quirktools - сервис для просмотра сайта на разных устройствах: мобильных, планшетах, компьютерах и даже телевизорах.
  • Проверка мобильных страниц в Яндекс.Вебмастер – также проверяет лояльность сайта к мобильным пользователям

3. Какие особенности различных способов мобильной оптимизации?

  • Мобильная версия - когда и URL, и код изменяются. Сервер определяет тип устройства, а потом перенаправляет на нужную страницу - m.site.com (для смартфонов), t.site.com (для планшетов), phone.site.com – для телефонов попроще. Для разных типов устройств используются разные варианты кода и разные URL страниц.
  • Плюсы: в альтернативную мобильную версию легко вносить правки, не затрагивая основной сайт; простота и удобство для пользователей, быстрая загрузка.Минусы: отличающийся от основного URL, есть вероятность дублирования контента и 404 ошибки, упрощение функционала ведет к ограничению нужного контента.
  • Динамический показ (RESS - Responsive Design + Server Side) - один URL, разный код под разные user-agents. Сервер отправляет в ответ на запрос определенного URL различные варианты кода HTML и CSS. Какой именно код отправлять, определяется за счет сканирования поисковым роботом, размещенного HTTP-заголовка Vary, который помогает выбирать именно тот контент на сайте, который оптимизирован для мобильных.
  • Плюсы: ненужные JavaScript можно удалить из HTML; можно настроить для каждого устройства свою верстку и свои приложения. Минусы: сложный в разработке и не отработанно до конца определение типов мобильных устройств.
  • Адаптивный дизайн - когда URL и код не изменяются. Сервер отправляет всем устройствам и мобильным, и десктопным одинаковый HTML- код, который адаптируется в зависимости от размеров экрана с помощью CSS. В этом случае, нужно проследить, чтобы были открыты для индексации нужные файлы CSS, JavaScript и изображения.
  • Плюсы: относительно легкий в разработке и то что URL не изменяется.Минусы: медленная скорость загрузки и безальтернативность.

4. Что говорят поисковые системы по поводу способов мобильной оптимизации сайтов?


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

В ЯНДЕКСе алгоритм ранжирования мобильной выдачи «Владивосток» определяет все виды оптимизации - и адаптивный дизайн, и мобильную версию, и RESS. Как и Google, Яндекс оставляет выбор за веб-мастерами, которые должны выбрать способ оптимизации самостоятельно. Но при этом сообщает, что в Рунете есть постоянная тенденция снижения количества мобильных версий и увеличения сайтов с адаптивным дизайном и RESS. Поэтому для того, чтобы выбрать для себя подходящий метод оптимизации, рекомендуется определить, какие именно задачи должен выполнить пользователь с помощью своего мобильного устройства на вашем сайте. Размышления вместе с Google и обсуждение в Клубе о поиске Яндекса помогут детально сопоставить все плюсы и минусы различных способов реализации мобильных версий сайтов и выбрать именно тот, который больше всего подойдет вашему сайту и бизнесу.

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


<1> Скорость загрузки страницы, для мобильных пользователей важнее, чем для пользователей десктопов. Она не должна превышать 3-и секунды, однако страницы из мобильной выдачи на устройстве пользователя грузятся в среднем целых 22 секунды. Чтобы понять, как вы можете облегчить и сжать свой сайт, воспользуйтесь сервисом Page Speed Insights – в нем вы найдете подробные рекомендации по ускорению своего сайта под мобильные. А именно, сжатию или вынесению в отдельный файл JavaScript и CSS, анализатор дает их детальный список. Не забывайте, что можно использовать асинхронноую загрузку скриптов , чтобы пользователи не теряя времени и не уходя с вашего сайта во время загрузки скриптов в фоновом режиме.

<2> JavaScript, CSS и изображения нельзя блокировать. Проверить блокировку, вы можете в Google Search Console в разделе Индекс Google >> Заблокированные ресурсы. Блокировка JavaScript, CSS и картинок может привести к низким позициям в мобильной выдаче.

<3> Не должно быть «ошибок 404» на страницах, которые показываются мобильным веб-серферам. Бывает такое, что страница может нормально отображаться на десктопах, но выдает "ошибка 404" на смартфонах, например, или на планшетах. Проверить на наличие ошибок вы сможете с помощью программ Xenu, ScreamingFrog или с помощью Google Search Console в разделе Сканирование >> Ошибки сканирования.

<4> Если у вас мобильная версия, то для того, чтобы контент основной и мобильной версии не дублировался, нужно правильно настроить их индексацию. Если мобильная версия на поддомене попадает в обычную выдачу поисковиков, то не нужно создавать отдельный robots.txt и указывать: User-agent: * Disallow: / Лучше прописать на страницах m.site.com/page-1 следующий код - а на страницах основного сайта и поисковая система поймет, какой урл основной.

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

<6> Если на мобильной версии сайта есть анимация в формате Flash или видео с проприетарным проигрывателем, то нужно заменить их на теги HTML5, так как этот способ поддерживается всеми браузерами. Например, создать подобную анимацию можно с помощью Google Web Designer .

Вместо заключения

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

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

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

В апреле 2015 года вышло обновление поискового алгоритма Google под неофициальным названием «Mobilegeddon», а в феврале 2016 Яндекс объявил о работе похожего алгоритма под названием «Владивосток». Их суть похожа - в мобильном поиске предпочтение отдается тем сайтам, которые адаптированы для просмотра на мобильных устройствах. Это означает, что игнорировать мобильную адаптацию больше нельзя.

И дело не только в требованиях поисковых систем. Глобальный мобильный трафик догнал десктопный еще в начале 2014 года. А сегодня уже около 67% трафика в Рунете приходится именно на мобильные устройства. Учитывая потребности наших читателей, мы проводим работу по мобилизации блога. Совсем скоро вы увидите наш обновленный ресурс, который будет очень удобно читать на различных устройствах.

1. Проанализируйте целевую аудиторию

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

  • демография (пол и возраст);
  • география (из каких регионов больше всего переходов);
  • устройства (какие устройства наиболее популярны среди ваших посетителей - десктопы, мобильные телефоны или планшеты);
  • операционная система (Android, iOS, Windows Phone, Windows 7 и т. д.);
  • поведение на сайте (глубина просмотра, время на сайте, отказы и т. п.).

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

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

Есть 3 принципиально разных подхода к мобильной адаптации — все они описаны в документации Google для разработчиков. Каждый из них имеет свои преимущества и недостатки.

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

В этом случае будет 2 сайта: десктопный и мобильный. Версия для мобильных размещается на новом домене (типа m.site.ru ).

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

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

Недостатки :

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

Мобильную версию на отдельном домене имеет магазин trial-sport.ru

Динамический показ

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

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

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

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


Сайт decathlon.ru использует один URL с разным набором HTML-кода

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

В этом случае макет сайта точно подгоняется под любой размер дисплея.

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

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

Недостатки :

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


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

Помимо указанных способов адаптации можно использовать плагины для популярных CMS. Например, для WordPress есть WPtouch и WP Mobile Edition. Это дешевое решение, но корректность работы сайтов оставляет желать лучшего. И если для блогов это выход, то для сложных проектов такое решение неприемлемо.

3. Упростите дизайн

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


Пример минимализма в дизайне

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

4. Поработайте над улучшением юзабилити

При разработке навигации, прежде всего, думайте о пользователе и его удобстве. Любая страница должна быть доступна в пару шагов — без сложных фильтров и списков. Для совершения звонка в одно нажатие правильно прописывайте формат номера с кодом страны и города +7 495 … . Предусмотрите авторизацию в один клик через соцсети. Одним словом — старайтесь минимизировать любые действия посетителей до цели.

Вместо курсора мышки на смартфоне используется палец, так что все элементы должны быть достаточного размера. Человек не должен увеличивать изображение, чтобы кликнуть по какому-либо элементу. Не используйте шрифты с засечками, завитушками, курсив. Оптимальный размер шрифта - 16 пикселей, высота строки - 1,2 em.

5. Ускорьте загрузку страниц

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

  • HTML и скриптов (HTML compressor или Gzip);
  • кода CSS (CSS minifier или CSS compressor);
  • JS кода (Javascriptcompressor , jscompress и др.);
  • изображений (Optimizilla , Resizepiconline , EWWW Image Optimizer и др.);
  • используйте кеш браузера.

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

6. Используйте социальные кнопки

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

7. Оптимизируйте контент

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

Следуйте таким правилам:

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

8. Не ограничивайте доступ к контенту

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

9. Оставайтесь в тренде

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

  • модульный дизайн (контент группируется в блоки, которые выстраиваются в одну ленту или несколько лент в зависимости от размера экрана);
  • плоский дизайн (тени, полутени, объем - это все осталось в прошлом);
  • подход mobile first (раньше сайты делали для ПК, а потом в силу необходимости адаптировали для мобильных - сегодня все наоборот).

10. Не забывайте анализировать сайт на мобилопригодность

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

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

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

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

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

Введение

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

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

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

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

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

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

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

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

2. Четкость шрифта

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

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

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

4. Размер содержимого

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

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

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

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

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

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

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

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

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

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

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

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

Итак,

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

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

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

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

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

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

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

Плюсы

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

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

Минусы

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

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

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

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

Лучшие статьи по теме