Адаптивная вёрстка — как побороть боль?

Question

[Думай Головой]

Всем привет!

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

Недавно мне дали сверстать макет мобильного приложения и я решил наконец попробовать побороть эту боль, сделать красиво и лаконично - использовать rem. Это показалось мне самым простым решением, 100% мобильных браузеров поддерживают эту единицу. Суть в том, что мы пишем несколько строк media queries для тега html, указывая лишь базовые размеры шрифтов в пикселях, пропорционально тому, как должен выглядеть у нас макет в разных разрешениях, а остальную вёрстку без media queries верстаем как обычно, только вместо пикселей используем rem. Данная методика легко масштабируется и подгоняет макет в зависимости от базового размера шрифта.
Минимизация кода и лёгкость адаптивной вёрстки таким способом просто колоссальна!

Был единственный минус такого способа: нужно было вести постоянный пересчёт пикселей psd макета в rem, но я быстро решил эту проблему - написал специальную функцию и верстал как раньше в пикселях, препроцессор сам переводил в rem.

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

Когда я вернулся к адаптивке для обычных сайтов - боль ко мне вернулась ещё с больше силой, чем прежде, ведь как правило мы имеем от 3-х до 6 разных дизайнов:
1) Десктоп большой 1600-1920 пикселей
2) Десктоп маленький/ноутбук ~1100-1400 пикселей
3) Старый моник / планшет - 768-1024 пикселей
4) Недопланшет/ смартфон-переросток ~600 пикселей
5) Смартфон 300-480
6) Старый смартфон 250 пикселей.

Я конечно преувеличил, но как минимум три вёрстки делать нужно это точно.

Так вот вопрос №1 и самый главный: как минимизировать адаптивную вёрстку и сделать код красивым? Как уменьшить т.н. энтропию кода? Существует ли какой-нибудь клёвый подход/методика?

Посмотрел разные сайты крутых веб студий, в целях найти ответ там и увидел что все верстают как попало, то есть вообще не заморачиваясь.
Единственное, видел что некоторые зачем-то используют em и проценты для шрифтов вместо привычных пикселей. Вроде как для масштабирования текста, хотя непонятно как это уменьшает код для адаптивки, по моему только всё усложняет - нужно вести расчёты в зависимости от размера шрифта родительского блока и даже препроцессоры скорей всего не помогут... Незнаю зачем нужно париться задавая размеры шрифтов em единицами, заморочки с rem ещё куда не шло... Может я плохой верстальщик... Кстати особо упоротые из тех сайтов использовали em для margin и прочих box-size свойств...
Вопрос №2:
В чём смысл использовать em?
И cразу вопрос №3:
Неужели нет единой методики, неужели в вёрстке всё так плохо, что каждый как хочет так и д....чит? Или я видел неудачные примеры (хотя искал среди топовых тем themeforest и сайтов топовых веб студий)?

Спасибо!

Comments

[Дмитрий Шинкарь]

а накатал мама-родная!)) вчера (или позавчера) был вопрос по адаптивной верстке, так вот - там не 6, а 9 дизайнов предложили! :D

[Думай Головой]

Дмитрий Шинкарь пруф?

[Думай Головой]

накатал потому что боль

[Дмитрий Шинкарь]

Думай Головой: Под какие значения @media адаптировать дизайн сайта? лови)

[Думай Головой]

+ солидный параграф по клёвой методике адаптивной вёрстке мобильных сайтов/приложений - может кому пригодится

[NETChaser]

Думай Головой: Если не сложно, покажите хоть 1 одну страницу... хочется глянуть "рабочие" исходники... у вас методика работы не правильная... поэтому так трудоемко всё

Answer 1

[ummahusla]

Foundation/Bootstrap + SASS/LESS и никакой боли нет, одно удовольствие верстать адаптивные сайты.

Comments

[Думай Головой]

ummahusla Да в принципе так и делаю.
Просто over 80% макетов, которые дают на вёрстку не имеют сетки впринципе и использовать готовые сетки нет никакого смысла. Вот и вопрос как побороть эту боль?

[Eugene Burmakin]

Думай Головой: условием заказа сделать валидные макеты с сеткой, а не псдшки от балды?

[Думай Головой]

