Как сделать адаптивный сайт html: Что менять в HTML и CSS коде

Как проверить адаптивность сайта – лучшие сервисы и инструменты

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

Что такое адаптивность сайта 

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

Говоря об адаптивности (или отзывчивости) сайтов, разработчики в большинстве случаев подразумевают именно мобильные версии веб-ресурсов, то есть уже существующие сайты, переверстанные под touch-управление и более компактные дисплеи с иным соотношением сторон.

Разработчики используют различные методики в CSS и JavaScript, чтобы сделать сайт адаптивным. Например, используют медиазапросы – для изменения размеров и расположения элементов интерфейса в зависимости от текущего разрешения экрана пользователя. Или же автоматизируют запуск скриптов, меняющих дизайн страницы в зависимости от того, какой браузер использует человек и на каком устройстве.

Комьюнити теперь в Телеграм

Подпишитесь и будьте в курсе последних IT-новостей

Подписаться

Зачем нужен адаптивный сайт

Судя по данным, полученным в ходе исследования компании Sweor, около 87% пользователей считают адаптивность сайта важным фактором. И это логично, так как напрямую связано с ростом популярности смартфонов.

В 2020 году количество выходов в интернет с мобильных устройств выросло до 68.1% от общего трафика. И это значение продолжает расти. Поэтому от разработчиков требуют создавать мобильные версии сайтов и приложений. В то же время пользователи компьютеров больше проводят времени на конкретных ресурсах и часто используют ПК для более глубокого изучения сайта. Так что хорошая десктопная версия страницы – одно из ключевых условий для создания удобного сайта с перспективами в SEO. 

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

Принципы адаптивности

Создавая адаптивный дизайн, стоит обратить внимание на 4 значимых аспекта:

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

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

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

   п. 

4. Не занимаемся хардкодингом, а используем свойства типа flex, grid, а также процентные значения вместо точных единиц (px, em), чтобы страница самостоятельно адаптировалась под изменения разрешения и не требовала постоянного внесения изменений в код и избыточного контроля над позиционированием каждого элемента. 

Примеры адаптивной верстки

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

Вот сайты с удачной мобильной версткой:

Apple 

Комьюнити

А вот без нее:

Advego

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

Инструменты для проверки адаптивности 

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

С помощью браузера Google Chrome

Инструмент разработчиков, который у вас точно всегда под рукой – веб-браузер. Лучшим выбором станет Chrome DevTools, но можно воспользоваться аналогичной функцией в Firefox и даже в Safari. 

Чтобы проверить адаптивность сайта с помощью браузера Google Chrome:

• Запускаем браузер и открываем на нем свой сайт. 

• Включаем инструменты разработчика, одновременно нажав клавиши Alt+Ctrl+I.

• Переходим в режим эмуляции устройств, одновременно нажав клавиши Shift+Ctrl+M.

Вокруг сайта появится рамка с дополнительными элементами управления. Здесь можно самостоятельно указать разрешение или выбрать тип устройства для эмуляции. Так можно оценить внешний вид своего сайта на популярных смартфонах и планшетах. 

Google Mobile-Friendly Test

У Google, помимо инструментов в браузере, есть и отдельное веб-приложение для проверки соответствия страницы стандартам мобильной верстки.  

Google Mobile-Friendly Test может подсказать, адаптирован ли сайт под смартфоны, насколько хорошо он оптимизирован и какие элементы стоило бы изменить, чтобы страницы были более удобочитаемы (речь идет о шрифтах, картинках и т.п.).

Сервис доступен бесплатно для всех желающих и проводит аналитику в автоматическом режиме. Достаточно зайти на страницу Google и указать адрес сайта, который надо проверить.

Adaptivator

По иронии судьбы этот сайт и сам не до конца адаптирован не только под мобильные устройства, но и под изменение размера экрана браузера. 

Тем не менее с изначально поставленной задачей он справляется – сервис показывает, как ваш сайт будет смотреться на некогда популярных устройствах, среди которых нашлось место Люмии и шестому Айфону. 

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

