Отзывчивый дизайн полностью решает проблему отображения сайта на экранах разного разрешения. Проблема в том, что трудно понять принцип адаптивности, если рассматривать веб-дизайн как эволюцию дизайна формы.
Не существует размеров страниц или физических единиц измерения, таких как миллиметры или дюймы. Это означает, что нет существенных ограничений на размещение контента. Пиксельные рамки также уходят в прошлое. Остается только принять новые требования веб-разработки и адаптироваться к новым условиям.
Для простоты мы сосредоточимся на взаимном расположении элементов на странице, но отзывчивый дизайн охватывает и другие аспекты работы сайта. Чтобы узнать больше об этих аспектах, начните здесь.
Адаптивный дизайн или адаптированные версии сайта?
Эти два контрастных подхода могут прекрасно дополнять друг друга, если применять их осознанно. Конечно, их конкретное применение должно определяться содержанием.
Дрифт.
Поскольку экраны становятся меньше, содержимое может занимать все большую часть высоты экрана, а расположенные ниже элементы могут все дальше и дальше отходить от нижнего края области просмотра. Это известно какпоток". Вам необходимо ознакомиться с этой концепцией и понять, что ваш сайт будет реагировать на ширину экрана соответствующим образом.
Относительные единицы измерения
Веб-сайты должны одинаково хорошо выглядеть как на больших экранах настольных компьютеров, так и на маленьких смартфонах, а также на всех видах устройств, находящихся между этими крайностями.
Использование относительных единиц измерения может сделать вашу конструкцию более гибкой. Например, установка ширины элемента в 50% гарантирует, что элемент займет ровно половину экрана на любом устройстве.
Брейкпоинты.
Точки пространства используются для изменения положения элементов дизайна, чтобы они поместились на экране. Например, на сайте может быть три колонки текста на экране настольного компьютера и одна колонка на экране смартфона. Как правило, наличие и характеристики точек останова определяются содержанием.
Если абзац текста начинает выглядеть странно при определенном разрешении или если изображение выходит за пределы экрана, здесь следует установить точку останова. Однако, установив слишком много точек останова, можно легко перепутать их с соответствующими классами.
Максимальные и минимальные размеры
Для экранов смартфонов отличной идеей является использование всей ширины экрана. Однако использование широкоформатного монитора таким же образом может сделать контент трудночитаемым. Этого можно избежать, используя атрибут 'Максимальная ширина.’.
Например, установка ширины блока содержимого на 100% и максимальной ширины на 1000px позволит содержимому занять весь экран, но не превысить ограничение ширины в 1000px.
Вложенные объекты.
Если на странице слишком много родственных объектов, может быть трудно правильно выровнять их относительно друг друга.
Однако группы элементов могут быть помещены в блочные контейнеры для управления положением и размером контейнера. Этот подход также упрощает работу с элементами с абсолютными размерами, такими как логотипы и кнопки.
Какой экран вы рассматриваете в первую очередь?
Вы можете начать разработку на мобильном устройстве и постепенно улучшать расположение компонентов для больших экранов. В качестве альтернативы можно начать с самого большого экрана и работать в обратном направлении. Некоторые люди рассматривают несколько разрешений экрана одновременно.
Первый метод считается самым простым и широко распространен среди дизайнеров под названием "Во-первых, мобильный телефон.". Сначала выясните, что лучше всего подходит для вас и содержимого вашего сайта.
Шрифт или системный шрифт?
Хотите использовать классную типографику на своем сайте? Используйте строчные шрифты. Однако имейте в виду, что каждый раз, когда вы загружаете мобильный телефон из Интернета, страница будет загружаться дольше. Шрифты, которые уже есть на устройстве клиента, загрузятся быстро, но их внешний вид и соответствие замыслу дизайна могут оставлять желать лучшего.
Растровое или векторное изображение?
Если в вашем логотипе много деталей или графических эффектов, используйте растровый вариант. В противном случае попробуйте сохранить. Для маленьких значков можно также использовать встроенные декоративные шрифты.
Каждый подход имеет свои преимущества и недостатки. В любом случае следует учитывать размер изображения. Все ресурсы, используемые на сайте, должны быть соответствующим образом оптимизированы.
Векторные изображения "Плоскость.объекты обычно имеют небольшой размер, но псевдореалистичные векторные изображения, содержащие множество кривых и градиентов, могут быть тяжелее соответствующих растровых изображений. Также обратите внимание, что некоторые старые браузеры не поддерживают этот формат:
