- кросбраузерність верстки
- Як забезпечити кроссбраузерность сайту
- Вендорний префікси
- універсальність елементів
- Як перевірити кроссбраузерность сайту
- Як впливає на відвідуваність сайту
Тематичний трафік - альтернативний підхід в просуванні бізнесу
Кросбраузерність - здатність веб-ресурсу підлаштовуватися під кілька браузерів і коректно відображатися в них.
Більше відео на нашому каналі - вивчайте інтернет-маркетинг з SEMANTICA
Наприклад, ви зробили сайт для вашого інтернет-магазину. Ви розробили красивий дизайн, який приємний для очей. Але на ваш сайт користувачі заходять через різні браузери. Хтось взагалі використовує смартфон. І якщо ви не перевірили кроссбраузерность ресурсу, може статися, що в деяких браузерах сайт буде відображатися погано.
Можуть з'їжджати елементи, можуть не відображатися картинки, стануть непривабливими шрифти. Людина не буде користуватися таким сервісом. Він піде шукати далі.
Завдання розробника сайту - зробити його так, щоб незалежно від браузера і пристрої ресурс відображався правильно.
кросбраузерність верстки
Між браузерами йде конкуренція. Раніше кожен намагався додати виняткові фішки і опції. Це призвело до того, що стандарти HTML перестали дотримуватися, і кожен браузер по-своєму відображав сторінки.
Netscape Navigator вибув з гонки, віддавши монополію Internet Explorer. Через майже одночасно почали набирати обертів проекти Mozilla Firefox (Gecko), Google Chrome (Blink), Opera (WebKit) і Safari (WebKit), розділивши ринок між собою і змусивши спільноту задуматися над питанні кросбраузерності своїх сайтів.
правильна верстка сайту викликає довіру у користувачів. Вони з зручністю зможуть користуватися ресурсом. Лояльність аудиторії - важливий показник.
Розробити кросбраузерності верстку - окреме питання при роботі над великим проектом. При виконанні цієї умови найчастіше задіюються CSS і HTML правила, іноді доповнюються невеликим JavaScript (jQuery) кодом.
Виконується аналіз цільових платформ, з яких найбільш ймовірно і часто приходить клієнт на сайт, увага концентрується на найбільш популярних браузерах і дозволах екранів. Для цих цілей можна використовувати Яндекс Метрика, Google Analytics і інші сервіси збору даних про відвідувачів.
На сьогоднішній день виробники браузерів почали активно займатися своєчасної підтримкою стандартів World Wibe Web, HTML 5 і CSS 3, що безсумнівно позначилося на якості відображення сторінок. Однак, в деяких властивостях каскадних таблиць і трактуванні коду, навіть зараз на різних движках зустрічаються суттєві розбіжності, які необхідно виправляти вручну.
Як забезпечити кроссбраузерность сайту
Використання CSS hacks
"CSS хакі" - уривки коду, що розуміються тільки одним певним браузером. Якщо ваш сайт коректно відображається в двох браузерах, а в трьох інших щось йде не так, найчастіше питання вирішується дописуванням хаков для кожного з трьох невірно-інтерпретує движків. Хакі - самий "брудний" спосіб виправлення помилок, робить код не естетичним і не дійсним, але робочим.
Вендорний префікси
Залишилися, як ще один рудимент браузерних воєн, особливо браузерів WebKit. Більш "чистий" і чесний спосіб, ніж використання хаков.
Кожен браузер має власні властивості з Вендорний префіксом, так, наприклад елемент border-radius в Mozilla Firefox представлений властивістю -moz-border-radius, а в Chrome і Safari -webkit-border-radius. Такі властивості змінюють поведінку елемента тільки в певному браузері, і ігноруються іншими платформами.
універсальність елементів
Робіть упор на універсальні елементи - ті, які однаково працюють в більшості браузерів. Робота тільки з ними зробить код коротким, чистим і зрозумілим.
Перевірити підтримку правил можна на безкоштовному сервісі caniuse.com. У наочному поданні у вигляді таблиць можна уточнити, починаючи з якої версії той чи інший тег введений в підтримку кожним движком, і чи можна його застосовувати
Як перевірити кроссбраузерность сайту
Ви верстали сайт. Врахували поради. Настав час його перевірити. Перший спосіб - встановити на віртуальну машину всілякі браузери, відкрити свій сайт в кожному і подивитися.
Так само є спеціальні сервіси перевірки сайту на кроссбраузерность.
- browsershots.org
Перевага: Дозволяє отримувати скріншоти з великої кількості різних версій двигунів.
Недолік: Довге очікування.
- crossbrowsertesting.com
- browserstack.com
Перевага: Потужні засоби для глибокого аналізу веб-ресурсу в режимі онлайн.
Недолік: Платне використання більшості функцій.
Як впливає на відвідуваність сайту
Існує негласна статистика, яка говорить про те, що Яндекс Браузер і Chrome користуються популярністю молоді, а Opera і Mozilla віддають переваги вже працюють люди. Уявіть, що ви створили сайт зі скейтбордингу для молоді, а його оформлення з тріском провалюється в Chrome. Шрифти не завантажуються, відступи з'являються зовсім не там, де вони повинні бути - справжня катастрофа маркетингу, втрата цільової аудиторії.
Це був лише наочний приклад того, як кроссбраузерность важлива для будь-якого проекту. Саме те, наскільки добре ваш сайт підтримує найбільшу кількість браузерів, залежить його відвідуваність і інтерес користувачів до проекту.
Ніхто не буде читати блог з мобільного телефону, якщо літери на сайті дрібні і нерозбірливі, відвідувач піде з сайту, якщо побачить, що в його браузері дизайн виглядає нечитабельне і жахливо.
До того ж, пошукові системи піднімають внутрішній рейтинг сайтів, оформленим відповідно до стандартів сучасної верстки, що також позитивно позначиться на конверсії проекту.
Так само в блозі у нас є стаття про адаптивну верстку.