Простое руководство по созданию адаптивного веб-сайта

Вы всегда задавались вопросом, сколько современных веб-сайтов кажутся идеально подходящими независимо от устройства, которое вы используете для их просмотра? Кодирование адаптивной веб-страницы — обычная практика, которая в настоящее время широко распространена на многих новых веб-сайтах. Адаптивные веб-страницы выполняют хитрый трюк, изменяя свой размер, чтобы соответствовать экрану устройства, которое используется для просмотра веб-сайта. Это означает, что они отлично смотрятся на iPhone или настольном компьютере и во всем, что между ними.

Эта «отзывчивость» происходит настолько плавно, что вы, возможно, даже не заметили этого. Отличный адаптивный веб-дизайн должен плавно переходить с устройства на устройство, обеспечивая при этом оптимальную работу в Интернете. Адаптивные веб-сайты превратились из функции, которую «приятно иметь», в нечто, что теперь является практически обязательным для любого веб-сайта. Почему? Просто потому, что число людей, использующих мобильные устройства для просмотра веб-страниц, резко возросло за последние годы, и эта тенденция к использованию мобильных устройств (и, следовательно, экранов меньшего размера) не собирается замедляться.

Взгляните на данные ниже (любезно предоставленные statcounter.com). Вы увидите, что самые распространенные размеры экрана — маленькие (например, экраны мобильных устройств).

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

Если потери потенциальных клиентов недостаточно, чтобы убедить вас в ценности адаптивного веб-сайта, то, возможно, это может быть мысль о потере поискового рейтинга. Google в течение некоторого времени наказывал веб-сайты, которые не предлагают какую-либо форму отзывчивого или адаптивного дизайна для мобильных пользователей. Это означает, что если ваш сайт плохо работает на мобильных устройствах, ожидайте штрафа за ранжирование. Что значит «хорошо работает» на мобильном телефоне? Что ж, контент должен отображаться в удобном для пользователя виде. Это означает, что он должен быть удобочитаемым без масштабирования и масштабирования. Он также должен быстро загружаться (интересуетесь, как кэширование WordPress может помочь с вашими целями скорости, тогда взгляните на эту статью «Кэширование WordPress — как это работает и почему вы должны его использовать»). !')

Отзывчивые веб-страницы против адаптивных веб-страниц

Если мы вернемся на десятилетие или два назад, мобильные телефоны не были так распространены, как сейчас. Конечно, те, которые хорошо справились с работой, позволяя вам просматривать веб-страницы, действительно не начали появляться до 2005 года (каким бы невероятным ни казалось, что iPhone даже не появился на сцене до 2007 года). Сотовые сети также не могли передавать много данных, что означало ограниченные возможности мобильного просмотра веб-страниц. Все это быстро изменилось за последнее десятилетие, и веб-сайты были вынуждены пытаться наверстать упущенное, чтобы лучше обслуживать своих клиентов в новом мире мобильных устройств, в котором мы сейчас находимся.

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

После этого на сцену вышел адаптивный дизайн. Это продвинуло мобильную версию обслуживания специально разработанного мобильного веб-сайта на шаг вперед. Создано несколько статических макетов, которые предлагают пользователю более привлекательный мобильный просмотр. Загружается размер экрана устройства, использующего веб-сайт, и отображается наиболее подходящий размер. Обычно создается шесть размеров для экранов, начиная от большого настольного компьютера и заканчивая мобильным устройством. Адаптивный дизайн, однако, несколько ограничивает и, безусловно, не рассчитан на будущее, поскольку он не может удовлетворить размеры экрана, которые не попадают четко в установленные 6 категорий, которые были созданы. Это также ресурсоемко с точки зрения дизайна, поскольку необходимо создать 6 версий веб-сайта.

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

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

Как работают адаптивные сайты?

Адаптивные веб-сайты используют так называемые CSS Media Queries для изменения макета веб-сайта в зависимости от ширины экрана. CSS Media Queries — это мощный инструмент, который на самом деле довольно просто развернуть, если у вас есть базовое понимание CSS. Прежде чем погрузиться в процесс создания адаптивного веб-сайта, стоит начать с нескольких живых примеров. Лучше всего это делать на экране рабочего стола или ноутбука. Откройте браузер, например Chrome, и перейдите на популярный веб-сайт. Возможно, вы захотите попробовать наш собственный на pressidium.com.

