Современные технологии создания сайтов: адаптивный дизайн, сайты-одностраничники, landing pages

1. Игорь Повшок
Руководитель отдела продаж
Студия Борового
Современные технологии создания сайтов
Адап
ти
в
Одностраничник
Landing page

2. Типы верстки сайтов
Фиксированный тип макета — дизайн,
в котором ширина столбца/рисунка задана в пикселях и остается
неизменной независимо от разрешения экрана.
Плюсы фиксированной ширины:
• Простота при создании;
• Легко осуществить вывод картинок, баннеров, видео
материалов. При этом можно быть уверенным, что они не
«наедут» друг на друга при разном разрешении монитора.
Минусы фиксированной ширины:
• У посетителей, которые заходят на сайт с мобильных
устройств, будет отображаться горизонтальная полоса
прокрутки. Это неудобно.
• На современных широкоформатных мониторах «узкий» сайт
будет смотреться несколько «бедно».

3. Типы верстки сайтов
Резиновый дизайн — ширина колонок задаётся в процентах,
а не в пикселях, поэтому "резиновый" дизайн при любом разрешении
монитора растягивается на всю ширину экрана.
Плюсы резинового макета:
•Сайт выглядит красиво практически при
любом разрешении монитора;
•На широкоформатном мониторе
отобразится максимальное количество контента.
Минусы резинового макета:
•Сложность при создании. Необходимо позаботиться о том, чтобы сайт хорошо смотрелся как при
минимальной ширине, так и при максимальной.
•На широкоформатных мониторах строчки основного текста могут быть слишком длинными. Читать такие
строчки не удобно.

4. Типы верстки сайтов
Адаптивный дизайн — сайт одинаково хорошо выглядит
на десктопе, на планшете, на мобильном телефоне – это, по сути,
несколько независимых вариантов дизайна для разных устройств.
• Сервер определяет тип устройства
и разрешение экрана и отдает ту или
иную версию сайта.
• Каждая версия заранее оптимизирована
под то или иное разрешение экрана.
• Для версий под экраны с маленьким
разрешением используются уменьшенные изображения,
а некоторые элементы вообще убираются.
• Сама компоновка блоков также отличается от "большой" версии.
Минусы
• Стоимость 2X-3X
• Сроки >6 месяцев
• Не удобен для больших
проектов

5. Статика
Резина
Плюсы
Адаптив
Минусы
Мобильная
версия
Необходимость
Оценка целевой
аудитории и
пользователей МОС
Мода
Конкуренты?
Статистика посещений

6. Адаптивный дизайн
• Число пользователей мобильного интернета в России выросло
на 54% за год
• Согласно анонимным статистическим данным, полученным
с серверов Opera Mini, в России 30,4% всех пользователей браузера
Opera Mini выходят в интернет с помощью смартфонов.
Самый высокий уровень проникновения смартфонов среди
пользователей браузера Opera Mini – в Беларуси, более 37%.
• Доля смартфонов на рынке мобильных телефонов
в Беларуси – 40%
…Немного статистики

7. Почему адаптив?
1) Большое разнообразие устройств, с которых
можно выходить в Интернет. Поэтому важно,
чтобы ваш сайт хорошо смотрелся и правильно
отображался у любого из пользователей,
независимо от того, какое устройство он
использует.
2) Популярность мобильных устройств с
выходом в Интернет и увеличение мобильного
Интернет-трафика. С ростом популярности
мобильных устройств количества
пользователей, которые заходят с них на сайты,
заметно увеличилось, поэтому просто
игнорировать их уже нельзя.
3) Срочная информация.
Если ваш ресурс содержит
новостную / срочную информацию,
и высока вероятность, что
пользователю может понадобится
прочитать эту информацию именно
с телефона (потому что других
устройств у него под рукой нет)
в данный момент времени,
нужно позаботиться о том, чтобы
у него была возможность
это сделать.
Адаптивный дизайн

