Верстка сайту: яку вибрати

1. Чому це важливо
2. Боротьба за клієнта
3. Верстка і тенденції Рунета
4. Фіксована верстка сайту
5. Плюси фіксованою верстки сайту
6. Адаптивна верстка сайту
7. Наші рекомендації

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

Чому це важливо

Дизайн сайту - основний посередник між компанією і клієнтом. Численні дослідження неодноразово підтверджували, що якщо ресурсу не вдається утримати відвідувача протягом перших восьми секунд, цей відвідувач просто піде і вже навряд чи повернеться. І ось ці вісім секунд дизайн сайту відпрацьовує вкладені в нього гроші, намагаючись заманити відвідувача. Він ніби промовляє: «Тобі тут зручно, якби залишився». Якщо на цьому етапі потенційному клієнтові не сподобається хоч одна дрібниця, існує велика ймовірність, що він вважатиме за краще сайт іншої компанії, навіть якщо у вас будуть вигідніші умови співпраці.

Боротьба за клієнта

Ринок - це поле бою, а залучення нових клієнтів - постійна боротьба. Контент, яким наповнений ваш сайт, веде боротьбу за увагу і інтерес відвідувача. Продовжують цю боротьбу менеджери, яким він згодом подзвонить. Але починає цю боротьбу завжди дизайн! І якщо ця восьмісекундная битва буде програна, всі інші просто не відбудуться. Саме з цієї причини розробка сайтів - це постійно розвивається багатомільйонна індустрія, і саме тому в дизайні сайту важлива кожна деталь, кожна дрібниця! Що й казати про верстку, безпосередньо впливає на юзабіліті. Неправильний вибір її типу здатний зіпсувати враження навіть від ресурсу, в якому все інше буде просто ідеально.

Верстка і тенденції Рунета

Користуючись популярними англомовними ресурсами, ви напевно помічали, наскільки вони функціональні і практичні. У більшості випадків це досягається фіксованою версткою сайту, при якій пропорції основних текстових і графічних блоків заздалегідь визначені і зафіксовані. Це дуже зручно, проте у цій практичності є і зворотна сторона. Такий сайт схожий на сторінку паперової газети або журналу: він спочатку має задану ширину. Залежно від використовуваного цифрового пристрою і дозволу його екрану, користувач буде бачити або розташовується по центру, або притиснутий до одного з країв екрану фіксований контент сайту. Всю решту вільну площу займатиме фон. Якщо ж сторінка сайту не буде поміщатися на весь екран (наприклад, на смартфонах з невеликим дозволом), користувачеві доведеться задіяти горизонтальний скрол. Зате контент такого сайту завжди єдиним чином відображаються абсолютно у всіх випадках і на всіх пристроях.

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

У Рунеті практикується дещо інший підхід. Російськомовний сегмент Всесвітньої павутини відчутно відрізняється від західного. Замість того щоб слідувати нудною практичності, наші дизайнери змагаються між собою в спробах зробити сайт якомога більш помітним, стильним і привабливим. Погляньте на популярні російські веб-портали: всі вони виглядають свіжо, яскраво і функціонально. Притому неважливо, чи користуєтеся ви смартфоном, планшетом або монітором з роздільною здатністю Ultra HD. Сайт завжди оптимально відмасштабуйте і задіє всю корисну площу екрану. Це досягається використанням так званої гумової верстки. Хоча у неї і є окремі недоліки, способу більш ефектно відобразити інформацію на екрані просто не існує. Для тих же, хто хоче поєднати і практичність, і ефектність, існує ще один варіант - адаптивна верстка сайту.

Отже, в загальних рисах зрозуміло, чим відрізняються один від одного фіксована, гумова і адаптивна верстка сайту. Тепер більш детально поговоримо про переваги і недоліки кожної з них.

Фіксована верстка сайту

Ширина сторінки з фіксованою версткою не змінюється в залежності від ширини і дозволу екрану. Це дає гранично чітке розуміння того, як сайт буде виглядати на всіх пристроях, незалежно від їх дозволу і використовуваного браузера. Такий підхід мінімізує ризик виникнення проблем з боку користувача. Елементи на сторінці не плавають, а мають строго фіксоване розташування. Однак це ж є і мінусом: при перегляді таких сторінок на широкоформатних моніторах з боків будуть спостерігатися порожні поля з однорідним фоном, а користувачам смартфона доведеться часто використовувати скролл. Це є своєрідною платою за стабільність і функціональність, але зате власник сайту завжди буде впевнений, що його ресурс правильний та без спотворень абсолютно у всіх відвідувачів.

Сторінки з фіксованою версткою займають, як правило, 960-1000 пікселів в ширину. Це саме та ширина, яка гарантує власникам пристроїв з дисплеями 1024 × 768 повноцінну можливість перегляду без використання горизонтального скролла.

