9.07.2018
27

Содержание Гайда:

Часть 1. С чего начинается: что такое продукт, какие есть примеры успешных проектов, почему не всегда нужен сайт и как продавать без него. Главное про идею и теоретическую подготовку перед стартом.

Часть 2. Что представляет собой UX проектирование. Первые шаги в создании сайта.

Часть 3. Что такое Landing Page. Обязательные компоненты и структура страницы.

Часть 4. Дизайн главной страницы. Как оформить страницу и не спугнуть пользователя. Важные правила на примерах.

 

Сегодня разберем 4 этапа разработки фронт-части:

 

  1. Верстка: написание html-, css- и javascript-кода в соответствии с макетом, который мы сделали в прошлых частях, создание дополнительного функционала и эффектов.
  2. Адаптация под мобильные устройства и планшеты.
  3. Проверка всех активных элементов: меню, форм, ссылок, кнопок.
  4. Оптимизация: повышение скорости загрузки сайта за счет уменьшения размера медиафайлов, файлов скриптов и стилей.

 

Верстка

 

В качестве примера будем рассматривать wowtouchbox.com и обсудим 3 важных элемента, которые сейчас реализованы на сайте:

 

  • поэкранная навигация;
  • видеофон на первом экране;
  • слайдер с отзывами.

 

Пройдемся по каждому.

 

Поэкранная навигация

 

Поэкранная навигация выгодна тем, что втягивает пользователя во взаимодействие постепенно, в соответствии с продуманным сценарием.

поэкранная навигация на сайте

При этом на сайте есть боковая навигация для быстрого перехода к конкретному блоку.

переход к блоку

Навигация реализована при помощи плагина fullPage, который также дает возможность отслеживать действия со скроллом и адаптивен для разных экранов.

 

Видеофон на первом экране

 

Видео на фоне автоматически запускается после загрузки страницы и помогает за пару секунд показать, что это за сайт и что он предлагает. Визуальное впечатление — самое сильное, поэтому даже текст на видном месте скажет пользователю меньше, чем коротенький видеоролик. Впрочем, вместе они работают еще лучше: ролик можно разместить на заднем плане, а на передний добавить слоган/СТА и активную кнопку.

 

Вот как это выглядит:

видеофон на первом экране

Такая же штука реализована в GeniusMarketing:

пример видеофона

Важно! «Тяжелые» видео замедляют загрузку страницы и стабильность воспроизведения.

Оптимизируйте работу так, чтобы его могли увидеть даже пользователи с медленным интернетом или слабым ПК.

 

Рекомендации по использованию медиафайлов:

  1. Выбирайте ролики с небольшим размером и длительностью.
  2. Лучше использовать формат mp4 или avi.
  3. Чем больше разрешение — тем лучше, тем качественней будет выглядеть на больших экранах.

 

В нашем случае длительность видео была больше 40 секунд, а размер около 30 Мб. Самые простые варианты: сократить длину (= потерять информацию) или уменьшить размер (= потерять качество). Если вы не ищете легких путей, ищите способы дальше. Так сделали и мы.

 

В процессе опробовали 2 подхода:

  1. Загружать видео с самого сайта — оно будет моментально загружаться почти с любым интернетом, если размер файла не превышает 10 Мб.
  2. Загружать видео с помощью встроенного плеера YouTube. Подойдет, если видео весит больше 10 Мб и потери качества недопустимы. Плеер достаточно гибкий в настройке, с прелоадером, может проигрывать видео без подвисаний даже с низкой скоростью подключения.

Совет! Настройте показ красивого фирменного баннера вместо стандартного прелоадера на черном фоне.

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

прелоад

Ytplayer позволяет настраивать время начала воспроизведения, включение звукового сопровождения, цикличность, отображение интерфейса управления, качество видео, автовоспроизведение и другие параметры.

Реализация слайдера

 

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

отзывы

Для реализации этого лучше всего подошел Slick Slider благодаря встроенной возможности синхронизировать сразу несколько слайдеров. В данном случае их три.

Адаптивность

 

Сейчас мобильный трафик лидирует — большинство пользователей будут пользователями смартфона/планшета. Поэтому после верстки основной версии приходит время делать мобильную. Плюс, поисковики лучше ранжируют дружелюбные к пользователю сайты, а Google и вовсе внедряет политику «Mobile-First Indexing», которая выше оценивает сайты с мобильной версией.

 

К ней есть 2 требования:

 

  1. Должно быть удобно: меню, формы, кнопки и другие активные элементы должны быть доступны, понятны и легко используемы.
  2. Должно быть быстро: даже на мобильном интернете сайт должен загружаться оперативно, чтобы не заставлять пользователя ждать (потому что ждать он не любит и вряд ли будет).

 

Чтобы мобильная версия была удобной и быстрой, мы используем адаптивные сетки и медиазапросы, делаем контент компактнее и оптимизируем медиафайлы.

 

Для страниц блога, кроме адаптивности, мы используем AMP — это технология ускоренных мобильных страниц от Google, которая создает страницу на основе HTML для максимально быстрой загрузки на телефонах и других мобильных устройствах.

 

Как это работает: обычная страница размечается специальными тегами — их количество и функционал строго ограничены; javascript-библиотеки в их числе. АМР-страницы сохраняются в кэше Google и при соединении загружаются на устройство пользователя прямо оттуда. Статьи с AMP ранжируются выше других.

 

