Адаптивная верстка с нуля: бесплатный видеокурс 8 уроков
Будь вкурсе свежих уроков!
В категории: Курсы Frontend — HTML, CSS и JavaScript
Будь вкурсе самого свежего материала. Где мы отправляем статьи, видео и много чего интересного.
https://youtube.com/watch?v=Yh3XYrbz-S0
https://www. youtube.com/embed/Vb3r7XVTPOc
3 591 просмотр
В данном курсе будет показан более продвинутый процесс вёрстки сайтов с использованием Sass (метаязык на основе CSS). К тому же автор будет использовать GIT (система управления версиями). Вёрстка сайта и написание кода автор будет делать в редакторе VS Code а работа с макетом PSD будет производится в программе Avocode.
Первые 2 урока будут посвящены настройке VS Code и Avocode. С 3 по 9 урок практические занятия, автор на практике будет показывать, как сверстать адаптивный лендинг на примере реального заказа. Цель курса показать упрощённый метод вёрстки адаптивных и современных сайтов.
Что такое адаптивная вёрстка
Простыми словами адаптивная вёрстка (адаптивный дизайн или отзывчивый дизайн) – это подстройка ширины сайта под любые гаджеты, включая ПК, ноутбуки, планшеты и смартфоны. Данная технология позволяет отобразить контент более читабельным на мобильных устройствах. Проще говоря если посмотреть на сайт без адаптивной вёрстки со смартфона или планшета, то текст невозможно прочитать без средств масштабирования.
Когда популярность мобильных устройств возросла, увеличился мобильный трафик, что привело к тому что сайты требовали к себе отзывчивое отображение. Более того, вскоре как мобильный трафик превысил процент заходов с ПК, поисковые системы Google и Яндекс поставили привилегии для сайтов с адаптивной вёрсткой и быстрой загрузкой. Со временем адаптивный дизайн стал важным требованием при разработке сайтов.
Но не стоит так пугаться слова «Технология». В самом процессе вёрстки это лишь установка условий в CSS-коде, которые активируются и применяют нужные свойства если браузер достигает определённой ширины или высоты. В исходном варианте мы получаем несколько условий под разные размеры экранов и гаджеты.
Адаптивная вёрстка с технической точки зрения
Сама вёрстка начинается с максимального расширения экрана – 1920х1080px. Когда сайт полностью свёрстан, начинается подгонка под различные расширения экрана, в этом вам может помочь браузер Google Chrome. В данном браузере существует консоль, которая помогает отследить как визуально выглядит сайт на различных размерах экрана. Достаточно нажать клавишу на клавиатуре F12, либо нажать правой кнопкой мыши на нужный элемент и выбрать «Просмотреть код» и браузер выведет HTML-разметку и CSS-свойства элементов.
Во многих современных браузерах есть консоль для просмотра кода, где вы в режиме реального времени можете изменить любые стили CSS или HTML-разметку. Браузер Chrome и Яндекс.Браузер предлагает широкий набор для разработчиков, к примеру, можно найти ошибки в JS-коде или найти нужный фрагмент HTML-разметки.
Метатег viewport для адаптивной вёрстки
Пример метатега, который адаптирует сайт под мобильную вёрстку:
Данный тег ставиться внутри тега <head></head> где содержаться заголовки HTML страницы. Основные настройки хранятся внутри атрибута content, где width определяет до какой ширины будет сужаться сайт, например width=768px означает что весь контент сайта будет сжиматься до 768px, но в случае если один из элементов будет шириной к примеру 1200px, то при ширине окна 768px мы увидим горизонтальную полосу прокрутки. width=device-width – означает что сайт будет автоматический подстраивается под ширину окна браузера.
Суть этого кода в том, что если ширина браузера достигнет 1200px и меньше, тогда размер шрифта всего сайта будет ровняться 14px. Данную конструкцию зачастую ставят после всех свойств, чтобы данные свойства перезаписали уже существующие.
Вы можете поделиться или сохранить для себя этот урок в социальных сетях:
Оставьте свой отзыв, для улучшения качества. Сейчас: 0 отзывов
Адаптивный дизайн и верстка сайта на видеокурсе от Loftblog
Учение — не только свет, по народной пословице, — оно также и свобода. Ничто так не освобождает человека, как знание… Тургенев И. С.
Добро пожаловать на наш видеокурс, посвященный очень актуальной на сегодняшний день теме — адаптивной верстке сайтов. В наш век мобильных устройств, когда практически у каждого человека, находящегося в сознательном возрасте, есть планшет, мобильный телефон и прочие мобильные чудеса современной цивилизации, с помощью которых можно бродить по лабиринтам всемирной паутины, создание сайтов, которые будут одинаково хорошо отображаться на устройствах с различным разрешением экрана, стало необходимостью.
Три кита адаптивного дизайна
На первом вводном видеоуроке мы поговорим о самом понятии адаптивной верстки и дизайна, узнаем, из чего он состоит и что подразумевается под каждой из его частей.
Итак, адаптивный дизайн держится на трех китах: отзывчивом дизайне (Responsive design), Progressive Enhancement и Mobile first.
Отзывчивый дизайн, или Responsive design
Первый раз термин «отзывчивый дизайн» был упомянут Итаном Маркотом в его статье в мае 2010 г. Само это понятие включает в себя три технологии. Первая из них — Fluid grid (гибкая сетка макета), вторая технология — Flexible Media (весь медиа-контент сайта), и последняя из рассматриваемых технологий отзывчивого дизайна — это Media queiries (медиа-запросы). Все они будут подробно разобраны на следующих видеоуроках нашего курса.
Progressive Enhancement и Graceful degradation
Право авторства такого понятия адаптивного дизайна, как Progressive Enhancement принадлежит известному разработчику Арону Густафсону, который впервые ввел этот термин в своей книге. Под Progressive Enhancement подразумевается постепенное улучшение, когда верстка проекта начинается с самого простого к более сложному, современному, чтобы сайт мог корректно отображаться при помощи самого старого, но еще используемого браузера.
Подход к началу верстки проектов — есть главное отличие этой технологии от другой, совершенно противоположной — Graceful degradation (изящная деградация). При такой верстке разработка проектов идет от самого сложного. навороченного к простому.
Mobile first
Последняя технология, входящая в состав адаптивного дизайна — это Mobile first. Под ней понимается первоочередная разработка проектов для мобильных устройств, а затем уже для стационарных.
Таким образом, на видеоуроке вам станет известно, из чего состоит адаптивная верстка. На полученные на этом занятии знания вы будете опираться при просмотре дальнейших видеоуроков.
Приятного всем просмотра! Учитесь с удовольствием! Всегда ваш Loftblog.
Рекомендуемые курсы
30 уроков по созданию веб-сайта: от дизайна до верстки
Подробный курс, который расскажет обо всех этапах создания сайта: начиная с дизайна в Photoshop, заканчивая его версткой и внедрением CMS.
Эти уроки будут полезны для начинающих дизайнеров: поможет понять не только принципы “чистого” дизайна, но и нюансы подготовки макета для верстки.
Урок #1: Скетч
Урок #2: Скетч (Продолжение)
Урок #3: Заканчиваем создание скетча
Урок #4: Дизайн шапки
Урок #5: Дизайн первой секции
Урок #6: Дизайн второй секции
Урок #7: Дизайн третьей секции
Урок #8: Дизайн четвертой секции
Урок #9: Дизайн шестой и седьмой секций
Урок #10: Дизайн секций “Отзывы”, “Контакты” и подвала
Урок #26: Верстка. Футер, всплывающие формы, кнопка «Наверх»
Урок #27. MODx + Gulp: Интеграция и настройка окружения Gulp
Урок #28.
Приступаем к посадке HTML верстки на MODx. Шаблоны и чанки
Урок #29. Посадка HTML верстки шапки на MODx
Урок #30. Посадка секции тизеров на MODx
Фото на обложке: ShutterStock
верстка под любой экран — учебник CSS
Сегодня все реже и реже можно встретить новый веб-сайт, который бы не имел адаптивного дизайна либо мобильной версии, предназначенной специально для мобильных девайсов. При помощи CSS можно легко создать дизайн, который будет подстраиваться под устройства с любой шириной экрана. Используя специальные правила, вы можете определить внешний вид веб-страницы в зависимости от ширины окна браузера.
Как правило, полноценная версия сайта выглядит странно на обычном смартфоне. Чтобы рассмотреть текст, пользователю приходится пользоваться увеличением и горизонтальной прокруткой. С другой стороны, сайт в виде одной узкой колонки будет выглядеть еще более странно на широком компьютерном мониторе.
Адаптивный веб-дизайн (англ. responsive web design, RWD) — это подход к созданию веб-страниц, при котором их внешний вид определяется через CSS, основываясь на ширине окна браузера. Это позволяет обеспечить удобный дизайн для любого устройства, без необходимости создания нескольких разных сайтов.
CSS-инструменты для адаптивного дизайна
В адаптивном веб-дизайне используются гибкие grid-системы, масштабируемые изображения и специальные медиа-запросы CSS (некоторые из них мы уже использовали в практических уроках учебника).
Гибкая сетка жизненно необходима, поскольку в нашем мире существует огромное количество устройств, и каждое со своим размером дисплея. Потому просто невозможно создать фиксированный размер макета, который бы красиво вписался в экран любой ширины. Нужна разметка, которая может расширяться и сужаться (вместе с контентом), подстраиваясь под экран конкретного устройства.
Медиа-запросы — это CSS-технология, которая позволяет определять условия для отображения тех или иных стилей. К примеру, вы можете задать один набор CSS-правил для экранов шириной менее 768 пикселей, второй — для ширины более 991 пикселей и т. д.
Также через медиа-запросы можно определять тип устройства (экран монитора, принтер, речевой синтезатор), соотношение сторон экрана, ориентацию (альбомная или книжная), разрешение дисплея и многое другое. Всё это дает возможность создавать специфичные стили, учитывая множество нюансов.
Настройки для адаптивного дизайна
Когда на мобильном устройстве просматривается сайт без адаптивного дизайна, браузер полностью помещает его в ширину экрана. При этом он выглядит, как на иллюстрации слева:
Источник: developers.google.com
Это называется уменьшением масштаба страницы, и именно таким образом браузер отображает неадаптивные сайты. Чтобы воспользоваться таким сайтом, пользователю придется увеличивать масштаб вручную, а также прокручивать страницу по горизонтали.
Если же дизайн вашего сайта адаптивен, вам необходимо дополнительно сообщить об этом браузеру. Делается это легко — просто добавьте внутрь тегаследующую строку:
Данный мета-тег говорит браузеру, что ширина контента должна быть равна ширине экрана браузера, которая в свою очередь равна ширине экрана устройства, с которого просматривается веб-страница. Initial-scale контролирует уровень масштабирования при загрузке страницы.
К слову, указание этого мета-тега важно и для Google: при его отсутствии система не будет воспринимать веб-страницу как ту, что адаптирована под мобильные устройства.
Далее в учебнике: медиа-запросы CSS.
Адаптивный дизайн: паттерны для новичков
Сегодня мы поговорим об одном из самых непростых аспектов дизайна — адаптиве.
С появлением миниатюрных веб-браузеров, которые помещаются в карман (речь о телефонах, кто не понял), весь процесс создания макетов усложнился в ДЕСЯТКИ РАЗ. Раньше можно было сделать одну статичную картинку в Photoshop, экспортировать её и отправить разработчикам, а что теперь..? Две картинки? Три? Четыре? Сколько их нужно? Или, может быть, нам вообще нужны не наборы статичных картинок, а что-то более гибкое? Агхх, кто-нибудь знает какие-нибудь инструменты для прототипирования?
и извечный вопрос: ДОЛЖНЫ ЛИ ДИЗАЙНЕРЫ УМЕТЬ КОДИТЬ?!
Над этой проблемой бились наши лучшие умы — и в итоге они нашли решение для работы с огромным множеством конфигураций экранов. Говорят, нужно вернуться к инструменту, которым лет сто назад пользовались дизайнеры постеров, — к сетке! Я уже жаловался вам на сетки (и советовал, чем заняться вместо работы с ними). Не вижу смысла здесь снова поднимать эту тему. Вместо того, чтобы хайповать на «адаптивных сетках», я предложу вам выполнить два действия:
Познакомьтесь с парочкой паттернов для адаптивных контейнеров…
А потом прислушайтесь к тому, чего хочет от вас контент.
Звучит неплохо, а? Давайте начнём. Перед вами четыре самых полезных паттерна для адаптивных контейнеров из тех, что я знаю. Конечно, только ими вы не обойдетесь. Но это лучшее, с чего можно начать. Вместе эти паттерны создают основу (фреймворк), которая позволяет отследить поведение адаптивного веба; и увидев его, развидеть уже будет нельзя.
1/ Контейнеры с фиксированной шириной
Это самый простой «адаптивный» паттерн, поскольку при изменении размера экрана он, по сути, остаётся прежним (другими словами, не адаптируется). Некоторые элементы не меняются совсем, по крайней мере когда всё остальное вокруг них увеличивается или уменьшается.
Обратите внимание на боковое меню в приложении курса Learn UI Design:
Видите, что с ним происходит, когда меняется размер экрана?
Подсказка: да ВООБЩЕ НИЧЕГО.
Ну ладно, если экран будет очень узким, от бокового меню останется только одна иконка, остальное спрячется. Но если для бокового меню достаточно места, оно не станет менять свой размер.
А теперь вопрос: почему?
И ответ: потому что так хочет контент. Боковое меню будет выглядеть капец как странно, если заставить его расширяться вместе со всеми остальными элементами (как в макетах, построенных на процентном соотношении, какие можно сделать в Bootstrap).
No bueno, друзья мои.
Это сбивает с толку в том числе и моих студентов. По мнению дизайнеров в интернетах, сетки важны. Даже очень. «Рассчитайте сетку ещё перед началом работы над макетом», — говорят они. Но если у нас есть боковое меню, что тогда? Быть паиньками и его тоже выравнивать по сетке?
Но что будет, если ширина нашего экрана — а за ним и ширина колонок —увеличится?! Мы уже видели, к чему это приводит…
Безусловно, пользуйтесь сеткой, если она помогает вам выравнивать элементы. Но по большей части, вы прекрасно обойдётесь всего несколькими линейками, чтобы сделать выравнивание по трем параметрам:
Границы элементов
Поля внутри элементов (на картинке ниже установлено по 20px внутри каждого участка)
Любые центральные линии, которые могут пригодится
Как здесь:
Ну вот и всё. Простейший адаптивный контейнер… не сможет сделать ничего. Ну или, в лучшем случае, он вообще пропадёт на маленьких экранах.
Паттерн с фиксированной шириной:
Для узких экранов: установите определенную ширину (или переместите элемент в отдельное окно)
Для средних экранов: используйте ту же ширину
Для больших экранов: снова, используйте ту же ширину
Думаю, теперь можно дать вам кое-что посложнее 😉
2/ Гибкие контейнеры
Контейнеры без ограничений по ширине увеличиваются вслед за экраном, каким бы большим он ни стал. Обычно такое случается с фоновыми изображениями:
…или с блоками верхней навигации, или если экран поделён на области:
Я использую фразу «с неограниченной шириной», чтобы подчеркнуть, что, даже если размер вашего экрана уйдёт в бесконечность, эти элементы последуют его примеру. Потеряют ли изображения чёткость? Конечно. Уедут ли некоторые элементы за сотни и тысячи пикселей друг от друга? Возможно. Подержите эту мысль в голове, пока я не расскажу вам про следующий паттерн.
Кстати, вопрос: зачем нужен паттерн с неограниченной шириной? Повторяйте за мной: потому что так хочет контент.
Некоторые элементы (в частности, те, которые разбивают экран на области) требуют любой ценой быть по ширине экрана, в противном случае смотреться они будут неуклюже.
Я тут поигрался с версткой, пытаясь поменять настройки фона главной сайта Stripe. Всё, что можно здесь назвать «фоном», после моих действий выглядит капец как странно.
Паттерн с неограниченной широтой
На узком экране: элемент занимает 100% пространства
На среднем экране: всё ещё 100 % пространства
На широком экране: и всё равно 100% пространства
Любопытно, но паттерн с неограниченной шириной не является ни самым распространённым, ни самым эффективным паттерном для контейнера. Но он невероятно эффективен в паре с третьим паттерном.
3/ Контейнеры с максимальной шириной
Максимальная ширина — скелет в шкафу хороших макетов адаптивного дизайна. Уважаемые представители дизайнерского сообщества, пожалуйста, начните поклоняться контейнерам с максимальной шириной, так же как своим сеткам, и тогда все будет шикарно.
Именно этим паттерном я пользовался чаще остальных, чтобы определить поведение для моих макетов. И такие паттерны у вас перед глазами всё время.
И снова сайт Stripe, потому что … ну а почему нет?
… или если у вас здоровенный монитор, откройте Facebook, вы увидите паттерн с максимальной шириной во всей своей красе.
Да, я пользуюсь adblocker, чтобы не видеть свою новостную ленту. Поверьте, если вдруг я знаком с вами лично, это ещё не значит, что мне интересно читать ваши мнения. Не для этого ли придумали рассылку по почте?
Окей, я переборщил с описанием картинки выше. Зато я нашёл пример со всеми паттернами, о которых говорил! И в этом-то вся суть… в переплетении всех паттернов. Кто-то будет разглядывать ваш дизайн на невообразимого размера мониторе, а кто-то — на своих часах, но вы итак это уже знаете.
К счастью, активное использование контейнеров с максимальной шириной на основе контейнеров с неограниченной шириной должно здорово вам подсобить. Ах да, и ещё один небольшой урок — возможно, это и так очевидно, но всё же: совершенно НЕОБЯЗАТЕЛЬНО заполнять контентом весь макет! Достаточно установить максимальную ширину для определённых элементов.
Восхитительный паттерн на сайте Stripe.
Ваш контент может занимать ровно столько места, сколько нужно вам. И даже если Bootstrap дал вам 12 колонок, это ещё не значит, что нужно все их заполнять.Позволяя контенту самому определить, какая ширина ему подойдёт, вы, на самом деле, привлекаете к нему внимание.
Помните, когда вы впервые увидели вот это? (ну или как там эта страница раньше выглядела?)
Даже не говорите, какой я старикан.
И вот, взгляните. Даже в статическом изображении на Google.com вы можете увидеть адаптивные паттерны, которые помогли придумать итоговый результат.
Зачастую интерактивный контент располагают в контейнере с максимальной шириной на основе контейнера с неограниченной шириной. Ссылки во всех четырех углах останутся на месте, как сильно бы не расширялся экран. Причина же в том, что эти ссылки — просто заметки на полях страницы, а не основные элементы.
Ещё заметка: страница Google на среднем экране уже выглядит странно, а для мобильных устройств предусмотрена совершенно другая версия сайта. Тем не менее, если вы воспользуетесь этими паттернами для адаптивных контейнеров, то увидите, как всё больше и больше отпадает необходимость в создании отдельной мобильной версии.
Паттерн с максимальной шириной
На маленьких экранах: элементы (возможно) занимают все пространство
На средних экранах: теперь занимаемое пространство зафиксировано
На больших экранах: и снова занимаемое пространство зафиксировано
Хороший совет: ставьте по умолчанию ширину отступов на 0. Можете не благодарить.
Существуют и другие паттерны для контейнеров, но те, что я перечислил — самые важные. Если вам пришлись по душе эти мои стенания, то милости прошу на Learn UI Design, потому что там, как водится, собран целый курс.
4/Брейкпоинты, определяемые контентом
Главный адаптивный приём — установка брейкпоинтов, определяемых вашим контентом, а не своенравными размерами девайса.
Брейкпоинт — это ширина, при которой ваш макет меняется полностью и сразу, а не постепенно.
Я знаю, знаю. В каждой дизайн-системе уже установлены свои брейкпоинты в соответствии со старыми размерами экранов iPhone. Это тяжёлая борьба, но золотым правилом для вас должны стать мудрые слова Стефана Хея (Stephen Hay): «начните с маленького экрана и расширяйте его. Как только макет станет выглядеть хреново — время для брейкпоинта!»
Вот как работает навигационное меню на сайте Stripe:
Означает ли это, что разработчикам придется жонглировать большим количеством мультимедийных запросов? Да, к сожалению так. Поэтому и их упрямство мне понятно. Но каждый раз, когда у вас спрашивают: «Эй, а где бы нам определить брейкпоинты?», отвечайте: «Где этого хочет контент, тупица» — и бейте по щам.
Эм… Ну вы поняли 😉
Адаптивный дизайн в Sketch — Часть 1
С последней версией Sketch (v.44) функция изменения размера группы была обновлена. Несмотря на то, что фундаментальных изменений нет, у нас появилось немного больше контроля над этой функцией.
Я уже подробно писал об этой функции ранее. В этой статье я рассмотрю обновления и дам несколько новых советов. В следующей части этой статьи, я сравню функцию изменения размера групп с плагином Auto-layout от Anima.
Кратко о функции изменения размера группы
Прежде чем приступить к разбору изменений, я хочу быстро объяснить новичкам, что такое функция изменения размера группы.
Это функция создания слоев, реагирующих на изменение размера родительской группы или артборда. Таким образом, когда вы изменяете размеры групп, и все слои внутри них будут реагировать так, как должны, а не просто растягиваться и, следовательно, деформироваться.
Что изменилось?
Что касается возможностей, то мы получили не так много изменений, которые могли бы существенно повлиять на результат. Теперь у нас есть больше контроля над деталями, например, привязка слоя к любой стороне по желанию. С другой стороны, элементы управления могут выглядеть менее понятными для пользователей, впервые работающих в программе, особенно при настройке режимов floating и растяжения. Но не беспокойтесь, их легко понять!
Я могу сказать, что вы могли делать большинство этих вещей и в предыдущей версии программы. Возможно, это требовало некоторых хаков, таких как использование невидимых слоев, но вы все же могли это сделать. Поэтому это обновление не следует рассматривать как важное продвижение функций адаптивного дизайна. Так и должно было быть изначально.
Яркий пример раскрывающий большинство возможностей
Наиболее важная деталь в этом примере – группа галереи в нижней части. Чтобы выполнить этот макет сетки, вам нужно использовать невидимые слои в группе. В противном случае пробел между сетками будет расти или уменьшаться при изменении размера.
Я сделал таблицу, описывающую некоторые случаи, и показывающую соответствующие настройки в предыдущей версии программы. Конечно, некоторые из них не могли быть применимы в предыдущей версии, так как вы не можете выбрать несколько параметров одновременно.
Советы и хитрости
1. Быстрое прикрепление ко всем сторонам
2. Сброс настроек изменения размера группы
3. Как изменить размер групп, содержащих текст
Для изменений текста, которые приводят к росту по вертикали, вы можете использовать математическую функцию ввода Sketch и значение высоты строки метки. Просто выберите группу и измените высоту на 241 + 24 * 2 и нажмите enter. 241 – это текущая высота, 24 – высота строки, а 2 – новое количество строк – да, вам нужно посчитать! Sketch будет вычислять результат и задавать высоту группы для корректировки значения.
Для текстовых изменений, которые вызывают рост по горизонтали, например, кнопки, вы можете использовать плагин Sketch под названием Relabel (с плагином Runner это будет более эффективным).
Я надеюсь, что функция автоматического изменения размера скоро появится, потому что вычисление размеров вручную кажется устаревшим!
4. Изучение функции “Авто выравнивание слоя” в символах
В символах имеется небольшая дополнительная функция адаптивного дизайна, которая упрощает изменение размеров символов. Когда вы переписываете текст в экземпляре символа, Sketch автоматически перемещает любой из слоев, расположенных вблизи этого текстового слоя.
Эта функция работает в зависимости от плотности (closeness) и размера (size) слоя. Поэтому, если вам интересно, почему это не работает в вашем случае, вы должны проверить эти значения.
Критика
Прошел почти год с тех пор, как была введена функция изменения размера группы. Это был правильный и необходимый шаг. Но это обновление — это то, как эта функция должна была работать изначально. Поэтому я ожидал значительного улучшения вместо простого исправления. При этом не были добавлены очень необходимые функции, такие как: занесение в стеки, автоматическое изменение размера, привязка слоя к слою, сетки и макеты.
Я думаю, что есть что-то очень важное, к чему компания Bohemian Coding не была достаточно внимательна – изменения рабочего процесса. Медленные и не продуманные обновления некоторых ключевых функций заставили дизайнеров найти временные неустойчивые рабочие процессы. Особенно в стилях слоев и функциях символов. Нехорошо подталкивать дизайнеров и команды к тому, чтобы настраивать вещи с нуля и часто адаптироваться к ним. Я думаю, что это действительно раздражает.
В целом, я думаю, что у компании Bohemian Coding должна быть лучшая дорожная картаи она должнабыть более осторожной при разработке ключевых функций. Мы любим Sketchи мы хотим,чтобы он был лучшим!
Что дальше?
В следующей части этой статьи я рассмотрю плагин Auto–layoutот Anima. Он имеет больше возможностей, а также выглядит более удобным. Вы также можете использовать их вместе, поэтому я подробно все разберу и предоставлю выбирать вам самим.
FAQ и лучшие практики по реализации адаптивного веб-дизайна
Google официально объявил адаптивный веб-дизайн приоритетным инструментом для создания мобильных версий сайтов. Если у вас есть сайт или блог, пора серьёзно задуматься о переходе на адаптивный дизайн вместо того, чтобы поддерживать разные версии сайта для телефонов и планшетов.
Если вы ещё не особо знакомы с концепцией адаптивного дизайна, у вас могут возникнуть различные вопросы, на которые мы уже подготовили ответы.
Почему я должен переходить на адаптивный дизайн?
Ваш сайт может прекрасно выглядеть на мониторе компьютера, но его вид может значительно отличаться на экранах телефонов и планшетов. При переходе на адаптивный дизайн сайт будет выглядеть одинаково хорошо на любых экранах.
Благодаря этой технологии вы можете разработать лишь одну версию дизайна, которая будет автоматически адаптироваться под размер экрана устройства. У такого подхода есть сразу несколько преимуществ:
Вы экономите время и деньги, поскольку вам не нужно поддерживать несколько сайтов отдельно для экранов компьютера и для экранов мобильных телефонов.
Благодаря адаптивному дизайну вырастет поисковая оптимизация сайта (SEO), поскольку у каждой страницы будет один и тот же URL. Вам не нужно будет беспокоиться о том, что некоторые ссылки будут вести на мобильную версию сайта, а другие — на десктопную.
В отчётах Google Analytics показатели сайта будут выше, поскольку результаты запросов с мобильных телефонов и с ПК будут синхронизированы.
То же самое касается статистики распространения в соцсетях (лайки в фейсбуке, твиты и т.п.), так как у мобильной и десктопной версии сайтов будет одинаковый URL.
Сайты с адаптивным дизайном гораздо легче поддерживать, поскольку они не требуют каких-либо серверных компонентов. Нужно лишь модифицировать базовые CSS-стили страницы для изменения внешнего вида (или положения на странице) в зависимости от конкретного устройства.
Что нужно знать перед началом работы с адаптивным дизайном?
Адаптивный дизайн использует чистый HTML и CSS. Вы задаёте правила в CSS, которые меняют стиль в зависимости от размера экрана устройства пользователя.
Например, вы можете написать правило, по которому при размере экрана менее 320px не будет показываться боковая панель, или при размере экрана более 1920px (широкоэкранный монитор) размер шрифта основного текста будет увеличен до 15px.
Как можно узнать, был ли использован адаптивный дизайн для отдельно взятого сайта?
Всё просто. Откройте этот сайт в любом браузере и измените размер. Если вид веб-страницы меняется, значит, был использован адаптивный дизайн.
Если я перейду на адаптивный дизайн, будет ли мой сайт отображаться в более ранних версиях браузера?
В большинстве случаев — будет. В адаптивном дизайне используются медиазапросы CSS3 и HTML5 (для улучшенной семантики), которые не поддерживаются в более старых версиях IE. Однако можно найти выход, используя решения JavaScript — respond.js и другие средства модернизации, которые адаптируют CSS3 и HTML5 под более старые версии, включая IE6.
Не мешает ли адаптивный дизайн отображению рекламных блоков, например, в Google AdSense?
Если на вашем сайте присутствуют рекламные объявления, вам нужно особенно внимательно подходить к выбору их форматов, потому что широкие блоки (например, баннеры размером 728×60 px) могут не помещаться на экране телефона размером 320px. Мы предпочитаем использовать стандартные прямоугольные блоки (например, 300×250), поскольку они легко подстраиваются как под экраны мобильных устройств, так и под мониторы ПК.
Существуют тысячи различных мобильных устройств. Какие разрешения экрана должен поддерживать сайт с адаптивным дизайном?
Мы бы посоветовали задать как минимум следующие параметры разрешений для медиазапросов в CSS3: 320px (iPhone, ландшафтный режим), 480px (iPhone, портретный режим), 600px (планшеты Android), 768px (iPad и планшеты Galaxy Tab) и 1024px (ландшафтный режим iPad и рабочий стол ПК).
Как мне начать работать с адаптивным веб-дизайном? Есть ли какие-нибудь хорошие туториалы?
Ниже представлены онлайн-ресурсы, которые помогут вам разобраться.
Есть ли какие-то недостатки в использовании адаптивного дизайна?
Лишние килобайты на веб-странице, поскольку нужно будет загружать CSS стили и файлы JavaScript, которые в других случаях не нужны.
Изображения. В адаптивном веб-дизайне сложно добиться размещения изображений в высоком разрешении на мобильной версии сайта (если только вы не используете обходные серверные решения наподобие Adaptive Images или Sencha).
Чтобы добавить адаптивность к существующему сайту, придётся потрудиться. Иногда проще заново создать сайт, чем переделать его под адаптивный дизайн.
Если вас заинтересовала эта тема, вы можете узнать о ней поподробнее в нашем материале, где она разбирается более подробно.
Перевод статьи «Best Practices of Responsive Web Design»
Учебник по адаптивному дизайну — Изучите адаптивный веб-дизайн за 5 минут
В этой статье я научу вас как можно большему количеству приемов адаптивного дизайна за пять минут. Этого явно недостаточно для правильного изучения, но он даст вам обзор наиболее важных концепций, которые я лично определяю как следующие:
Относительные единицы CSS
Медиа-запросы
Flexbox
Адаптивная типографика
Если после этого вы захотите глубже погрузиться в тему, вы можете посетить наш учебный курс для адаптивных веб-разработчиков на Scrimba, который позволит вам создавать адаптивные веб-сайты на профессиональном уровне.
А пока начнем с основ!
Относительные единицы CSS
В основе адаптивного веб-дизайна лежат относительные единицы CSS. Это единицы, которые получают свою ценность от некоторой другой внешней ценности. Это удобно, поскольку позволяет, например, определять ширину изображения в зависимости от ширины браузера.
Наиболее распространенными являются:
В этой статье мы начнем с процентной единицы % , а затем в последнем разделе мы рассмотрим единицу rem .
Допустим, у вас очень простой веб-сайт, например:
Его HTML-код выглядит следующим образом:
Добро пожаловать на мой сайт
Как видно из GIF ниже, наше изображение по умолчанию будет иметь фиксированную ширину:
Это не особенно отзывчиво, поэтому давайте изменим это значение на 70 процентов. Мы просто сделаем следующее:
.myImg {
ширина: 70%;
}
Устанавливает ширину изображения на 70 процентов от ширины его родительского тега .Поскольку тег занимает всю ширину экрана, изображение всегда будет занимать 70 процентов экрана.
Вот результат:
И вот насколько легко создать адаптивное изображение!
Однако у нас есть одна проблема с нашим адаптивным макетом: он выглядит странно на очень маленьких экранах. Ширина 70% предназначена для сужения при просмотре на мобильном устройстве. Просто посмотрите сами:
Сделать это лучше в этой ситуации — идеальная задача для медиа-запросов.Они позволяют применять различные стили, например, в зависимости от ширины экрана. Мы можем в основном сказать , если ширина экрана меньше 768 пикселей, используйте другой стиль.
Этот блок CSS будет применяться только в том случае, если ширина экрана меньше 768 пикселей.
Вот результат:
Как видите, на странице есть точка останова, при которой изображение внезапно становится шире.Это когда браузер имеет ширину 768 пикселей, а изображение переключается между 70% и 100% .
Использование Flexbox для панели навигации
Далее идет Flexbox. Вы просто не сможете узнать о быстродействии, не изучив Flexbox. Он изменил игру с адаптивным дизайном, когда она была представлена несколько лет назад, поскольку она значительно упрощает адаптивное позиционирование элементов вдоль оси.
Чтобы использовать Flexbox, мы немного усложним наш сайт, добавив панель навигации над заголовком.Вот HTML для этого:
По умолчанию это будет просто выглядеть так.
Все наши элементы навигации втиснуты в левую часть, а это не то, что нам нужно. Мы хотим, чтобы они были равномерно распределены по всей странице.
Для этого мы просто превратим контейнер навигации в гибкий бокс, а затем воспользуемся волшебным свойством justify-content .
nav {
дисплей: гибкий;
justify-content: пространство вокруг;
}
youtube.com/embed/Vb3r7XVTPOc
Проще говоря если посмотреть на сайт без адаптивной вёрстки со смартфона или планшета, то текст невозможно прочитать без средств масштабирования.
В данном браузере существует консоль, которая помогает отследить как визуально выглядит сайт на различных размерах экрана. Достаточно нажать клавишу на клавиатуре F12, либо нажать правой кнопкой мыши на нужный элемент и выбрать «Просмотреть код» и браузер выведет HTML-разметку и CSS-свойства элементов.
width=device-width – означает что сайт будет автоматический подстраивается под ширину окна браузера.
В наш век мобильных устройств, когда практически у каждого человека, находящегося в сознательном возрасте, есть планшет, мобильный телефон и прочие мобильные чудеса современной цивилизации, с помощью которых можно бродить по лабиринтам всемирной паутины, создание сайтов, которые будут одинаково хорошо отображаться на устройствах с различным разрешением экрана, стало необходимостью.
Первая из них — Fluid grid (гибкая сетка макета), вторая технология — Flexible Media (весь медиа-контент сайта), и последняя из рассматриваемых технологий отзывчивого дизайна — это Media queiries (медиа-запросы). Все они будут подробно разобраны на следующих видеоуроках нашего курса.
навороченного к простому.
Плавная pop-up галерея (Magnific-Popup)
Приступаем к посадке HTML верстки на MODx. Шаблоны и чанки
При помощи CSS можно легко создать дизайн, который будет подстраиваться под устройства с любой шириной экрана. Используя специальные правила, вы можете определить внешний вид веб-страницы в зависимости от ширины окна браузера.
При этом он выглядит, как на иллюстрации слева:
Говорят, нужно вернуться к инструменту, которым лет сто назад пользовались дизайнеры постеров, — к сетке! Я уже жаловался вам на сетки (и советовал, чем заняться вместо работы с ними). Не вижу смысла здесь снова поднимать эту тему. Вместо того, чтобы хайповать на «адаптивных сетках», я предложу вам выполнить два действия:
Некоторые элементы не меняются совсем, по крайней мере когда всё остальное вокруг них увеличивается или уменьшается.
По мнению дизайнеров в интернетах, сетки важны. Даже очень. «Рассчитайте сетку ещё перед началом работы над макетом», — говорят они. Но если у нас есть боковое меню, что тогда? Быть паиньками и его тоже выравнивать по сетке?
Ну или, в лучшем случае, он вообще пропадёт на маленьких экранах.
Потеряют ли изображения чёткость? Конечно. Уедут ли некоторые элементы за сотни и тысячи пикселей друг от друга? Возможно. Подержите эту мысль в голове, пока я не расскажу вам про следующий паттерн.
Но он невероятно эффективен в паре с третьим паттерном.
Не для этого ли придумали рассылку по почте?
Позволяя контенту самому определить, какая ширина ему подойдёт, вы, на самом деле, привлекаете к нему внимание.
Но не беспокойтесь, их легко понять!
Изучение функции “Авто выравнивание слоя” в символах
Он имеет больше возможностей, а также выглядит более удобным. Вы также можете использовать их вместе, поэтому я подробно все разберу и предоставлю выбирать вам самим.
У такого подхода есть сразу несколько преимуществ: