Как сделать один сайт для всех устройств (Responsive Web Design) / Хабр
Вчера была опубликована хорошая статья «Веб-дизайн. Каждому устройству свое представление». Несмотря на неплохие размышления, к сожалению, вывод в ней довольно глупый. А именно:
«Нужно определить, какими устройствами могут пользоваться ваши посетители, проработать и создать для этих устройств представление вашего сайта, определить устройство посредством проверки заголовков браузеров, и отправить наиболее подходящее представление.»
Почему это глупо
Во-первых, никто не сможет предугадать, какими устройствами будут пользоваться ваши посетители. Нужно ориентироваться не на устройства, а на разрешения.
Это скриншот из презентации «Beyond the mobile web by yiibu» (очень рекомендую).
Во-вторых, если вы не facebook или yandex, скорее всего, вы не потянете создание и поддержку разных версий сайта для каждого устройства.
Да и это не имеет особого смысла. Потому что ситуация становится похожа на реалии пятнадцатилетней давности. Тогда делали сайт «под браузер», а сейчас автор предлагает делать сайт «под устройство».
Как сделать один сайт для всех устройств
Вопросы, которые поднимал автор вышеуказанной статьи, уже довольно давно в цивилизованном мире обдуманы, и, более того, они уже решены.
Сейчас можно сделать 1 сайт с единственной версткой, который будет работать на устройствах, начиная с телефонов, заканчивая огромными телевизорами. Например, yiibu.com или alistapart.com (поуменьшайте окно браузера):
Все это называется «Responsive Web Design»
Responsive состоит из следующих техник:
Резиновый макет на основе пропорций (fluid grid)
Основная идея — формула для вычисления пропорций в процентах «target / context = result». Например, у нас есть макет psd с шириной 1000px.
В нем есть два блока: один слева шириной 270px, другой справа 730px. Сверстаем мы их так:
.leftcolumn {
width: 27%; /* 270px / 1000px = 0,27 */
float: left;
}
.rightcolumn {
width: 73%; /* 730px / 1000px = 0,73 */
float: right;
}
Если внутри левого столбца будет еще один блок и, скажем, на макете он шириной в 170px, то для него поменяются цель и контекст, и код будет выглядеть вот так:
.leftcolumn .some-div {
width: 62,962963%; /* 170px / 270px = 0.62962963 */
float: left;
}
На хабре был перевод оригинальной статьи Ethan Marcotte «Fluid Grids».
Резиновые изображения (fluid images)
Подстраивают свои размеры под блок родителя. Основная идея в неочевидном применении свойства { max-width: 100% }. Изображение с img { max-width: 100% } никогда не вылезет из своего блока-родителя.
Если блок-родитель меньше, чем размеры img, то изображение пропорционально уменьшится.
Этот принцип применим как для img, так и для embed, object, video.
Подробная оригинальная статья «Fluid Images».
Media queries
Нужны для отображения макета, оптимизированного под разрешение, с которого в данный момент этот сайт смотрится. Это часть стандарта CSS, которая позволяет применять стили на основе информации о разрешении устройства.
Например, так:
/* начало css */media queries понимают все разумные браузеры. Для ie же есть Respond.js
Здесь базовые стили для глупых браузеров. Например, для телефонов не high-end уровня. Pocket Internet Explorer для Windows Mobile 6.5 здесь же :).
@media only screen and (min-width: 480px) {
Здесь стили более разумных, но все еще мобильных устройств. Android, iPhone и так далее.
}
@media only screen and (min-width: 768px) {
Планшеты в режиме portrait.
}
@media only screen and (min-width: 992px) {
Планшеты в режиме landscape, нетбуки, ноутбуки, десктоп.
}
@media only screen and (min-width: 1382px) {
Десктоп с большими разрешениями, телевизоры.
}
/* конец css */
Mobile first
Это техника, при которой сайт верстается сначала для устройств с меньшими возможностями, а затем с помощью media queries добавляются возможности и плюшки.
Так глупые браузеры без media queries получат самый простой контент (например, на мобильных телефонах). А более продвинутые поймут и отрисуют страницу, беря во внимание media queries.
Подробнее о Mobile first
Ссылки
1. Русскоязычный блог о Responsive Web Design
2. Единственная хорошая книга на эту тему — «Responsive Web Design». Написана Ethan Marcotte, который в общем и положил начало адаптивным макетам. После ее прочтения многое прояснится.
Руководство для начинающих по адаптивному веб-дизайну в 2023 году
В связи с тем, что Интернет все чаще используется с мобильных устройств, уже недостаточно иметь статичный дизайн веб-сайта, который хорошо выглядит только на экране компьютера.
Не говоря уже о том, что при разработке дизайна вы также должны учитывать планшеты, ноутбуки 2-в-1 и разные модели смартфонов с разными размерами экрана.
Так что если вы поместите свой контент в одну колонку и закроете его, это не поможет.
Благодаря адаптивному веб-дизайну вы можете быть уверены, что ваш веб-сайт будет выглядеть наилучшим образом на экранах мобильных телефонов, планшетов, ноутбуков и настольных компьютеров.
И это улучшение пользовательского опыта означает более высокую конверсию и рост бизнеса.
В этом руководстве вы найдете все, что вам нужно знать об адаптивном дизайне веб-сайтов, включая определения, пошаговое руководство, примеры и многое другое.
Посмотрите наше видеоруководство по адаптивному веб-дизайну:
Что такое адаптивный веб-дизайн?
Адаптивный дизайн — это подход к веб-дизайну, который позволяет вашему веб-контенту адаптироваться к разным размерам экранов и окон различных устройств.
Например, ваш контент может быть разделен на разные столбцы на экранах настольных компьютеров, потому что они достаточно широкие, чтобы вместить этот дизайн.
Если вы разделите свой контент на несколько столбцов на мобильном устройстве, пользователям будет трудно читать и взаимодействовать с ним.
Адаптивный дизайн позволяет отображать несколько отдельных макетов контента и дизайна на разных устройствах в зависимости от размера экрана.
Недостаточно, чтобы ваш сайт хорошо выглядел на экране компьютера. 🖥 Планшеты, ноутбуки 2-в-1 и смартфоны — все это часть уравнения… и это руководство охватывает все, что вам нужно знать об адаптивном дизайне. дизайн и адаптивный дизайн заключается в том, что адаптивный дизайн адаптирует рендеринг одностраничной версии. Напротив, адаптивный дизайн предоставляет несколько совершенно разных версий одной и той же страницы. Отзывчивый и адаптивный дизайн Обе эти тенденции являются важными тенденциями веб-дизайна , которые помогают веб-мастерам контролировать, как их сайт выглядит на разных экранах, но подход отличается.
Благодаря адаптивному дизайну пользователи будут получать доступ к одному и тому же базовому файлу через браузер независимо от устройства, но код CSS будет управлять макетом и отображать его по-разному в зависимости от размера экрана. В адаптивном дизайне есть сценарий, который проверяет размер экрана, а затем обращается к шаблону, разработанному для этого устройства.
Почему адаптивный дизайн так важен
Если вы новичок в веб-дизайне, разработке или ведении блога, вы можете задаться вопросом, почему адаптивный дизайн так важен.
Ответ прост. Уже недостаточно создавать дизайн для одного устройства. Мобильный веб-трафик обогнал настольный компьютер и теперь составляет большую часть трафика веб-сайта, составляя более 51%.
Доля рынка мобильных, планшетных и настольных компьютеров Когда более половины ваших потенциальных посетителей используют мобильные устройства для работы в Интернете, вы не можете просто предоставить им страницу, предназначенную для настольных компьютеров.
Это было бы трудно читать и использовать, и это привело бы к плохому пользовательскому опыту.
Но это еще не все. Пользователи мобильных устройств также составляют большую часть посещений поисковых систем.
Мобильный поисковый трафикНаконец, за последние несколько лет мобильные стали одним из самых важных рекламных каналов. Даже на постпандемическом рынке расходы на мобильную рекламу выросли на 4,8% до 91,52 млрд долларов.
Независимо от того, решите ли вы размещать рекламу в социальных сетях или используете органический подход, такой как YouTube SEO, подавляющее большинство вашего трафика будет поступать от мобильных пользователей.
Если ваши целевые страницы не оптимизированы для мобильных устройств и не просты в использовании, вы не сможете максимизировать рентабельность инвестиций в свои маркетинговые усилия. Плохие показатели конверсии приведут к меньшему количеству лидов и потерям расходов на рекламу.
Отзывчивы ли сайты WordPress?
Адаптивность сайтов WordPress зависит от темы вашего сайта WP.
Тема WordPress — это эквивалент шаблона для статического веб-сайта, который управляет дизайном и макетом вашего контента.
Если вы используете тему WordPress по умолчанию, такую как Twenty Twenty, дизайн будет адаптивным, но, поскольку это дизайн с одним столбцом, вы можете не заметить этого, глядя на него на разных экранах.
Если вы используете другую тему WordPress, вы можете проверить, является ли она адаптивной, сравнив, как она выглядит на разных устройствах, или с помощью инструментов разработчика Chrome.
Строительные блоки адаптивного веб-дизайна
В этом разделе мы рассмотрим базовую основу адаптивного веб-дизайна и его различные строительные блоки.
CSS и HTML
Основой адаптивного дизайна является сочетание HTML и CSS, двух языков, которые управляют содержимым и макетом страницы в любом веб-браузере.
HTML в основном управляет структурой, элементами и содержимым веб-страницы.
Например, чтобы добавить изображение на веб-сайт, вы должны использовать такой HTML-код:
Вы можете установите «класс» или «идентификатор», на который вы позже сможете настроить таргетинг с помощью кода CSS.
Вы также можете управлять основными атрибутами, такими как высота и ширина, в своем HTML, но это больше не считается лучшей практикой.
Вместо этого CSS используется для редактирования дизайна и макета элементов, которые вы включаете на страницу с помощью HTML. Код CSS может быть включен в раздел