Evgeniy Burmakin Вы живёте в каком то идеальном мире или у вас работает нормальный дизайнер. Посмотрите какие макеты предлагают верстать на фриланс биржах и ужаснётесь

[ummahusla]

Думай Головой: Ну если для вас деньги и опыт, не мотиватор, то извините, незнаю даже.

[xmoonlight]

ummahusla: по твоим просьбам подкроил я свой блог немного под адаптив: не знаю уж как всё сделать идеально - это ж гугл.... ..и это ппц - как в лесу там.
Смари (что еще доделать или пойдёт как есть?): https://sitecoder.blogspot.com

[ummahusla]

xmoonlight: Хехе, у меня тут картинка для таких случаев была! :)))) cs.pikabu.ru/images/big_size_comm/2012-05_5/133761...

А на самом деле у меня тоже блог использует стандартный шаблон и норм.

[xmoonlight]

ummahusla: Картинка - жесть))) Ну не прям уж до такой степени то))) в общем убрать правый бар - ушло 2 часа! Когда на обычном - это делается за 1-2 минуты.... вот так с гуглом работать.... )))

[ummahusla]

xmoonlight: Вот вы вроде разработчик, а денег так и не нашли на домен первого уровня? :))) Поставьте себе Ghost https://ghost.org/ , у них прям можно и захостить. Подшаманьте - и будет счаастье. Я когда пару месяцев назад подшаманил свой, звонков от рекрутеров увеличилось в разы.

[xmoonlight]

"Вот вы вроде разработчик, а денег так и не нашли на домен первого уровня? :)))" - да их полно, я решил только попробовать гугл в плане AdSense и поисковой выдаче - свои то сервисы - он не бросит ниже других. )))
"Подшаманьте" - это (ни "как?", а...) что именно сделать?

[ummahusla]

xmoonlight: Сожгите этот сайт, сделайте новый. А то как сапожник без сапог :D

[xmoonlight]

ummahusla: Хостинг халявный, а для просто "зайти и прочитать" - хватит)

[Alex931]

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

Answer 2

[Сергей Протько]

сделать красиво и лаконично - использовать rem.

rem не панацея от всех болезней. Вообще каждый юнит надо использовать осмысленно. Будь то px, rem, em или vm/vh/vmin. Все юниты нужны для своих целей и использовать только что-то одно глупо.

Существует ли какой-нибудь клёвый подход/методика?

mobile first. В целом же все зависит сильно от дизайна. Как по мне придумывать какие-то правила на эту тему - глупо.

В чём смысл использовать em?

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

Неужели нет единой методики, неужели в вёрстке всё так плохо

Единой методики быть не может априори. И не все так плохо. Ну а что до неудачных примеров - просто смеритесь что большинство просто не парится, работает и ладно. Методологии есть - SMACSS, BEM, etc... они не по адаптивной верстке, они просто по верстке. С тем же BEM (возможно слегка адаптированным под ваши нужды) можно изрядно уменьшить количество боли.

Comments

[Думай Головой]

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

[Сергей Протько]

Думай Головой: это относительная единица измерения. Разница только в том, относительно чего вы отталкиваетесь. Естественно оно в этом конкретном случаем вам подошло. Мне вот в большинстве случаев не подходит. Обычно часть элементов всеравно описывается абсолютными единицами измерений.

[Думай Головой]

Сергей Протько Ну да, в том случае я позволял себе согрешить - использовал пиксели для бордюров и теней шириной 1-3 пикселя, т.к. такой размер не критичин для разных разрешений. Для размеров шириной от 4-х пикселей я всё же использовал rem, чтобы красиво выглядело на разных разрешений.
Я реально сэкономил очень много кода, и вносить правки в то приложение очень очень легко, чем если бы я использовал пиксели и кучу всяких media-queries, ведь для одних только заголовков потребовалось бы 4 строк media-queries, и для всего остального тоже, а я всю адаптивку запихнул в 4 строчек дополнительных media-queries

[Сергей Протько]

Думай Головой: я о том и говорю, есть вещи, где надо использовать относительные единицы измерений, а есть те вещи. где надо использовать абсолютные. Использовать что-то одно всегда и везде не выйдет просто физически. И тут не нужно никаких методологий и прочего. просто здравый смысл.

Answer 3

[Elmechador]

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

Comments

[Сергей Протько]

