Адаптивный дизайн для сайта: отличия и настройка верстки

Адаптивный дизайн и его отличия

Если сравнивать фиксированный и адаптивный дизайн, то первая модель в основном использовалась до 2015 года. Сейчас, в среде веб разработчиков она считается устаревшей и не удобной для пользователей. Поисковые системы более лояльно стали относиться к сайтам с адаптивной вёрсткой, поэтому чаще отдают им предпочтение в выдаче и на первых позициях.

Если объяснять на пальцах, то «гибкая» верстка, не нуждается в прокрутке страницы по горизонтали и вертикале, и увеличении масштаба на мобильных девайсах и планшетах, так как все элементы и текст имеют читаемый масштаб в пределах её ширины. При помощи настроек HTML, CSS или JavaScript, адаптивный шаблон сам подстраивается под нужное разрешение, сохраняя оптимальные пропорции содержимого на экранах различных гаджетов.

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

Настройка адаптивного дизайна с помощью CSS

Заниматься визуальными настройками, позиционированием блоков и подбором цветовых сочетаний можно с помощью CSS и HTML – это самый распространённый метод среди разработчиков и верстальщиков. Для этих целей многие дополнительно используют специализированные сервисы и программы, облегчающие эти процессы: продукцию компании Adobe, Figma, Sketch и другие графические редакторы, позволяющие рисовать и создавать макет сайта.

Для того чтобы настроить адаптивный дизайн на CSS для телефона, планшета или компьютера применяются свойства: max-width и width, с прописанным в стилях медиа-запросом (@media). Единицей измерения, в которой рассчитывается разрешение, является пиксель (px). Для максимальной ширины может применяться процентное соотношение.

Пример:

@media screen and (min-width: 320px) and (max-width: 480px){

.text {

width: 100%;

max-width: 460px}

}

Расшифровка правила:

Для блочного элемента text, при разрешении экрана от 320 до 480 пикселей, максимально разрешенная ширина контента составляет до 460 пикселей, с учетом его вывода во всю ширину (100%).

Оптимизировать дизайн сайта желательно под самые популярные разрешения экранов и мониторов шириной: 1920px, 1600px, 1366px, 1280px, 1024px, 768px, 480px, 360px, 320px. Обязательно посмотрите, как выглядит верстка на представленных размерах, не залазят ли друг на друга блоки, и корректно ли отображается их содержимое. Позаботьтесь об удобстве пользователей, чтобы обеспечить своему ресурсу хорошие поведенческие факторы.