Что такое мобильно-ориентированный дизайн?

Различия в размере шрифта должны быть уменьшены для меньшей области просмотра. Области просмотра также отличаются не только физическими или пиксельными размерами. Подумайте о том, как пользователь взаимодействует с дисплеем. Как правило, масштаб шрифтов должен уменьшаться при переходе от настольных компьютеров к мобильным, но очевидно также, что люди обычно держат телефоны ближе к лицу. Подумайте о том, как люди будут воспринимать контент, и соответствующим образом настройте типографику. Так, на рабочем столе меньше пространства для игры, но пользователь находится ближе к экрану и может читать гораздо более мелкие тексты. Ваша типографика должна масштабироваться с учетом особенностей чтения.<\/p>\r\n\r\n

Объявление "max-width" для контента и "font-size" с помощью "media-query" дает нам возможность контролировать количество символов в строке на разных устройствах. Ориентир - от 45 до 75 символов в строке. Более длинные строки, до 95 символов, читаются на экране быстрее, но неясно, означает ли это, что читатели получают больше удовольствия от чтения или лучше понимают текст.<\/p>\r\n\r\n

6. Используйте не только размер, но и визуальную вариативность:<\/h2>\r\n\r\n

Макет страницы и типографика должны гармонично сочетаться для работы в разных масштабах. Например, в экспансивном дизайне для настольных компьютеров можно сделать заголовки в несколько раз больше основного текста для наглядности и драматизма. На мобильном экране большие заголовки просто вытесняют основной текст, нарушая целостность и требуя излишней прокрутки.<\/p>\r\n\r\n

7. Помните об отзывчивых изображениях и видео<\/h2>\r\n\r\n

Под отзывчивым изображением мы понимаем метод предоставления браузеру нескольких источников изображения в зависимости от плотности экрана, размера элемента изображения на странице или ряда других факторов.<\/p>\r\n\r\n

Устройствам разного размера требуется разное разрешение для одного и того же изображения. Проблема заключается в том, что изображения имеют собственные размеры. Мы не можем растянуть фотографию размером 500×250 пикселей до размеров, превышающих 500 пикселей в ширину, поскольку она будет пикселизирована.<\/p>\r\n\r\n

Еще больше усложняют ситуацию дисплеи Retina и мобильные устройства. Чтобы сделать изображения отзывчивыми, теперь необходимо учитывать три фактора:<\/p>\r\n\r\n

\r\n\t
• Размеры устройства<\/li>\r\n\t
• Размеры изображения<\/li>\r\n\t
• Разрешение экрана устройства.<\/li>\r\n<\/ul>\r\n\r\n

  Идея изменения размеров изображений браузером с самого начала была ключевой частью отзывчивого веб-дизайна. CSS и HTML уже позволяют нам решать эту проблему и загружать подходящее изображение на соответствующее устройство с помощью функций srcset и image-set().<\/p>\r\n\r\n

  <\/p>\r\n\r\n

  Другое дело, что мы должны позаботиться о сжатии изображений перед размещением их на странице. Для уменьшения размера файла, насколько это возможно, можно использовать, например, такой онлайновый инструмент, как TinyPNG.<\/p>\r\n\r\n

  8. Отзывчивая типографика<\/h2>\r\n\r\n

  Выбирайте шрифты с умом - работа в разных масштабах требует от шрифтов еще больших усилий. Выбирайте шрифты экономно. Не нагружайте шрифты слишком сильно, достаточно двух-трех шрифтов разного типа. Обязательно протестируйте реальный шрифт в браузере на разных платформах на предмет внешнего вида, веса страницы и скорости рендеринга. Макет может нарушить самую тщательную типографику. Помните о белом пространстве вокруг слов - там, где глаз может отдохнуть, - и об использовании образов. Именно здесь отзывчивый дизайнер должен быть особенно внимателен. На узком экране изображения могут ухудшить читаемость. Плавающее изображение может обернуть длинные слова под ним, а не рядом с ним.<\/p>\r\n\r\n

  9. Регулировка межстрочного интервала<\/h2>\r\n\r\n

  Высотой строки, традиционно называемой "лидированием", часто пренебрегают. То, что достаточно для того, чтобы линии были четкими в одном масштабе или измерении, может быть слишком большим в другом, что приводит к потере внимания читателя при попытке перейти от одной строки к другой. Никому не нравится читать между строк. Не забывайте оптимизировать высоту линий в разных точках разрыва.<\/p>\r\n\r\n

  10. Отзывчивый контент<\/h2>\r\n\r\n

  Для того чтобы макеты визуально выглядели "правильными", а также для управления длиной строки, значения ширины и подгонки должны меняться в зависимости от размера области просмотра. Например, при установке точек разрыва между много- и одноколоночными макетами более широкая колонка с горизонтальным пространством может быть