Уменьшите размер окна браузера, а затем, наведя указатель мыши на правый край окна браузера, начните сдвигать окно, чтобы оно стало уже. Вы увидите, что по мере того, как он становится меньше, макет веб-сайта меняется. Происходит следующее: когда веб-сайт достигает предварительно определенного размера (например, 1000 пикселей в ширину), запускается CSS Media Query, который сообщает браузеру использовать стиль CSS, относящийся к этой ширине экрана. Затем веб-сайт изящно перемещается или реагирует на этот новый размер экрана и отображается соответственно. Довольно умно!

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

Создание адаптивной веб-страницы

В этом руководстве мы не будем использовать какой-либо внутренний код, поэтому нет необходимости обращаться к серверу, чтобы попробовать. Просто создайте папку на рабочем столе и добавьте туда свои рабочие файлы.

Шаг 1: HTML

Создайте файл index.html внутри вашей новой папки. Откройте этот файл в своем любимом текстовом/кодовом редакторе, а затем вставьте следующий код:

 <!DOCTYPE html> <html lang="en-US"> <head> <link rel="stylesheet" type = "text/css" href = "style.css" /> </head> <body> <div> <div> <h1>My website</h1> <div> <div class="post"> <h3 class="post-title">Post 1 title</h3> <p><b>post 1 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 2 title</h3> <p><b>post 2 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 3 title</h3> <p><b>post 3 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 4 title</h3> <p><b>post 4 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 5 title</h3> <p><b>post 5 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> </div> <div> <div> <h3>Menu title</h3> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> </ul> </div> </div> </div> </div> </body> </html>

Шаг 2: Внешний CSS

Вам нужно будет добавить внешний файл style.css. Для этого создайте файл с именем style.css и поместите его в ту же папку, что и файл index.html. Затем добавьте следующий код:

 h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 900px; float: left; padding: 20px; margin: 20px; border: 1px solid darkgrey; } div#sidebar { width: 300px; float: left; padding: 20px; margin: 20px; border: 1px solid darkgrey; } div.post { width: 31.1%; float: left; padding: 10px; }

На этом этапе, если вы откроете файл index.html в своем интернет-браузере (в этом примере мы использовали Chrome), вы должны увидеть на своей странице что-то вроде этого:

Теперь давайте взглянем на инструменты разработчика нашего браузера (опять же, в этом примере мы используем Chrome). Откройте Chrome, нажмите F12 и установите его для просмотра справа.

Измените размер окна, перемещая курсор-разделитель, и наблюдайте за изменением разрешения экрана в режиме реального времени.

Шаг 3: Относительные единицы CSS

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

Это произошло потому, что мы установили фиксированную ширину 900 пикселей для div#main и 300 пикселей для div#sidebar . Давайте изменим формат этих значений и вместо этого будем использовать проценты. (Обратите внимание, что отступы и поля также учитываются по ширине, поэтому эти значения также необходимо преобразовать в проценты.)

После внесения этих изменений файл style.css должен выглядеть так:

 h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 66%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div#sidebar { width: 22%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div.post { width: 31.1%; float: left; padding: 10px; }

Теперь это становится захватывающим, поскольку у нас есть страница, которая теперь становится более отзывчивой!

Несмотря на то, что все налаживается, область сообщений нуждается в дополнительной правке CSS. Чем меньше ширина, тем «уродливее» становятся почтовые ящики. Чтобы обойти это, нам нужно отредактировать CSS поста, чтобы получить более красивый и отзывчивый макет.

Вы заметите, что визуальные проблемы возникают только при сужении экрана. Чтобы решить эту проблему, нам придется использовать некоторые медиа-запросы CSS, чтобы после определенного момента заработал альтернативный CSS, который создает более привлекательный макет.