Screenfly

Еще один простой и логичный инструмент для оценки состояния адаптивности сайта. Визуально он напоминает эмулятор, встроенный в браузер Safari. 

В верхней панели отображается список устройств (компьютер, планшет, телефон и телевизор). Также есть отдельная клавиша для ручного ввода разрешения и соотношения сторон. 

Наличие телевизоров в списке устройств выгодно отличает Screenfly от других похожих сервисов. Если у вас много посетителей со смарт-ТВ, то эта функция пригодится.

Дополнительных функций или аналитики здесь нет, за счет чего работает Screenfly быстрее конкурентов. Отлично подойдет для быстрой проверки адаптивности.

I Love Adaptive

Полнофункциональная проверка адаптивности сайта для всех актуальных устройств и операционных систем. 

I Love Adaptive бесплатно предоставляет доступ к десяткам онлайн-эмуляторов различных гаджетов, система и браузеров. 

Преимуществом сервиса можно назвать наличие режима отображения десятков гаджетов на одном экране. Можно посмотреть, как будет смотреться страница в разных вариантах без необходимости переключаться между разными меню.  

Еще I Love Adaptive умеет эмулировать панель инструментов iOS, чтобы адаптировать страницу под специфичный интерфейс операционной системы Apple в новых моделях телефонов.

Responsinator

Минималистичный и не особо функциональный валидатор адаптивной верстки. Все, что он делает, – отображает в нескольких пиктограммах, как ваш сайт выглядит на парочке популярных смартфонов. 

Интерфейс сервиса до боли прост и содержит в себе всего одну строчку и кнопку. В строку вводите адрес сайта, а потом нажимаете на кнопку Go, чтобы запустить проверку. 

Список устройств здесь, к сожалению, довольно скромный. Да и проверить, как будет вести себя сайт в более специфичных условиях, не получится. Разве что сделать краткий референс и понять, нет ли совсем уж явных искажений при переходе на мобильную версию ресурса. Поэтому он подойдет лишь новичкам, учащимся делать мобильную верстку. 

Am I Responsive

Проект Am I Responsive тоже не сильно выделяется на фоне большинства конкурентов, но несколько интересных отличий у него все же есть:

1. Он поддерживает localhost. То есть можно проверить, как выглядит сайт на разных устройствах еще на этапе разработки, без необходимости размещать свой проект где-то в сети. 

2. Здесь есть букмарклет, с помощью которого Am I Responsive можно в один клик по панели с закладками запустить на любом веб-ресурсе. 

3. А еще у разработчиков есть что-то вроде собственного интернет-издания. Если подписаться, то каждую неделю на почту будут приходить статьи и новости по теме адаптивной верстки (действительно ли до сих пор работает рассылка, проверить не вышло, но сайт не обновлялся с 2013 года). 

MobileMoxie

MoblieMoxie – это не отдельный сервис для проверки адаптивности, а набор инструментов, помогающих оценить готовность ресурса к проверке со стороны поисковых ботов. 

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

Сервис постоянно обновляется и адаптирован для работы с новыми гаджетами, включая последние модели iPhone.

MobileMoxie – платный сервис, но у него есть пробный период на 7 дней.

Browserling

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

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

Еще одно преимущество Browserling – полная безопасность и поддержка протокола Secure Shell. Запуск браузера совершается в изолированном блоке, что исключает вмешательство в процесс со стороны. Можно открывать свои сайты без лишних переживаний. 

WEB tools

Богатый набор инструментов с сайта Seo-Zona. У них есть и редакторы кода, и отдельные сервисы для конструирования form-объектов, утилита для проверки существования email-адресов и другие полезности. И среди этого богатства нашлось место для мини-приложения, отображающего сайт на мобильных устройствах. 

Устанавливать свое разрешение или как-то влиять на работу сервиса нельзя. Предоставляется он бесплатно и показывает верстку только на наиболее популярных устройствах. 

