Особенности разработки адаптивного дизайна

1. Современные технологии создания сайтов:
адаптивный дизайн

2. Типы верстки сайтов
Фиксированный тип макета
Резиновый дизайн
Адаптивный дизайн

3. Фиксированный тип макета
дизайн, в котором ширина столбца/рисунка задана в пикселях и остается
неизменной независимо от разрешения экрана
 Простота при создании † Появление горизонтальной прокрутки у
мобильных пользователей.
 Легко осуществить вывод картинок,
баннеров, видео материалов. Они не
«наедут» друг на друга при разном
разрешении монитора.
† На современных широкоформатных
мониторах «узкий» сайт будет
смотреться несколько «бедно».

4. Резиновый дизайн
ширина колонок задаётся в процентах, а не в пикселях, поэтому "резиновый"
дизайн при любом разрешении монитора растягивается на всю ширину экрана
† Сложность при создании. Необходимо
позаботиться о том, чтобы сайт хорошо
смотрелся как при минимальной
ширине, так и при максимальной.
 Отображение на
широкоформатном мониторе
максимального количества
контента
 Сайт выглядит красиво практически
при любом разрешении монитора
†Нечитабельность текста. На
широкоформатных мониторах строчки
основного текста могут быть слишком
длинными.

5. Адаптивный дизайн
сайт одинаково хорошо выглядит на десктопе, на планшете, на
мобильном телефоне – это, по сути, несколько независимых вариантов
дизайна для разных устройств.
 Сервер определяет тип устройства и разрешение
экрана и отдает ту или иную версию сайта
 Каждая версия заранее оптимизирована
под то или иное разрешение экрана.
 Для версий под экраны с маленьким
разрешением используются
уменьшенные изображения, а некоторые
элементы вообще убираются.
 Сама компоновка блоков также
отличается от «большой» версии.

6. Польза мобильного интернета для пользователя
• Узнавать новости
• Общаться в соцсетях
• Смотреть фильмы
• Делать покупки
• Вести деловую и личную переписку
• Делать важные дела в пути
• Быть на связи в любой ситуации
• Найти оптимальный маршрут
Почему адаптив?

7.  Количество пользователей смартфонов в сетях всех трех мобильных
операторов Беларуси достигает 3 млн. человек
 Это 40% от всех пользователей мобильных телефонов
Почему адаптив?

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

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

10. В отличие от мобильных приложений, адаптивный дизайн – это:
Один адрес сайта
Один дизайн
Одна система управления
Один контент
Адаптивный сайт vs мобильная версия

11. Правила создания адаптивного дизайна
1. Учитывайте специфику каждого сегмента аудитории, которые посещает ваш
сайт с определенного устройства. Когда пользователи заходят с разных
устройств, зачастую они пытаются решить разные задачи.
 С мобильных версий убирают со страницы текст о компании
 Зато выделают контакты, поскольку вероятность того, что с данного
устройства пользователь захочет осуществить связь гораздо ВЫШЕ.
Адаптивный дизайн

12. Правила создания адаптивного дизайна
2. Используйте изображения в высоком разрешении, которые можно
уменьшить для мобильной версии сайта без потери информационной
нагрузки.
Адаптивный дизайн

13. Правила создания адаптивного дизайна
3. Хорошо продумайте навигацию. Она должна быть одинаково простой и
интуитивно понятной для пользователя на ВСЕХ устройствах.
Например, меню
Варианты решения:
1.Закрепить меню в верхней части экрана. Если пользователь просматривает
сайт, меню всегда остается перед глазами пользователя.
2.Если в вашем меню много разделов и ссылок, сделайте меню выпадающим,
или многоуровневым.
Адаптивный дизайн

14. Правила создания адаптивного дизайна
4. Акцентируйте внимание на важных разделах вашего сайта. Используйте для
этого типографику.
Используйте шрифты разных размеров для привлечения внимания к разным
блокам и разделам. Но помните! Пользователю должно быть удобно
читать тексты.
Адаптивный дизайн

15. Адаптивный дизайн
Сроки разработки более 6 месяцев
Стоимость в 2-3 раза выше
Не удобен для больших проектов
Важно учитывать:
Но:
Клиентов, которых не получаете Вы, получают Ваши конкуренты
А переход на адаптивный веб-дизайн — позволит вам быть готовыми к
будущему и стоять на шаг впереди конкурентов.

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

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

21. Адаптивный дизайн в Студии Борового

22. Адаптивный дизайн в Студии Борового