Ситуація знайома: ви приймаєте сайт, усе виглядає рівно, а через тиждень клієнт надсилає скриншот, де кнопка налізла на текст. У вас так не відтворюється.
Це не містика. Браузер — не проєктор, який показує готову картинку. Це програма, яка отримує опис сторінки й малює її самостійно, і кожна робить це трохи по-своєму.
Звідки беруться розбіжності
Причин небагато, і майже всі передбачувані.
Різні рушії. Chrome, Firefox і Safari побудовані на різних основах. Однакову інструкцію вони виконують однаково у 95% випадків, а в решті — з нюансами: інші відступи за замовчуванням, інша поведінка форм, інше округлення розмірів.
Різна швидкість підтримки нового. Нові можливості зʼявляються в браузерах не одночасно. Safari традиційно підхоплює частину новинок пізніше — саме звідси більшість історій «в усіх працює, на айфоні ні».
Системні елементи. Випадні списки, поля вибору дати, чекбокси й повзунки браузер часто малює сам, засобами операційної системи. Тому один і той самий випадний список на Windows і на iPhone виглядає по-різному — і це нормально.
Шрифти. Якщо шрифт не завантажився, браузер підставить свій. Текст поїде, бо в заміни інша ширина букв.
Розширення користувача. Блокувальники реклами, перекладачі й теми оформлення втручаються в сторінку. Найчастіші жертви — сторонні віджети, форми й спливаючі вікна.
Що з цього — реальна проблема, а що ні
Тут важливо провести межу, інакше можна витратити бюджет на боротьбу з нічим.
Не проблема: інакший вигляд системних елементів, різниця у пару пікселів, трохи інше згладжування шрифту. Сайт не зобовʼязаний виглядати абсолютно однаково скрізь — він зобовʼязаний бути зручним і працездатним.
Проблема: налізання елементів одне на одного, обрізаний текст, кнопка, що не натискається, форма, яку неможливо надіслати, горизонтальна прокрутка на телефоні. Тобто все, що заважає людині зробити те, по що вона прийшла.
Друга категорія коштує грошей напряму — це втрачені заявки. Про типові місця, де вони губляться, — у матеріалі про те, чому заявки не доходять.
Як перевірити самому, без інструментів розробника
Мінімальний набір, який ловить більшість поломок:
- Свій телефон і чужий телефон. Обовʼязково iPhone та Android — це різні браузери, а не просто різні екрани.
- Приватне вікно. Виключає кеш і розширення. Якщо в приватному все добре, справа була в них.
- Зміна ширини вікна на компʼютері. Потягніть край вікна від широкого до вузького й подивіться, чи не ламається розкладка на проміжних ширинах. Логіка адаптиву розібрана в матеріалі про адаптивний дизайн і мобільну версію.
- Збільшений шрифт. У налаштуваннях системи поставте більший розмір тексту. Багато сайтів ламаються саме тут, а користуються цим чимало людей — деталі в матеріалі про доступність сайту.
Перевіряти варто не «сайт узагалі», а сценарії: відкрити каталог, знайти товар, заповнити форму, надіслати. Поламане меню помітять усі, поламану форму — тільки після втрачених заявок.
Що вимагати від підрядника
Кросбраузерність не має бути окремою послугою «за доплатою» — це частина нормальної роботи. Але межі варто зафіксувати заздалегідь.
У домовленостях має бути список браузерів і пристроїв, на яких сайт перевіряється, і правило щодо старих версій: вони відкриваються й дозволяють зробити замовлення, навіть якщо без анімацій. Такий список зручно тримати разом із рештою пунктів приймання — див. чек-лист перед запуском сайту.
І окремо: перевіряти треба не лише при здачі, а після кожного оновлення. Для цього й потрібна копія сайту, на якій усе тестують до викочування, — механіка описана в матеріалі про тестовий майданчик.
Коротко
Різниця у вигляді між браузерами — не збій, а наслідок того, що кожен браузер малює сторінку сам. Розбіжності зʼявляються через різні рушії, різну швидкість підтримки нових можливостей, системні елементи форм, незавантажені шрифти й розширення користувача. Косметична різниця в кілька пікселів нормальна; поламана форма, обрізаний текст або кнопка, яку неможливо натиснути, — ні. Перевіряти варто там, звідки приходять ваші люди: подивіться аналітику, візьміть iPhone і Android, приватне вікно та збільшений шрифт — і проходьте сценарії, а не просто дивіться на головну. Список браузерів для перевірки має бути зафіксований із підрядником до запуску.
Ми в Obliko перевіряємо сайти на реальних пристроях і браузерах перед кожним запуском — щоб форма працювала в клієнта, а не тільки на компʼютері розробника.
У скількох браузерах узагалі треба перевіряти сайт?
Не в усіх, а в тих, звідки приходять ваші люди. Відкрийте аналітику, подивіться розподіл за браузерами й пристроями й беріть у роботу все, що дає хоча б кілька відсотків. Для українського малого бізнесу це зазвичай Chrome, Safari на айфоні, Firefox і вбудований браузер Android — чотири-пʼять комбінацій, а не двадцять.
Чи це помилка розробника, якщо в Safari щось зʼїхало?
Найчастіше так, але не завжди свідома. Браузери по-різному підтримують нові можливості, і те, що працює в Chrome, може ще не працювати в Safari. Професійний підхід — не використовувати новинку без запасного варіанта. Якщо ж зламане щось базове, це просто недотестовано.
Чому сайт зламався тільки в одного клієнта, а в усіх інших нормально?
Три типові причини: старий кеш браузера, розширення на кшталт блокувальників реклами, які вирізають частину елементів, і дуже стара версія браузера чи системи. Перевіряється швидко — попросіть відкрити той самий сайт у приватному вікні й на іншому пристрої.
Скільки коштує підтримка старих браузерів?
Дорого й майже завжди невиправдано. Кожен старий браузер у списку — це окремі обхідні рішення й окремий цикл тестування на кожній правці. Розумна межа для малого бізнесу — актуальні версії популярних браузерів плюс одна попередня; усе старше має просто відкриватися й давати змогу зробити замовлення, навіть без анімацій і тонкощів дизайну.
Потрібен сайт або застосунок?
Розробляємо під ключ — від дизайну до запуску. Порахуємо ваш проєкт безкоштовно.