Россия+7 (495) 960-65-87

Google рассказал, как сделать старый статичный сайт mobile-friendly

Россия+7 (495) 960-65-87
Шрифт:
0 11462

Даже старый статичный сайт на HTML можно подготовить к грядущему обновлению алгоритма Google. Подробную инструкцию, как это сделать, опубликовала Зинеб Аит Бахаджи (Zineb Ait Bahajji), аналитик Google, на форуме для вебмастеров.

Даже если сайт нельзя перевести на CMS, остаются способы сделать его mobile-friendly:

  • Используйте режим эмуляции в браузере Chrome, чтобы протестировать отображение сайта на разных экранах и разрешениях.
  • Настройте область просмотра.
  • Используйте CSS вместо и других встроенных HTML-элементов.
  • Если вы видите, что страница слишком большая по ширине, возможно, это вызвано каким-то HTML-элементом. Следует использовать HTML-элементы с CSS, которые самостоятельно будут подстраиваться под необходимые размеры. Узнать больше об оптимизации CSS можно здесь.
  • Уберите все элементы с фиксированной шириной (например, ) и замените их элементами с относительной шириной (например,
    ), максимальной шириной (
    ) или адаптивной шириной в соответствии с медиазапросом.
  • Добавьте img { max-width:100% } в таблицу стилей. Это достаточно простой способ работы с широкими изображениями, позволяющий «подгонять» их под ширину экрана устройства, с которого просматривается сайт.
  • Избегайте использования
  • в макете страницы. Используйте
    только для таблиц. Если у вас уже есть
    в макете, прежде всего, конвертируйте его в div + CSS floats/inline блоки для правильного отображения на десктопе. После этого добавьте медиазапросы, чтобы элемент стал адаптивным. Больше узнать об основах адаптивного дизайна можно здесь.
  • Избегайте широких таблиц (с 3-4 столбцами и более), т.к. они могут некорректно отображаться на мобильных устройствах. Если у вас уже есть подобные элементы, рекомендуется модифицировать их или преобразовать код в стиль без таблицы (
    ).
  • Избавьтесь от тегов
    , т.к. они зачастую делают страницу шире. Как именно это сделать, зависит от наполнения этих тегов: 
        
    • для форматированного текста используйте внешние отступы и поля в CSS,
    • для таблиц используйте
  • .
  • для шрифтов фиксированной ширины используйте CSS font-family:monospace
  • для всего остального, что действительно требует сохранения пространства вокруг (например, компьютерный код), допускается использование
    , но следует добавлять style="overflow:auto;", чтобы был возможен горизонтальный скроллинг внутри данного элемента. 
  • Добавьте объявление DOCTYPE для пользователей, использующих старые десктопные браузеры, такие как Internet Explorer 8. Без правильно оформленного тега DOCTYPE в верхней части HTML кода страницы некоторые десктопные браузеры входят в «режим совместимости» и воспроизводят ее нестандартным путем. Использование объявления DOCTYPE призывает их следовать стандарту, уменьшая шансы, что старые браузеры будут неверно показывать верстку страницы.
  • Не используйте Flash или другие плагины, которые обычно не поддерживаются на мобильных устройствах. 

(Нет голосов)
Читайте нас в Telegram - digital_bar

Случилось что-то важное? Поделитесь новостью с редакцией.


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
    ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
    Рейтинг Известности 2018: старт народного голосования
    Михаил Р
    1
    комментарий
    0
    читателей
    Полный профиль
    Михаил Р - 1. Demis 2. кокс 3. Ашманов 4. Скобеев 5. Digital Strategy
    Сколько ссылок помогут продвинуть молодой сайт
    Павел Андрейчук
    14
    комментариев
    0
    читателей
    Полный профиль
    Павел Андрейчук - Дело в том, что вряд ли в ваших платных "качественных" кейсах найдётся хоть пару % действительно новой и полезной информации которой бы не было на общедоступных источниках.
    Рейтинг Известности 2018: второй этап народного голосования
    Константин Сокол
    3
    комментария
    0
    читателей
    Полный профиль
    Константин Сокол - Кто был ответственный за дизайн таблицы голосования? Копирайтер?
    Кейс: вывод лендинга по изготовлению флагов на заказ в ТОП 1 по Санкт-Петербургу
    utka21
    5
    комментариев
    0
    читателей
    Полный профиль
    utka21 - Кейс как кейс. Для некоторых станет вполне возможно полезным. ( Для конкурентов точно) . А вот с комментариями , что то пошло не так )
    Обзор популярных CMS: плюсы и минусы
    Гость
    1
    комментарий
    0
    читателей
    Полный профиль
    Гость - У Битрикса техническое seo сильно страдает, чтоб оно там было нормальным придется все переделать. Безопасность у Битрикса тоже низкая, особено если надо дорабатывать функционал, как только правиться функционал у Битрикс , то уровень ее безопасности определяет тот разработчик , который этим занимается. Самые безопасные движки те, что нет в общем доступе и где нельзя ничего редактировать в коде. =)
    Как использовать Python для LSI-копирайтинга
    Evgeny Montana
    6
    комментариев
    0
    читателей
    Полный профиль
    Evgeny Montana - спасибо)
    Инструкция: настраиваем цели Яндекс.Метрики через Google Tag Manager
    Roman Gorkunenko
    1
    комментарий
    0
    читателей
    Полный профиль
    Roman Gorkunenko - Здравствуйте. Подскажите, пожалуйста, можно с айпи метрики вытащить среднюю стоимость клика по утм меткам? В метрике есть такой шаблон tags_u_t_m, но он не совместим с меткой директа, у них разные префиксы.
    Стартовал сбор заявок на участие в рейтинге «Известность бренда SEO-компаний 2018»
    Артем Первухин
    1
    комментарий
    0
    читателей
    Полный профиль
    Артем Первухин - Make KINETICA Great Again!
    BDD 2018: Как загнать сайт под фильтр без ПФ и ссылочного. Конкуренция в сложных нишах и методы защиты
    Гость
    1
    комментарий
    0
    читателей
    Полный профиль
    Гость - Какой там год) судя по этому "кейсу", чувак либо вообще не в теме, либо это делал кто то вместо него, но делал очень коряво
    Аудит структуры интернет-магазина мебели от «Ашманов и партнеры»
    Дмитрий
    7
    комментариев
    0
    читателей
    Полный профиль
    Дмитрий - Сергей, а вы допускаете, что вся ваша жизнь - seo-миф?
    ТОП КОММЕНТАТОРОВ
    Комментариев
    910
    Комментариев
    834
    Комментариев
    554
    Комментариев
    540
    Комментариев
    483
    Комментариев
    373
    Комментариев
    341
    Комментариев
    262
    Комментариев
    243
    Комментариев
    171
    Комментариев
    156
    Комментариев
    137
    Комментариев
    121
    Комментариев
    99
    Комментариев
    97
    Комментариев
    97
    Комментариев
    96
    Комментариев
    80
    Комментариев
    67
    Комментариев
    65
    Комментариев
    60
    Комментариев
    59
    Комментариев
    57
    Комментариев
    55
    Комментариев
    54

    Отправьте отзыв!
    Отправьте отзыв!