Стажировка 2015. Дизайн. Адаптивный web-дизайн

1. Стажировка-2015. Дизайнеры. Занятие 5
Адаптивный
web-дизайн

2. Стажировка-2015
Что за зверь?
Адаптивный веб-дизайн (responsive web design) — это подход
к разработке сайтов, согласно которому ресурс должен быть
удобным для просмотра с любого устройства, независимо от
размера экрана, будь то настольный компьютер, мобильный
телефон или планшет, существующее устройство или то, что
появится только в будущем.

3. Стажировка-2015
Минутка истории
Адаптивный дизайн появился в США в конце 2010 года.
В декабре 2011 года в России появился первый адаптивный сайт,
сделанный компанией AGIMA для CRT MAYKOR - maykor.com

4. Стажировка-2015
Адаптив - это немного глубже...

5. Стажировка-2015
концепции и подходы
Graceful Degradation (постепенное сокращение):
сайт адаптируется под браузер, который несовместим с различным
функционалом сайта (отключенный JS, отключенные изображения,
неподдерживаемые CSS-свойства).
Сайт упрощается, но остается доступным. На продвинутых
устройствах работают все функции.

6. Стажировка-2015
концепции и подходы
Progressive Enhancement (прогрессивное улучшение):
на каждом этапе (верстка HTML, стили CSS, обеспечение
интерактива JS) получается законченный интерфейс. Можно
дальше легко расширять функционал на продвинутых устройствах.
Цель и того, и другого: обеспечить доступность контента и
базовый функционал на максимальном числе устройств, а также
предоставить улучшенное оформление и взаимодействие на
продвинутых устройствах.

7. Стажировка-2015
концепции и подходы
Fault-Tolerance (отказоустойчивость):
часть GD. Cпособность продукта продолжать функционирование
при отказе одного или нескольких компонентов
(например, отключенный JS, сбой в загрузке графики)
Mobile first (сначала мобильные):
часть PE. Сайт разрабатывается в первую очередь с учетом специфики
мобильных устройств: небольшие экраны, менее мощные процессоры,
ограниченное управление и.т.д. И только затем предусматривается
работа сайта на десктопе.
Адаптивный сайт с серверными компонентами:
определяется, с какого устройства осуществляется вход на сайт,
и сервер автоматически формирует визуализацию под конкретный
девайс. Экономится время и траффик на загрузку нужной информации.

8. Стажировка-2015
Контрольные точки
320 px — Мобильные устройства (портретная ориентация)
480 px — Мобильные устройства (альбомная ориентация)
600 px — Небольшие планшеты
768 px — Планшеты (портретная ориентация)
1024 px — Планшеты (альбомная ориентация)/Нетбуки
1280 px и более — PC (иногда рисуется большой макет 1600 - 1920px)

9. Стажировка-2015
Советы по адаптивному дизайну
Не делать выпадающее меню по hover-эффекту. На тач-устройствах
таким меню неудобно пользоваться.
прятать вверху под иконку menu
(burger)
прятать сторону - sidemenu
(по аналогии с приложениями)
Ещё варианты: вообще без меню (короткие сайты); не скрывать
(мало пунктов 3-5); обычный дропдаун.

10. Стажировка-2015
Советы по адаптивному дизайну
Прогрессивные JPEG. Save for Web... -> JPEG -> Progressive

11. Стажировка-2015
Советы по адаптивному дизайну
Адаптивные изображения. Изображения (разного размера и качества)
выбираются и загружаются специально для данного разрешения
(JavaScript’ом или сервером).

12. Стажировка-2015
Советы по адаптивному дизайну
Правильно писать телефоны: Пример адаптации таблиц:

13. Стажировка-2015
Советы по адаптивному дизайну
Скрывать часть больших текстов.
Оставлять только действительно важное
Логотипы и иконки в SVG
(по возможности)
Адаптировать формы
под тач-девайсы.

14. Стажировка-2015
Почитать, посмотреть...
• Адаптивный словарь: www.cmsmagazine.ru/library/items/graphical_
design/adaptive-dictionary/
• Видео: Адаптивный дизайн - глубже, чем CSS и резина:
vimeo.com/64605913
• Посмотреть работы AGIMA, например:
www.agima.ru/projects/doctor/