Что мы собираемся сделать, так это преобразовать нашу «широкоэкранную» область с 3 колонками в область с 2 колонками, которая будет лучше вписываться в более узкий экран. Для этого мы используем медиа-запросы CSS.

Шаг 4: Медиа-запросы CSS

Для нашего «широкоэкранного» режима мы введем медиа-запрос CSS следующим образом: как этот @media screen and (min-width: 1396px) . Этот запрос находится в верхней части нашей таблицы стилей CSS и заключает в себе весь набор CSS, который мы хотим запустить, когда наш экран имеет ширину не менее 1396 пикселей.

Теперь мы можем скопировать весь этот код и продублировать его в нашей таблице стилей CSS (скопируйте и вставьте его под текущим CSS, чтобы у вас было две идентичные версии в одном файле). Теперь отредактируйте медиа-запрос CSS в верхней части второго пакета CSS, чтобы он читал @media screen and (max-width: 1395px) . Теперь это говорит нашему браузеру, что если он меньше 1395 пикселей, то он должен запустить этот CSS. Теперь, когда это сделано, мы можем настроить CSS в этом «меньшем» разделе, чтобы он изменил макет нашей веб-страницы, чтобы она лучше подходила для меньшего экрана. В этом примере мы собираемся настроить и там мы должны настроить процент div.post с 31,1% до 45%.

Теперь у вас должен быть файл CSS, который выглядит следующим образом:

 @media screen and (min-width: 1396px) { h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 66%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div#sidebar { width: 22%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div.post { width: 31.1%; float: left; padding: 10px; } } @media screen and (max-width: 1395px) { h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 66%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div#sidebar { width: 22%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div.post { width: 45%; float: left; padding: 2%; } }

Теперь, когда поля сообщений имеют другой стиль для экранов с шириной менее 1395 пикселей, давайте посмотрим, как это отражается в действии:

Хороший!

Вы заметите, что при уменьшении масштаба и после пересечения ширины 760 пикселей все по-прежнему становится странным.

Чтобы отсортировать это, мы можем использовать тот же трюк, который мы использовали для перехода от 3 столбцов к 2. На этот раз мы будем использовать «точку останова» 760 пикселей и изменим наш CSS div.post на 94%. Если мы сделаем это, у нас будет три медиа-запроса CSS, которые должны выглядеть так:

 @media screen and (min-width: 1396px) { } @media screen and (min-width: 761px) and (max-width: 1395px) { } @media screen and (max-width: 760px) { }

Наш @media screen and (max-width: 760px) CSS будут включать наш отредактированный div.post , который будет выглядеть так:

 div.post { width: 94%; float: left; padding: 2%; }

Если все хорошо, вы должны увидеть что-то вроде следующего, когда вы уменьшите ширину вашего браузера до ширины ниже 760 пикселей:

Вот и все! Теперь мы создали адаптивную веб-страницу, которая работает на больших экранах, планшетах и ​​мобильных устройствах!

Используя этот шаблон, вы сможете больше поиграть и поэкспериментировать с другими стилями CSS. Можно многому научиться, играя с этим примером и применяя различные правила CSS, которые впоследствии можно использовать для создания красивых и отзывчивых веб-сайтов.

Разместите свой сайт с Pressidium

60- ДНЕВНАЯ ГАРАНТИЯ ВОЗВРАТА ДЕНЕГ

ПОСМОТРЕТЬ НАШИ ПЛАНЫ

Вывод

Если вы используете CMS, такую ​​как WordPress, вам может быть интересно, почему необходимо копаться в базовых CSS и медиа-запросах, которые используются для создания адаптивной веб-страницы. В конце концов, любая прилично закодированная тема WordPress уже должна иметь встроенный адаптивный дизайн. Хотя это правда, понимание того, почему веб-сайт ведет себя так, как он работает в зависимости от ширины браузера, может быть чрезвычайно полезным. Могут быть случаи, когда по какой-то причине первоначальный адаптивный дизайн, добавленный автором темы, не работает так, как вам нужно. Зная, как применять медиа-запросы для изменения того, какой CSS отображается в определенных точках останова, вы можете двигаться вперед и применять изменения, которые приводят к требуемому внешнему виду и функциям.

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