DUMP-2013 Проектирование интерфейсов - Адаптивный дизайн:...
Transcript of DUMP-2013 Проектирование интерфейсов - Адаптивный дизайн:...
![Page 1: DUMP-2013 Проектирование интерфейсов - Адаптивный дизайн: модный тренд или реальное будущее? - index.art](https://reader034.fdocument.pub/reader034/viewer/2022042715/557f7de3d8b42aab198b4c2d/html5/thumbnails/1.jpg)
Доклад
«Адаптивный дизайн: модный тренд или реальное будущее?»
Авторы:Алябьев Александр, Курочкин Евгений, Белоусов Евгений
![Page 2: DUMP-2013 Проектирование интерфейсов - Адаптивный дизайн: модный тренд или реальное будущее? - index.art](https://reader034.fdocument.pub/reader034/viewer/2022042715/557f7de3d8b42aab198b4c2d/html5/thumbnails/2.jpg)
Немного истории1. Фиксированный дизайн.
2. Резиновый дизайн.
3. Ограничено-резиновый дизайн.
4. Отзывчивый дизайн / Адаптивный дизайн (первое упоминание 2010 год).
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
![Page 3: DUMP-2013 Проектирование интерфейсов - Адаптивный дизайн: модный тренд или реальное будущее? - index.art](https://reader034.fdocument.pub/reader034/viewer/2022042715/557f7de3d8b42aab198b4c2d/html5/thumbnails/3.jpg)
Примеры сайтов
www.mediaqueri.esподборка сайтов с адаптивным дизайном
www.skinnyties.comот создателя Angry Birds
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
![Page 4: DUMP-2013 Проектирование интерфейсов - Адаптивный дизайн: модный тренд или реальное будущее? - index.art](https://reader034.fdocument.pub/reader034/viewer/2022042715/557f7de3d8b42aab198b4c2d/html5/thumbnails/4.jpg)
Преимущества
+ удобно на любом устройстве
+ два сайта в одном: для мобильных устройств и десктопа
+ можно отказаться от разработки мобильного приложения
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
![Page 5: DUMP-2013 Проектирование интерфейсов - Адаптивный дизайн: модный тренд или реальное будущее? - index.art](https://reader034.fdocument.pub/reader034/viewer/2022042715/557f7de3d8b42aab198b4c2d/html5/thumbnails/5.jpg)
Недостатки- упрощает дизайн или вводит
пользователя в заблуждение
- долго и дорого
- дважды долго и дорого
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
![Page 6: DUMP-2013 Проектирование интерфейсов - Адаптивный дизайн: модный тренд или реальное будущее? - index.art](https://reader034.fdocument.pub/reader034/viewer/2022042715/557f7de3d8b42aab198b4c2d/html5/thumbnails/6.jpg)
Для каких сайтов подойдет?
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
Блоги
Сайты-визитки
Новостные сайты
Простые и понятные сервисыE-commerce (Интернет-магазины, службы)
Корпоративные сайты
Порталы
![Page 7: DUMP-2013 Проектирование интерфейсов - Адаптивный дизайн: модный тренд или реальное будущее? - index.art](https://reader034.fdocument.pub/reader034/viewer/2022042715/557f7de3d8b42aab198b4c2d/html5/thumbnails/7.jpg)
Когда мы называем сайт «резиновым» ?
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
![Page 8: DUMP-2013 Проектирование интерфейсов - Адаптивный дизайн: модный тренд или реальное будущее? - index.art](https://reader034.fdocument.pub/reader034/viewer/2022042715/557f7de3d8b42aab198b4c2d/html5/thumbnails/8.jpg)
«Резина» = %
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
/
![Page 9: DUMP-2013 Проектирование интерфейсов - Адаптивный дизайн: модный тренд или реальное будущее? - index.art](https://reader034.fdocument.pub/reader034/viewer/2022042715/557f7de3d8b42aab198b4c2d/html5/thumbnails/9.jpg)
При любой ширине хорошо использовалась площадь экрана.
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
2500 px
768 px
320 px
![Page 10: DUMP-2013 Проектирование интерфейсов - Адаптивный дизайн: модный тренд или реальное будущее? - index.art](https://reader034.fdocument.pub/reader034/viewer/2022042715/557f7de3d8b42aab198b4c2d/html5/thumbnails/10.jpg)
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
![Page 11: DUMP-2013 Проектирование интерфейсов - Адаптивный дизайн: модный тренд или реальное будущее? - index.art](https://reader034.fdocument.pub/reader034/viewer/2022042715/557f7de3d8b42aab198b4c2d/html5/thumbnails/11.jpg)
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
![Page 12: DUMP-2013 Проектирование интерфейсов - Адаптивный дизайн: модный тренд или реальное будущее? - index.art](https://reader034.fdocument.pub/reader034/viewer/2022042715/557f7de3d8b42aab198b4c2d/html5/thumbnails/12.jpg)
Сетка
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
![Page 13: DUMP-2013 Проектирование интерфейсов - Адаптивный дизайн: модный тренд или реальное будущее? - index.art](https://reader034.fdocument.pub/reader034/viewer/2022042715/557f7de3d8b42aab198b4c2d/html5/thumbnails/13.jpg)
Навигация
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
Меню
Продукты
Загружаемые файлы
Поддержка
![Page 14: DUMP-2013 Проектирование интерфейсов - Адаптивный дизайн: модный тренд или реальное будущее? - index.art](https://reader034.fdocument.pub/reader034/viewer/2022042715/557f7de3d8b42aab198b4c2d/html5/thumbnails/14.jpg)
Таблицы
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
![Page 15: DUMP-2013 Проектирование интерфейсов - Адаптивный дизайн: модный тренд или реальное будущее? - index.art](https://reader034.fdocument.pub/reader034/viewer/2022042715/557f7de3d8b42aab198b4c2d/html5/thumbnails/15.jpg)
Видео, изображения
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
![Page 16: DUMP-2013 Проектирование интерфейсов - Адаптивный дизайн: модный тренд или реальное будущее? - index.art](https://reader034.fdocument.pub/reader034/viewer/2022042715/557f7de3d8b42aab198b4c2d/html5/thumbnails/16.jpg)
Текст
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
![Page 17: DUMP-2013 Проектирование интерфейсов - Адаптивный дизайн: модный тренд или реальное будущее? - index.art](https://reader034.fdocument.pub/reader034/viewer/2022042715/557f7de3d8b42aab198b4c2d/html5/thumbnails/17.jpg)
Медиазапросы
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
![Page 18: DUMP-2013 Проектирование интерфейсов - Адаптивный дизайн: модный тренд или реальное будущее? - index.art](https://reader034.fdocument.pub/reader034/viewer/2022042715/557f7de3d8b42aab198b4c2d/html5/thumbnails/18.jpg)
Формы
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
Подпись
ПодписьПодпись
Подпись
![Page 19: DUMP-2013 Проектирование интерфейсов - Адаптивный дизайн: модный тренд или реальное будущее? - index.art](https://reader034.fdocument.pub/reader034/viewer/2022042715/557f7de3d8b42aab198b4c2d/html5/thumbnails/19.jpg)
И что в итоге?
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
![Page 20: DUMP-2013 Проектирование интерфейсов - Адаптивный дизайн: модный тренд или реальное будущее? - index.art](https://reader034.fdocument.pub/reader034/viewer/2022042715/557f7de3d8b42aab198b4c2d/html5/thumbnails/20.jpg)
И что в итоге?
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
2.0
![Page 21: DUMP-2013 Проектирование интерфейсов - Адаптивный дизайн: модный тренд или реальное будущее? - index.art](https://reader034.fdocument.pub/reader034/viewer/2022042715/557f7de3d8b42aab198b4c2d/html5/thumbnails/21.jpg)
• АД — замена мобильной версии сайта
• АД для SEO: преимущества и недостатки
• АД для Екоммерс
• Заменит ли АД мобильные приложения?
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
![Page 22: DUMP-2013 Проектирование интерфейсов - Адаптивный дизайн: модный тренд или реальное будущее? - index.art](https://reader034.fdocument.pub/reader034/viewer/2022042715/557f7de3d8b42aab198b4c2d/html5/thumbnails/22.jpg)
Трафик есть! Работать необходимо!
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
![Page 23: DUMP-2013 Проектирование интерфейсов - Адаптивный дизайн: модный тренд или реальное будущее? - index.art](https://reader034.fdocument.pub/reader034/viewer/2022042715/557f7de3d8b42aab198b4c2d/html5/thumbnails/23.jpg)
Рост сегмента мобильного трафика
www.zhivika.ru
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
![Page 24: DUMP-2013 Проектирование интерфейсов - Адаптивный дизайн: модный тренд или реальное будущее? - index.art](https://reader034.fdocument.pub/reader034/viewer/2022042715/557f7de3d8b42aab198b4c2d/html5/thumbnails/24.jpg)
Решения для работы с мобильным трафиком• Специальная мобильная версия
сайта
• Адаптивный дизайн для всех типов устройств
• Мобильное приложение
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
![Page 25: DUMP-2013 Проектирование интерфейсов - Адаптивный дизайн: модный тренд или реальное будущее? - index.art](https://reader034.fdocument.pub/reader034/viewer/2022042715/557f7de3d8b42aab198b4c2d/html5/thumbnails/25.jpg)
Советы от
• Прекратите создавать сайты для мобильных устройств!
• Один сайт для всех типов устройств. Одна контентная база, один функционал.
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
![Page 26: DUMP-2013 Проектирование интерфейсов - Адаптивный дизайн: модный тренд или реальное будущее? - index.art](https://reader034.fdocument.pub/reader034/viewer/2022042715/557f7de3d8b42aab198b4c2d/html5/thumbnails/26.jpg)
Почему АД полезен для SEO?
• Юзабилити
• Уникальный контент
• Плюсы при ранжирование в мобильном поиске
• Равномерное наращивание ссылочной массы
• Преимущество раннего использования
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
![Page 27: DUMP-2013 Проектирование интерфейсов - Адаптивный дизайн: модный тренд или реальное будущее? - index.art](https://reader034.fdocument.pub/reader034/viewer/2022042715/557f7de3d8b42aab198b4c2d/html5/thumbnails/27.jpg)
Минусы
- Время установки
- Большой объем страницы? Не лишайте свой сайт для мобильных устройств информации.
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
![Page 28: DUMP-2013 Проектирование интерфейсов - Адаптивный дизайн: модный тренд или реальное будущее? - index.art](https://reader034.fdocument.pub/reader034/viewer/2022042715/557f7de3d8b42aab198b4c2d/html5/thumbnails/28.jpg)
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
![Page 29: DUMP-2013 Проектирование интерфейсов - Адаптивный дизайн: модный тренд или реальное будущее? - index.art](https://reader034.fdocument.pub/reader034/viewer/2022042715/557f7de3d8b42aab198b4c2d/html5/thumbnails/29.jpg)
Для iOS:• Рост числа конверсий 65.71%• Рост числа транзакция 112.50%• Рост дохода 101.25%
Для Android:• Рост числа конверсий 407.32%• Рост числа транзакция 333.33%• Рост дохода 591.42%
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
![Page 30: DUMP-2013 Проектирование интерфейсов - Адаптивный дизайн: модный тренд или реальное будущее? - index.art](https://reader034.fdocument.pub/reader034/viewer/2022042715/557f7de3d8b42aab198b4c2d/html5/thumbnails/30.jpg)
Мобильный трафик:• Рост числа конверсий 162.50%• Рост числа транзакция 382.61%• Рост дохода 370.61%
Не мобильный трафик:• Рост числа конверсий 71.70%• Рост числа транзакция 177.03%• Рост дохода 136.06%
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
![Page 31: DUMP-2013 Проектирование интерфейсов - Адаптивный дизайн: модный тренд или реальное будущее? - index.art](https://reader034.fdocument.pub/reader034/viewer/2022042715/557f7de3d8b42aab198b4c2d/html5/thumbnails/31.jpg)
Наличие всей необходимой информации для выбора и покупки товара на одном экране, для любого устройства.
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
![Page 32: DUMP-2013 Проектирование интерфейсов - Адаптивный дизайн: модный тренд или реальное будущее? - index.art](https://reader034.fdocument.pub/reader034/viewer/2022042715/557f7de3d8b42aab198b4c2d/html5/thumbnails/32.jpg)
Заменит ли АД мобильные приложения?
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
![Page 33: DUMP-2013 Проектирование интерфейсов - Адаптивный дизайн: модный тренд или реальное будущее? - index.art](https://reader034.fdocument.pub/reader034/viewer/2022042715/557f7de3d8b42aab198b4c2d/html5/thumbnails/33.jpg)
Заменит ли АД мобильные приложения?
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
![Page 34: DUMP-2013 Проектирование интерфейсов - Адаптивный дизайн: модный тренд или реальное будущее? - index.art](https://reader034.fdocument.pub/reader034/viewer/2022042715/557f7de3d8b42aab198b4c2d/html5/thumbnails/34.jpg)
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
http://blog.index-art.ru/
Задавайте вопросы.
Кто не успеет, можно обсудить в нашем блоге: