Сосредоточившись на общих понятиях и на том, как адаптивно использовать шрифты в первых двух статьях серии адаптивного веб-дизайна , давайте углубимся в плавные макеты. В этой третьей части серии я покажу, когда действительно нужны гибкие макеты, а также когда вы можете выбрать другое решение, которое не обязательно отвечает требованиям. Давайте посмотрим на несколько конкретных методов и приложений.
Чтобы понять, является ли гибкий макет правильным выбором для вашего проекта, вы должны знать, понимать и учитывать другие доступные решения. На самом деле, только оценив сильные и слабые стороны каждого метода, вы сможете подтвердить свой выбор макета.
Существует четыре различных типа макетов: макеты с фиксированной шириной , жидкостные (или жидкие) макеты , эластичные макеты и гибридные макеты . Давайте проанализируем их один за другим.
Макеты с фиксированной шириной
В макетах с фиксированной шириной ширина сайта ограничена определенным количеством пикселей. Обычно выбранная мера составляет 960 пикселей. Это связано с тем, что с течением времени разработчики установили, что 960 пикселей являются наилучшим размером для макетов сетки, поскольку их число легко делится на 3, 4, 5, 6, 8, 10, 12 и 15.
Даже сегодня макеты с фиксированной шириной являются одними из наиболее часто используемых в Интернете, скорее всего потому, что жесткость макета обеспечивает ощущение стабильности и контроля. Если вы знаете ширину вашего сайта во всех браузерах и устройствах, вы можете создавать графику с точным полным контролем над результатом.
Однако макеты с фиксированной шириной имеют некоторые недостатки. Как я уже говорил в предыдущих статьях , дизайнеры, которые хотят создать веб-сайт с фиксированной шириной, должны помнить, что каждый аспект их работы должен быть применим и четко виден для большого количества экранов, браузеров и устройств. Широкое разнообразие устройств на рынке в настоящее время, а также большая изменчивость размеров экрана делают создание универсального контента для всех довольно сложной задачей и, возможно, проблемой, которая перевешивает точность и контроль фиксированных Ширина дизайна.
Типичным примером неправильной работы веб-сайтов фиксированной ширины являются экраны размером менее 960 пикселей, что на удивление распространено. Сайт будет отображаться не полностью, и вы увидите очень неудобную (и непривлекательную) горизонтальную полосу прокрутки. Тот факт, что эти маленькие экраны обычно работают кончиками пальцев, а не курсорами, только усугубляет проблемы ширины.
Проблемы возникают и в противоположной ситуации, когда размер экрана превышает 960 пикселей. В этих случаях макет веб-сайта окружен большим количеством пустого пространства, и, очевидно, это не будет решением, которое стремится увидеть хороший веб-дизайнер. Дизайнеры и пользователи предпочитают использовать большую ширину больших экранов.
Жидкие макеты
Первое основное различие между типом макета с фиксированной шириной, который мы только что проанализировали, и макетами с жидкостью заключается в измерении их размера. Макеты с фиксированной шириной измеряются в пикселях, но для макетов с жидкостью или жидкостью размеры определяются в процентах, и, как можно ожидать, это обеспечивает большую гибкость и текучесть. Другими словами, устанавливая процент, вам не нужно будет думать о размере устройства или ширине экрана, и, следовательно, вы можете найти разумное решение для каждого случая, потому что размер вашего дизайна будет адаптироваться к размеру используемого устройства.
Жидкие макеты тесно связаны с медиа-запросами и специальными стилями для оптимизации. Одной только ширины в процентах, скорее всего, будет недостаточно для размещения вашего дизайна при большом разнообразии размеров дисплея. Позже мы увидим, как получить идеальный результат от жидких макетов.
Эластичные макеты
Эластичные макеты несколько похожи на жидкие макеты. Основным отличием снова является единица измерения размера. Индикатор размера для эластичных макетов не представлен ни в пикселях, ни в процентах; измеряется в эмс .
Em — это эквивалент размера (в пикселях), определенного в правиле CSS font-size . Например, если мы стилизуем наш текст с размером шрифта 20 пикселей, 1 em будет равен 20 пикселям, 2 em будет соответствовать 40 и т. Д.
Этот тип макета дает разработчику сильный типографский контроль. Поскольку подавляющее большинство макетов в основном заполнено текстом, точность обработки типов делает эластичные макеты сильным конкурентом для многих проектов. Однако даже в этом типе решения в некоторых редких случаях существует риск возникновения неприятной и неэстетичной горизонтальной полосы прокрутки.
Гибридные макеты
Наконец, как следует из термина, существуют гибридные макеты, которые сочетают в себе характеристики двух или более макетов, рассмотренных выше. Например, дизайнер может решить назначить фиксированный размер (в пикселях) для определенных элементов страницы (боковой панели или нижнего колонтитула), а для остальных (например, который содержит основное содержимое) выбор переменной ширины (в процентах или ems).
Очевидно, что у этого подхода есть свой набор ограничений и недостатков — если вы назначите боковой панели фиксированную ширину 200 пикселей и установите значение 80% для остального содержимого, вы можете найти горизонтальную полосу прокрутки на экранах меньше 1000 пикселей. , так как основной столбец не имеет места, необходимого для расширения. В меньших случаях у вас просто будут элементы, которые являются необычно большими или необычно маленькими для их предназначенных целей. Но вы можете легко решить все эти проблемы, как мы увидим позже.
Вывод
В этот момент вам может быть интересно, какое решение лучше всего подходит для ваших конкретных проектов и какой из четырех типов макетов, перечисленных выше, лучше всего подходит для адаптивного подхода. Как вы можете догадаться, каждый тип макета имеет свои преимущества и недостатки. Все зависит от потребностей, которые вы хотите выполнить, и характеристик вашего личного проекта.
Было бы легко сделать коленное, реакционное заявление о том, что один из этих вариантов компоновки универсально превосходит другие, но их не следует рассматривать как взаимоисключающие варианты или конкурентов. Скорее, их следует рассматривать методы, которые могут быть использованы в сочетании. Многие из этих методов невозможны без других. Например, ems не имеют смысла без фиксированной декларации размера шрифта . Точно так же медиа-запросы будут неэффективными без определения точных значений ширины и приспособления для популярных размеров экрана.
Мы познакомимся с некоторыми практическими применениями всех этих методов в следующей статье серии.
Хотите узнать больше о адаптивном веб-дизайне? Ознакомьтесь с новой книгой SitePoint « Адаптивный веб-дизайн Jump Start» !