Плюси фіксованою верстки сайту

• строго заданий розташування об'єктів не дозволяє тексту розтягуватися по ширині;
• фіксована верстка легше стилизуется, на неї легше накладати всілякі ефекти;
• у користувачів не виникає проблем при перегляді сайту в різних браузерах;
• фіксована верстка простіша в реалізації, тому розробка сайту відбувається набагато швидше (ідеально для термінових проектів).

Недоліки фіксованою верстки сайту

• порівняно невелика ширина сайту сильно обмежує веб-дизайнерів в можливості вдало скомпонувати матеріали і зробити сайт по-справжньому ефектним;
• при низькій роздільній здатності екрану у користувача буде необхідність в постійному використанні горизонтального скролла;
• вид веб-сторінки може сильно постраждати, якщо вона буде відкрита на пристрої, користувач якого вручну збільшив шрифти (текстовий блок не збільшується пропорційно великому шрифту, в зв'язку з чим дизайн сайту сильно страждає).

гумова верстка

Гумова верстка сайту не прив'язана до певної ширині і використовує масштабування. На практиці це означає, що кожна сторінка вашого сайту завжди буде займати весь вільний простір екрану. Неважливо, який пристрій буде використовувати відвідувач вашого ресурсу: ноутбук, планшет, смартфон або телевізор з доступом в Інтернет - дизайн сайту завжди буде виглядати максимально ефектно, задіюючи всі доступні можливості для утримання уваги потенційного клієнта.

Яким чином це реалізується? Як правило, веб-дизайнер виділяє певну сукупність елементів (шапка сайту, основний контент, футер), які будуть тягнутися при масштабуванні. У той же час позначаються і фіксовані частини, місце розташування яких завжди буде залишатися незмінним (вертикальні бічні меню, банерні блоки). Такий підхід дозволяє повністю заповнити екран контентом. Навіть якщо у користувача буде професійний широкоформатний монітор з роздільною здатністю 2560 × 1440, у нього все одно складеться враження, ніби дизайн сайту розроблений конкретно під цей пристрій. Однак це тягне за собою і певні труднощі. Так, наприклад, при бажанні розмістити зображення, що займає всю ширину сторінки, відразу ж виникає питання: а якого дозволу воно повинно бути? Щоб картинка нормально масштабувати, доводиться завантажувати на сервер дуже великі зображення. Це істотно ускладнює сайт, ускладнюючи його роботу на пристроях з низькою продуктивністю. До того ж при розробці сайту веб-дизайнеру доводиться вказувати ширину зображень не в звичних і зрозумілих пікселях, а в процентних співвідношеннях до блоку, всередині якого вони розміщуються. В іншому випадку великі картинки будуть розтягувати екран, повністю спотворюючи дизайн сайту.

Дуже часто проблеми з гумовою версткою виникають при спробі створити "розвідний блок" з великою кількістю мініатюрних фотографій і невеликими текстовими блоками. Кількість тексту у всіх підрозділах різний, тому в одних можуть спостерігатися порожнечі, а в інших, навпаки, тіснота. Однак досвідчені дизайнери навчилися вирішувати цю проблему шляхом заповнення порожнього простору якимось ненав'язливим фоном.

Адаптивна верстка сайту

Це рішення порівняно нове, проте воно дуже швидко завойовує популярність. Про це красномовно свідчить статистика запитів Яндекса: якщо на початку 2014 року кількість запитів «адаптивна верстка» не перевищувало 1000, то до кінця серпня вже досягло 2300. Пошукова система Google в квітні 2015 року та зовсім прийняла адаптивну верстку за певний стандарт якості , Як універсальне рішення для оптимізації сайтів під екрани мобільних пристроїв.

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

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

Якщо при створенні сайту застосовується адаптивна верстка, досвідчені програмісти намагаються сформувати всі розділи в чіткі і заздалегідь спроектовані типові блоки зі строго визначеними місцями на сторінці. Таким чином вони домагаються того, що підкачуємі згодом через адмінку зображення розміщуються саме там, де потрібно, коректно відображаючись у всіх дозволах. Хоч це і накладає на клієнта деякі обмеження в свободі його дій з контентом через візуальний редактор контенту, але зате позитивно позначається на дизайні сайту.

Наші рекомендації

В кінцевому підсумку вибір типу верстки, звичайно ж, залишається за клієнтом, але фахівці лідируючих веб-студій Рунета і нашого інтернет-агентства зокрема все більше сходяться на думці, що майбутнє за адаптивної версткою і вибирати варто саме її. Цієї ж думки дотримуються і маркетологи з SEO-фахівцями. Тепер, коли ви знайомі з основними плюсами і мінусами сучасних типів верстки, вам набагато простіше буде зорієнтуватися у виборі. Бажаємо успіху вашого проекту і сподіваємося на довгострокову співпрацю!