8. Отличие адаптивного сайта от
мобильной версии (приложения) сайта
O Под каждый тип операционной системы нужно свое приложение / версия
сайта. Это требует дополнительных ресурсов, как временных, так и денежных.
O Необходимость загрузки приложения. Для того, чтобы пользоваться вашим
приложением, пользователям необходимо его загрузить. Это требует каких-то
дополнительных усилий от пользователей.
O Разделение траффика. С точки зрения продвижения сайта мобильное приложение не
удобно тем, что разделяет весь траффик ресурса на траффик сайта и траффик приложения,
что будет выглядеть, как меньшая посещаемость сайта.
O Необходимость интеграции материалов сайта. В случае с мобильным приложением
необходимо либо синхронизировать сайт с приложением (дополнительные ресурсы), либо
делать двойную работу по наполнению сайта и приложения материалами.
В отличие от мобильных приложений, адаптивный дизайн – это один
адрес сайта, один дизайн, одна система управления и содержание сайта.
Адаптивный дизайн

9. Переход на адаптивный веб-дизайн —
это сложно, но, учитывая развитие
индустрии, это позволит вам быть
готовыми к будущему и стоять на шаг
впереди конкурентов.
Адаптивный дизайн
Клиентов, которых не получаете Вы,
получают Ваши конкуренты.

10. Стандарты Студии Борового
Адаптивный дизайн
• Стоимость чуть выше
стоимости статического сайта
• Стандарты оттестированы
и готовы к внедрению на
проекте любой сложности
• Стандарты сформированы
на основе оценки более 100
внедрений на других проектах

12. …в итоге
Адаптивный дизайн
1. Адаптивный сайт профессионального
уровня за разумную стоимость.
2. Адаптивный сайт на системе
управления «Битрикс»
3. Адаптивный сайт за разумные
сроки (2,5 - 3 месяца)

13. Одностраничные сайты
Одностраничные сайты
Одностраничники – так называют сайты, которые состоят только из
одной страницы, а переход по меню осуществляется скроллом. На
сегодня создание интернет-ресурсов, состоящих из одной страницы,
является распространенной практикой в интернет-маркетинге.

14. Одностраничные сайты
Актуальность
Многие компании создают многостраничные сайты,
каждая страница которого занимает два абзаца.
Как итог – скучный, «бедный» сайт, который
формирует неправильное впечатление.
Идеальным кандидатом для одностраничного сайта является компания, не
обладающая большим объемом информации и контента, например, проекты
для малого бизнеса.
МОДА
Убедитесь, что создание одностраничного сайта будет
действительно полезно для вашей сферы деятельности. Область
применения одностраничных сайтов достаточно широка: и
персональные портфолио, и сайты-визитки, и бизнес-сайты,
предоставляющие небольшой спектр услуг.

15. Одностраничные сайты
…Существуют определенные правила
1. Только главное! – не перегружайте,
не лепите. Очистите ваш сайт от
лишней информации и оставьте лишь
ту, которая имеет значение.
2. Иерархическая структура!–выделение
главного, заголовки, акцент на важном.
3. Юзабилити!–предупреждения,
удержание пользователя, работа с его негативом.

16. Одностраничные сайты
…Существуют определенные правила
4. Дизайн – экспериментируйте.
С умом. Тестируйте.
5. Верстка–экспериментируйте.
С умом. Тестируйте.
6) Тематически иллюстрируйте сайт;
7) Создавайте визуальные акценты и якоря;
8) Прорабатывайте подходящую навигацию в
зависимости от контента;
9) Предоставляйте дополнительную навигацию и
подсказки, если это необходимо.

17. Одностраничные сайты
…Критические факторы
1. Уникальность дизайна
Уникальный дизайн
Не определена ЦА
Узкая воронка продаж
2. Несколько направлений
Одностраничный сайт Одно направление
Это плохо для SEO
Это плохо для контекста
Это плохо для пользователя

18. Одностраничные сайты
…Критические факторы
3. Неправильный первый экран
Не 100% коррелирует Отказ
4. Отсутствие или неправильные «якори внимания»
Как «якори» обычно используют персонажей
сайта (бренда), блоки с новыми статьями,
блоки с интересными фактами и т.п.
Нет якорей либо провалы Отказ

19. Одностраничные сайты
…Критические факторы
5. Неочевидность ожидаемого действия пользователя
Пользователь не понял что ему делать Отказ
6. Плохой перегруженный код
Долгая загрузка сайта Потеря пользователя
7. Доверие к сайту
Трастовость. Соцсети, адреса, комментарии, беклинки.
Методы интернет-маркетинга, направленные на повышение доверия к ресурсу — это
наличие всех официальных реквизитов, отзывы и комментарии, обратный ссылки на
сайт, активное присутствие компании в социальных сетях и соответствующие плагины и
ссылки на сайте. Если нет этих составляющих, — подает уровень доверия, что
несомненно сказывается на конверсии и эффективности страницы.