ну на самом деле все то же самое можно делать и с бутстрапами и т.д. Сетка там настраивается, и так же это дело можно юзать как миксины.

Я использую flexboxgrid так и не парюсь.

[ummahusla]

Выучить другой фреймворк, чтобы не использовать другие. Что за цирк :))) Если руки прямые, сделаешь всё, что хочешь.

[Elmechador]

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

[ummahusla]

Циитирую вас: " фреймворк Susy ", так Susy это фреймворк или нет? Если да - то разницы никакой нет, какой фреймворк использовать, ибо в том же foundation/bootstrap можно подключать и отключать нужные компоненты, всё легко и просто и не нужно придумывать кучу разных велосипедов.

[65536]

а для лесса нет подобного?

[Сергей Некрасов]

Susy не фреймворк, а плагин, основанный на sass. Разница в отличии от фреймворков в том, что не нужно тянуть классы для блоков как в bootstrap, все делается в пределах css. Не поленитесь и почитайте документацию.

[Edymov]

Поддерживаю. Susy - отличная, гибкая, крайне экономичная вещь!

Answer 4

[almac]

используйте методологию верстки MCSS (основана на принципах БЭМ): верстка разбивается на модули, где все лаконично

Answer 5

[c030f5da]

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

Comments

[Андрей Мацовкин]

Очень точно сказано. Все дело в исходном дизайне, если он не подготовлен под «адаптив» и «сетку», то и костыли будут только множится.
Сам очень часто использую bootstrap. Да сетка у него фиксированная, но это не минус, а серебряная пуля убивающая «кривой» авторский дизайн на корню, и спасающая от последующих костылей.
Да, все равно придется поиграться с размером шрифтов и отступами в media queries, но это меньшее из зол.
з.ы. Мне, конечно проще, я сам себе дизайнер.

[Думай Головой]

macik_spb какой профессией овладели раньше - вёрстка или дизайн?

[Андрей Мацовкин]

Думай Головой: Честно говоря, ни то ни другое, не считаю своей профессией, или изученным в достаточной степени.
Но если вопрос что раньше — на него нет ответа, т.к. и тем и другим, по-немногу, занимаюсь много лет.
Если пытаться зрить в корень — то все же версткой раньше, т.к. в те времена такого понятия как «дизайн сайта» еще не существовало. :)))

[Думай Головой]

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

[Андрей Мацовкин]

Думай Головой: Это, да. Нюанс в том, что тут нет четких правил и формул. Можно изучить основы дизайна, типографики, ux-проектирования и кучу всего еще, но прокачать, например, «правильное» цветовосприятие и «чувство прекрасного» практически невозможно. От чего и сам страдаю. Ты либо родился художником, либо нет.

[c030f5da]

Думай Головой: Собственно, мой первый комментарий как-раз и основан на опыте дизайнера-верстальщика в одом лице (хотя это не мой профиль в принципе). Верстая графический этап макета (в InDesign, например) я заранее прикидываю как я буду верстать это дело в HTML. Т.о. мой дизайнерско-верстальщеский континуум беспрерывен и синергичен. (надеюсь это не звучит слишком пафосно, я с юмором).

Из конкретики: больше всего мне помагает использование 12px-ной сетки, по которой я выравниваю границы и размеры практиески всех элементов. От размеров экранов я вообще абстрагируюсь - для меня существуют только понятия одной (mobile portrait), двух (tablet portrait & mobile landscape) и трёх (tablet landscape & desktop) колонок контента. Но, полагаю это тема отдельной статьи для хабра, если это вообще кому-то интересно.

[Даниил Бакалин]

c030f5da: Интересно) Почитал бы на хабре с удовольствием!

Answer 6

[sitev_ru]

Я больше ориентируюсь на back-end, иногда пишу на javascript/jquery, но когда дело касается вёрстки - начинается ступор.

И тут я нашёл для себя Bootstrap. Ступор прошёл ...

Если не хватает стандартных компонентов - можно найти в интернете более продвинутые.

Answer 7

[Дмитрий]

Использую пиксели и не парюсь.
Стиль условно делю на несколько частей (в зависимости от экранов)
Первая (вверху) часть самая главная. Она устанавливает все стили для сайта
Вторая часть для планшетов (например) в помощью медиа перегружает только те свойства, которые нужно изменить. Повторение кода минимально

