Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Адаптивный сайт / Дмитрий Шагаров (Tutmee Agency)

212 views

Published on

РИТ++ 2017, Frontend Сonf
Зал Дели + Калькутта, 5 июня, 12:00

Тезисы:
http://frontendconf.ru/2017/abstracts/2567.html

- Статистические данные на основе сайта tutmee.ru.
- Подтверждение важности и актуальности качественной адаптивной верстки (на основе статистики).
- Подходы при разработке иностранных и отечественных проектов. Преимущества и недостатки.
...

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

Адаптивный сайт / Дмитрий Шагаров (Tutmee Agency)

  1. 1. Адаптивный сайт. Как грамотно сделать муху из слона и слона из мухи Дмитрий Шагаров
  2. 2. TutmeeAgency Более 8 лет мы занимаемся разработкой сайтов, интернет-магазинов и лендинг пейдж под ключ, развитием бизнеса в интернете и созданием брендов. За годы работы, мы реализовали более 1000 проектов под ключ, в которых я занимался важным этапом создания сайтов – frontend разработкой. 2
  3. 3. Статистические данные на основе сайтов statcounter.com и alekscentr.ru 3
  4. 4. Динамика изменения доли мобильного трафика 4
  5. 5. Актуальные опорные разрешения 2014 5
  6. 6. Актуальные опорные разрешения 2015 6
  7. 7. Актуальные опорные разрешения 2016 7
  8. 8. Актуальные опорные разрешения 2017 8
  9. 9. Зависимость мобильного трафика от возраста пользователей 9
  10. 10. Зависимость мобильного трафика от возраста пользователей группа 44+ 10
  11. 11. Выводы по целесообразности адаптива Адаптиву быть ! • Каждый второй пользователь с мобильной платформы. • Тенденция роста мобильного трафика. • Пользователи старшей возрастной группы осваивают мобильные устройства Опорные разрешения • 1920 х 1080 • 1366 х 768 • 1024 х 768 • 768 х 1024 • 320 х 568 11
  12. 12. Подходы при разработке иностранных и отечественных проектов. Преимущества и недостатки. 12
  13. 13. 13
  14. 14. Типичная компоновка страницы 14
  15. 15. А что у наших западных коллег 15
  16. 16. 16
  17. 17. Типичная компоновка страницы иностранного сайта 17
  18. 18. Особенности разработки проектов Заказчики из РФ и СНГ 1. Любят бриф 2. Конкретные требования 3. Элементы с сайтов примеров Иностранные заказчики 1. Не любят бриф 2. Требования минимальны 3. Структура страницы desktop версии сайта 18
  19. 19. 4. Минимализм - халтура. 5. Контента мало не бывает даже на мобильнике. 6. Юзабилити в топку главное картинка. 7. Нужно рассказать сайт – это важно!. 4. Любят страницу в стиле конструктор 5. Много пустого места 6. Bootstrap forever!! 7. Deadline forever! Заказчики из РФ и СНГ Иностранные заказчики 19
  20. 20. 8. Фактор доплаты – не хотят доплачивать 9. Приемлют перенос сроков. 10. Дизайн сайта уникален Заказчики из РФ и СНГ 20
  21. 21. Ошибки на этапах разработки проекта 21
  22. 22. Менеджеры по продажам 1. Не утоняют breakpoint 2. Не рассказывают зачем адаптив 22
  23. 23. Копирайтер • Слишком много текста • Длинные заголовки 23
  24. 24. Ошибки дизайнеров 24
  25. 25. Непропорциональные элементы 25
  26. 26. Слишком плотная компоновка страницы 26
  27. 27. Непродуманный интерфейс под touch и slide функции 27
  28. 28. Большие изображения 28
  29. 29. Тяжелый медийный контент 29
  30. 30. Пренебрежение векторной графикой 5.152 3.68 1.96 0 1 2 3 4 5 6 Время загрузки PNG SVG SVG + GZIP 30
  31. 31. Непонимание принципов работы сетки 31
  32. 32. Ошибки Frontend разработчиков 32
  33. 33. Не валидная не логичная верстка 33
  34. 34. Использование чрезмерно тяжелых и лишних библиотек и фреймворков,а так же использование полных версий вместо кастомных 0 50 100 150 200 250 300 jQuery UI Bootstrap Custom Full 34
  35. 35. Использование изображений одного разрешения на мобильной и десктопной версии 0 200 400 600 800 1000 1024х479 1366х639 1920х898 2560х1169 35
  36. 36. Невнимательное отношение к промежуточным состояниям страницы 36
  37. 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. Использование синхронной загрузки медиаконтента 38
  39. 39. Безоговорочное следование макету 39
  40. 40. Концепции разработки адаптивного сайта 40
  41. 41. Концепция Desktop first и Mobile first 41
  42. 42. Mobile first 1.Максимально адаптировано под мобильные устройства 2.Комфортная адаптация , нет проблем с элементами не помещающимися на страницу 3.Достаточно сложна в технической реализации Desktop first 1.Достаточно проста в освоении 2.Должна быть продуманная компоновка страниц 3.Большое количество ненужных ресурсов 42
  43. 43. Тестирование это важно • Опыт организации и проведения различных видов тестирования. • Аналитические способности. • Знание технологий разработки • Опыт разработки подобных проектов • Внимание к деталям НЕ ЭКОНОМЬТЕ НА ТАКИХ СПЕЦИАЛИСТАХ !!! 43
  44. 44. Выводы • Адаптив необходим • Будьте готовы к разносторонним заказчикам • Анализируйте свои и чужие ошибки • Команда наше все помогайте команде • Семь раз оттестируй один раз в релиз 44
  45. 45. Спасибо за внимание! Дмитрий Шагаров

×