Кросбраузерна верстка, "залучає" пошукові системи

Коли створюється сайт, то важливим у плані забезпечення його ефективності є кросбраузерна верстка. Що це таке? Як її можна зробити? Які підводні камені існують?

Що собою являє кросбраузерна верстка?

Html/css – це основа при створенні сайту. Багато веб-майстри підходять до цього за принципом: мені добре – і вистачить. І як же неприємно буває, коли заходиш зі свого браузера або мобільного пристрою, а сайт відображається неправильно. У таких випадках на допомогу приходить адаптивний дизайн і кросбраузерна верстка.


Css і html складають у такому разі кістяк, з допомогою якого всі реалізовується. В окремих випадках для цієї мети може залучатися jаvascript. Але кінцева мета одна – зробити так, щоб все працювало на різних версіях. Тому якщо є бажання забезпечити кросбраузерність, щоб сайт добре відображався у всіх браузерах, про це доводиться думати постійно, з першої ж секунди роботи над сайтом.

Покрокове керівництво в загальних рисах

Отже, давайте розглянемо, як зробити кросбраузерність верстку. Спочатку слід визначитися, з якими програмами сайт буде працювати. Прийміть до відома, що кількість браузерів наближається до двох сотень, тому намагатися догодити всім – справа неймовірної складності. Тому вибирають число в діапазоні від 3 до 8. Щоб визначитися, на що орієнтуватися, можна скористатися і допоміжними сервісами на зразок Yandex Metrika і Google Analytics. Після цього слід з'ясувати, як буде вирішуватися проблема досягнення кросбраузерності.


Багато роблять свою ставку на хакі. Це спеціальні коди, селектори і правила, які розуміє лише один певний браузер. Але, враховуючи, що доводиться писати як мінімум кілька десятків таких вставок для різних браузерів і їх версій, багато відкидають такий підхід із-за його дорожнечу, тривалості та нераціональності. Деякі роблять ставку на використання тих елементів, які відображаються однаково. Але при цьому часто втрачається ряд важливих переваг. Щоб мінімізувати втрати, паралельно використовується ще й адаптивний дизайн. Що він собою являє?

Адаптивний дизайн

Це підхід до верстки сайтів, під час якого сайт робиться гумовим, тобто таким, який пристосовується до різних браузерам і розмірами екранів. Слід зазначити, що адаптивний дизайн і кросбраузерність тісно переплетені, і коли говорять про одному, то, як правило, мають на увазі і друге. Давайте розглянемо невеликий приклад. Є такі браузери, як Mozilla і Opera Mini. Перший використовується на звичайних комп'ютерах, а другий – на мобільних телефонах. В цілому вони схожі, але мають цілий ряд особливостей. У таких випадках важливим є підключення окремих файлів і/або використання медиазапросов. Що ж це таке? У першому випадку створюються окремі файли, які націлені на роботу конкретного браузера, і прописується їх виклик. У другому випадку необхідні файли з медиазапросами. Якщо використовувана програма відповідає специфічним вимогам, то підвантажується файл в потрібній конфігурації.

Що потрібно робити?

Спочатку слід пам'ятати, що коли працюєте з html, кросбраузерна верстка потребує особливої уваги. Тому для більшої результативності слід максимально використовувати можливості каскадних таблиць стилів. При цьому також необхідно змінити і деякі підходи до роботи. Так, багато недосвідчені люди, коли вони вказують розмір чого-то, використовують пікселі – рх. Розглянемо приклад з великим написом-заголовком, яка прикрашає верхівку сайту. У неї ширина була задана в розмірі 800рх. З екраном в 1600рх це буде досить привабливо. А ось на 700рх вона буде виглядати безглуздо. Що робити в такому випадку? Можна задати розмір в пікселях, а у відсотках! І буде займати напис не фіксовану довжину, а половину ширини екрана. У відсотках можна задавати і відстань, на якому від країв екрана буде розміщений певний елемент. Але ось що робити, якщо екран дуже вже маленький? Припустимо, він становить 300рх? У цьому випадку нам допоможе медиазапрос, якому необхідно прописати фіксування ширини. І якщо вона дорівнює 700рх і менше, то можна встановити, що напис буде займати 75% місця. А якщо ширина дорівнює 300рх і менше, то можна виставити і всі 100%. В цілому тема дуже цікава і корисна, тому її можна вивчити досить докладно. Але, на жаль, тут інформації на книгу, і помістити все в статтю не вийде.

Чому кросбраузерна адаптивна верстка приваблює пошукові системи?

А відповідь досить проста: бо це говорить про те, що розробники слідкують за сайтом і роблять його максимально приємним для своїх користувачів. А значить, таких людей можна заохотити, надаючи їм більш високі позиції в пошукових системах. Звичайно, ваш сайт не буде виведений відразу на ТОП-1 але в сукупності з іншими факторами це дозволить сильно піднятися вгору. Слід зазначити, що це не просте марне вимога, а щось, чого заслужено приділено таку увагу. Адже подумайте самі: як це користувачеві, коли він потрапляє на сайт, який не дуже приємний зовні? А адже він може прийти до думки, що пошукова система пропонує неякісний контент! Тому вони і відбирають так ретельно сайти, які слід пропонувати. До того ж в цьому є і вигода вебмайстрів, адже вони створюють якісну оболонку для контенту, в якій люди зможуть отримувати цікаву для них інформацію за допомогою будь-якого апаратного засобу: комп'ютера, ноутбука, планшета, смартфона або ж мобільного телефону. Відповідно, чим більше задоволених відвідувачів, тим швидше зростає сайт та рівень доходу.

Висновок

Не можна не відзначити той скромний факт, що створення кроссбраузерного сайту з адаптивним дизайном – це справа нелегка, вельми тривале і трудомістке. Тому необхідно запастися терпінням і пам'ятати, що дисципліна – це велика справа! Можливо, щось спочатку не буде виходити, але потрібно пробувати, шукати інформацію, використовувати різні підходи і не відступати. І тоді обов'язково вийде зробити сайт, який любо-дорого буде показати його відвідувачам.