Вот как это выглядит: слева AMP-версия, справа — обычная.

адаптивность АМР

Как видите, AMP-версия проще: без визуальных эффектов с заголовком и главной картинкой, со стандартным шрифтом одного цвета.

 

Ко всем таким страницам Google добавляет иконку AMP в поисковой выдаче.

АМР в мобильной выдаче

Решение подойдет для информационных сайтов, блогов, онлайн-изданий и журналов — то есть там, где нужно максимально быстро показать контент в доступной форме, а не впечатлить дизайнерскими решениями. Также используются для статических каталогов без фильтров. Так, к примеру, делает e-Bay.

Плагины AMP есть под разные CMS — пишите в комментариях, если вам интересно прочесть полномасштабный обзор, и мы сделаем его в следующий раз 🙂

Тестирование и отладка

Фокус при тестировании — на меню, формах, ссылках и кнопках. Они должны корректно работать в разных браузерах и на мобильных устройствах. Автоматические системы проверки позволяют протестировать только часть функционала. А проверить все, включая поведение пользователя на сайте, можно только в ручном режиме.

Чек-лист по тестированию включает 4 этапа:

  • юзабилити;
  • совместимость;
  • мобильная версия;
  • бета-тестирование.

Функциональное тестирование

  1. Ссылки должны работать, переправлять по правильному пути; ссылки на сторонние сайты должны открываться в новой вкладке.
  2. На полях в формах ставим маски (позволяют избежать ошибок при вводе данных), обязательные поля проверяем на заполнение. Данные с формы поступают, формы работают. Если работаете через Chrome, советуем плагин Form Filler для автозаполнения форм при проверке — чертовски экономит время.
  3. Дополнительный функционал, который участвует в бизнес-логике сайта: регистрация, авторизация, добавление в корзину товара, оформление заказа — каждый этап должен быть проверен на предмет ошибок.

Usability-тестирование

Usability-тестирование — это моделирование ситуаций, при которых вы тестируете сайт «глазами» посетителя, чтобы оценить удобство и понятность работы с сайтом. По сути, это поиск проблемных мест в интерфейсе.

Также включает:

  1. Навигационное тестирование: все страницы понятны и просты в использовании; кнопки, ссылки, формы рабочие. Главное меню всегда доступно и удобно.
  2. Тестирование контента: контент информативен и написан без ошибок; изображения нормального качества и корректно выводятся.

Тестирование совместимости (конфигурационное тестирование)

Тестирование совместимости выполняется для проверки работы сайта при различных программных и аппаратных конфигурациях:

  • конфигурация операционной системы. Кросс-платформенное тестирование позволяет оценивать работу при разных ОС (как десктопных, так и мобильных): Windows, iOS / Mac OS, Linux, Android и т.д.;
  • конфигурация браузера. Кросс-браузерное тестирование помогает проверить правильность работы сайта в разных конфигурациях браузера: Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari и т.д.

Тестирование мобильной версии сайта

Сайт должен быть быстрым и удобным для мобильных устройств с разными размерами экрана.

Нужно проверить следующее:

  1. Сайт нормально отображается с смартфонов и планшетов.
  2. Навигация по сайту доступна и проста.
  3. Сайт загружается быстро даже с мобильным интернетом.
  4. Все кнопки можно легко нажать пальцем с первого раза.
  5. Размер изображений оптимизирован.
  6. Номер телефона и почта кликабельны.

Бета-тестирование

Бета-тестирование — это финальная стадия, когда сайт попадает в руки конечных пользователей. На этом этапе обычно вылезают неожиданные проблемы и недостатки, которые незаметны разработчику изнутри. Это позволяет исправить ошибки перед релизом продукта.

Требования к готовому продукту

  1. Валидация проверена через валидатор W3C. Все ошибки типа «error» должны быть исправлены, «warning» по возможности исправлять, но не они критичны.
проверка валидации кода
  1. Все страницы сайта быстро загружаются на всех типах устройств. Проверяйте через PageSpeed Insights: оценка должна быть в «зеленой зоне».
проверка скорости
  1. Изображения оптимизированы при помощи TinyPNG и не влияют на скорость загрузки.
оптимизация изображений

Остались вопросы или хотите разобраться в чем-то детальнее? Ставьте ♥, пишите в комментарии — и мы будем выпускать новые полезные материалы для вас.

Получить 7 писем о том,
как улучшить свой AdWords аккаунт
+ PPC статьи

Имя
e-mail
Улучшить AdWords

Улучшить свой AdWords

Получите 7 писем, о том, как можно улучшить свой аккаунт в AdWords

Подписаться



В версии 2.0

  • Существенно доработан интерфейс
  • Появилась возможность добавлять фразы
  • Добавлена поддержка "serpstat.com"
  • Добавлена возможность выгрузить слова через запятую
  • Добавлена возможность выгрузить фразы в кавычках
  • Появилась кнопка "Добавить" из буфера обмена, копируйте и вставляйте в расширение ранее собранные списки
  • Добавлена возможность закрепить окно расширения или скрыть его для вашего удобства
  • В analytics.google.com расширение больше не работает

Обновлены комбинации

  • LeftMouseClick для добавления слова, повторное нажатие - для удаления
  • ALT + LeftMouseClick - для сбора фраз