Почему современный сайт должен быть адаптирован для мобильных устройств. Что такое адаптивный сайт. Адаптивность — это не только про верстку. Почему сделать адаптивный сайт сейчас — получить конкурентное преимущество. Алексей Шепелин, Арт-директор ADN Digital Studio

1. Что такое
адаптивный сайт
и кому он нужен

2. 61%
Что происходит?
пользователей
в России регулярно
выходит в Интернет
с помощью мобильных
устройств. В 2013
их было 45%1
пользуются только
мобильным Интернетом1
14%
1. Данные проекта TNS Web
Index, январь-март 2015
онлайн-транзакций
в 2016 году в России
будет осуществляться
с мобильных устройств2
50%
2. Вице-президент Criteo по мобильной
продукции, Джейсон Морс, 13.10.2015

3. Больше
мобильных
пользователей
Больше
типов
устройств
Больше сценариев работы
с контентом
Мы живем в среде
мультиэкранного потребления*
Тенденции
* Наглядным примером может служить церемония вручения премии Оскар в последние
годы. Пользователи одновременно смотрят трансляцию, обсуждают ее в соцсетях
* и активно ищут в продаже платья, которые надеты на знаменитостях.
* И таких примеров масса.

4. Чтобы выжить в этой
не самой дружелюбной
среде, контенту необходим
универсальный инструмент
доставки до пользователя.
Последствия

5. Адаптивный сайт — это сайт,
который динамически
адаптируется под устройство,
с которого его просматривают.
Эта история не только про размеры
экранов, но с них мы и начнем.
Минутка Википедии

6. Время шло, экранов
становилось больше,
появлялись первые сайты
с «резиновой» версткой.
Минутка истории
Когда-то все было просто.
Интернет был добрее,
а первые сайты были
простыми и статичными
по ширине.

7. С появлением первых мобильных браузеров
появляются и первые мобильные версии существующих сайтов.
Все было прекрасно. Пока число устройств
не начало лавинообразно расти.
Минутка истории

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

9. Собственно, исходя из потребностей
рынка в 2010 году и появляется термин
«адаптивного сайта».
Минутка истории

10. В сравнении эти технологии выглядят примерно так:
Статичный
сайт
Адаптивный
сайт
Мобильная
версия
Минутка истории

11. OSTROVOK.RU
Живые примеры
Статичный
сайт

12. Живые примеры
Адаптивный
сайт
HOTELS.COM

13. В сравнении
Статичный
сайт
Адаптивный
сайт

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

15. Доступно
SMARTIA.ME

16. Легко
НОВОСИБИРСКИЙ КВАРТАЛ, НА ЭТАПЕ СДАЧИ

17. Понятно
SECRET-NET.RU

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

19. Люди
Адаптивный сайт дороже, и вы должны
хорошо понимать свою аудиторию и
особенности ее поведения, прежде чем
влезать в эту историю.
Изучайте задачи, решаемые
вашими пользователями,
стройте сценарии их поведения.
Возможно в процессе вы
придете к пониманию того, что
вам будет достаточно мобильной
версии или еще рано выходить
на рынок мобильных решений.
Юзабилити-
тестирование –
наиболее простой
метод исследования,
при этом он часто дает
мощный толчок для
новых решений.
Сценарии Тесты

20. Контент
Больше внимания контенту, сам
сайт — всего лишь средство его
доставки.
Поведение мобильных пользователей во многом
отличается от десктопных. Рабочая сессия
короче, пользователи предпочитают картинки и
не любят длинные тексты.
Будьте кратки и лаконичны в своих материалах,
иначе их просто не заметят.
Краткость

21. Адаптивность — это и есть самая
актуальная бизнес-философия
на данный момент.
Бизнес XXI века стремится уйти от масс-маркета
в сторону индивидуального отношения к
каждому клиенту, тратит больше времени и сил
на анализ его привычек и предпочтений
(привет, интернет вещей) и, адаптируясь под
них, дает ему как новое качество услуг, так
ощущение уникальности.
Минутка пафоса

22. Благодарю за внимание!
Вопросы?
Шепелин Алексей
Креативный директор ADN studio
Арт-директор Sterno.ru
alex@adn.agency