Як перевірити верстку сайту

33

Від автора: у вас в руках файли з версткою. Але як перевірити її якість? Які інструменти існують для тих, хто не розбирається в HTML і CSS? Якими корисними речами варто користуватися самому верстальщику? Ця стаття спробує відповісти на ці питання.

Чому важливо перевіряти якість верстки

Питання, яке хвилює як замовників, так і верстальників. Перші так можуть переконатися в тому, що виконавець виконав свою роботу якісно. Верстальщику ж корисно буде перевірити верстку сайту перед тим, як посилати її на схвалення клієнта. Це дозволить економити час, інакше може виникнути ситуація, коли доведеться вносити правки вже після здачі проекту. Якщо ви самі створюєте свій сайт, інструменти перевірки також вам знадобляться.

Інструменти для перевірки

Відладчик. Один з найпростіших способів, як можна перевірити верстку сайту – включити відладчик. Він запускається при натисканні в браузері F12. Цей інструмент допомагає побачити, як зміниться вигляд сторінки, якщо з неї прибрати якісь елементи або стилі. Наприклад, ви прописали якесь нове CSS властивість, потім прописали ще кілька. Вирішили подивитися, як все це буде виглядати в браузері.

Виявилося, що елементи відображаються не так, як планувалося. З-за якогось властивості сталася така помилка? Вручну це визначати довго. В налагоджувач ж ви можете швидко відключити будь-які стилі і швидко виявити помилки. Також у ньому добре видно помилки. Більшість досвідчених верстальників шукають помилки саме з допомогою відладчика, а не самостійно переглядаючи код.

Рис. 1. З відладчиком знаходити помилки простіше

W3C Валідатор. Сервіс перевірки коду на дрібні помилки. W3C – це організація, яка займається розробкою і офіційною підтримкою веб-стандартів. Оскільки вона встановлює ці стандарти, на її сайті є спеціальний сервіс, який може перевірити будь-яку сторінку в мережі на валідність (тобто на помилки). Потрібно сказати, що це досить строгий валідатор.

Часто ним користуються замовники, намагаються так визначити якість верстки. Навіть у добре зверстаній сторінці валідатор може знайти більше тридцяти помилок. Проте в цьому немає нічого страшного. Сервіс вважає за помилку навіть те, що ви не поставили пробіл перед значенням html-атрибуту. А тепер уявіть, що в такому стилі ви написали весь код. У вас будуть сотні помилок, але насправді верстка буде виконана правильно, просто ви порушите стандарти, які W3C встановили на рахунок правильного написання коду.

Детальніше з цими правилами можна ознайомитися на сайті W3C. По суті, єдиний сайт, який валідатор перевіряє без помилок, це сайт самої W3C. Тому не варто виправляти всі помилки. І все-таки валідатор може вказати на якісь серйозні проблеми, тому перевірка верстки сайту в ньому бажана. validator.w3.org — валідатор.

IE Tester. Існує така програма, яка дозволяє протестувати сайт в старих версіях Internet Explorer. Багато замовників сьогодні все ще потребують підтримку цього браузера, щоб сайт в ньому позначався так само, як і в інших. Можливо, зараз вже є онлайн-сервіси, на яких можна виконати аналогічну перевірку. У будь-якому випадку, вам достатньо вставити потрібний код і програма покаже, як все це відображалося б в IE 6, 7 і 8.

Зазвичай підтримка шостої версії вже нікому не потрібна, а восьма може вести себе цілком адекватно якщо, звичайно, у вашій верстці не присутні нові CSS-властивості. У старих версій IE є цікава особливість – вони читають закомментированный код. Тому в одному з коментарів можна підключити таблицю стилів, яка буде створена спеціально для старих версій браузера.

Інші браузери просто пропустять цей фрагмент. Такий спосіб можна використовувати, якщо вам дійсно дуже сильно потрібна підтримка IE.

Інші сервіси. Останнім часом сервісів для перевірки верстки стає все більше і більше. Немає сенсу зупинятися на якомусь окремому. Більшість цих сервісів працюють непогано, але все одно не перевіряють все досконально.

Як перевірити адаптивну верстку

Окремо варто розмова про адаптивної верстці. Найкращим вашим інструментом у цій справі буде звичайне вікно браузера. Просто зменшіть ширину вікна і спостерігайте, як змінюється дизайн. Якщо ви бачите, що з’являється горизонтальний скрол або якісь елементи не влазять на сторінку, значить, ваша верстка далека до ідеалу і її потрібно допрацьовувати. Якщо ви хочете побачити, як буде себе вести сайт на великому екрані – зменшіть масштаб. Звичайно, якщо у вас є планшет і телефон, то можна завантажити вашу верстку на який-небудь безкоштовний хостинг і зайти на сайт з цих пристроїв.

Рис. 2. Зміна ширини вікна браузера – найпростіший спосіб перевірити адаптивність.

Кросбраузерність

Чим ще перевірити верстку сайту? Обов’язково повинна бути перевірка на кросбраузерність. Потрібні відкрити сайти в різних браузерах і подивитися, як вони там виглядають. Можна змінювати масштаб та розмір шрифту. Ви повинні переконатися, що хоча б у більшості користувачів все буде нормально. Якщо ви перевіряєте вручну, то можете також попросити знайомих перевірити верстку в їх браузерах, якщо їх версії відрізняються від ваших. Тут можна дати ще одну пораду – не використовуйте занадто специфічних властивостей, які підтримуються тільки в якомусь одному браузері. А якщо вже використовувати, придумуйте для них якусь альтернативу в інших браузерах. Для деяких властивостей все ще потрібно використовувати вендорные префікси. Це пов’язано з тим, що веб-стандарти постійно розвиваються і всі браузери не можуть підтримувати все. Але якщо вже робити перевірку на кросбраузерність, то робити її як мінімум для таких браузерів: Chrome, Mozilla, Opera, Safari, IE.

Є дуже хороші закордонні сервіси просунутої кросбраузерною перевірки. Наприклад, browserstack.com. Така перевірка може коштувати вам грошей. Якщо у вас дійсно дуже великий проект і ви хочете досконально перевірити його, в такому випадку є сенс користуватися подібними сервісами.

Перевірка на відповідність з макетом

Перевірити верстку можна ще так: скріншот зверстаного сайту необхідно додати до макету в фотошопі в якості нового шару. Встановити цього шару прозорість і подивитися, наскільки відображення елементів збігається з макетом. Для цього можна використати спеціальний плагін. Наприклад, Pixel Perfect для Mozilla.

Додаткові вимоги

Природно, у будь-якої нормальної верстці повинна бути прописана кодування і doctype. Також сторінку можна перевірити на працездатність при вимкнених картинках або при блокуванні javascript-коду. Справа в тому, що в налаштуваннях будь-якого браузера користувач може вимкнути ці параметри. Особливо корисно буде прописати атрибути alt для зображень, щоб при їх зникнення користувач хоч якось міг орієнтуватися. Насправді вимог до верстки може бути дуже багато. Навіть в рунеті є досить строгий перелік необхідних перевірок. Наприклад, з появою HTML5 верстку можна перевіряти на правильну семантичну розмітку. Однак все це не є критичним. Вищеописаних перевірок цілком вистачить, щоб сміливо запустити нормальний працездатний сайт.

У цій статті ми описали основні способи перевірки верстки з допомогою різних програм, сервісів та інструментів. Це допоможе вам адаптувати сайт під будь-які умови.