Answer 8

[nofuture trustnoone]

gulp+slim+sass
как кодо редактор и резальщик псд - brackets with extract

Comments

[anserone]

brackets with extract, мне просто повезло или модуль не открывает psd весом больше 30mb?

[nofuture trustnoone]

anserone: что-то не помню, чтобы был лимит на размер файла.

[ZoomLS]

Что-то у меня в Extract намного меньше возможностей, чем делать тоже самое через сайт Assets Adobe. И кириллицу он не переваривает, а через сайт нормально.

Answer 9

[mc_julik]

bootstrap решает многие проблемы адаптивной верстки, но рекомендую вам для телефонов или старых планшетов просто уменьшать кол-во блоков и упрощать структуру, то есть лого, меню, список материалов и футтер, грубо говоря без всяких плюшек, вот вам и мобильная, над которой париться не надо
Иначе вы никогда не закончите верстать сайт

Comments

[Максим Дунаевский]

Вон, Ванька Ерохин Google в Angular Material вообще не парятся, сделали три точки - 600px, 960px и 1200px, для них всё и делают, не забивая разработчикам голову. Пруф: https://material.angularjs.org/HEAD/#/layout/grid
И это правильно, я считаю.

Answer 10

[Дмитрий Савегин]

www.adobe.com/ru/products/dreamweaver.html

Comments

[Думай Головой]

Igor Fokusov Может сразу на ucoz перейти?

[Дмитрий Савегин]

Думай Головой: ваше право

[ummahusla]

ТС, не вздумайте этим говном пользоватся.

[Думай Головой]

ummahusla так я знаю)

[65536]

сделать боль невыносимой

[Динар Гарипов]

Тут дизлайки можно ставить? :)

[Андрей Мацовкин]

Думай Головой: тогда уж на ukit. (ukit.com) Это тот же юкоз только еще проще.

[Глюкъ Виртуален]

Гы.

Answer 11

[Антон Жуков]

А что pt никто не юзает?

Comments

[Elmechador]

Зачем это интересно юзать абсолютную типографскую единицу да еще в адаптивном дизайне?

[Антон Жуков]

Хотя бы для того, чтобы шрифты были одинакового физического размера на всех устройствах

[Евгений Петров]

MrCheater: Вы просто не понимаете, о чём говорите.

[Глюкъ Виртуален]

Юзаю по привычке от старых полиграфических привычек... :) Избавляюсь от них при случае.

Answer 12

[anserone]

очень понравилось использовать vw. сначала подогнал шрифт, отступы, размеры картинок через perfectPixel Chrome. и вроде все ок на могильниках, а для планшетов и так далее уже через медиа переписываю значения на привычные мне px

Answer 13

[Сергей]

неудачное у тебя первое впечатление об адаптивной верстке, мне нравится адаптировать хоть от 2300 до 320 px по ширине и не жгутся нервы

Answer 14

[Павел Радьков]

Методология, которая снимает боль, называется «Mobile First». Bootstrap ее тоже использует.

Суть кратко: мобильный макет обычно выглядит проще всего, там одна колонка, минимум декора → верстаем его в первую очередь. В css на этом этапе появятся стили для текста, фоны, цвета, какие-то базовые отступы.
На более крупных экранах макет усложняется, появляются колонки и т.д. При помощи media queries к мобильной версии дописываем layout-стили, переопределяем уже написанные стили, если нужно (например, размер шрифта увеличился). Базовые стили наследуются из уже написанного кода.
И так для каждого компонента, начиная от маленького экрана заканчивая самым большим, «уточняем» верстку пока не будет все как на дизайне.

Делал когда-то кодкаст по такой методологии cssdeck.com/labs/adaptive-tabs
Нажмите кнопку «play» чтобы посмотреть процесс написания кода.

Если кода не видно, зайдите в режиме инкогнито (без адблока).

Answer 15

[onlinebd_ru]

Я для больших разрешений использую файлы для bootstrap 4, 1600px (HD+), 1920px (Full HD), 2560px (Retina 1440p), 2880px (15" Retina), 3840px (UHD), 4096px (4K), 8192px (8K).
Файлы в свободном доступе Bootstrap 4 Grid для больших разрешений экранов