×

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

Будь старий і статичний сайт можна підготувати до оновлення алгоритму для мобільного видачі Google.

mobile friendly

Будь старий і статичний сайт можна підготувати до оновлення алгоритму для мобільного видачі Google. Про це розповіла аналітик Google Зинеб Аіт Бахаджи.

Способи зробити сайт дружнім для мобільних пристроїв (mobile-friendly):

  • Використовуйте режим емуляції в браузері Chrome, щоб протестувати відображення сайту на різних екранах і дозволах, після чого налаштуйте область перегляду.
  • Використовуйте CSS замість тегів <font> і інших вбудованих елементів HTML.
  • Якщо ви бачите, що сторінка занадто велика по ширині, можливо, це викликано якимось HTML-елементом. Слід використовувати елементи HTML з CSS, які самостійно будуть підлаштовуватися під необхідні розміри.
  • Приберіть всі елементи з фіксованою шириною (наприклад, <table width=600>) і замініть їх елементами з відносною шириною (наприклад, <table width="80%">), максимальною шириною (<table style="max-width:600px;">) або адаптивної шириною відповідно до медиазапросом.
  • Додайте в таблицю стилів img { max-width:100% }. Це досить простий спосіб роботи з широкими зображеннями, що дозволяє «підганяти» їх під ширину екрану пристрою, з якого проглядається сайт.
  • У макеті сторінки уникайте використання <table>. Використовуйте <table> тільки для таблиць в контенті. Якщо у вас вже є <table> в макеті, то замініть його на його <div> + CSS floats/inline блоки для правильного відображення на десктопі. Після цього додайте медиазапросы, щоб елемент став адаптивним.
  • Уникайте таблиць з великою кількістю стовпців (3-4 і більше), оскільки вони можуть некоректно відображатися на мобільних пристроях. Якщо у вас вже є подібні елементи, рекомендується модифікувати їх або перетворити код стиль без таблиці (<dl>).
  • Позбавтеся від тегів <pre>, т. к. вони часто роблять сторінку ширше. Як саме це зробити, залежить від наповнення цих тегів:
    • для форматованого тексту використовуйте зовнішні відступи і поля в CSS,
    • для таблиць використовуйте <table>.
    • для шрифтів фіксованої ширини використовуйте CSS font-family:monospace
    • для всього іншого, що дійсно вимагає збереження простору навколо (наприклад, комп'ютерний код), допускається використання <pre>, але слід додавати style="overflow:auto;", для горизонтального скролінгу усередині даного елемента.
  • Додайте !DOCTYPE для користувачів, що використовують старі десктопні браузери, такі як IE 8. Без правильно оформленого тега !DOCTYPE у верхній частині HTML-коду сторінки деякі десктопні браузери входять в «режим сумісності» і відтворюють її нестандартним шляхом. !DOCTYPE змушує їх слідувати стандарту, тим самим зменшуючи шанси, що старі браузери будуть неправильно показувати верстку сторінок сайту.
  • Не використовуйте Flash або інші плагіни, які зазвичай не підтримуються на мобільних пристроях.
01Офіс в Києві
м. Киев, 02068
вул. Ахматової 9/18
02Офіс в Броварах
м. Бровари, 07405
вул. Чорновола 2-А
03Працюємо
Пн.-Пт. 9:00-18:00
Сб. 11-00 -16:00
×
Пропонуємо перейти на українську мову
Згоден?
Хочу, перейти на мовуНет, останусь на языке