Drupal-верстка: html-макет або psd-ескіз?

07.05.2014
Автор:

Під час роботи дуже часто нам доводиться стикатися з питанням: "Що краще для розробника - зверстаний HTML-макет чи PSD-макет сайту?". Відповідаємо коротко - HTML краще (за умови, що він якісний). А тепер - наші докладніші думки на цю тему з конкретними прикладами.

Припустимо, що HTML-макет є повноцінним інтерактивним макетом сайту, по якому можна поклацати ручкою мишкою. Також припустимо, що він якісний, тобто:

- адаптивний;

- мульти браузерний;

- з рюшами та ефектами.

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

Отже, отримавши PSD, розробник бачить тільки картинку, йому ще багато про що  треба здогадатись. У разі отримання html-макету, можна відразу зробити 20 кліків по ньому, а це за собою приносить розуміння майбутньої роботи, наприклад:

- видно поведінку сайту при різних роздільностях (адаптивність);

- поведінка спеціальних елементів - спливаючі вікна, слайд шоу, тощо;

- а також інші ефекти - маусовер, інтерактивність і т.п.

Тобто виграш у тому, що у разі отримання html розробник не дивиться зайву годину в монітор, намагаючись зрозуміти загадки ЛеонардоДаВинчі дизайнера, наприклад:

- не треба думати, як повинен себе вести той чи інший елемент, так як можна просто скопіювати поведінку з макета;

- буде повна ідентичність того, що бачив (прим. - якщо бачив) замовник і реалізації цього розробником. Уникаємо ключового висновку замовника при перегляді результатів "ЩО ЦЕ?? ! !"

- на створення Друпал-теми знадобиться менше часу, в межах від 10 % до 70 % бюджету розробки (звичайно, відсоток залежить від складності дизайну, якості макета, його відповідності рідному стилю Друпала);

- не потрібно знати фотошоп та інші редактори;

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

Але існує стійкий міф про те, що, маючи на руках html-макет, друпал-розробнику для верстки сайту фактично залишається зробити пару кліків: "щось кудись скопіювати" і "воно має заробити" саме по собі. Давайте будемо розбиратися, що ж відбувається в реальності, а не в міфах. Візьмемо за приклад одну з наших робіт - globein.com, і подивимося його головну сторінку.

регионы друпал страницы

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

А тепер найцікавіше - обсяг робіт по верстці що на основі макета, що psd-ескізів, не особливо-то відрізняється. Ось порівняння робіт:

802x491-2014-04-28_2018.png

Червоні етапи робіт ± ідентичні за обсягом, але в більшості випадків у кінцевому рахунку верстка на основі html таки швидше.

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

Голосів: 1 Рейтинг: 5

Також по темі

1

Часто на адресу Drupal можна побачити заяву в стилі: «На цьому фреймворці не створити high-load веб-сайту». Ми спростуємо цей міф не...

2

При прийнятті рішення запустити власний вебсайт одним із найважливіших питань є вибір реалізації - CMS чи самопис? Дізнайтеся більше про переваги фреймворка Drupal.

3

Нещодавно ми представили "золотий" список SEO модулів, рекомендованих для успішної пошукової оптимізації...

4

Серед десятків тем для Drupal не важко й заблукати. Ми підготували огляд найкорисніших та популярних тем серед тих, які в можете знайти ...

5

Нещодавно ми розглядали те, як створити ctools тип контенту для модуля Panels. Цього...

Subscribe to our blog updates