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

АдАптивный web-дизАйн

Стажировка-2015

Что за зверь?

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

Стажировка-2015

Минутка истории

Адаптивный дизайн появился в США в конце 2010 года.

В декабре 2011 года в России появился первый адаптивный сайт, сделанный компанией AGIMA для CRT MAYKOR - maykor.com

Стажировка-2015

адаптив - это неМного глубже...

Стажировка-2015

концепции и подходы

Graceful Degradation (постепенное сокращение):

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

Стажировка-2015

концепции и подходы

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

Цель и того, и другого: обеспечить доступность контента и базовый функционал на максимальном числе устройств, а также предоставить улучшенное оформление и взаимодействие на продвинутых устройствах.

Стажировка-2015

концепции и подходы

Fault-Tolerance (отказоустойчивость): часть GD. Cпособность продукта продолжать функционирование при отказе одного или нескольких компонентов (например, отключенный JS, сбой в загрузке графики)

Mobile first (сначала мобильные):часть PE. Сайт разрабатывается в первую очередь с учетом специфики мобильных устройств: небольшие экраны, менее мощные процессоры, ограниченное управление и.т.д. И только затем предусматривается работа сайта на десктопе.

Адаптивный сайт с серверными компонентами:определяется, с какого устройства осуществляется вход на сайт, и сервер автоматически формирует визуализацию под конкретный девайс. Экономится время и траффик на загрузку нужной информации.

Стажировка-2015

контрольные тоЧки

320 px — Мобильные устройства (портретная ориентация)

480 px — Мобильные устройства (альбомная ориентация)

600 px — Небольшие планшеты

768 px — Планшеты (портретная ориентация)

1024 px — Планшеты (альбомная ориентация)/Нетбуки

1280 px и более — PC (иногда рисуется большой макет 1600 - 1920px)

Стажировка-2015

советы по адаптивноМу дизайну

Не делать выпадающее меню по hover-эффекту. На тач-устройствахтаким меню неудобно пользоваться.

прятать вверху под иконку menu (burger)

прятать сторону - sidemenu(по аналогии с приложениями)

Ещё варианты: вообще без меню (короткие сайты); не скрывать(мало пунктов 3-5); обычный дропдаун.

Стажировка-2015

советы по адаптивноМу дизайну

Прогрессивные JPEG. Save for Web... -> JPEG -> Progressive

Стажировка-2015

советы по адаптивноМу дизайну

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

Стажировка-2015

советы по адаптивноМу дизайну

Правильно писать телефоны: Пример адаптации таблиц:

Стажировка-2015

советы по адаптивноМу дизайну

Скрывать часть больших текстов. Оставлять только действительно важное

Логотипы и иконки в SVG(по возможности)

Адаптировать формы под тач-девайсы.

Стажировка-2015

поЧитать, посМотреть...

• Адаптивный словарь: www.cmsmagazine.ru/library/items/graphical_ design/adaptive-dictionary/

• Видео: Адаптивный дизайн - глубже, чем CSS и резина: vimeo.com/64605913

• Посмотреть работы AGIMA, например: www.agima.ru/projects/doctor/