вторник, 9 июня 2015 г.

Конспект курса Responsive Web Design Fundamentals by Udacity, week 2. Viewport, Device Independent Pixels, элементы

Открытие недели: из лекций с субтитрами можно делать комиксы! Эти два чувака очень смешные, правда?
Перевод:

Кэмерон: - Когда я бываю на своих сайтах, то замечаю порой, что контент расплывается по всей странице или мне нужно растягивать страницу двумя пальцами, чтобы что-то разглядеть.
Пит (ехидно): - Ну, помимо твоих CSS, которые требуют маа-а-а-ленькой доработки, самая большая проблема - не настроенный правильно viewport.

Кстати, вот здесь очень интересная статья о том, как меняются роли дизайнера и проектировщика интерфейсов, если делаем именно Responsive, и что от них требуется.

Viewport 

Эта штука определяет область на экране, куда браузер должен "впихнуть" сайт. Например, если мы установили ширину окна браузера на компьютере 800 пикселей, viewport становится равен 800. Но это так не для всех устройств.
Хотя физически на устройстве может быть, например, 1600 пикселей, как на рисунке Пита, браузер рапортует  viewport 800 DIP (Device Independent Pixels).

Device Independent Pixel - единица измерения, которая определяет соотношение пикселов и физического расстояния (в сантиметрах, которое мы воспринимаем глазом). Смысл в том, что DIP занимает на экране одно и то же место, независимо от реального пиксельного разрешения.

Пит показывает свой Chromebook. Device Pixel Ratio равен 2. Это значит, что viewport равен 1280 DIP, хотя физическое разрешение экрана равно 2560. Таким образом, сайт масштабируется, занимая на экране вдвое больше места.

Что же происходит, когда viewport не установлен? 

 Страница шириной в 980 пикселей отображается на Nexus 5, где разрешение равно 360DIP. Таким образом, она сжимается в три раза (если что, Пит написал там Yuck, а не то, что вы подумали, хотя он наверняка думает это самое). 

Font boosting (ну не знаю... вынесение, что ли, шрифта?) - когда браузер пытается выделить главный контент на странице и отобразить его правильно с помощью масштабирования. 
Свойство viewport устанавливается вот так

В данном случае код инструктирует страницу соответствовать ширине экрана в DIP, в результате чего страница пересобирается так, чтобы правильно отображаться и на экране телефона, и на большом экране ноутбука.

initial-scale=1 означает соотношение 1:1 между DIP и CSS пикселями.

Статья от Mozilla на английском о Viewport и его атрибутах

Что с размером отдельных элементов? 

Большая ширина, установленная в CSS в пикселях, или даже абсолютное позиционирование могут привести к тому, что элементы будут слишком большими либо не будут влезать в окно браузера вообще. Поэтому, говорит Пит, используйте относительное позиционирование, ширину в процентах и будет вам счастье :)

(а заодно горизонтального скроллинга, о котором, кажется, даже в эвристиках кто-то писал).

Дальше - о юзабилити. Все, куда юзер должен попасть пальцем, должно быть:
- достаточно большим
- достаточно далеко отнесено от соседних элементов.

В среднем пальцы имеют диаметр около 10 мм, что соответствует 40 пикселей. Таким образом, элемент, например, кнопка, может иметь минимальный размер 40х40, и еще 40 пикселей должно быть свободное пространство между соседними кликабельными элементами.

Устанавливать эти размеры нужно с помощью min-width и min-height, а не width и height соответственно, иначе контейнер (кнопка) не сможет изменять свои размеры соответственно контенту (надпись), если вдруг контент окажется бОльшего размера.

Начинаем проектировать всегда самый маленький девайс (напр., телефон). Таким образом нам придется приоритизировать контент и самое важное непременно попадет на главный экран. После этого можно адаптировать дизайн к среднему размеру (планшет, хромбук), а затем, если есть необходимость, к экрану ноутбука. Собственно, просто читайте Mobile First by Luke Wroblewski.

Кроме того, начав дизайн с самого маленького устройства, мы неизбежно начинаем думать о performance с самого начала. Кстати, вы знали, что, по исследованиям, пользователи не ждут загрузки страницы дольше 3 секунд?

Комментариев нет:

Отправка комментария