Демонстрация макета дизайна сайта клиенту очень важна в процессе разработки сайтов или приложений. Эксперты советуют приглашать клиентов к себе и демонстрировать вживую, но со многими нашими клиентами мы работаем удаленно, и у нас нет такой возможности. Я расскажу о технической части этого процесса и не буду затрагивать темы общения с клиентом.
Почему плохо пересылать клиенту просто картинки?
У меня было несколько курьезных случаев, когда клиент получал макет дизайна в виде графического файла и не мог правильно его оценить. Это случалось из-за программного обеспечения, в котором он просматривал макет. Например, стандартные просмотрщики Windows и OS X показывают картинку целиком на экране, уменьшая её пропорционально. Большую разницу в масштабе легко заметить. Но иногда масштаб картинки уменьшается до 90–80%, и не каждый человек может это сразу заметить, а в стандартном просмотрщике Windows 7 вообще нельзя установить точный масштаб 100%. В результате, когда клиент видел уже сверстанные HTML странички, он удивлялся, почему всё такое крупное и отличается от того, что было в макетах.
Поэтому лучше не угадывать, каким ПО клиент будет просматривать дизайн макет сайта, и найти решение, с помощью которого клиент открывал бы его у себя на компьютере в 100% масштабе.
Демонстрация с предсказуемым результатом
В то время еще не было штук вроде InVision или RedPen, подошел бы хоть какой-то сервис демонстрации макетов дизайна клиенту, и я решил создать собственный инструмент.
Суть его заключалась в том, что макет дизайна должен был помещаться на HTML страничку максимально просто и быстро. Потом страничку я бы размещал на студийном FTP (с HTTP наружу). Клиенту я бы передавал сразу ссылку на эту страничку и был бы уверен, что клиент увидит макет в правильном масштабе.
Я начал с прямого подхода и создал шаблон странички, в которую, по замыслу, нужно было дописывать только src макета.
<html><head>
<title></title>
<style>
* {margin:0; padding:0;}
body {background-color:#fff; text-align:center;}
</style>
</head><body>
<img src="mockup.webp" alt=""/>
</body></html>
Первая трудность, с которой я столкнулся, заключалась в следующем. Макеты сайтов обычно рисуют больше минимально требуемой ширины. Если разместить картинку просто с помощью тега <img>, то при окне, меньшем ширины картинки, появится неприятный горизонтальный скролл, и основная часть макета спрячется за границей окна. Тогда я решил, что картинку нужно размещать как фон. Добавить в <body> фон не составило труда.
body {background: url('mockup.webp') top center no-repeat;}
Возникла еще одна проблема — страница только с фоновой картинкой не скроллилась по вертикали и была видимой только ее часть до «линии перегиба». Нужна была какая-то «распорка», чтоб страница прокручивалась до низа макета. Тогда я использовал саму картинку как «распорку». Для этого я добавил <img> с той же картинкой и установил ей CSS свойство visibility: hidden.
Этот вариант был уже вполне рабочим и меня устраивал.
<html><head>
<title></title>
<style>
* {margin:0;padding:0;}
body {background-color: #fff, url('mockup.webp') top center no-repeat;}
</style>
</head><body>
<img src="mockup.webp" style="visibility: hidden"/>
</body></html>
Спустя некоторое время мне захотелось как-то оптимизировать этот шаблон. Он немного разрастался с использованием дополнительных фонов. Таким образом, макеты выглядели еще правдоподобнее, так как при любой ширине экрана фон его полностью заполнял. Что мне нужно было оптимизировать? Больше всего не нравилось вводить путь к картинке два раза. Хотелось свести это действие к минимуму. Я попросил одного из знакомых верстальщиков помочь мне, и, используя JavaScript, а если точнее, jQuery, он сделал указание пути только в начале файла один раз. Тогда я еще ничего в этом не понимал.
<html><head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
var path="mockup.webp";
$('#conteiner').css('background-image', 'url('+path+')').css('background-position', 'top center').css('background-repeat', 'no-repeat');
$('#conteiner img').attr('src', path);
});
</script>
<title></title>
<style>
* {margin:0; padding:0;}
body {background-color:#fff; text-align:center;}
#conteiner {position: relative;}
</style>
</head><body>
<div id="conteiner" style="width: 100%; overflow: hidden;">
<img src="1.webp" style="visibility: hidden;"/>
</div>
</body></html>
Со временем я стал больше интересоваться JavaScript и решил переписать этот кусочек на чистом JavaScript, дабы не дергать библиотеку jQuery для такой маленькой задачи. И у меня получилось следующее:
window.onload = function() {
var imgPath = "mockup.webp"; // Mockup path
document.getElementById('container').style.backgroundImage = 'url(' + imgPath + ')';
document.getElementById('image').src = imgPath;
};
С таким шаблоном я был, в принципе, уверен, что заказчик увидит макет корректно и в нужной среде — в браузере.
Дополнительные фишки
В зависимости от нужд я пытался добавлять кое-какие фишки. Например фиксированное меню. Много экспериментировал с фоновыми изображениями, так как они были разные у разных сайтов. Кое-где встречалось по 3-4 слоя фона. Также была идея добавлять ссылку на список страниц проекта. Клиент мог открыть по ссылке одну страничку, посмотреть и тут же открыть список других страниц проекта.
Адаптивный дизайн
Спустя некоторое время я получил задачу на разработку адаптивного дизайна сайта, и мне предстояло придумать, как демонстрировать макеты клиенту, да еще и показать эту самую адаптивность максимально приближенно к реальности. Тогда я разобрался, как работают media queries в CSS, и решил применить это в своем шаблончике.
В результате, я показывал первую картинку старым способом, а остальные добавлял с помощью media queries. Опять возникла проблема с вертикальным скроллом. Изначально высота всей страницы была равна одному макету, при изменении макета высоту также необходимо было менять. Найти изящное решения времени у меня не было, и я просто изменял свойства height при смене картинки.
/* Screensize -320 */
@media (max-width : 479px) {
#container {
background-image: url('img/320/mockup_320.webp') !important;
}
#container img {
height: 2760px;
}
}
Это работало. Можно было открыть страничку даже на мобильном или планшете и проверить, как она буде выглядеть вживую.
Со временем у меня появилось время оптимизировать шаблон для демонстрации адаптивного дизайна. Основным требованием было свести редактирование файла к минимуму — один раз указывать пути к макетам, подсчитывать высоту автоматически, удобно указывать диапазоны в media queries.
Не без помощи нашего frontend-разработчика Игоря Богдосарова мне удалось оптимизировать шаблон.
В результате, в html я вставляю только пути к изображениям и диапазоны для media queries в массив, а отдельный скрипт делает остальное.
var imagesData = [ //media query in CSS format, image path ['(min-width: 980px)', 'image.webp'] ];
Также по совету Игоря я решил выложить шаблон на github. Думаю, многие смогут подсказать, что еще можно в нем улучшить.
InVision как альтернатива
Мое решение, конечно, имеет свои достоинства, но присутствуют и недостатки, такие как отсутствие интерактива или возможности комментирования прямо поверх макетов. Пока этого было достаточно для демонстрации макетов дизайна.
О сервисе InVision я слышал много позитивных отзывов от коллег, и есть желание попробовать его в работе. Он привлекает своими преимуществами:
- удобство ведения проекта: удобно добавлять, обновлять макеты вплоть до автогенерации разных состояний прямо из PSD;
- интерактив: переходы между «страницами», фиксированные шапки;
- мобильный вид: хорошо подходит для дизайна мобильных приложений;
- комментирование макетов: можно оставлять комментарии прямо на страницах, обсуждать с клиентом или коллегой;
- и многое другое.
Кроме того, сервис активно развивается.
