HTML верстка: різновиди
Під час підготовки дизайн-макету дизайнер має максимально спростити завдання верстальнику, показавши на макеті, як змінюватиметься сайт за різних екранів, або хоча б зробити так, щоб верстальник зрозумів, який максимальний розмір макета.
Залежно від макета, існують 4 основні види версток, а це:
1. Мобільна версія
Мобільна версія або окрема мобільна версія означає, що сайт матиме незалежну від основного (десктопного) дизайну версію сайту. Актуально для великих сайтів/порталів або магазинів, де не можна зробити все зручно для використання на мобільних пристроях. Спеціальний скрипт визначає, яким пристроєм користується відвідувач і довантажує мобільну версію сайту. Для цієї версії створюють окремий шаблон сайту (і, звісно, дизайн-макети), але адмініструють цю версію не окремо, всі дані беруть із загальної бази.
Якщо ця версія адмініструється окремо, то це означає, що розробники даремно отримали гроші за роботу.
2. Адаптивна верстка
Дуже часто плутають з Responsive. Різниця полягає в тому, що сайт адаптується під певну роздільну здатність екрана. Для мобільних пристроїв ці екрани вказуються під час постановки завдання. Це може бути екран 320 або 375 для мобільника і 768 для планшета портретної орієнтації. На всіх інших екранах для мобільних пристроїв сайт не перевіряється і стилі під екрани не прописуються. Можете заперечити, що це ж краще навіть за Responsive. Але ні. По-перше, не варто робити те, що не замовляли і не заплатили за це гроші. По-друге, ігнорування умов завдання або неправильне їх розуміння може говорити про професіоналізм розробника. Якщо він тут зробив неправильно, то ніхто не дасть гарантії, що він реалізував усі інші умови завдання. Тому ваше завдання уточнити (розміри екранів), запропонувати (Responsive) і виконати завдання. При цьому адаптивна верстка коштує дешевше – менше часу йде на прописування стилів під необхідні екрани.
3. Responsive верстка
Означає, що елементи сторінки сайту змінюють свою поведінку під різні екрани. Але початковий екран це той, що визначений дизайном. Тобто, якщо максимальна ширина в дизайні вказана 1600, то сайт має підлаштовуватися під усі роздільні здатності від 1600 і нижче.
4. Full Responsive
Означає, що елементи сторінок сайту змінюють свою поведінку не тільки від макисмальних розмірів, які відображені в макеті, а й вище. Тобто, сайт так само підлаштовується під усі екрани нижче 1600 і так само змінює свою поведінку під екрани більші, ніж 1600. Як правило, це шрифти і розміри елементів, таких як кнопки або розміри текстових полів форм, як і зображення.
Окремо виношу застарілі види версток:
1. Статична верстка
Не використовується, оскільки великого поширення набули мобільні пристрої. Який сенс робити сайти тільки під одну роздільну здатність екрану. Під той же десктоп. Тому – застаріло.
2. Змішана верстка
Теж застаріле. У 2005 році потихеньку переходили з табличної верстки на блокову і через косяки IE5-6 деякі властивості не підтримувалися вірно, тому використовували змішану верстку, яка полягала в побудові каркаса таблицею з розпірками* наповненні комірок блоками (div). Використовувалося може рік, поки не придумали хакі під IE5-6.
Тепер чого немає:
1. “Гумова” верстка
Так називали сайти, які розтягуються на 100% по ширині. Найбільшого поширення набули в СНД. У Європі та США переважно сайти були фіксованої ширини у 800 або 1024 пікселі. А чому такого виду верстки немає, це тому що в Європі та США, та й в усьому іншому світі про таке не чули і не знають досі. Крім цього, саме поняття “гумова верстка” спробуйте перекласти англійською мовою і щоб вас зрозуміли. Сама комбінація слів абсурдна, і, схоже, виключно місцевий винахід (слова). Напевно, схожий винахід, це коли іноді називають веб-верстальника “верстак”. При цьому людина не замислюється, що “верстак” це предмет.
2. PixelPerfect верстка
Не є видом верстки. Це стандарт верстки. Вся верстка має бути PixelPerfect і ніяк інакше.
Важливо
Необхідно правильно називати різні види версток – від цього залежатиме успішність реалізації проєкту. Немає нічого ганебного в тому, щоб уточнити щодо поведінки сайту/елментів сайту під мобільні пристрої. Хто що мав на увазі або подумав нікого в підсумку хвилювати не буде. Якщо клієнт не розуміє того, що він хоче – краще уточнити, щоб не отримати потім фразу “а я думав, що ви професіонали”. З іншого боку, і розробник повинен точно розуміти всі відмінності і повідомити про це відповідальній особі (пояснити і навчити з прикладами, якщо необхідно).
Хороша комунікація всередині команди розробників так і з клієнтом – запорука успіху будь-якого проєкту.
*розпірка: у верстці це однопіксельна (1х1 піксель) прозора gif-картинка, яку розтягували по вертикалі або горизонталі, щоб осередки таблиць не “схлопувалися” під час зменшення вікна або розтягувалися як необхідно. Наприклад, властивість height на комірці таблиці або самої таблиці не відпрацьовувала, тому ставили в ще одну комірку поруч рапорку шириною в 1px і необхідною висотою.
Вас може зацікавити