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

1. Адаптивный сайт. Как
грамотно сделать муху из
слона и слона из мухи
Дмитрий Шагаров

2. TutmeeAgency
Более 8 лет мы занимаемся разработкой сайтов,
интернет-магазинов и лендинг пейдж под ключ,
развитием бизнеса в интернете и созданием брендов.
За годы работы, мы реализовали более 1000 проектов
под ключ, в которых я занимался важным этапом
создания сайтов – frontend разработкой.
2

3. Статистические данные на основе сайтов
statcounter.com и alekscentr.ru
3

4. Динамика изменения доли мобильного
трафика
4

5. Актуальные опорные разрешения 2014
5

6. Актуальные опорные разрешения 2015
6

7. Актуальные опорные разрешения 2016
7

8. Актуальные опорные разрешения 2017
8

9. Зависимость мобильного трафика от
возраста пользователей
9

10. Зависимость мобильного трафика от
возраста пользователей группа 44+
10

11. Выводы по целесообразности адаптива
Адаптиву быть !
• Каждый второй пользователь с мобильной платформы.
• Тенденция роста мобильного трафика.
• Пользователи старшей возрастной группы осваивают мобильные устройства
Опорные разрешения
• 1920 х 1080
• 1366 х 768
• 1024 х 768
• 768 х 1024
• 320 х 568
11

12. Подходы при разработке
иностранных и отечественных
проектов. Преимущества и
недостатки.
12

13. 13

14. Типичная компоновка страницы
14

15. А что у наших западных коллег
15

16. 16

17. Типичная компоновка страницы
иностранного сайта
17

18. Особенности разработки проектов
Заказчики из РФ и СНГ
1. Любят бриф
2. Конкретные требования
3. Элементы с сайтов примеров
Иностранные заказчики
1. Не любят бриф
2. Требования минимальны
3. Структура страницы desktop
версии сайта
18

19. 4. Минимализм - халтура.
5. Контента мало не бывает даже на
мобильнике.
6. Юзабилити в топку главное
картинка.
7. Нужно рассказать сайт – это
важно!.
4. Любят страницу в стиле
конструктор
5. Много пустого места
6. Bootstrap forever!!
7. Deadline forever!
Заказчики из РФ и СНГ Иностранные заказчики
19

20. 8. Фактор доплаты – не хотят
доплачивать
9. Приемлют перенос сроков.
10. Дизайн сайта уникален
Заказчики из РФ и СНГ
20

21. Ошибки на этапах разработки
проекта
21

22. Менеджеры
по продажам
1. Не утоняют breakpoint
2. Не рассказывают зачем
адаптив
22

23. Копирайтер
• Слишком много текста
• Длинные заголовки
23

24. Ошибки
дизайнеров
24

25. Непропорциональные элементы
25

26. Слишком плотная компоновка страницы
26

27. Непродуманный интерфейс под touch и slide функции
27

28. Большие изображения
28

29. Тяжелый медийный контент
29

30. Пренебрежение векторной графикой
5.152
3.68
1.96
0
1
2
3
4
5
6
Время загрузки
PNG SVG SVG + GZIP
30

31. Непонимание принципов работы сетки
31

32. Ошибки
Frontend
разработчиков
32

33. Не валидная не логичная верстка
33

34. Использование чрезмерно тяжелых и лишних библиотек и
фреймворков,а так же использование полных версий вместо
кастомных
0 50 100 150 200 250 300
jQuery UI
Bootstrap
Custom Full
34

35. Использование изображений одного разрешения на мобильной
и десктопной версии
0 200 400 600 800 1000
1024х479
1366х639
1920х898
2560х1169
35

36. Невнимательное отношение к промежуточным состояниям
страницы
36

37. Злоупотребление сеткой
<div class=“col-md-12">
<h2>Подтверждение соответствия:</h2>
<ul>
<li class=“col-md-6”>
Сертификат соответствия ТР ТС
</li>
<li class=“col-md-6”>
Декларация о соответствии ТР
</li>
<li class=“col-md-6”>
Сертификат соответствия ГОСТ
России</li>
<li class=“col-md-6”>
Декларация о соответствии
ГОСТ Р России</li>
</ul>
<div class=“col-md-12">
<h2>Подтверждение соответствия:</h2>
<ul>
<li>
Сертификат соответствия ТР
ТС
</li>
<li>
Декларация о соответствии ТР
</li>
<li>
Сертификат соответствия ГОСТ
России
</li>
<li>
Декларация о соответствии
ГОСТ Р России
</li>
</ul>
37

38. Использование синхронной загрузки медиаконтента
38

39. Безоговорочное следование макету
39

40. Концепции разработки
адаптивного сайта
40

41. Концепция Desktop first и Mobile first
41

42. Mobile first
1.Максимально адаптировано под
мобильные устройства
2.Комфортная адаптация , нет
проблем с элементами не
помещающимися на страницу
3.Достаточно сложна в технической
реализации
Desktop first
1.Достаточно проста в освоении
2.Должна быть продуманная
компоновка страниц
3.Большое количество ненужных
ресурсов
42

43. Тестирование это важно
• Опыт организации и проведения различных видов тестирования.
• Аналитические способности.
• Знание технологий разработки
• Опыт разработки подобных проектов
• Внимание к деталям
НЕ ЭКОНОМЬТЕ НА ТАКИХ СПЕЦИАЛИСТАХ !!!
43

44. Выводы
• Адаптив необходим
• Будьте готовы к разносторонним заказчикам
• Анализируйте свои и чужие ошибки
• Команда наше все помогайте команде
• Семь раз оттестируй один раз в релиз
44

45. Спасибо за внимание!
Дмитрий Шагаров