Как адаптировать сайт под разные разрешения
Адаптивный режим в браузере: Ctrl + Shift + M
Для срабатывания медиа-запросов на маленьких дисплеей без маштабирования, необходимо вставлять мета-тег viewport в разделе head:
<meta name=»viewport» content=»width=device-width, initial-scale=1″ >
<meta name=»format-detection» content=»telephone=no» >
// Запрет на маштабирование страницы:
content =»minimum-scale=1, maximum-scale=1, user-scalable=0″
(min-width: 1200px) — DESKTOP;
(max-width: 600px) — TABLET;
(max-width: 350px) — MOBILE;
Почему пропадает часть бэкграунда при уменьшении экрана? Не задана минимальная ширина для резинового блока (1) с фоном. Такое возникает, если блок (2), внутри него, больше ширины окна браузера, в этом случае заполняется фоном только видимая часть внешнего блока (1). Т.к. его размер расчитывается от границ окна браузера.
Нужно добавить: Значение, естественно, нужно указать ваше.
Проектирование адаптивного сайта. Как сделать так чтобы ожидание/реальность совпадали?
Перед вами новая статья моего цикла “Шкатулка с секретами”. Здесь я стараюсь простым языком рассказывать о цифровом дизайне и системном подходе. Если вам интересно читать, есть вопросы или вы хотите предложить мне новую тему, то я буду очень рада обратной связи.
Эта статья будет полезна практикующим дизайнерам, а так же продакт-менеджерам, которые хотят глубже погрузиться в эту тему.
Почему так больно смотреть?
Многим знакома ситуация, когда в Figma или Sketch на макетах дизайн сайта смотрится отлично, а реализация вызывает чувство грусти. Вроде что-то похожее на задуманный тобой проект, но не совсем. И в этот момент дизайнер начинает косо смотреть на разработчика, обвиняя в невнимательности, а разработчик в ответ кидает комментарий о том, что макеты были нарисованы плохо. По моему опыту частой причиной такого результата является недостаточное знание особенностей реализации. В материалах, посвященных этому вопросу, часто советуют прикинуть макеты в трех стандартных разрешениях — веб, планшет и мобильный телефон. На самом деле этого достаточно только в двух случаях — если вы очень давно делаете сайты и способны все просчитать или если система адаптации уже продумана до вас (вы используете готовую систему).
Чтобы не утонуть в дизайн-ревью и спорах с разработчиком, нужно хорошо понимать, как работает верстка, поэтому сейчас о ней и поговорим.
Адаптивно-резиновая верстка
Современные сайты в большинстве случаев имеют адаптивно-резиновую верстку. Это не единственный вариант, но он является наиболее распространенным, так как соотношение трудозатраты/качество-на-выходе оптимальное. Поэтому в данной статье будет описан именно данный вариант.
Как это работает?
При данном подходе к верстке контент растягивается или сжимается в зависимости от размера экрана, а когда ему становится совсем “тесно”, сайт “ломается”. Например, блоки, выстроенные горизонтально, становятся друг под друга, заголовки уменьшаются, иллюстрации сжимаются, а иногда и вовсе пропадают. Этот момент “слома” называется точкой слома или breakpoint.
Посмотрим на примере сайта www.figma.com/. На ширине 1250px сайт все еще имеет “бургер” вместо меню, а на 1251px появляется полноценная навигация. Значит, сайт Figma имеет точку слома на 1251px.
Если сайт верстается с нуля, то точек слома на сайте разработчик может поставить сколько и где угодно. Но, конечно, чем их больше, тем сложнее сайт верстать и поддерживать. Поэтому чаще всего используется от двух до шести таких точек.
Как выбрать точки слома?
К сожалению, нет универсального ответа на этот вопрос. Все индивидуально и зависит от дизайна, а также от сценариев использования вашего сайта. Для простых лендингов и сайтов может подойти 1–2 точки слома, а для более сложных — от 3 до 6 точек. Для сайтов с большим количеством мобильного трафика можно сделать минимальное количество точек слома и сосредоточиться только на мобильной версии.
Хорошей новостью является то, что точки слома не прибиты гвоздями. Их можно поменять при желании. Правда, придется перепроверять верстку на всем сайте, поэтому тестировщики вряд ли будут рады этой новости. В моей практике был случай, когда моя команда успешно поменяла точки слома на довольно большом высоконагруженном сайте.
И раз я не могу дать единственно правильного ответа, то могу помочь советами. Для начала обратимся к статистике. Это поможет нам получить представление о том, на какие размеры экранов в целом нам можно ориентироваться.
Посмотрим, какие разрешения экранов являются самыми популярными за 2022 и 2023 год.
На данном графике представлены наиболее популярные размеры экранов в px. Размеры “темной” зоны под расплывчатым названием “другое” впечатляют. Дело в том, что сейчас выпускается огромное количество различных устройств на платформе андроид, а также других менее популярных. Узнать их все невозможно. Однако возможно поделить эти устройства на понятные группы и с их помощью вычислить наиболее удобные точки слома для вашего сайта.
Несмотря на очевидный мобильный тренд, все еще довольно большое количество людей пользуются интернетом на стационарных компьютерах. Значит, будет неплохо, если ваш сайт будет выглядеть привлекательно на таких разрешениях, как 1920х1080, 1536х864, 1366х768 и 1280х780 px.
Разница в ширине 1920 и 1280 px довольно большая, далеко не каждый дизайн будет хорошо смотреться и там и там совсем без изменений в верстке. Поэтому, вероятно, неплохо будет выбрать точку слома где-то между ними. По такой же логике можно определить и другие точки слома для вашего сайта.
Я советую тестировать ваши точки слома. При работе над новым проектом я часто создаю такие макеты “на грани” — смотрю, как будет выглядеть интерфейс на самых крайних точках. Например, если точка слома 1440px, то я посмотрю, как сайт выглядит на максимальной ширине перед точкой слома 1439px и сразу после нее на 1440px.
А есть примеры?
Да, примеры есть и их довольно много!
Tilda: Думаю, данный конструктор не нуждается в представлении. Проект выбрал точки слома 480px, 640px, 960px, 1200px. Проектируя сайт для тильды, вам нужно ориентироваться именно на них.
Webflow: Визуальный редактор кода, известность которого только набирает обороты. Точки слома, которые можно использовать — 768px, 992px, 1440px.
Мнение разработчика: Когда-то мне очень помогла разобраться в теме данная статья, она не новая — 2006 года. Тут Дэвид советует выбирать точки 600px, 900px, 1200px и 1800px. Конечно, ширина экранов с того времени изменилась, но не так, чтобы сильно, и на мой взгляд статья до сих пор актуальна. Спасибо Дэвид! Если вам интересно почитать статью, но вы не знаете английского, то держите перевод.
Еще пример: В данном материале ребята предлагают использовать точки слома 640px, 768px, 1024px, 1280px, 1536px. Да, это много, но зато интерфейс будет выглядеть хорошо почти на всех размерах экранов.
И еще одна хорошая идея: Помимо этих примеров, вы можете исследовать любой сайт, который близок по стилю к вашему проекту, и взять точки слома оттуда.
На какие разрешения стоит ориентироваться при подготовке макетов?
С точками слома, надеюсь, разобрались. Теперь я бы хотела постараться ответить на следующий вопрос: на какие разрешения экранов лучше ориентироваться при подготовке макетов?
И снова, увы, нет универсального ответа. Чтобы вычислить, на какое же разрешение стоит ориентироваться, лучше всего обратиться к статистике по вашему сайту (если он уже существует). Если по какой-то причине этого сделать нельзя (сайт совершенно новый или у вас нет доступа к аналитике), то можно обратиться к общей статистике.
Мобильные телефоны
Посмотрим в график выше. Из него можно сделать вывод, что наиболее популярной шириной мобильного экрана являться 360рх с большим отрывом — около 23%, затем идут 412–414рх — около 14% и 390–39рх — около 10%.
Для новых проектов по умолчанию я выбираю ширину 360рх для отрисовки макетов. То, что нарисовано в дизайне на ширину 360 px, должно выглядеть нормально и на ширине 320, и на ширине 414px. Если нет уверенности, лучше прикинуть блок на минимальном и максимальном экране. Да, это дольше, но зато неприятных сюрпризов на этапе разработки будет меньше.
Тут я бы хотела затронуть еще одну интересую тему. Вы замечали, что в документации к телефону разрешение в пикселях может быть указано куда больше реального в px? Дело в том, что рх и пиксель — это далеко не всегда одно и то же. Единица px — это конечно же пиксель, но не любой. Px был рассчитан на основе ЭЛТ-мониторов из 1990-х. Наименьшая точка, которую он мог отобразить, была размером примерно в 1/100 дюйма (0,25 мм) — ее и определили как px. В наше время пиксели совсем измельчали, а единица px осталась прежней.
Если все еще не очень понятно, то можно разобрать этот вопрос на примере айфона. В документации разрешение iPhone X составляет 1125 пикселей. Посмотрим на таблицу ниже и поймем, что плотность пикселя на данной модели в 3 раза выше, чем плотность в единицах измерения px. То есть 1125/3=375.
Зона лимбо
Что касается зоны между мобильными устройствами и планшетами, то это либо горизонтально развернутый телефон, либо какой-то небольшой андроид-планшет. Устройств в этой зоне мало. Поэтому, несмотря на то, что здесь могла бы быть дополнительная точка слома, обычно ее не делают из-за экономической нецелесообразности. Для кого стараться?
Планшеты
Четкой цифры размера, определяющей, что считать планшетом, нет, так как сейчас на рынке огромное количество устройств совершенно разных размеров, а последние айпады побольше некоторых ноутбуков. Но чаще всего планшетами считаются устройства шириной от 768px до 1024px.
Для отрисовки дизайна под планшет я выбираю привычные 768.
Десктоп экраны
Небольшие экраны — это ноутбуки или небольшие стационарные мониторы. Сюда входят экраны шириной от 1280px до 1440px. Раньше к этой категории также относили 1024px, но сейчас это все же больше планшетный размер.
Когда мы говорим про широкоформатные экраны, то речь идет в основном о разрешении 1600px и более. Таких экранов довольно много, более 36%, поэтому о них совершенно точно не стоит забывать.
Если вы, как и я, работаете на ноутбуке, советую выбрать размер его экрана для отрисовки дизайна под десктоп, чтобы удобнее было оценивать свой дизайн в режиме прототипа.
Если есть сомнения насчет того, как дизайн будет смотреться при меньших разрешениях, то проверяем все на минимальном размере перед точкой слома. Так, например, если макет нарисован на 1366px, а точка слома 990px, то рисуем дополнительный макет на 990px и проверяем, все ли там хорошо влезло.
Коротко подводим итоги и получаем небольшой сюрприз
Для выбора точек слома стоит ориентироваться на цели сайта и на статистику, а если ее нет, то на глобальную статистику.
Для отрисовки макетов ширины стоит выбирать, исходя из той же статистики. По умолчанию я предлагаю использовать: мобильные телефоны 360px, планшеты 768px, экраны 1366px и большие экраны 1920px. При этом обязательно проверять как будет вести себя интерфейс близко к точками слома.
В подарок тем, кто дочитал но конца, я даю ссылку на заготовку в фигме. Энджой!
Основы адаптивного дизайна
В этой статье я попытаюсь рассказать, как сделать простой шаблон адаптивным. И, конечно же, я попытаюсь объяснить, что такое адаптивный дизайн.
Что такое адаптивный дизайн?
Я уверен, что вы часто «серфите» по сайтам с мобильных устройств и не раз замечали, что есть сайты, где надо масштабировать страницу, чтобы прочитать текст. А бывает, что еще хуже — текст может не поместится на всю страницу и вам придется крутить страницу и по горизонтали, и по вертикали.
Зайдя на сайт с адаптивным шаблоном все меняется, ибо текст «подстраивается» под ваш телефон (разрешение экрана).
Теория (основы)
Думаю, всем известно, что все шаблоны (их стиль) построен на CSS. И адаптивный дизайн — не исключение. Наиболее важное изменение — изменение единиц измерения. Представим, ширина блока 400 пикселей, а значит, что ее надо указывать в процентах (например, 40%).
max-width и width
Тоже очень важная часть в дизайне. Например, ширина нашего сайта 1000 пикселей, но при изменение окна (по ширине, меньше 1000 пикселей), появится горизонтальная прокрутка. Но все поменяется, если мы укажем width: 100%, ибо сайт будет «подстраиваться» под наш экран.
С большими мониторами не так все просто, поскольку текст растянется на весь экран. А получается, если монитор широкоформатный, то текст будет нечитабельным.
Если вам нужно, чтобы сайт остался с такой же шириной, но при этом остался «адаптивным» — надо изменить CSS-код, как указано ниже.
min-width и width
Если чуть выше мы ставили максимальную ширину, то здесь мы устанавливаем минимальную ширину. К примеру, если установить минимальную ширину 200 пикселей, то окно браузера достигает этой ширины и оно больше не будет уменьшаться (появится горизонтальная прокрутка).
Практика
Шаблон, который будет выступать в качестве демонострации, будет иметь в себе три составляющих: шапка, основной контент и боковая колонка (сайтбар).
- Шапка — #headerInner
- Основной контент — #colLeft
- Боковая колонка — #colRight
Как вы заметили, ширина шаблона 1000 пикселей. В шаблоне используется width и max-width: о них написано выше.
У шапки ширина все таже — 1000 пикселей. У основного контента (#colLeft) ширина 67%, а у правой колонки — 30%. Отступ между ними 30 пикселей (3%).
Использование media screen
Стоит отметить, что в media screen задается нужное разрешение экрана устройства. Их очень много, можно указывать даже свои, но самые популярные: 320px, 480px, 600px, 768px, 1024px. В моем примере используется два разрешения: 768px и 1024px.
Таким образом выглядит тег media screen в CSS
Как можно увидеть, мы используем максимальную ширину — 1024px. Данное свойство будет предаваться только тогда, когда ширина окна будет меньше 1024 пикселей.
1024 пикселя
Допустим, что наша цель — чуть-чуть сузить шаблон при этом разрешении, но основной контент и сайтбар должны оставаться на месте.
Вот, что необходимо прописать в CSS
Шапка сайта (#headerInner) имеет новый размер в 90%. Стоит отметить, что для шапки мы не используем max-width, ибо он здесь не нужен. #wrapper — блок, в котором находится основной контент и сайтбар, его ширина тоже 90%. Ширина и сайтбара, и основного контента остаются неизменными, изменился лишь отступ у сайтбара (3%). Это используется для того, чтобы при уменьшение окна сайтбар не «падал» вниз.
768px
Теперь мы пишем настройки для окон, ширина которых 768 пикселей и меньше. Сейчас мы будем распологать сайтбар под основным контентом.
Для блока основного контента (#colLeft) мы указали ширину 100%, чтобы блок растянулся на весь экран. Также мы убрали выравнивание по левому краю, указав float: none, чтобы сайтбар (#colRight) «уплыл» под основной блок контента.
Для сайтбара ширина та же, а выравнивание по правому боку (float: right;) мы убрали. Ко всему этому, мы добавили отступ (margin-top: 25px;), чтобы эти два блока разделялись.
Для того, чтобы картинки также сужались нужно использовать этот код
Как адаптировать сайт под разные разрешения
Рассказываем и показываем, как создавать удобные сайты, которые будут хорошо выглядеть на разных мониторах.
Многие разработчики слишком ленивы, чтобы хоть как-то адаптировать свой сайт: одни проверяют всё только под свой браузер, а другие игнорируют мобильные устройства.
Но чаще всего можно заметить, что сайты плохо адаптированы под разные мониторы и разрешения. Например, вот как выглядит «ВКонтакте» на FullHD-мониторе:
Шрифт очень маленький, а контент размещается только на небольшой части экрана. Чтобы комфортно пользоваться им, нужно менять масштаб страницы:
Встроенных настроек для этого нет, в отличие, например, от Telegram:
Такая адаптация — что-то вроде кибертолерантности. Мы должны заботиться об удобстве посетителей наших сайтов, какими бы устройствами, мониторами и браузерами (только не Internet Explorer) они ни пользовались. Поэтому в этой статье мы расскажем, как адаптировать сайт под разные разрешения.
За основу возьмём сайт из статьи про добавление тёмной темы . Читать её не обязательно, но там подробнее объясняется часть с PHP-скриптами. Также вы можете посмотреть исходный код этого сайта на GitHub.
Создаём адаптивные стили
Прежде всего нужно быть уверенным, что ваш сайт не сломается, если пользователь изменит разрешение на 1 пиксель (как это бывает в MS Word). Для этого везде, где только можно, размеры нужно указывать в процентах.
Также при создании сайта полезно помещать его в оболочку (wrapper): она растягивается на весь экран, а сам сайт будет масштабироваться относительно оболочки.
Сам контент, не считая хедера и футера, не стоит растягивать на всю страницу:
Тут ширина блока с текстом составляет 80% страницы. Если бы не это ограничение, чтение мелкого шрифта с больших мониторов превратилось бы в разминку шеи:
Также вы можете указать максимальную ширину в пикселях:
Тогда при любом размере монитора читать будет более-менее комфортно.
Создаём стили под отдельные разрешения
Как и в случае с тёмной темой, можно подготовить несколько файлов стилей, каждый из которых будет содержать разные размеры для элементов страницы. Начнём со стиля для средних мониторов — normal.css:
Кроме него будут созданы ещё два файла: small.css и big.css. Они добавляются с помощью отдельного элемента link:
Теперь нужно сделать так, чтобы пользователь мог выбрать, какой масштаб ему подходит. Для этого добавляем кнопки:
И остаётся только подключить скрипт, который будет переключать файл стилей:
Кроме переключения стиля, скрипт ещё и сохраняет выбор пользователя в его браузере, чтобы при повторной загрузке страницы подключался именно этот файл. Для этого используется следующий PHP-код:
Можно посмотреть, как это будет выглядеть:
Обратите внимание, что блок с текстом для небольших экранов стал шире — это не тот случай, когда пустота красит страницу .
Автоматическое масштабирование
С помощью JavaScript мы можем проверить размер окна браузера пользователя и подключить тот файл стилей, который лучше подойдёт для страницы такого размера. Вот пример такого кода: