Разрушаем шесть мифов о веб-лейаутах

Новая эра

Есть и хорошие новости. У нас наконец-то появляются реальные инструменты для создания лейаутов. Больше не надо выбирать между сложной ручной версткой и вёрсткой в унылых однообразных фреймворках — мы можем позволить себе творчество. Flexbox («гибкий блок» — более эффективный способ верстки, выравнивания и распределения свободного места между элементами в контейнере, даже когда их размер неизвестен и/или динамический), CSS Shapes (CSS Формы), Masks (Маски), Clip-path (Обрезка по контуру), Initial Letter (Инициал), Rotation (Поворот), Multicolumn (Несколько колонок), Viewport Units (Вьюпорт-единицы), Object-fit (Масштабирование контента элемента относительно заданных размеров) и другие инструменты уже открывают нам мир новых возможностей.

layout.land станет пристанью для дизайнеров, экспериментирующих с лейаутами

Миф первый: все элементы должны плавать, как мыло в воде

Веб-лейауты на основе флоатов подобны ванне, в которой плавают сотни кусков мыла. Каждый элемент на странице — это кубик, стремящийся всплыть на поверхность. Хэдер — верхний кусок мыла, за ним следуют навигация, hero-баннер, боковая панель, область с контентом. Каждый раз при смене вьюпорта и медиа-запроса куски мыла меняют своё расположение, соревнуясь за место наверху.

CSS Grid позволяет свободно размещать объекты по вертикали, не загромождая верхнюю часть страницы

Миф второй: прямоугольники, только прямоугольники

По умолчанию любой объект на веб-странице начинает свою жизнь в качестве прямоугольника. Инструменты, которые мы использовали раньше, вполне отражают этот подход: мы ставим одну коробочку поверх другой. Коробочка, ещё коробочка, сверху ещё одна коробочка.

Фото выровнено по левому краю, а текст обтекает его по фигурному контуру

Миф третий: мы не можем контролировать границу первого экрана

В веб-пространстве мы не можем знать наверняка, какая часть макета останется на экране, а какая будет скрыта. Какое-то время мы делали вид, что все экраны имеют размер 1024x768 пикселей (или 800x600), но на самом деле мы никогда не контролировали нижнюю границу. И пусть на бесконечных встречах люди настаивали на том, что их фирменная снежинка должна появиться на первом экране — у нас не было возможности определить, где эта граница проходит. До настоящего времени.

Независимо от размера окна фото всегда будет занимать половину ширины и всю высоту экрана.

Миф четвёртый: 12 колонок — лучшее решение

В 2006 году индустрия стала дружно ратовать за использование симметричной 12-колоночной сетки. Мы не хотели стандартизировать сайты, мы хотели упростить расчёты для ручной верстки фиксированных по ширине страниц. 960 пикселей — отличный размер для экрана в 1024px, он позволяет делать колонки шириной 60px с отступами в 20px. Кроме того, 12 колонок позволяют легко делить пространство на две, три и четыре части.

Официальная хронология эволюции веб-лейаутов Полное отсутствие лейаута > Табличная разметка страниц > Ручная вёрстка с использованием флоатов > Вёрстка с использованием фреймворков > Прекрасное будущее!

Миф пятый: для вёрстки необходимо использовать фреймворк

На самом деле, новый синтаксис Grid сделает вёрстку на чистом CSS проще вёрстки с применением фреймворков, а апдейт фреймворков со старыми стилями при помощи CSS Grid только усложнит вам жизнь. Избавьтесь от привычки полагаться на фреймворки. Верстайте на чистом CSS.

Миф шестой: мы погрязли в рутине из-за адаптивного веб-дизайна

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

Используйте свойство grid-auto-flow: dense, и браузер перестроит порядок контента в соответствии с пространством

Прощаемся с заблуждениями

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

Об авторе

Оригинал: http://www.creativebloq.com/features/6-web-layout-myths-busted

--

--

Идеи, которые нас вдохновляют, видео-интервью и переводы исследований, которые были нам полезны в процессе работы. http://blog.aic.ru/

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
aic blog

aic blog

1.2K Followers

Идеи, которые нас вдохновляют, видео-интервью и переводы исследований, которые были нам полезны в процессе работы. http://blog.aic.ru/