Адаптивное выпадающее мега меню на CSS
Урок посвящён созданию адаптивного выпадающего меню шириной во всю ширину страницы или блока навигации, на чистом CSS. Мега меню обычно используется на сайтах интернет-магазинов и любых других сайтах электронной коммерции, так как оно является оптимальным способом для организации и отображения содержимого.
Общий принцип создания мега меню не отличается от создания обычного горизонтального выпадающего меню. Разница заключается лишь в том, что относительное позиционирование получает не каждый элемент списка, в который вкладывается выпадающее меню, а меню верхнего уровня или любой другой блок-контейнер. В этом случае мы можем задать для выпадающего меню ширину 100%, которая будет равна ширине меню верхнего уровня, а не ширине элемента списка. Для выпадающего меню обычного размера нужно приписать класс и задать для него относительное позиционирование.
Каждый столбец внутри выпадающего меню представляет собой элемент списка, содержащий внутри заголовок (опционально) и вложенное меню.
Высота каждой колонки может разной и если вы добавите фон или границы для вложенного меню, то разница в высоте будет заметна. Поэтому, чтобы решить эту проблему, подключим Jquery плагин matchHeight.
Необходимые файлы раздела head
@import url('https://fonts.googleapis.com/css?family=Playfair+Display|Roboto'); * body < font-family: 'Roboto', sans-serif; font-size: 14px; margin: 0; >ul < list-style: none; margin: 0; padding: 0; >a .top-menu < background: white; position: relative; >.top-menu:after, .submenu:after < content: ""; display: table; clear: both; >.top-menu > li < display: inline-block; float: left; >.top-menu > li > a < display: block; padding: 18px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #000; transition: .2s linear; >.top-menu > li > a:hover .dropdown:after < content: "\f107"; font-family: FontAwesome; margin-left: 4px; vertical-align: top; >.submenu, .submenu-standart < border-top: 1px solid #e5e5e5; box-shadow: 0 3px 5px 0 rgba(0,0,0,.07); background: white; padding: 25px 0; position: absolute; top: 100%; left: 0; z-index: 5; opacity: 0; visibility: hidden; transform: translate3d(0,30px,0); transition: .5s ease-out; transform-origin: 0% 0%; >.submenu .submenu-standart < min-width: 200px; padding: 10px 0; >.dropdown-standart .top-menu > li:hover .submenu, .top-menu > li:hover .submenu-standart < opacity: 1; visibility: visible; transform: translate3d(0,0,0); >.submenu > li < float: left; width: calc(100% / 3); padding: 0 18px; border-right: 1px solid #e5e5e5; >.submenu-standart li .submenu > li:last-child .submenu img < display: block; width: 100%; >.submenu li a, .submenu-standart li a < display: block; padding: 5px 0; color: #666; font-size: 13px; >.submenu li .link-image .submenu li a:hover .submenu h3 < font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 400; margin: 10px 0; >.container < max-width: 960px; margin: 0 auto; >.content
Добавим адаптивность для мобильных устройств
@media(max-width:768px) < .top-menu li < width: 100%; height: auto!important; >.top-menu > li .top-menu > li > a .submenu, .submenu-standart < position: relative; display: none; box-shadow: none; padding: 0; background: rgba(0,0,0,.02); >.submenu-standart .submenu > li < border-right: none; border-bottom: 1px solid #e5e5e5; padding: 18px; >.submenu h3 .submenu .image-header .submenu li:last-of-type .top-menu > li:hover .submenu, .top-menu > li:hover .submenu-standart >Активация плагина matchHeight
jQuery(document).ready(function($) < $('.submenu >li').matchHeight(); >);Эффекты для появления мега меню
В приведённом примере меню появляется, скользя снизу-вверх. Чтобы разнообразить свои проекты, можно воспользоваться одним из следующих эффектов:
1. Поворот из глубины экрана
.submenu < border-top: 1px solid #e5e5e5; box-shadow: 0 5px 5px 0 rgba(0,0,0,.05); background: white; padding: 30px 0; position: absolute; top: 100%; left: 0; width: 100%; z-index: 5; opacity: 0; visibility: hidden; transform: perspective(600px) rotateX(-90deg); transform-origin: 0% 0%; transition: .4s ease-in; >.top-menu > li:hover .submenu
2. Скольжение сверху-вниз
.submenu < border-top: 1px solid #e5e5e5; box-shadow: 0 5px 5px 0 rgba(0,0,0,.05); background: white; padding: 30px 0; position: absolute; left: 0; width: 100%; top: -60px; opacity: 0; z-index: -1; transition: .4s cubic-bezier(.6, .04, .98, .335); >.top-menu > li:hover .submenu
3. Скольжение слева-направо
.submenu < border-top: 1px solid #e5e5e5; box-shadow: 0 5px 5px 0 rgba(0,0,0,.05); background: white; padding: 30px 0; position: absolute; width: 100%; top: 100%; left: -60px; opacity: 0; visibility: hidden; z-index: 5; transition: .4s cubic-bezier(.455, .03, .515, .955); >.top-menu > li:hover .submenu
4. Эффект масштабирования
.submenu < border-top: 1px solid #e5e5e5; box-shadow: 0 5px 5px 0 rgba(0,0,0,.05); background: white; padding: 30px 0; position: absolute; width: 100%; top: 100%; left: 0; opacity: 0; z-index: 5; transform: scale3d(0,0,0); transform-origin: top left; transition: .4s cubic-bezier(0.39, 0.575, 0.565, 1); >.top-menu > li:hover .submenu
Создание адаптивного меню
Media queries (медиа-запросы) — часть спецификации CSS3, позволяющая уточнить область действия css-селектора. Представляет собой блок с указанием параметров устройства вывода, таких как: тип, разрешение, ориентация в пространстве. Разработчики могут использовать эти параметры при настройке сайтов для просмотра на различных устройствах — телефонах, планшетах, мониторах. Media queries не поддерживаются в браузере Internet Explorer версии 8 и ниже.
Синтаксис
Например, следующее правило задает стиль для всех устройств кроме принтера (список типов устройств вывода приведен в лабораторной работе № 14).
Медиа-функции задают параметры устройства вывода веб-документа. Стиль будет применяться в том случае, если функция возвращает значение истина.
В данном примере стиль будет применяться в случае альбомной ориентации устройства: width, min-width, max-width Ширина окна браузера или печатной страницы.
В данном примере стиль будет применяться в случае, если ширина окна браузера меньше или равна 480px: height, min-height, max-height Высота окна браузера или печатной страницы.
В данном примере стиль будет применяться в случае, если высота окна браузера превышает или равна 900px: device-width, min-device-width, max-device-width Ширина экрана устройства или печатной страницы.
В данном примере стиль будет применяться в случае, если ширина экрана устройства равна 480px: device-height, min-device-height, max-device-height Высота экрана устройства или печатной страницы.
В данном примере стиль будет применяться в случае, если высота экрана устройства равна 768px:
Для того, чтобы при заданных условиях применялся стиль из определенного файла стилей, следует при подключении связанного стиля указать значение атрибута media тега link :
Создание адаптивного навигационного меню c использованием media queries
Следует создать простое горизонтальное меню (аналогичное задание в лабораторной работе № 6).
При ширине окна браузера менее или равной 600px изменить отображение элементов меню на блочное шириной во всю страницу с помощью мадиа-запроса:
Далее следует настроить параметры форматирования по своему усмотрению.
Задание
- Создайте страницу с тремя блоками. Блоки должны окрашиваться в определенные цвета при изменении ширины окна браузера.
Адаптивная вёрстка: что это такое и как правильно использовать
10-15 лет назад большинство пользователей интернета пользовались компьютерами, а мобильный трафик был маленьким. С активным распространением смартфонов и планшетов появилась необходимость адаптировать контент для удобного просмотра на сенсорных экранах.
В статье разберёмся, какие особенности есть у адаптивной вёрстки, чем она отличается от фиксированной и резиновой и кратко расскажем о 4 инструментах для верстальщиков, которые хотят прокачать навыки.
Что такое адаптивная вёрстка
Во времена, когда о корректном отображении сайта на смартфонах никто не задумывался, использовались разные приёмы адаптации под мобильные устройства. В некоторых случаях у пользователей, заходивших на сайт открывалась так называемая PDA-версия.
Она представляет собой облегчённый шаблон десктопной версии. Пользоваться такой версией проекта относительно удобно, потому что она адаптирована для просмотра на маленьких разрешениях.
Следующий этап развития — мобильная версия. Верстальщики создавали отдельный сайт для сенсорных девайсов. В большинстве случаев она полностью отличалась от десктопа. Поддерживать два ресурса одновременно не всегда выгодно, поэтому поиск решений продолжился.
Сейчас разработчики делают сайты адаптивными. Горизонтальной полосы прокрутки нет и пользователям не надо использовать жесты масштабирования. Контент моментально подстраивается под разрешение экрана и становится доступен для взаимодействия.
Адаптивная вёрстка удобна тем, что не надо создавать отдельный сайт для мобильных пользователей. Часть десктопного контента может быть скрыта, но основные инструменты не будут отличаться.
Для проектов с большим количеством сложных модулей создание адаптивной вёрстки может превратиться в сложное испытание. Нужны отдельные макеты под разные типы устройств и масштабная переработка структуры. На смартфонах с маленьким разрешением экрана полезной площади мало. Приходится либо избавляться от инструментов, либо компоновать их для экономии пространства.
Адаптивный дизайн и вёрстка — идеальное решение для всех сайтов, которые можно переработать для просмотра на устройствах с маленьким разрешением без критического ущерба для возможностей.
Некоторые проекты в стандартном виде будут смотреться на смартфонах очень плохо и пользователи потеряют много инструментов, если будут пользоваться ей. В таком случае стоит честно сказать аудитории, что на сайт лучше заходить с компьютера.
Adaptive вёрстка, как кресло, которое подстраивается под форму тела сидящего. Открываешь сайт с компьютера — пользуешься широкоформатной версией, достаёшь смартфон — контент выглядит немного по-другому, но главные возможности сохраняются.
Раньше верстальщики делили устройства на категории и писали код для каждой группы девайсов. Они учитывали особенности портретной и альбомной ориентации, анализировали популярные разрешения и держали в уме особенности некоторых моделей устройств.
При таком подходе время работы над проектом сильно увеличивается. Даже если надо адаптировать под смартфоны и планшеты сайт на несколько страниц без нестандартных блоков.
Адаптивная вёрстка позволяет сократить время разработки благодаря использованию простых инструментов. Например, можно задать ширину меню в процентах и блок всегда будет находиться по центру. И на десктопах, и на смартфонах ничего не поменяется.
Основа любого контента — изображения. На первых этапах появления адаптивной вёрстки больше всего проблем было с картинками. На помощь приходит CSS свойство max-width, но оно не работает в Internet Explorer.
Сделать картинки адаптивными через указание ширины в процентах можно очень быстро, но вес файла останется прежним. Если он весит несколько мегабайт, то время загрузки страницы на смартфонах увеличится, а при открытии изображения в лайтбоксе всё равно придётся использовать жест масштабирования.
Adaptive вёрстка давно стала привычным решением для адаптации контента под устройства с разными разрешениями экрана, но новичкам на первых этапах будет тяжело постигать базовые основы технологии. С опытом станет легче, но если планируете работать со сложными проектами, придётся часто находить выход из нестандартных ситуаций.
3 основных типа вёрстки
Новички часто путают адаптивную вёрстку с другими видами и не могут понять, в чём разница. Если всерьёз настроены на долгосрочную карьеру HTML-верстальщика, обязательно разберитесь в нюансах и научитесь докапываться до сути.
Кроме адаптивной вёрстки, ещё есть фиксированная и резиновая. Фиксированная вёрстка предполагает одинаковый размер элементов макета на любых разрешениях. Если блоки не помещаются в экран, появляется полоса прокрутки.
В основе резиновой вёрстки лежит масштабирование размера элементов при изменении разрешения. Разработчики задают блокам относительные единицы измерения в процентах.
Адаптивная вёрстка — оптимальный вариант для адаптации контента под разные устройства. Медиа-запросы, которые лежат в основе технологии, меняют масштаб элементов, а CSS свойства дают полную свободу действий.
Относительные единицы измерений — хорошее решение, но в большинстве проектов возникает задача изменить расположение блоков и тогда на помощь приходят медиа-запросы.
Ещё один аргумент в пользу адаптивной вёрстки — упрощённая работа с текстом. Если задать размер абзаца в процентах, размер шрифта не будет автоматически подстраиваться под размер экрана. В таких случаях лучше использовать медиа-запросы и задать значения под конкретный диапазон разрешений.
Многие верстальщики для ускорения создания адаптивной версии используют фреймворки. Самым популярным является Bootstrap, который активно развивается с 2011 года и объединил миллионы энтузиастов.
Адаптивная вёрстка — необходимый навык для всех разработчиков, которые хотят связать свою карьеру с фронтендом. Почти в каждом ТЗ на разработку сайта есть упоминание о создании отзывчивой структуры, которая будет подстраиваться под разные разрешения экранов.
Зачем нужна adaptive вёрстка
Ответ очевиден — чтобы владельцы смартфонов, планшетов и мониторов с разной диагональю могли взаимодействовать с контентом без проблем. И им не приходилось переключаться на десктопную версию, потому что мобильная спроектирована некачественно.
Адаптивными сайтами пользоваться одно удовольствие, если разработчик сделал всё правильно и не забыл, что есть устройства с нестандартными разрешениями. Если на этапе разработки верстальщик исправил критические баги и уделил время отладке, серьёзных проблем с юзабилити не должно быть.
В 2021 году пользователи ожидают, что сайты по умолчанию будут адаптированы для просмотра на любых устройствах. Они могут зайти на него даже с телевизора и с помощью Bluetooth мышки взаимодействовать с контентом.
Если на сайте нет адаптации под смартфоны, он перестаёт существовать для большинства пользователей. Доля мобильного трафика с каждым годом растёт и в последние 5 лет наметился чёткий тренд на mobile-first.
Многие проекты сейчас изначально разрабатываются под смартфоны, а только потом создаётся версия для десктопов. Ещё через 5-10 лет вполне может случиться полный переход на мобильную вёрстку. И тогда десктопную версию сайта вообще перестанут разрабатывать.
Хотя 5-10% аудитории всё равно будут выбирать широкоформатные мониторы. Потому что, десктопная версия в большинстве случаев гораздо удобнее мобильной и помогает экономить время на выполнении стандартных задач.
Одно из главных преимуществ адаптивной вёрстки — бонус при продвижении в поисковых системах. Сайты, которые некорректно отображаются на смартфонах и планшетах, редко получают мобильный трафик. Им приходится рассчитывать только на десктопных пользователей.
Доля мобильного шоппинга тоже растёт. По состоянию на 2019 году, 60% покупок в интернете жители России оформляли со смартфонов. Например, в Китае цифры ещё больше — 80%. Российский рынок e-commerce находится на стадии зарождения, но никто не будет спорить с тем, что будущее за мобильной коммерцией.
Если сравнить адаптивный дизайн с мобильной версией, то первый вариант выигрывает по всем пунктам. Создавать отдельный проект выгодно только в редких случаях. Придётся следить за работоспособностью нескольких сайтов сразу и оперативно исправлять ошибки.
Представьте, что скрипт определения устройств сломается после обновления и мобильные пользователи будут видеть десктопную версию. Они не смогут нормально открыть меню или почитать новости, и большинство откажется от использования сайта.
Адаптивная вёрстка стоит дороже стандартной, но дополнительные расходы надо расценивать, как вклад в будущее проекта. Не надо будет постоянно тратить деньги на доработку сайта для мобильных пользователей. Закрыли задачу один раз и забыли о ней на долгое время до появления изменений в проекте.
Преимущества adaptive вёрстки:
- Улучшение поведенческих факторов. Пользователи смогут взаимодействовать с контентом через смартфоны и планшеты. Если критических проблем не будет, поведенческие факторы точно улучшатся.
- Повышение лояльности аудитории. Эмоции людей напрямую зависят от удобства сайта.
- Бонус в SEO. Тем, кто рассчитывает на бесплатный органический трафик, не обойтись без адаптивного дизайна.
- Можно частично автоматизировать задачу. Время адаптации заметно сокращается благодаря фреймворкам, сервисам тестирования и другим инструментам.
Минусы:
- Повышается стоимость проекта. Для сайтов с нестандартными особенностями адаптация может стоить очень дорого.
- Нужна помощь опытного разработчика. Если проект постоянно дорабатывается, придётся нанимать специалиста в штат или заключать договор на удалённую работу.
- Подходит не для всех проектов. Некоторые сайты сложно адаптировать для мобильных устройств, потому что встроенные инструменты слишком «тяжёлые» и надо будет сильно переработать структуру.
Адаптивная вёрстка уже давно считается привычной техникой создания сайтов. Если хотите стать конкурентоспособным на рынке разработчиков, придётся в совершенстве изучить технологию и пользоваться инструментами автоматизации для экономии времени.
Особенности адаптивной вёрстки
Отзывчивые сайты создаются по своим правилам. Если нарушить хотя бы одно из них, работа будет поставлена под угрозу. Ознакомьтесь с главными особенностями и постарайтесь запомнить их, чтобы не допускать ошибки в процессе решения задач клиентов.
Однородность
Мы уже несколько раз говорили, что адаптивный сайт примерно одинаково выглядит на устройствах с разным разрешением экрана. Часть возможностей с десктопа может быть недоступна на смартфонах, но «фундамент» остаётся на месте.
Мобильная версия должна быть практически идентична с основной, но не стоит жертвовать скоростью загрузки ради интеграции лишних инструментов. Лучше добавить в интерфейсе уведомление, что для использования калькулятора надо открыть сайт на компьютере.
Универсальность
Опытные верстальщики знают, что у разных устройств есть свои особенности. Например, сайт на Android и iOS смартфонах может выглядеть совершенно по-разному. Надо учитывать нюансы и внимательно проанализировать все точки соприкосновения пользователей с интерфейсом.
В процессе обучения адаптивной вёрстке лучше заручиться поддержкой опытного наставника, чтобы быстрее освоить методику и узнать подробности, которые становятся известны только после нескольких тысяч часов активной разработки.
Кроссбраузерность
Некоторые верстальщики ориентируются исключительно на самый популярный браузер Google Chrome и забывают, что есть пользователи, которые принципиально используют Opera, Firefox или Яндекс.Браузер.
Несмотря на то, что почти все они построены на базе Chromium, в каждом браузере есть неподдерживаемые CSS свойства. Например, grid не поддерживается в Opera Mobile, которым активно пользуются владельцы смартфонов.
Медиа-запросы
Это основа адаптивной вёрстки, которая на первый взгляд выглядит максимально простой, но есть неочевидные детали. Медиа-запросы помогают гибко управлять структурой контента в зависимости от разрешения экрана. Можно уменьшить шрифт на смартфонах с дисплеем до 320px или скрыть блок на планшетах.
Медиа-запросы надо правильно использовать и учитывать особенности проекта. Если сайт не предназначен для работы на планшетах, он всё равно должен более-менее корректно отображаться.
Медиаконтент
Верстальщику часто приходится самостоятельно сжимать картинки, чтобы обеспечить быструю загрузку на смартфонах. На помощь приходят автоматизированные сервисы, которые распознают разные форматы файлов и могут выполнить оптимизацию без потери качества.
Всегда уделяйте внимание изображениям, так как они часто являются слабым местом адаптивной версии. Скорость загрузки может сильно пострадать, если уменьшать пропорции картинки на смартфонах, а показываться будет оригинальная версия.
Правильные шрифты
Все шрифты, которые используются на сайте, надо конвертировать в формат, пригодный для использования в вебе. Лучше всего подходит woff, который поддерживают 98% браузеров.
Что касается Google Fonts и других внешних библиотек, по возможности от них стоит отказаться. Когда шрифты лежат на своём сервере загрузка происходит гораздо быстрее и блокирующих запросов в head не будет.
Научиться адаптивной вёрстке вполне реально за несколько месяцев, но чтобы верстать с закрытыми глазами и мастерски оперировать медиа-запросами, понадобятся годы кропотливой работы.
Полезные инструменты для разработчиков
Собрали несколько must have инструментов для верстальщиков, которые выбрали фронтенд и хотят довести свои навыки до совершенства. Используйте их, чтобы сократить время работы над адаптивной версией.
Bootstrap
Бесплатный фреймворк с открытым исходным кодом, который активно используют разработчики по всему миру. Он стабильно обновляется и подходит для разных систем управления контентом.
Bootstrap выступает в роли каркаса для адаптивных сайтов. Разработчикам надо последовательно создать HTML-структуру и присвоить элементам соответствующие классы. После этого на фронтенде появятся блоки с готовым оформлением.
На официальном сайте есть большой набор красивых иконок и готовые платные темы для разных ниш.
Startup
Это визуальный конструктор, который позволяет создавать темы для Bootstrap из готовых блоков. Собираете структуру из подходящих элементов и экспортируете проект на компьютер. На выходе получается готовый сайт с HTML, CSS и JS файлами.
Шаблон будет адаптирован для просмотра на разных устройствах. Конструктор подходит для простых проектов, которые надо быстро реализовать и не заморачиваться с каждым пикселем.
Как обычно, за всё хорошее приходится платить. Минимальный тариф обойдётся в $249 на год. Если заплатить сразу за 12 месяцев, получится сэкономить $99.
Responsinator
Популярный сервис, который показывает отображение сайта на разных устройствах. Идеальное решение для отладки адаптивной версии в процессе разработки. Можно выбрать любой доступный девайс и найти ошибки в вёрстке.
Сервис просто подстраивает сайт под определённое разрешение, а не эмулирует выбранное устройство. Реальная картина на девайсах может слегка отличаться, но в большинстве случаев это не критично.
Caniuse
Сервис, в котором собраны таблицы совместимости разных технологий с популярными браузерами. Можно посмотреть, какой процент браузеров поддерживают, например, CSS свойство sticky или формат шрифта ttf.
Caniuse — незаменимый инструмент для верстальщиков, который отлично помогает всем, кто старается довести вёрстку до идеального состояния по адаптивности и кроссбраузерности.
Создание адаптивной версии сайтов — настоящее искусство, которому надо учиться на практике. Теория помогает прокачать базовые навыки, а работа с клиентскими проектами закаляет и даёт веб-разработчику возможность стать мастером своего дела.
Адаптивная верстка: задачи, преимущества и виды
Адаптивная верстка сайта – это необходимое требование, которому должен отвечать современный веб-ресурс. Доля мобильного траффика растет с каждым годом, поэтому времена, когда сайт разрабатывался только для компьютеров, давно позади. Современность требует соответствия каждому устройству, с которого может зайти посетитель.
Существуют различные подходы к созданию адаптивной верстки. В нашей статье мы расскажем, какие принципы и техники включает в себя этот подход, как можно осуществить такую верстку и разберем типичные ошибки в данной сфере.
Что такое адаптивная верстка
Для поиска нужной информации пользователь применяет не только компьютер или ноутбук, но и телефон или планшет. Поэтому, вне зависимости от устройства, сайт должен отображаться корректно и быть комфортным для просмотра. Сейчас не так уж часто встречаются веб-ресурсы, визуальная передача которых не адаптирована под инструмент просмотра.
Особенно тщательно за этим следят компании, чья деятельность связана с торговлей. Так как если потенциальный покупатель увидит на экране своего смартфона «неудобный» сайт, то он просто закроет его, даже не попытавшись сделать покупку. Именно во избежание подобных ситуаций веб-разработчики уделяют особое внимание адаптивной верстке (mobile friendly).
Когда вы открываете страницу какого-либо сайта на смартфоне, то можете легко понять, адаптирована ли она под ваше устройство. Если приходится «двигать» изображение влево-вправо, чтобы просмотреть контент, то сайт не подвергался оптимизации.
Если адаптивная верстка сайта проведена, то отображение веб-страницы будет изменяться в соответствии с размерами экрана, то есть подстроится под него. При этом отдельные элементы дизайна могут поменять свое положение.
Прежде чем приступать к адаптации сайта, веб-дизайнер создает макет, сохраняющий изначальную концепцию и основную суть. Некоторые элементы, носящие функцию вспомогательных данных или украшающих деталей, допустимо скрыть или удалить вообще. Функционал же адаптивной версии должен быть обязательно выдержан.
Суть процесса адаптивной верстки заключается в проработке параметров контента – как текста, так и картинки. Осуществить процесс адаптации помогают CSS3 и язык разметки HTML5.
Отличия адаптивной верстки от других видов
Как таковых видов верстки может быть несколько:
- фиксированная (статическая);
- резиновая (тянущаяся);
- адаптивная;
- отзывчивая.
Узнай, какие ИТ — профессии
входят в ТОП-30 с доходом
от 210 000 ₽/мес
Павел Симонов
Исполнительный директор Geekbrains
Команда GeekBrains совместно с международными специалистами по развитию карьеры подготовили материалы, которые помогут вам начать путь к профессии мечты.
Подборка содержит только самые востребованные и высокооплачиваемые специальности и направления в IT-сфере. 86% наших учеников с помощью данных материалов определились с карьерной целью на ближайшее будущее!
Скачивайте и используйте уже сегодня:
Павел Симонов
Исполнительный директор Geekbrains
Топ-30 самых востребованных и высокооплачиваемых профессий 2023
Поможет разобраться в актуальной ситуации на рынке труда
Подборка 50+ бесплатных нейросетей для упрощения работы и увеличения заработка
Только проверенные нейросети с доступом из России и свободным использованием
ТОП-100 площадок для поиска работы от GeekBrains
Список проверенных ресурсов реальных вакансий с доходом от 210 000 ₽
Получить подборку бесплатно
Уже скачали 25965
Каждый из видов основан на разных методах и преследует разные цели.
Фиксированный вид верстки «привязывает» сайт к заданной ширине монитора и не меняет ее, то есть не подстраивает под размер экрана.
Если размеры монитора не достаточны для воспроизведения страницы целиком, то появляется полоска прокрутки вверх-вниз. Это затрудняет восприятие, так как текст/картинку не видно полностью, что вызывает раздражение пользователя.
Для устройств с небольшим экраном такой вид верстки не очень удобен. Но зато отлично подходит для сайтов, просматриваемых на больших мониторах (ПК, ноутбук).
Реализация такой верстки происходит с использованием тега body, в котором и прописывается нужный размер ширины width:
При методе резиновой верстки задается интервал значений ширины веб-страницы. Поэтому его еще называют тянущийся или гибкий, так как есть наибольшая и наименьшая величина размера. Например, ширина страницы – min 400 пикселей, а max – 1000. Соответственно, в этих пределах и будет происходить «растяжение» страницы при отображении ее на том или ином устройстве.
Указываются значения наибольшей (max-width) и наименьшей (min-width) ширины. Если есть необходимость, то аналогично указывают интервал и для высоты растяжения: максимальная высота – max-height и минимальная высота – min-height.
Когда производится адаптивная верстка, то теги прописываются таким образом, что при открытии сайта на любом устройстве происходила его подстройка под параметры экрана. Размеры шрифта, декоративные элементы, местоположение некоторых объектов – для всех этих визуальных деталей можно задать настройки, которые позволят сайту в целом выглядеть привлекательно.
Для вас подарок! В свободном доступе до 04.02 —>
Скачайте ТОП-10
бесплатных нейросетей
для программирования
Помогут писать код быстрее на 25%
Чтобы получить подарок, заполните информацию в открывшемся окне
Помимо тегов, для такого типа верстки прописываются и медиа-запросы (@media). Их роль важна для автоматического определения разрешения экрана и распознавания типа устройства. Все это влияет на корректность отображения веб-страницы:
@media all (min-width 400px)
Если перевести вышеуказанные теги в более понятные данные, то они будут таковы: если ширина экрана превышает 1000 пикселей, то размер страницы принимает статическую величину, равную 900 пикселям. Если же ширина меньше 400 пикселей, то страница сжимается до 280 пикселей.
При отзывчивой верстке применяется комбинация резинового и адаптивного метода. Из резинового используется принцип интервала ширины экрана, а из адаптивного – медиазапросы. Такая совокупность двух видов верстки позволяет сайту полностью подстраиваться под любой тип устройства:
@media all (max-width 1000px)
@media all (min-width 400px)
Преимущества сайта с адаптивной версткой
Сейчас больше половины пользователей предпочитают выходить в Интернет с помощью смартфонов или планшетов. Эти устройства не имеют стационарной привязки, главное, чтобы был доступ к Интернету — и можно выходить в сеть в любом удобном месте. Такой тип аудитории интенсивно увеличивается, и ее потребность в просмотре сайта с небольшого экрана необходимо учитывать.
Еще совсем недавно, каких-то 5 лет назад, процент пользователей, выходящих в сеть через гаджеты, был в разы меньше, чем сейчас. Поэтому адаптация сайтов не имела большой значимости. Но сейчас, благодаря популяризации Интернета, адаптивность сайта прорабатывается в первую очередь, и на этом вопросе веб-студии обязательно акцентируют внимание клиента.
Дарим скидку от 60%
на курсы от GeekBrains до 04 февраля
Уже через 9 месяцев сможете устроиться на работу с доходом от 150 000 рублей
- Фактор юзабильности сайта
Интернет-площадки соревнуются друг с другом за внимание пользователей. В свою очередь, посетители сайтов все более придирчиво оценивают дизайн веб-ресурса и удобство взаимодействия с ним. Современная формула привлекательности сайта выглядит так: простота функционала + комфорт нахождения = лояльность пользователя. То есть большее посещение обеспеченно тем сайтам, которые позаботились о своей юзабильности.
Только до 1.02
Скачай подборку материалов, чтобы гарантированно найти работу в IT за 14 дней
Список документов:
ТОП-100 площадок для поиска работы от GeekBrains
20 профессий 2023 года, с доходом от 150 000 рублей
Чек-лист «Как успешно пройти собеседование»
Чтобы зарегистрироваться на бесплатный интенсив и получить в подарок подборку файлов от GeekBrains, заполните информацию в открывшемся окне
Вы и на своем примере можете понять, как сильно раздражают страницы, на которых отражается только часть контента, при просмотре на гаджете. Как только вы видите такие недоработки, то быстро закрываете этот сайт и переходите к другому, более комфортному. Точно так же поступает и подавляющее большинство людей.
Неадаптированные сайты плохо воспринимаются с небольших экранов. Приходится перемещать текст или изображение по монитору, чтобы увидеть его полностью. Часто отдельные элементы наползают друг на друга, что тоже не облегчает процесс ознакомления с информацией. А если говорить о заполнении каких-то форм, то это вообще очень проблематично сделать.
Еще одна проблема, с которой сталкивается неадаптированный сайт – это большой процент отказов и потеря мобильных пользователей. Это влияет на позиции ранжирования. Ведь алгоритмы поисковых систем Google и Яндекса учитывают отказы: чем больше их количество – тем ниже опускается сайт в рейтинге к выдаче.
Кроме того, поисковые системы обращают внимание и на адаптивность сайта. Если она отсутствует, то ресурс будет стремительно терять рейтинг.
Уже с 2018 года поисковые алгоритмы Google при сортировке сайтов к выдаче используют модель индексации Mobile-first. Приоритет в анализировании сначала отдают веб-страницам, способным к демонстрации на мобильных устройствах. Сортировка же сайтов происходит по принципу ранжирования для мобильной выдачи. При этом учитывается идентичность обеих версий – десктопной и мобильной. Само собой, что в эту категорию попадают сайты, прошедшие адаптивную верстку.
Учитывая вышеуказанное правило ранжирования, можно сделать вывод, что при игнорировании мобильно-адаптивной верстки продвижение сайта будет сильно затруднено. Ведь если он не попадает в выдачу при мобильном поиске, то снижается его рейтинг и с ПК становится все сложнее его находить. Если это бизнес-ресурс, то компания теряет целевых потребителей, а, значит, терпит убытки.
Адаптированный сайт увеличивает объем продаж. Это закономерно, так как многие пользователи посещают интернет-магазины, используя смартфоны или планшеты. А если ресурс не удобен в пользовании через мобильный гаджет, то компания не будет иметь приток новых покупателей из числа пользователей таких устройств.
8 принципов адаптивной верстки
При адаптации сайта веб-разработчики стремятся к сохранению исходной концепции, сути проекта и прямого назначения ресурса. Также им необходимо обеспечить функциональность сайта и добавить некоторые особенности, которые позволят в дальнейшем производить подстройку под инструмент воспроизведения.
Популярные статьи
Отображение сайта на экране гаджета должно иметь сходство с отображением на экране ПК. Однако расположение важных элементов должно быть компактным и выстроенным по вертикали, то есть идти потоком сверху вниз.
Необходимо помнить, что одни и те же пиксельные разрешения отображаются неодинаково на разных мониторах – компьютера и, например, айфона. Чтобы избежать недочетов, связанных с этой особенностью, необходимо задавать масштаб и координаты, отталкиваясь от общей для всех экранов точки. На данный момент принято равняться на верхнюю границу монитора.
Чтобы отдельные элементы страницы бесконтрольно не расползались по ней, их привязывают к конкретным объектам, чье положение будет статичным, пока не будет осуществлен вход с другого устройства. То есть эти объекты будут выступать в роли своеобразных узлов, на которые будут ориентированы другие детали.
Для пикселей указывают максимальные и минимальные значения по ширине и высоте. Благодаря этому содержание страницы остается в определенных рамках, которые делают восприятие удобным. Контент занимает часть экрана или весь монитор, но отображается полностью, не растягиваясь.
Если один объект в качестве своих свойств содержит другой объект, то лучше сохранить их взаимосвязь и поместить в общей контейнер, чтобы не тратить время на дополнительные настройки. В роли таких объектов выступают логотипы, кнопки и многие другие детали веб-страницы.
Шрифт допустимо переводить в web-формат, чтобы он, ориентируясь на размеры монитора, автоматически менял свой размер. Но в этом случае для шрифта понадобится время на загрузку. Не все пользователи обладают терпением, чтобы дожидаться момента, когда подгрузится весь контент – адаптивный сайт должен открываться быстро.
Если при наполнении сайта используется графика, то продумайте, по какому принципу ее отображать. Если она содержит мелкие детали, то делайте ее растровой, если нет – то векторной. Также все картинки следует сжать таким образом, чтобы их формат могли поддерживать старые браузеры.
- типы поддерживаемых устройств;
- условия для демонстрации контента.
Для каждого медиазапроса будут использоваться необходимые стили CSS-языка.
Разрешения экранов для адаптивной верстки
При разработке адаптивного сайта веб-дизайнеры учитывают не конечные размеры страницы, а конкретные пределы, превышение которых приводит к изменению формата отображения. Существуют общепринятые размеры для адаптивной верстки:
- для смартфонов — 320 px, 480 px и выше;
- для планшетов — 768 px и выше;
- для нетбуков — 1024 px и выше;
- для мониторов — 1280 px, 1600 px, 1920 px и выше.
При неадаптивной верстке элементы статично привязаны к ширине экрана, именно поэтому они увеличиваются/уменьшаются в размерах или изменяют свое положение. Такое поведение объектов будет напрямую зависеть от типа устройства, с помощью которого открывается сайт.
На сегодняшний день выполнение адаптивной верстки осуществляется с опорой на Mobile First. То есть разработка ведется с ориентацией на мониторы мобильных устройств и только потом дорабатывается настройками под десктопные мониторы.
4 техники адаптивной верстки
- Flexible layout, или гибкий макет
При этой технике происходит переход фиксированных значений в относительные. Для этого используется формула, определяющая процентное соотношение: target ÷ context = result. Другой способ – поделить ширину объекта на ширину экрана. Полученное число равно процентному значению ширины объекта, которое используется для его подстройки под размер экрана гаджета.
Например, полная ширина макета равна 1000 пикселям, но делится на два части: левая шириной 250 пикселей и правая, шириной 530 пикселей. Далее, используя принцип прямой пропорции, получаем 25 % для левой части, 53 % для правой.Использование такого способа создания макета позволяет получить сайт, который автоматически подстраивается под любые размеры экранов.
- Flexible media, или гибкое изображение
Любой вид медиаконтента адаптируют, применяя свойство . Такой подход способствует изменению размеров картинок, видео и прочих видов медиа в соответствии с изменениями ширины экрана.
- Flexible Embedded Media, или гибкое встроенное медиа
Принцип соотношения max-width не даст результатов, если на странице сайта присутствует, например, ролик YouTube, то есть медиаконтент постороннего ресурса. Для корректного отображения подобного встроенного контента его нужно правильно разместить внутри родительского объекта. При этом родительский объект должен иметь параметры: ширина = 100 %, высота = 0. Тогда он будет менять свой масштаб в соответствии с размерами монитора.
Далее нужно задать отступ в нижней области родительского объекта. Чтобы соблюсти пропорциональность высоты и ширины, нужно установить значение отступа согласно соотношению сторон видео.Например, стороны видео соотносятся, как 16:9. Используем формулу процентного соотношения: 9/15=0,5625 или 56,25%.
Этот способ адаптирует сайт таким образом, что он при помощи CSS модуля приобретает способность подстраиваться под различные типы устройств. CSS устанавливает взаимосвязь между разрешением экрана и установленными стилями. Media queries находит широкое применение в мобильной и TV разработках, печати и в таких типах устройств, как 3D-очки.
Применение техники Media queries подразумевает несколько вариантов:
- использование правила @media для уже действующей таблицы стилей;
- использование правила @import для интеграции новой таблицы стилей;
- использование ссылки на таблицу стилей из документа HTML.
Для упрощения действий, чтобы миновать лишние HTTP-запросы, лучше применять правило @media внутри имеющейся таблицы стилей.
2 метода разработки адаптивной верстки
Чтобы разобраться в том, как сделать адаптивную верстку, нужно понимать применяемые для этого процесса технологии: HTML5 и CSS3.
CSS3 — новая технология в оформлении HTML документов, представляющая собой каскадные таблицы 3-го поколения. Созданные с ее применением правила позволяют «вписать» на экран устройства все объекты веб-страницы.
При использовании этого метода появляется возможность задавать такие величины объектов, как нужный размер для конкретного разрешения монитора, процентная доля заполняемого пространства (например, 80 % рабочего пространства экрана) и прочие параметры.
После внедрения этого языка программирования для веб-разработчиков открылась новая возможность в создании элементов, подстраиваемых под заданное разрешение монитора (правило медиазапросов).
Тем, кто приступает к использованию CSS3 технологии, нужно учитывать, что для параметров величин элементов используется процентное соотношение, а не размер в пикселях, что было актуальным для CSS2.
Так как метод HTML5 является языком разметки, то с помощью него задают координаты положения объектов на странице. Созданные посредством CSS3 классы прописываются в тегах HTML. Благодаря этому, элементы подстраиваются под разрешение экрана.
На первом этапе процесса адаптивной верстки нужно создать изображение, которое будет растягиваться в соответствии с размерами монитора.