Верстка сайту

143

Мобільна версія сайту, адаптивний дизайн або гумова верстка?

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

Мобільна версія сайту
Адаптивний дизайн
Гумовий тип макета

Здавалося б, елементарна річ, яку, як виявилося, не всі розуміють. Може я не правильно розумію, тому вирішив на цю ж тему задати питання на форумах та соцмережах. Результат в принципі очікуємо – кожен зі своєю думкою і поняттям.

Думки були такі:

  • адаптивний і реагує дизайн — різні речі
  • дизайн, «заточений» під різні пристрої і є «адаптивний»
  • підлаштування під розмір вікна браузера — це гумовий тип макета
  • різні версії сайту (в тому числі мобільний) — потрапляє під поняття адаптивного дизайну

та інше…

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

Мобільна версія сайту

Мобільна версія сайту — це окремий сайт з загальною базою від головного. Також може бути окремий шаблон. Відмітні особливості: власний піддомен (m.site.ru) або папка site.ru/m/). Мобільна версія створена для зручності використання сайту на всяких гаджетах, переважно на смартфонах. Основний принцип: прибрати все зайве (включаючи графіку, другорядний функціонал і т. д.) і полегшити перегляд сайту на мобільних девайсах. Така версія має свій окремої версткою, щодо десктопної версії, окремим дизайном і окремим функціоналом. Простіше кажучи — це окремий сайт (у більшості випадків). Приклади:

Рекомендую до прочитання: Як WordPress показати фото до і після

http://www.pda.spb.mts.ru/

http://m.mvideo.ru/

http://m.kinopoisk.ru/

В десктопном браузері мобільні версії сайту, звичайно, виглядають не так, як прості версії. Принцип підстановки сайту такий: визначається пристрій або браузер, редиректит на m.site.ru. Про плюси і мінуси можна судити з таблиці, в кінці посту.

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

Адаптивний дизайн (він же: Чуйний, чуйний, реагує) — це єдиний сайт, який підлаштовується під різну ширину браузера, незалежно від того з якого пристрою відкрито сайт. Багато хто вважає, що адаптивний дизайн реагує на пристрій, проте це не зовсім так. Корені ростуть саме від ширини вікна браузера. У вашого сайту може бути лише одна верстка для всіх варіантів адаптації. Налаштування макету та стилі змінюються в залежності від розмірів області перегляду, за допомогою CSS3 Media Queries (CSS3 медіа запити). Цитата з htmlbook:

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

URL сайту залишається незмінним у різних адаптації, т. к. у нас один і той же сайт з однією і тією ж версткою (найчастіше. Бувають також більш складні варіанти). З прикладами можна ознайомитися тут. Ось деякі:

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

Щоб переконатися в адаптивності і зрозуміти що це таке, відкриємо сайт Time. Тепер стисніть вікно браузера, і посужайте/порасширяйте. Сайт адаптується під ширину вікна: блоки змінюють своє розташування, змінюються стилі типографіки, щось прибирається і т. д.

Сенс в тому, що залежно від розміру вікна браузера ширина колонок і інтервалу між ними може змінюватися, але завжди залишається 12. Ось за цим колонкам весь макет і адаптується, якісь блоки сповзають один під одного, якісь просто зменшують свою ширину, залишаючи текст читабельним і т. д. Почитати про адаптивний дизайн я раджу в книзі “Responsive Web Design” (автор: Ітан Маркотт — чоловік, який придумав поняття “чуйний веб-дизайн”).

Рекомендую до прочитання: Чек-лист по створенню інтернет-магазину

До речі, деякі розділяють поняття “чуйний” і “адаптивний”. Різниця не велика, просто “адаптивний” — більш широке поняття, що включає “чуйний”. Невелика вирізка з вікіпедії, для кращого розуміння:

у дизайні чуйну

  • застосування гнучкого макета на основі сітки ( flexible, grid-based layout);
  • використання гнучких зображень (flexible images);
  • робота з медиазапросами (media queries);

на додаток до цього в адаптивному дизайні

  • застосування поступового поліпшення;
  • проектування для мобільних пристроїв з самих ранніх етапів

При заході на сайт з адаптивним дизайном не відбувається ніякого редиректа, на відміну від сайту з мобільного версією.

Гумовий тип макета

Або простіше «гумова верстка» (гума) — тип верстки макетів, при якій пропорції сайту змінюються в залежності від розміру вікна браузера. У більшості випадків, це означає, що який би у вас не був широкий екран, гумовий сайт буде займати вікно браузера, без порожнечі з боків. Є ще гумові до переділу сайту. Тобто в якомусь проміжку ширини сайт гумовий, а вище порога — залишається на своїй максимальній ширині. Особисто я не дуже люблю такі типи макетів, дуже вже проблемні якщо колупатися і доповнювати функціонал сайту.

У приклад я згадав тільки http://www.searchengines.ru/ (також потягніть вікно браузера, сайт буде ковзати). Звичайно, адаптивний дизайн можна поєднувати з гумовим типом та іншими штуками, але мова тут про чистий гумовий макет, не пропустіть думка.

Тепер табличка з основними для мене особливостями. Всі інші особливості я перераховувати не буду:

Особливості верстки сайтів

Мобільна версияАдаптивный дизайнРезиновый макет
Відмінності редірект на m.site.ru підстроювання під різні розміри вікна зміна пропорцій
Складність розробки складно не дуже складно просто
Тренд все ще в моді явний тренд нікому не потрібно
Гнучкість підстроювання під різну ширину не дуже дуже середньо
Основні плюси різний функціонал зручність з будь-якого девайса облік широкоформатников
Основні мінуси складно, часто дорого новий функціонал необхідно враховувати на всіх адаптації немає ніяких налаштувань під девайси
Вартість розробки дорого дорого не дорого
Мій вибір для супер-функціонального сайту для тематичного сайту без коментарів

Рекомендую до прочитання: Навіщо створювати сайт?