Яндекс.Вебмастер Mobile Friendly

Если вы пользуетесь сервисами для вебмастеров от Яндекса и являетесь владельцем сайта, который хотите проверить, то вам подойдет их фирменный инструмент. Он нацелен именно на тестирование мобильной верстки. 

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

Mattkersley

Mattkersley показывает, как выглядит сайт в двух режимах: 

Он справляется с поставленной задачей, но имеет два больших недостатка: во-первых, показывает малое количество разрешений, а во-вторых, не поддерживает сайты c https. Приходится подгружать версию без шифрования.

Вместо заключения

На этом все. Как видите, есть множество инструментов для проверки сайта, но с большой долей вероятности вы поймете, что вам с лихвой хватает одного Google Chrome. Тем не менее иногда вещи типа Google Mobile-Friendly Test помогают заметить недочеты, которые не видны вооруженным глазом.

Адаптивная верстка сайта, концепты технических особенностей

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

Адаптивная верстка, с чего начать

Сразу изучать адаптивную верстку сайта, не зная основ HTML и CSS мы не рекомендуем. Можно, конечно-же, попробовать, но всегда придётся возвращаться назад, к истокам, для уточнения или разъяснения каких-либо технических нюансов, потому что ни в коем случае нельзя забывать один из главных концептов — адаптивная верстка, это способ, а инструментом здесь является HTML и CSS, не зная которые, или не в достаточной мере владея этой технологией, вы будете слепым котёнком в мире серьезного веб-дизайна.

Поэтому, освойте сначала курс по веб-дизайну, изучив подробно HTML и CSS, а уже потом можно браться за все остальное.

Технические элементы адаптивной вёрстки

Вы знаете HTML и CSS, что необходимо изучать теперь, чтобы попробовать свои силы в адаптивной вёрстке.

Мета тег viewport

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

Медиазапросы

Медиазапросы, это логические выражения, при срабатывании которых выполняется определенный код. Если объяснить простым языком, то медиазапрос определяет, на каком устройстве, с каким размером и разрешением экрана просматривается сайт и в зависимости от этого даёт команды на отображение интерфейса адаптированного под смартфон, планшет или компьютер.

Это самое простое объяснение, но внутри данного функционала масса технических и технологических нюансов, которые надо осваивать на практических примерах чтобы стать специалистом адаптивной вёрстки сайта.

Адаптивная графика

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

Адаптивное видео

Как и все элементы адаптивного дизайна сайта, видео тоже должно быть адаптивным и менять свой размер от величины и разрешения экрана. Сделать это можно как на стороне html кода, так и с помощью css. Поскольку видео на страницах сайта является элементом, притягивающим внимание и тем самым определяет поведенческие факторы посетителей сайта, необходимо уделять особое внимание адаптивности видео.

Адаптивная типографика

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

Адаптивное меню

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

Адаптивные таблицы

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

Адаптивная верстка в две колонки

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

Адаптивная верстка в три колонки

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

Позвоните чтобы узнать подробнее

+7(963)972-82-58

или отправьте письмо:

Спросите нас письменно

Узнать о курсе по Web-дизайну

Узнать подробнее о курсе по адаптивному web-дизайну

 

Отзывчивый веб-дизайн HTML (с примерами)

В этом уроке мы узнаем об адаптивном веб-дизайне HTML и его типах с помощью примеров.

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

Так сайт выглядит на десктопе.

Так тот же сайт выглядит на мобильных устройствах.

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

---

Есть много способов сделать веб-страницу адаптивной. Они следующие:

• метатег Viewport
• Адаптивная типографика
• Адаптивные изображения
• Медиа-запросы
• Технологии адаптивного макета

О каждом из них мы узнаем подробно.

---

метатег viewport

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

Например,

Атрибут viewport сообщает браузеру, как настроить размеры и масштабирование веб-страницы в соответствии с экраном устройства. . В этом примере

• width=device-width — ширина веб-страницы равна ширине устройства
.
• начальный масштаб=1.0 — уровень масштабирования 100% .

