Как демонстрировать макеты дизайна клиентам

Демонстрация макета дизайна сайта клиенту очень важна в процессе разработки сайтов или приложений. Эксперты советуют приглашать клиентов к себе и демонстрировать вживую, но со многими нашими клиентами мы работаем удаленно, и у нас нет такой возможности. Я расскажу о технической части этого процесса и не буду затрагивать темы общения с клиентом.

Почему плохо пересылать клиенту просто картинки?

У меня было несколько курьезных случаев, когда клиент получал макет дизайна в виде графического файла и не мог правильно его оценить. Это случалось из-за программного обеспечения, в котором он просматривал макет. Например, стандартные просмотрщики 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.jpg" alt=""/>
</body></html>

Первая трудность, с которой я столкнулся, заключалась в следующем. Макеты сайтов обычно рисуют больше минимально требуемой ширины. Если разместить картинку просто с помощью тега <img>, то при окне, меньшем ширины картинки, появится неприятный горизонтальный скролл, и основная часть макета спрячется за границей окна. Тогда я решил, что картинку нужно размещать как фон. Добавить в <body> фон не составило труда.

body {background: url('mockup.jpg') top center no-repeat;}

Возникла еще одна проблема — страница только с фоновой картинкой не скроллилась по вертикали и была видимой только ее часть до «линии перегиба». Нужна была какая-то «распорка», чтоб страница прокручивалась до низа макета. Тогда я использовал саму картинку как «распорку». Для этого я добавил <img> с той же картинкой и установил ей CSS свойство visibility: hidden.
Этот вариант был уже вполне рабочим и меня устраивал.

<html><head>
  <title></title>
  <style>
    * {margin:0;padding:0;}
    body {background-color: #fff, url('mockup.jpg') top center no-repeat;}
  </style>
</head><body>
  <img src="mockup.jpg" style="visibility: hidden"/>
</body></html>

Спустя некоторое время мне захотелось как-то оптимизировать этот шаблон. Он немного разрастался с использованием дополнительных фонов. Таким образом, макеты выглядели еще правдоподобнее, так как при любой ширине экрана фон его полностью заполнял. Что мне нужно было оптимизировать? Больше всего не нравилось вводить путь к картинке два раза. Хотелось свести это действие к минимуму. Я попросил одного из знакомых верстальщиков помочь мне, и, используя JavaScript, а если точнее, jQuery, он сделал указание пути только в начале файла один раз. Тогда я еще ничего в этом не понимал.

<html><head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script> 
  <script> 
    $(document).ready(function(){
      var path="mockup.jpg";
      $('#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.jpg" style="visibility: hidden;"/>
  </div>
</body></html>

Со временем я стал больше интересоваться JavaScript и решил переписать этот кусочек на чистом JavaScript, дабы не дергать библиотеку jQuery для такой маленькой задачи. И у меня получилось следующее:

  window.onload = function() {
    var imgPath = "mockup.jpg"; // 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.jpg') !important;
  }
  #container img {
    height: 2760px;
  }
}

Это работало. Можно было открыть страничку даже на мобильном или планшете и проверить, как она буде выглядеть вживую.

Со временем у меня появилось время оптимизировать шаблон для демонстрации адаптивного дизайна. Основным требованием было свести редактирование файла к минимуму — один раз указывать пути к макетам, подсчитывать высоту автоматически, удобно указывать диапазоны в media queries.

Не без помощи нашего frontend-разработчика Игоря Богдосарова мне удалось оптимизировать шаблон.

В результате, в html я вставляю только пути к изображениям и диапазоны для media queries в массив, а отдельный скрипт делает остальное.

 var imagesData = [
   //media query in CSS format, image path
   ['(min-width: 980px)', 'image.png']
 ];

Также по совету Игоря я решил выложить шаблон на github. Думаю, многие смогут подсказать, что еще можно в нем улучшить.

InVision как альтернатива

Мое решение, конечно, имеет свои достоинства, но присутствуют и недостатки, такие как отсутствие интерактива или возможности комментирования прямо поверх макетов. Пока этого было достаточно для демонстрации макетов дизайна.

О сервисе InVision я слышал много позитивных отзывов от коллег, и есть желание попробовать его в работе. Он привлекает своими преимуществами: