DUMP-2013 Проектирование интерфейсов - Адаптивный дизайн:...
Transcript of DUMP-2013 Проектирование интерфейсов - Адаптивный дизайн:...
Доклад
«Адаптивный дизайн: модный тренд или реальное будущее?»
Авторы:Алябьев Александр, Курочкин Евгений, Белоусов Евгений
Немного истории1. Фиксированный дизайн.
2. Резиновый дизайн.
3. Ограничено-резиновый дизайн.
4. Отзывчивый дизайн / Адаптивный дизайн (первое упоминание 2010 год).
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
Примеры сайтов
www.mediaqueri.esподборка сайтов с адаптивным дизайном
www.skinnyties.comот создателя Angry Birds
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
Преимущества
+ удобно на любом устройстве
+ два сайта в одном: для мобильных устройств и десктопа
+ можно отказаться от разработки мобильного приложения
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
Недостатки- упрощает дизайн или вводит
пользователя в заблуждение
- долго и дорого
- дважды долго и дорого
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
Для каких сайтов подойдет?
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
Блоги
Сайты-визитки
Новостные сайты
Простые и понятные сервисыE-commerce (Интернет-магазины, службы)
Корпоративные сайты
Порталы
Когда мы называем сайт «резиновым» ?
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
«Резина» = %
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
/
При любой ширине хорошо использовалась площадь экрана.
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
2500 px
768 px
320 px
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
Сетка
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
Навигация
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
Меню
Продукты
Загружаемые файлы
Поддержка
Таблицы
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
Видео, изображения
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
Текст
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
Медиазапросы
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
Формы
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
Подпись
ПодписьПодпись
Подпись
И что в итоге?
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
И что в итоге?
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
2.0
• АД — замена мобильной версии сайта
• АД для SEO: преимущества и недостатки
• АД для Екоммерс
• Заменит ли АД мобильные приложения?
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
Трафик есть! Работать необходимо!
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
Рост сегмента мобильного трафика
www.zhivika.ru
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
Решения для работы с мобильным трафиком• Специальная мобильная версия
сайта
• Адаптивный дизайн для всех типов устройств
• Мобильное приложение
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
Советы от
• Прекратите создавать сайты для мобильных устройств!
• Один сайт для всех типов устройств. Одна контентная база, один функционал.
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
Почему АД полезен для SEO?
• Юзабилити
• Уникальный контент
• Плюсы при ранжирование в мобильном поиске
• Равномерное наращивание ссылочной массы
• Преимущество раннего использования
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
Минусы
- Время установки
- Большой объем страницы? Не лишайте свой сайт для мобильных устройств информации.
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
Для iOS:• Рост числа конверсий 65.71%• Рост числа транзакция 112.50%• Рост дохода 101.25%
Для Android:• Рост числа конверсий 407.32%• Рост числа транзакция 333.33%• Рост дохода 591.42%
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
Мобильный трафик:• Рост числа конверсий 162.50%• Рост числа транзакция 382.61%• Рост дохода 370.61%
Не мобильный трафик:• Рост числа конверсий 71.70%• Рост числа транзакция 177.03%• Рост дохода 136.06%
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
Наличие всей необходимой информации для выбора и покупки товара на одном экране, для любого устройства.
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
Заменит ли АД мобильные приложения?
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
Заменит ли АД мобильные приложения?
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
Доклад: «Адаптивный дизайн: модный тренд или реальное будущее?»
http://blog.index-art.ru/
Задавайте вопросы.
Кто не успеет, можно обсудить в нашем блоге: