Адаптивный веб - дизайн широко рассматривается как дизайнерская тенденция.
Это подход к веб-разработке, который позволяет веб-сайту плавно подстраиваться по нескольким размерам монитора.
Текстовые ссылки - это еще одна вещь, которую следует учитывать при разработке адаптивного веб-сайта.
Работа с процентами по размеру элементов вашего сайта может быть немного сложнее, чем создание сайта, где все имеет фиксированный размер.






Адаптивный веб-дизайн в 2022

Адаптивный веб - дизайн широко рассматривается как дизайнерская тенденция, но это гораздо больше.


Это подход к веб-разработке, который позволяет веб-сайту плавно подстраиваться по нескольким размерам монитора, разрешениям экрана и платформам, будь то компьютер, планшет или мобильное устройство.


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


В этой ствтье мы рассмотрим, что представляет собой адаптивный веб-дизайн для разработчика.


Использование нескольких размеров изображений


Нет необходимости в том, чтобы мобильное устройство загружало изображение шириной 1920 пикселей на 1200 пикселей и весом в четверть мб. Это только замедлит время загрузки сайта на свое мобильное. Отличным примером сайта, который сохраняет свое основное изображение, но изменяет его размер на основе разрешения экрана посетителя, является сайт Sony. Вы заметите, как основное изображение изменилось в размере между более крупной версией и мобильной версией благодаря CSS-медиа-запросам.


Другой подход к ускорению времени загрузки и определению того, как сайт должен отображаться на разных устройствах, - полностью убрать основное изображение. Это именно то, что Fork CMS сделал со своим сайтом. Основное изображение изменяется между широкоэкранной и более традиционной версией, но затем полностью выпадает из дизайна, как только вы переходите к версии мобильного размера.


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


Навигация


Текстовые ссылки - это еще одна вещь, которую следует учитывать при разработке адаптивного веб-сайта. На компьютере текстовые ссылки не являются большой проблемой, но как только вы начинаете просматривать уменьшенную версию сайта на мобильном телефоне, вам может быть трудно попасть в нужную целевую область небольшой текстовой ссылки. Преобразование текстовой ссылки в кнопку чуть большего размера или замена текста значком сделает сайт более удобным для навигации на сенсорном экране мобильного телефона.


Хорошим примером сайта, навигация которого меняется с текстовых ссылок на кнопки, является сайт программы Clean Air Commute Challenge. Вы увидите, как в более широком, широкоэкранном режиме сайта есть четыре основные навигационные ссылки в верхней части страницы. Однако, как только сайт втиснут под размеры мобильного сайта, текстовые ссылки преобразуются в кнопки большего размера, которые легче нажимать.


Гибкие размеры


Чтобы сайт был адаптивным и менялся на разных платформах, нужно поработать с CSS. С помощью CSS вы можете определить максимальную и минимальную высоту и ширину элементов, позволяя им расти, сжиматься и адаптироваться к конкретным параметрам, в которых просматривается сайт. Установка ширины для адаптации также легко достижима путем установки высоты и ширины в процентах.


Работа с процентами по размеру элементов вашего сайта может быть немного сложнее, чем создание сайта, где все имеет фиксированный размер. Однако существует довольно простой способ определить, какой процент вам нужен для определения элемента вашего сайта. Если вы разрабатываете страницу и хотите, чтобы основная область содержимого была шириной 1000 пикселей при определенном разрешении, и вы хотите включить навигационный столбец с левой стороны, который имеет ширину 200 пикселей, вам придется преобразовать его в процент.


Вы можете легко преобразовать фиксированный размер пикселя в процент, взяв ширину навигационного столбца, разделив его на полную ширину столбца, а затем умножив на 100. В этом случае мы возьмем 200, разделим его на 1000 (полная ширина нашей области содержимого), а затем умножим его на 100. Результат -20, то есть, чтобы придать нашему сайту эластичность и позволить ему быть отзывчивым, мы бы определили ширину нашей навигационной колонки до 20%, а не 200 пикселей.


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


Помимо того, что структурированные элементы должны быть гибкими по размеру, важно также сделать текст динамическим атрибутом. Это делается так же, как высота и ширина шрифта, но вместо того, чтобы использовать знак процента для определения размера шрифта или аббревиатуру “px” для определения определенного размера пикселя, вы определяете его как em.


Em просто означает букву “M”, которая является самой широкой буквой в шрифте и является динамическим измерением шрифта. Это означает, что сайт, который использует % для определения высоты и ширины элементов, в сочетании с шрифтом, который определяется в запросах em и media, в результате будет гибким и отзывчивым веб-сайтом.