Старый статичный сайт можно сделать mobile-friendly. Google знает как!

Старый статичный сайт можно сделать mobile-friendly. Google знает как!

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

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

· Настройте область просмотра.

· Вместо <font> и других встроенных HTML-элементов используйте CSS.

· Следует использовать HTML-элементы с CSS, которые самостоятельно будут подстраиваться под необходимые размеры, если страница большая по ширине.

· Замените все элементы с фиксированной шириной (например, <table width=600>) элементами с относительной шириной (например, <table width="80%">), максимальной шириной (<table style="max-width:600px;">) или адаптивной шириной в соответствии с медиазапросом.

· Способ работы с широкими изображениями, которые позволяю подгонять по ширине экрана устройства – это добавить img { max-width:100% } в таблицу стилей.

· Используйте <table> только для таблиц. Избегайте его использования в макете. Если есть <table> в макете - конвертируйте его в div + CSS floats/inline блоки для правильного отображения на десктопе. Затем добавьте медиазапросы, чтобы элемент стал адаптивным.

· Если у вас есть широкие таблицы (с 3-4 столбцами и более), то их следует рекомендуется модифицировать или преобразовать код в стиль без таблицы (<dl>), т.к. они могут некорректно отображаться на мобильных устройствах.

· Теги <pre> делают страницу шире, нужно избавиться от них.

· Для пользователей старых браузеров, таких как Internet Explorer 8 добавьте объявление DOCTYPE. Тег DOCTYPE указывает браузерам следовать стандарту, тем самым сводя к минимуму шансы неверного отображения страниц в старом браузере.