Демонстрація макета дизайну сайту клієнтові дуже важлива в процесі розробки сайтів або додатків. Експерти радять запрошувати клієнтів до себе і демонструвати вживу, але з багатьма нашими клієнтами ми працюємо віддалено, і у нас немає такої можливості. Я розповім про технічну частину цього процесу і не буду торкатися теми спілкування з клієнтом.
Чому погано пересилати клієнтові просто картинки?
Тому краще не вгадувати, яким ПО клієнт буде переглядати дизайн макет сайту, і знайти рішення, за допомогою якого клієнт відкривав би його у себе на комп'ютері в 100% масштабі.
Демонстрація з передбачуваним результатом
У той час ще не було штук на кшталт InVision або RedPen. підійшов би хоч якийсь сервіс демонстрації макетів дизайну клієнту, і я вирішив створити власний інструмент.
Суть його полягала в тому, що макет дизайну повинен був міститися на HTML сторінку максимально просто і швидко. Потім сторінку я б розміщував на студійному FTP (з HTTP назовні). Клієнту я б передавав відразу посилання на цю сторінку і був би впевнений, що клієнт побачить макет в правильному масштабі.
Я почав з прямого підходу і створив шаблон сторінки, в яку, за задумом, потрібно було дописувати тільки src макета.
Перша трудність, з якою я зіткнувся, полягала в наступному. Макети сайтів зазвичай малюють більше мінімально необхідної ширини. Якщо розмістити картинку просто за допомогою тега . то при вікні, меншому ширини картинки, з'явиться неприємний горизонтальний скрол, і основна частина макета сховається за кордоном вікна. Тоді я вирішив, що картинку потрібно розміщувати як фон. Добавити в
Виникла ще одна проблема - сторінка тільки з фонової картинки не Скролл по вертикалі і була видимою тільки її частину до «лінії перегину». Потрібна була якась «розпірка», щоб сторінка прокручувалась до низу макета. Тоді я використовував саму картинку як «розпірку». Для цього я додав з тієї ж картинкою і встановив їй CSS властивість visibility: hidden.
Цей варіант був уже цілком робочим і мене влаштовував.
З таким шаблоном я був, в принципі, впевнений, що замовник побачить макет коректно і в потрібній середовищі - в браузері.
додаткові фішки
Залежно від потреб я намагався додавати деякі фішки. Наприклад фіксоване меню. Багато експериментував з фоновими зображеннями, так як вони були різні у різних сайтів. Подекуди зустрічалося по 3-4 шари фону. Також була ідея додавати посилання на список сторінок проекту. Клієнт міг відкрити по посиланню одну сторінку, подивитися і тут же відкрити список інших сторінок проекту.
адаптивний дизайн
Через деякий час я отримав завдання на розробку адаптивного дизайну сайту, і мені треба було придумати, як демонструвати макети клієнтові, та ще й показати цю саму адаптивність максимально наближено до реальності. Тоді я розібрався, як працюють media queries в CSS, і вирішив застосувати це в своєму Шаблончики.
В результаті, я показував першу картинку старим способом, а решта додавав за допомогою media queries. Знову виникла проблема з вертикальним скролл. Спочатку висота всієї сторінки дорівнювала одному макету, при зміні макета висоту також необхідно було міняти. Знайти витончене рішення часу у мене не було, і я просто змінював властивості height при зміні картинки.
Це працювало. Можна було відкрити сторінку навіть на мобільному або планшеті і перевірити, як вона буде виглядати вживу.
Згодом у мене з'явився час оптимізувати шаблон для демонстрації адаптивного дизайну. Основною вимогою було звести редагування файлу до мінімуму - один раз вказувати шляхи до макетів, підраховувати висоту автоматично, зручно вказувати діапазони в media queries.
Не без допомоги нашого frontend-розробника Ігоря Богдосарова мені вдалося оптимізувати шаблон.
В результаті, в html я вставляю тільки шляхи до зображень і діапазони для media queries в масив, а окремий скрипт робить інше.
Також за порадою Ігоря я вирішив викласти шаблон на github. Думаю, багато хто зможе підказати, що ще можна в ньому поліпшити.
InVision як альтернатива
Про сервіс InVision я чув багато позитивних відгуків від колег, і є бажання спробувати його в роботі. Він приваблює своїми перевагами:
Крім того, сервіс активно розвивається.