Рассмотрим пример:

 
    <голова>
        
        
    
    <тело>
        <изображение
         
          src="https://programiz.com/sites/all/themes/programiz/assets/cover-artwork.png"
        />
         
Набор области просмотра
 
    
 

Вывод браузера на экран мобильного устройства с набором метаданных окна просмотра

Браузер Вывод на экран мобильного устройства без метанабора окна просмотра

Как видите, веб-сайт неудобен для мобильных устройств, когда окно просмотра не установлено.

---

Размер адаптивного текста

Мы можем установить размер текста в соответствии с размером браузера. Для этой цели мы используем блок vw . Например,

 
Привет всем!
 

Вывод браузера

Здесь для свойства font-size установлено значение 9.0052 10vw , что означает 10% ширины области просмотра .

Это означает, что размер шрифта элемента

будет составлять 10% ширины области просмотра (видимой области веб-страницы), независимо от размера экрана или разрешения устройства.

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

Вывод браузера

---

Адаптивные изображения

Адаптивные изображения хорошо отображаются и подходят для любого размера браузера. Нам просто нужно установить ширину изображения на 100% , чтобы сделать изображение отзывчивым. Например,

Вывод браузера (рабочий стол)

90 003

Браузер Выход (мобильный)

---

Теги изображений HTML

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

 <картинка>
    
    <источник srcset="logo_regular.png">
    
 

Вывод браузера при размере экрана > 400 пикселей

Вывод браузера при размере экрана < 400 пикселей

В приведенном выше примере, если ширина экрана меньше 400 , 900 33 logo_small. png будет использоваться и logo_regular.png будет использоваться в случае, если размер экрана превышает 400.

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

Примечание: Мы также предоставляем тег внутри тега для старых браузеров, которые не поддерживают тег .

---

Медиа-запросы

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

 
Узнайте о HTML
 
<стиль>
    Только экран @media и (максимальная ширина: 600 пикселей) {
        тело {
            цвет фона: голубой;
        }
    }
  

Вывод браузера (размер экрана > 600)

1243

Здесь мы видим, что CSS не влияет на нашу HTML-страницу. Давайте изменим размер экрана до менее чем 600px .

Вывод браузера (размер экрана < 600)

В приведенном выше примере используется медиа-запрос, представленный @media , для применения определенных стилей к странице.

Только экран гарантирует, что стили будут применяться только при просмотре страницы на экране, а не при печати. (max-width: 600px) Часть запроса ограничивает применение стилей только тогда, когда размер экрана меньше 600 пикселей. Это позволяет создать динамичный и отзывчивый макет.

---

Макет сетки

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

Макет сетки — это макет CSS, который позволяет создавать адаптивные и гибкие макеты. С помощью макета сетки мы можем указать размер и положение элементов на веб-странице с помощью системы сетки, и элементы автоматически изменят свой размер и положение в соответствии с доступным пространством.

Адаптивное представление сетки часто имеет 12 столбцов и общую ширину 100% . Сетка автоматически изменит размер, чтобы занимать разный процент ширины экрана на разных устройствах. Например,

 <стиль>
    .сетка {
        дисплей: гибкий;
        flex-wrap: обернуть;
    }
    .столбец {
        гибкий: 0 0 8,33%; /* Занимает 8,33% сетки (12 столбцов) */
        цвет фона: красный;
        белый цвет;
        выравнивание текста: по центру;
        семейство шрифтов: без засечек;
    }
    .column: n-й ребенок (2n) {
        цвет фона: синий;
    }
    /* Используйте медиа-запросы для применения разных стилей в зависимости от ширины экрана */
    @media (максимальная ширина: 600 пикселей) {
        .столбец {
            гибкий: 0 0 50%; /* Занимают 50% сетки на маленьких экранах */
        }
    }

<дел>
    <дел>1
    <дел>2
    <дел>3
    <дел>4
    <дел>5
    <дел>6
    <дел>7
    <дел>8
    <дел>9