понедельник, 14 декабря 2015 г.

Конспект курса Responsive Web Design Fundamentals by Udacity, week 5. Оптимизация

В этой части курса Пит и Кэмерон рассказывают, как работать с "менее глобальными" элементами страницы - шрифтами, таблицами, изображениями, на которых тоже оказывает влияние Responsive Design.

Изображения

В большинстве случаев лучше всего использовать одно и то же изображение, меняя его размер и разрешение.
Для этого лучше всего использовать атрибут sourse set для тега image.  С его помощью браузер будет знать, какой размер изображения требуется, и загружать только его. Но responsive images заслуживают отдельного курса, который и проводит Сэм Даттон на Udacity
А здесь статья Пита на эту тему на Google Developers. Ну разве такой человек научит вас чему-нибудь плохому? 

Таблицы




 Если в таблице хотя бы две колонки, то она, скорее всего, выйдет за пределы экрана, в результате чего появится горизонтальный скроллинг.


Есть три способа избежать этого: 
 а) скрытие колонок таблицы (на маленьких экранах показываются только одна-две самые важные, для базового понимания). Для реализации применяем мидиа-скрин с максимальной шириной экрана и display:none для определенных колонок. Недостатки способа: от пользователя скрывается контент! Можно еще применять аббревиатуры с целью экономии места.
 б) избавление от таблицы - таблица раскладывается на длинные столбцы текста.
в) таблицы-контейнеры.

Текст

В конце прошлого века были проведены исследования идеальной для чтения длины строки текста. Если строка слишком короткая, слова трудно увязать между собой. Если слишком длинная, то, дочитав до конца, трудно понять, где начинается следующая строка. Идеальная длина строки - 45-90 символов, в зависимости от шрифта. В качестве отправной точки следует брать 60.

 
 

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

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