20. Одностраничные сайты
Оптимизация одностраничных сайтов под поисковые системы
Когда Googlebot пытается индексировать одностраничный сайт, все, что он
видит в HTML, - это единственный пустой контейнер (обычно это пустой тег
div или body), и кажется, будто здесь ему нечего индексировать и нет
ссылок, по которым можно перейти.
Когда Google индексирует традиционный сайт,
поисковый робот (Googlebot) сначала сканирует и
индексирует контент в URI верхнего уровня (к
примеру, www.вашсайт.com). Как только этот процесс
завершается, он следует по всем ссылкам на странице
и индексирует и остальные страницы. Затем он
переходит по ссылкам на последующих страницах, и
так далее. Таким образом, происходит индексация
всего контента сайта и связанного домена.

21. Одностраничные сайты

22. Лэндинги
Лэндинги (посадочные страницы)
Лендинг — это промо-страница, которая
настраивает посетителя на совершение
определенного действия. Используется
для усиления эффективности рекламы,
увеличения аудитории. Целевая страница
обычно содержит информацию о
продажах того или иного продукта или
услуги, логически продолжая текст
поискового запроса, ссылки или
объявления.

23. Лэндинги
O Превращение обычного посетителя в покупателя или клиента
компании
O Сбор статистики для определения критериев успешности рекламы
O Подписка посетителя на рассылку
O Продажа конкретного продукта в конкретной ситуации
(распродажа или промо-акция)
O Убежедние пользователя скачать или установить софт
Главные задачи таких страниц

24. Лэндинги
O Call to action (призыв к действию)
O Правильные заголовки
O Простота
O Поведенческий фактор просмотра
O Релевантность
O Дефицит
O Элементы доверия
Принципы разработки эффективной landing page

25. Call to action
O Выражайтесь четко.
O Не злоупотребляйте call to action-ами.
O Используйте кнопки.
O Дополнительная информация должна
быть наготове.
Landing page компании Square –
отличный пример хорошего
call to action, который направлен
на регистрацию пользователя.
Сайт предлагает завести аккаунт,
и, как результат действия, Вы
бесплатно получаете продукт
компании (считыватель
Кредитных карт Square).

26. Лэндинги
Заголовок
Пишите простые и короткие заголовки.
Не тратьте время пользователя, объясните
ему главную идею того, что он может
получить на этом сайте как можно скорее.
Дизайн должен привлекать внимание
пользователя. Используйте большой шрифт и
располагайте заголовок на заметном месте – вверху
страницы, там где ему положено быть.
Используйте релевантные слова. Используйте слова и
фразы, благодаря которым пользователи придут к Вам из
поисковиков – используйте тэги h1 и h2 для заголовков.

27. Простота.
• Каждый элемент страницы должен подталкивать пользователя
совершить действие.
• У landing page должен быть один главный call to action. Цель
странички должна быть предельно ясна и заключается в том, что
пользователю необходимо выполнить одно единственное действие.
Наличие других действий призвано способствовать выполнению
главного.
• На landing page должно быть много свободного
пространства. Слишком перегруженная страница может отпугнуть
пользователя.
Всего 3 элемента:
логотип, видео и одна
единственная кнопка.
Call to action – скачать
приложение.
Лэндинги

28. Лэндинги
Психология пользователя
O Расположите элементы landing page в
логической визуальной
последовательности. Определите
порядок, в котором нужно просматривать
элементы и придерживайтесь его.
O Используйте графические
элементы. Стрелки, иконки и яркие
картинки могут помочь направить взгляд
пользователя на нужную область страницы.
O Используйте контрастные цвета для
определенных компонентов веб-
страницы. Яркие элементы выделяются,
привлекая к себе внимание.

29. Релевантность
Пользователи попадают
на Вашу landing page из
разных источников,
поэтому landing page
должна соответствовать
каждому из них.
Лэндинги

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

31. Доверие
Размещайте социальныеданные
из авторитетных и известных
веб-сервисов. Хорошим примером
является количество лайков в
Facebook.
Используйте элементы доверия
связанные с call to action и
размещайте их рядом.
Будьте честными. Не стоит
публиковать поддельные статусы
или отзывы с других сайтов.
Лэндинги

32. Клиентов,
которых не получаете Вы,
получают Ваши конкуренты.

33. Спасибо за
внимание!
Вопросы?