Начинающим верстальщикам, а также дизайнерам, кто делает сайт на фрилансе или просто для себя, часто необходимо понимать, какой размер экрана увидит пользователь, какую ширину брать для адаптивного дизайна, делать ли резиновую верстку, и даже какова высота первого «зрительного» экрана на мониторе или экране смартфона.
Адаптивная вёрстка или дизайн — создание страниц сайта, автоматически подстраивающихся под размер, разрешение и ориентацию экрана устройства. Для разных девайсов готовят разные дизайны, при входе на сайт автоматически загружается оптимизированный под устройство макет.
И конечно, любой программист вам скажет, что в эру новых технологий, развития смартфонов, планшетов и т.д., каждому уже нужно делать резиновую верстку. Вообще, если усреднить, на сайте может быть три варианта вёрстки:
1. Без адаптивного дизайна. Обычно делается простой сайт или лэндинг, одностраничный, в котором задаются жёсткие рамки сайта, а в поле header прописывается строчка:
<meta name="viewport" сontent="width=device-width, initial-scale=1, shrink-to-fit=no”>
Ширину главного блока при этом в CSS мы прописывает min-width: и нужный размер. Чаoе всего такие сайты делают не шире 1280-1080px. На экране компьютера он будет просто страницей по середине с отступами по краям, а на экранах планшетов/смартфонов весь контент будет сжиматься и становиться «мельче». Проблема таких сайтов именно в том, что вам нужно пальцами приближать, чтобы что-то нормальное рассмотреть. Но в качестве быстрого решения, дешевого, я бы сказал, многие заказчики выбирают такой вариант.
2. Адаптация по чек-поинтам. Это вариант, когда вы верстаете свой сайт под определенные границы. Скажем для экранов компьютера это 1280px, для планшета 780px, для смартфона 480px. Можно больше вариаций, не суть. И весь свой дизайн подстраиваете под эти значения. Все что в промежутках будет «сжиматься», как и при случае выше. Но это уже более удобно, можно регулировать размер шрифтов, при этом верстается гораздо быстрее.
3. Полностью резиновая верстка. Уже применяется в том случае, когда вы не зависимо от размера экрана или даже размера браузера (когда вы можете его сужать и расширять) верстка будет меняться и подстраивается. Делается это как за счет размера блоков, заданных в процентах, так и за счет фиксированных блоков, но вы сами их «туда-сюда» расставляете. Это не суть, мы сегодня не об этом.
На практике могу вам сказать, что обычно выбирают либо первый вариант (для быстрых решений и не адаптивного сайта) либо, если делать с адаптацией, то третий вариант. Всегда надо делать так, чтобы при изменении ширины экрана, ваша верстка подстраивалась под это. Делается это довольно просто, и в CSS достаточно прописать:
@media only screen and (min-device-width: 500px) and (max-device-width: 1000px)
Первый показатель отвечает за размер страницы браузера, второй за экран устройства. Можно вообще все опустить и написать только @media (max-width: 1000px).
Использовать минимальные значения или максимальные, исходя из нижней границы или верхней, не играет никакой роли. Важно именно то, чтобы при верстке и создании сайта, вы попробовали порастягивать бразуер (и в том числе под экраны разных мониторов) и поигрались с расположением блоком, размеров шрифта и прочего. В медиа выражениях можно хоть отдельный сайт написать. А JS поможет скрыть отдельные блоки или свернуть их в меню. Сегодня опять же не об этом.
Но, при создании дизайна этого сайта, встает вопрос – а как тогда рисовать сам дизайн. И вот тут уже точно нужно использовать отдельные «фрагменты», так сказать, а точнее, диапазоны и чек-поинты. Простыми словами, вы рисуете на Figme, например, 3-6 отдельны[ фрейма (блока) под разные устройства, и прорисовываете дизайн отдельно. А дальше, когда уже верстаете, вы подстраиваете свою резиновую верстку под эти шаблоны, даже в промежутках. Ведь всегда проще сразу увидеть и заранее продумать, куда у вас скакнет блок на планшете или смартфоне, может он исчезнет, что лучше вначале, например, скрыть номер телефона, а потом уже свернуть меню. В общем, знание определённых фрагментов очень полезно.
И именно поэтому довольно полезно знать размеры экранов и будущих блоков, чтобы какие-то выплывающие меню, подсказки, ширину основных боков сразу подстраивать под минимальный размер. Например, экран смартфона у на 320-480px, значит и ширину блоков, менюшек, еще чего, можно сразу рисовать фиксированными в 300px, и тогда их можно не переделывать внутри, а просто убрать лишнее вокруг, перевести на новую строчку, расположить поверх других блоков и т.д. Это очень удобно создавать такие вариации, меньше мороки.
Кстати, довольно популярно сейчас, в эпоху смартфонов, так называемый стиль программирования и дизайна MobileFirst. Стратегия Mobile First, как следует из названия, предполагает проектирование интерфейса сайта, в первую очередь ориентированного на мобильные устройства. Философия подхода заключается в том, что сначала создается прототип дизайна для самого маленького экрана, а затем разработчики переходят к дисплеям боольших размеров. В этом состоит главное отличие от классического подхода Desktop First, который используют веб-специалисты уже много лет.
Я лично не люблю такой подход, хотя если я верстаю сайт в первую очередь для мобильных устройств (заказ еды и т.д.), то такой вариант возможен. Но все-таки десктопная версия у меня в приоритете. Но, она делается сразу из расчета на мобильные устройства, и как я сказал выше, используются блоки, кнопки и прочее, которые сразу будут хорошо смотреться на мобиле, а все остальное уже подстраивается.
И теперь переходим к главному – а какие же тогда размеры экрана принимать при создании шаблонов или вёрстке, какие должны быть чекпоинты. А тут все довольно просто:
1. От 1280px(1180px) до 1920(1824px) – это экраны мониторов
На самом деле, обычно я использую 1280px, а 1920 – это уже для больших мониторов и экранов телевизоров. Их я использую крайне редко, и самый стандартная вёрстка в районе 1280px. Но если вдруг очень надо сделать пошире – то пожалуйста, особенно если вы делаете сайт «без» отступов по краям, а во всю ширину.
Значение в скобочках – это конкретная часть. Обычно в любом шаблоне вы можете нарисовать сам экран, как бы, монитора, и выделить по середине контентную часть, отступив по краям по 20-50px, на разные скроллы, какие-то заметки, у некоторых мониторы настроены криво. В общем это хорошая практика, чтобы контент не выходил за эти «линии».
2. От 1024 (992) px до 1280 (1180) px – это тоже небольшие мониторы, а также большие планшеты, нет-буки и т.д., а также планшеты в горизонтальном положении
3. 780 (768) px – 1024 (992) px – это экраны планшетов
4. 480px – 780 (768) px – экраны смартфонов
5. 320px – 480px – экраны смартфонов, старенькие обычно. Их иногда не рисуют, а делают все под 480px и так фиксируют минимальную ширину. На экране более старых смартфонов контент просто уменьшится подстроится под размер. Если вы не страдаете минимализмом (а многие новички, наоборот, делают все гигантскими), то это вполне нормальный вариант.
Итого, на практике, обычно можно нарисовать три-четыре вида дизайна, скажем 1280px, 780px и 480px. Для самого простого варианта это отличное решение. Для более продвинутых можно добавить еще и 1024 и 320px. И в особых случаях 1920px.
Что касается высоты экрана, то тут тоже не все однозначно. Если вам очень нужно разработать дизайн, чтобы он был только в один блок экрана, или например, первый блок был красиво оформлен, без разрывов, то чаще всего применяют 600*800px в высоту для экранов мониторов и 400-500px для смартфонов. Но там лучше использовать показатель vh, если вы понимаете, как он работает.