Как создается с помощью CSS адаптивный дизайн основы использования переменных

Как сделать адаптивный дизайн через CSS

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

Адаптация под десктоп

Для начала делаем адаптацию под десктоп. Это базовый этап, от него потом и начинаются танцы с бубном. Многие ошибочно воспринимают мир, думая, что с отображением сайта на обычных компьютерах у них нет проблем, так как шаблон кто-то верстал, и он ровно смотрится при обычном разрешении. При разрешении вашего монитора да, а как на большем экране, как вы смотритесь с absolute и пикселями на экране с разрешением 1920×1080? Цель адаптации дизайна – нормальное отображение сайта на мобильных и отсутствие косяков на больших экранах.

Что делаем? Главное – переводим все большие значения в css шаблона из пикселей (px) в проценты (%). Тут есть несколько правил:

1. — Изменяем px на % только для больших значений, менять 5 px на 1% (для примера) не надо,
2. — Все работы делайте через Файербаг, потом переносите значения в реал.

Немного для общего понимания. У вас есть сайт, на котором ширина страницы 1000 px, в ней есть три блока – центральный 800 px и два боковых сайтбара по 100 px. Значит после замены на проценты размер страницы станет 100%, центральный контейнер 80% и боковые блоки по 10%. Грубо, но понятно. Теперь чуть больше конкретики.

У меня до адаптации (сохранил для истории старый файл CSS) основной контейнер был прописан в стилях так:

После адаптации стал таким:

Топ-меню изменилось с:

А смещение блока content реализовано с:

Обратите внимание на код:

overflow: hidden !important;

Им мы убираем прокрутку по горизонтали, это пригодится для мобильной адаптации, иногда имеет смысл указывать только запрет горизонтальной прокрутки с помощью:

overflow-x: hidden !important;

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

CSS под мобильные устройства

Базу создали, кстати, это самый сложный этап, теперь надо добиться, чтобы сайт корректно отображался во всех мобильных устройствах. Предыдущих манипуляций мало, так как под маленький экран все сжать в процентах не получится. Согласитесь, разглядеть на смартфоне при разрешении 320 px по ширине сайтбар в 10% невозможно.

Нам понадобится использовать @media screen and, которые вносят изменения в стили для устройств с конкретным разрешением. Я вначале определил с помощью уменьшения экрана браузера, на каком разрешении у меня начинаются проблемы с отображением. Сужая экран, я нашёл свою точку «кривизны», она начинается при ширине 1000px, значит прописывать основные мобильные стили надо отсюда – всё, что больше будет отображаться в стилях обычного десктопа, что меньше отдельными стилями.

Пример @media screen and

Я прописал CSS под мобильные устройства на шаблоне Joomla 1.5 так:

@media screen and (max-width:500px)

@media screen and (max-width:400px)

Немного конкретики по коду.

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

.page-numbers, #footer, #navigation, #header,.logo,.nav-box .

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

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

Для них указано, что максимальный размер картинки по ширине 96% (с отступами красиво), а высота идёт на автомате.

Конкретика закончилась, ещё раз по общему смыслу адаптации сайта (дизайна) через CSS.

1. — Изменяем большие значения px на %,
2. — Прописываем отдельно @media screen and для мобильных устройств.

Через @media screen and обязательно закрывайте ненужные для мобильного блоки для вывода, но переводите в % те значения, которые некорректно отображаются, так как их оставили в пикселях в десктопной версии CSS.

Как результат – удобство для пользователя при работе с Joomla Mobile было 65-70%, при адаптивном дизайне на CSS, стало 99%. Выводы на лице – проверка Яндекса и Goole на адаптивность не проходилась, сейчас проходит на ура.

Верстка адаптивных веб-страниц

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

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

Адаптивный веб-дизайн (англ. responsive web design, RWD) — это подход к созданию веб-страниц, при котором их внешний вид определяется через CSS, основываясь на ширине окна браузера. Это позволяет обеспечить удобный дизайн для любого устройства, без необходимости создания нескольких разных сайтов.

CSS-инструменты для адаптивного дизайна

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

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

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

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

Настройки для адаптивного дизайна

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

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

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

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

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

Далее в учебнике: медиа-запросы CSS.

Основы адаптивного веб — дизайна (Responsive). Или как сделать простой шаблон адаптивным.

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

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

Что такое адаптивный веб-дизайн?

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

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

Немного теории (Основы)

Как известно, что весь веб дизайн большую часть строится на CSS, в CSS задаётся практически все правила отображения сайта в различных браузерах. Соответственно и адаптивный веб — дизайн не исключение. Самое главное это стандартное правило media queries, в которых и задаются все новые классы под желаемое разрешение экрана. Но и конечно же стандартная CSS вёрстка не много изменилась. Самое большое изменение это использование процентов а не пикселей в ширине объектов.

Например: Размер блока главного контента на странице был равен 600px, а ширина блока сайдбара 400px. В адаптивном дизайне данные значения нужно прописывать в процентах. Исходя из этого у нас получится ширина контента 60%, а ширина сайдбара 40% Надеюсь, что суть Вы уловили.

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

max-width и width: если ширина сайта равна width:1000px то при уменьшении окна браузера будет появляться горизонтальная полоса прокрутки, другими словами сайт просто не будет влазить в окно. И его придётся горизонтально прокручивать чтобы увидеть весь сайт. Но если мы поставим width:100% Сайт растянется на всю ширину монитора. На малых разрешениях такой способ будет смотреться нормально, а вот на мониторах с большим разрешением сайт очень сильно растянется и будет совершенно не читабельным. Таким образом если Вы хотите чтобы сайт остался шириной в 1000px, но к тому же чтобы не появлялась горизонтальная полоса прокрутки, нужно применить max-width.

Вот что у нас было:

А вот что стало

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

min-width и width: Тут совершенно всё наоборот, если в первом случае мы избавлялись от горизонтальной полосы прокрутки, то тут мы её возвращаем. Другими словами, если резиновый блок шириной в 100% при уменьшении разрешения будет подстраиваться под окно браузера, чем меньше окно тем и меньше сам блок. min-width может установить значение ширины блока после которого он перестанет уменьшаться. Например, если установить min-width: 200px; то блок при достижении данной ширины перестанет уменьшаться, таким образом будет появляться горизонтальная полоса прокрутки в окне браузера.

Практика

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

Данный шаблон состоит из трёх блоков — это шапка сайта, главный контент и сайдбар. Таким образом у меня получились блоки к которым я присвоил соответствующие ID CSS:

Шапка сайта — #headerInner

Главный контент — #colLeft

Как проверить?

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

Ну а сейчас давайте посмотрим и разметку html, она довольно проста:

Основы применения адаптивного дизайна

Эта история о том,что мы изучили пока делали редизайн для самых придирчивых клиентов — самих себя! В статье из собственного опыта рестайлинга нашего веб-сайта я объясню, почему мы не создали отдельный мобильный сайт и подробно опишу создание нового адаптивного дизайна.

На сайте http://www.cyber-duck.co.uk/ мы уже несколько лет раскручиваем обе версии сайта: компьютерный веб-сайт и адаптивный мобильный сайт; и там, и там есть свои плюсы и минусы. Имея отдельный сайт для мобильных устройств мы можем приспособить контент, в то время, как на компьютерном улучшена функция равенства контента для пользователей, да и в постоянном обслуживании находится только второй.

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

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

Наши сайты для мобильных и планшетов создавались специально для таких пользователей, и их внешний вид был нашей главной задачей. Мы хотели улучшить время загрузки главной страницы: для обычной версии сайта, её параметры были равны 2,2 МБ и 84 HTTP запроса, в то время как для мобильной: 700КБ и 46 HTTP запросов. Также, для удобства пользователей, был специально разработан интерфейс для сенсорных устройств при помощи jQuery Mobile.

Изменение подхода

Несмотря на все вышесказанное, некоторые факты указывали на то, что у нашего подхода есть несколько значительных минусов:

• нужно поддерживать множество баз кода,
• управление контентом,
• подстраиваться под новые модели таблеток.

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

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

Постановка целей.

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

1. Скорость. В эффективности заинтересованны все.
2. Доступность. Он должен работать без всяких стилей, фонов и JavaScript.
3. Равенство контента. На всех платформах один и тот же контент и функциональность.
4. Универсальность. Независимость от платформы.
5. Удобство в будущем. Минимум обслуживания.

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

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

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

Производительность стала приоритетной

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

Чтобы этого достичь, мы составили схему — набор действий по повышению скорости и размера нашего нового сайта. Для мобильных пользователей сайт должен был быть похожим на версию мобильного сайта, так что, мы хотели, чтоб у них загружалось 40 HTTP запросов и 500 КБ данных (в будущем цифра должна была упасть до 100 КБ, и меньше).

Сторонние скрипты

Самый простой способ убрать с сайта все лишнее — настолько, насколько это возможно избавиться от сторонних скриптов. Согласно с Zurb, “кнопки загрузки Фейсбука, Твиттера, Гугл и других соц-сетей, в общей сложности занимают 19 запросов и 246,7 КБ пропускной способности.” В результате мы заменили тяжелые плагины соц-сетей на легковесные.

В то время, как от некоторых существенных скриптов мы избавиться не могли, то решили подстраховать себя, поместив эти скрипты в самом конце HTML-документа: с этого момента, они будут загружаться после контента.

Нужна ли нам Система Управления Содержимым (CMS)?

Еще в самом начале, когда мы решали, каким именно будет наш новый веб-сайт, мы рассматривали необходимость CMS. В конце концов, как это и положено в цифровом агентстве, большинство членов команды знакомы с HTML, CSS и Git, поэтому мы вполне можем обойтись и без CMS.

С помощью серверного мониторинга производительности инструментов, таких, как New Relic, мы отследили, что именно из-за CMS предыдущая версия сайта загружалась медленно. Вот почему мы избавились от этой системы. Исключение было только для блога, где, в связи с объемом и частотой добавляющегося контента, CMS необходим.

Наш старый сайт был написан на архитектуре Model-View-Controller (MVC), связанной с CMS WordPress. Для примера, типичной странице WordPress для загрузки требуются от 600 до 1500 запросов, сервер БД запрашивается сотни раз, и просто удалив CMS, мы одним махом обнулили эти цифры.

Стоило удалить CMS для статических страниц, и необходимость в БД и динамических шаблонах отпала. Используя популярный PHP фрэймворк Laravel, мы внедрили систему “динамических маршрутов и статических шаблонов”. Это означает, что при каждом вызове URL нашего сайта, маршрутизатор Lavarel точно знает, какой именно шаблон загружать, путем сопоставления URL с именем шаблона, а содержимое шаблона уже загружается из HTML.

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

Конечно, данный подход не удовлетворит всех (да и немногих наших-же клиентов), но вначале каждого проекта, следует понять, какой CMS будет удобнее, и нужен ли он вообще. Есть, конечно, и другие варианты, допустим, файловые CMS (например, Kirby и Statamic), облегченные CMS (как Perch), или же улучшенные реализации кэширования (например, при помощи Varnish).

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

Избегаем готовых CSS- фрэймворков

Хоть CSS-фреймворки Twitter Bootstrap и Foundation хороши для быстрого создания интерактивных прототипов, они гораздо сложнее, чем нам нужно во многих проектах. Причина кроется в том, что эти структуры должны удовлетворять самые разнообразные варианты использования и не быть адаптированными к некоему конкретному проекту.

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

Также мы поработали с контентом,т.е., контент был сформирован так, чтобы не переплетаться.

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

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

Отсюда мы можем настроить ширину столбцов и колонок в сетке, лишь изменив файл конфигурации vars.

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

Загрузка JAVASCRIPT

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

Еще RequireJS обладает удобным инструментом оптимизации, который для уменьшения размера файла JS объединяет связные скрипты и их мини-файлы через UglifyJS.

Оптимизируем изображения

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

Еще для сжатия изображений и спрайтов мы использовали ImageOptim и TinyPNG. Эти инструменты удаляют все ненужные данные, не влияя на качество изображения. Это привело к снижению веса основных частиц изображения, например, от 111 до 40 КБ.

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

Как видно на рисунке выше, для мобильной версии баннер со слайд-шоу меньше. Код CSS:

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

Увеличиваем скорость загрузки контента

Золотое правило производительности от Yahoo гласит, что “80-90% времени отводится на загрузку компонентов страницы: изображения, таблицы стилей, скрипты, Flash, и т.д. ” Короче говоря, каждому запросу необходимо время на загрузку, поэтому каждый запрос (например, получить доступ к файл с сервера) неизбежно влечет к увеличению времени загрузки.

Используя сеть доставки контента CloudFlare (CDN), мы разделили задачу обслуживания файла на веб-сервере от обработки веб-сайта. Это значит, что наш сервер концентрируется на приложении, а не на обслуживании статических файлов. Мы убрали все статические ресурсы на отдельный субдомен (в данном случае, в static.cyber-duck.co.uk) для снижения количества cookie, отправляемых с каждым запросом, что, в свою очередь, снижает пропускную способность, необходимую каждому ресурсу.

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

К CDN добавим, что в .htaccess мы использовали правила и время жизни Gzip. Здесь для сжатия исходных файлов в браузере используется модуль Apache mod_deflate, также он устанавливает срок действия заголовков на будущее, чтобы обеспечить лучшее кэширование веб-сайта.

Создание настоящего адаптивного веб-дизайна

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

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

Пишем код для каждой задачи

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

В рамках веб-сайта мы использовали этот подход для активации и дезактивации динамических элементов, постоянно убеждаясь, что эти элементы все еще есть на странице, в то время, как JavaScript недоступен. Таким образом, мы можем обеспечить пользователям “равенство” контента. При таком раскладе, мы уверяем, что JavaScript является усовершенствованием, а не необходимостью для просмотра веб-сайта.

CSS-код для компьютерного сайта:

CSS-код для мобильного сайта:

Анимация, как усовершенствование

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

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

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

Анимация на CSS позволяет использовать аппаратное ускорение по максимуму.

Брейкпоинты теперь зависят от контента и дизайна, а не от устройства.

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

Данный подход универсален и гарантирует, что не нужно будет оптимизировать код под различные устройства. Мы включили (хоть и не ограничили) брейкпоинты на 120, 240, 600, 760, 980 и 1360 пикселей, также как и запланировали медиа запросы для особого контента.

Хоть мы и не установили брейкпоинты, зависящие от устройств для дальнейшего удобства, мы проверили наш сайт на ужасающем количестве устройств и браузеров (включая даже Lynx, Playstation 3, Kindle Paperwhite, PSP Vita и пр.). Кроме того, мы тестили сайт на старых устройствах Nokia, и он все еще хорошо работал.

Больше доступности

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

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

Текст

• Текст без фона виден лучше всего, причем, для заголовков коэффициент контрастности — 3:1, а для основного текста — 4,5:1,
• Текст должен быть структурирован с соответствующим заголовком и в правильном порядке,
• Размер текста можно менять без потери информации.

Ссылки

• У каждой ссылки должно быть понятное описание, и, по возможности, альтернативный текст,
• Первая ссылка на любой странице минует навигацию сайта и сразу переходит к содержанию,
• Адреса страниц (URL-ы) должны быть интуитивно понятны, и ,по возможности, неизменны,
• Мы реализовали специальные ссылки для быстрой навигации к самым важным страницам и функциям.

HTML-код для “пропуска” навигации:

Изображения

• Все изображения содержат текст (с аттрибутом alt), который выводится на экран, когда изображение в браузере отключены или не поддерживается,
• Контент доступен и понятен, даже если изображение отключено или не поддерживается.

Видео

• Все видео, размещенные на Youtube, имеют заголовки (субтитры), если в них есть речь.

Формы

• Все элементы управления формами и полями правильно и четко обозначены,
• Всем формам ввода назначены необходимые атрибуты, чтобы на сенсорных устройствах загружалась нужная раскладка клавиатуры,
• При отправке формы все необходимые поля проверяются на наличие ошибок,
• Любая найденная ошибка описывается пользователю, наряду с подсказкой по её исправлению,
• По любой форме можно передвигаться с помощью кнопки Tab на клавиатуре,
• Отправка форм может быть осуществлена путём нажатия клавиш “Return” или “Enter” .

Использование таких атрибутов, как required и placeholder облегчает работу с формой.

Начальный запуск сайта.

Мы уже получили впечатляющие результаты, хотя запустили сайт всего пару недель назад. Мобильный трафик вырос более чем на 200% (общий трафик вырос на 82%), средняя продолжительность посещения сайта возросла до 18%, а процент пользователей, покинувших сайт сразу после захода на главную страницу снизился более чем 4000%. Эта статистика много о чем говорит, в данном случае, о том, что адаптивный дизайн работает намного лучше предыдущей версии отдельного мобильного сайта.

И это только начало! Мы знаем, что еще можно улучшить на сайте: в дальнейшем оптимизировать производительность, максимально сжать файлы, обобщить мультитач- жесты для всех брейкпоинтов, использовать серверные решения (например, адаптивные изображения), соответствовать в наибольшей степени стандартам Web Content Accessibility Guidelines’ “AA”.

В 2012 году на Smashing Conference Брэд Фрост в своей торжественной речи цитировал Бенжамина Франклина: “When you are finished changing, you’re finished.”- “Вы завершите работу тогда, когда закончите что-либо менять.” Наиболее правдоподобно это звучит для тех, кто работает в веб-индустрии. Мы работаем в среде, которая постоянно развивается, и нам нелегко держать руку на пульсе новых технологий, но именно это и греет душу.

5 последних уроков рубрики «Разное»

Как разместить свой сайт на хостинге? Правильно выбранный хороший хостинг — это будущее Ваших сайтов

Проект готов, Все проверено на локальном сервере OpenServer и можно переносить сайт на хостинг. Вот только какую компанию выбрать? Предлагаю рассмотреть хостинг fornex.com. Отличное место для твоего проекта с перспективами бурного роста.

Разработка веб-сайтов с помощью онлайн платформы Wrike

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

20 ресурсов для прототипирования

Подборка из нескольких десятков ресурсов для создания мокапов и прототипов.

Топ 10 бесплатных хостингов

Небольшая подборка провайдеров бесплатного хостинга с подробным описанием.

Быстрая заметка: массовый UPDATE в MySQL

Ни для кого не секрет как в MySQL реализовать массовый INSERT, а вот с UPDATE-ом могут возникнуть сложности. Чтобы не прибегать к манипуляциям события ON_DUPLICATE можно воспользоваться специальной конструкцией CASE … WHEN … THEN.

Адаптивный дизайн на WordPress: примеры тем, основы и советы по CSS

Адаптивный дизайн ворвался в интернет-индустрию моментально. Отсутствие мобильной версии сайта может в корне снизить посещаемость. А начиная с 21 апреля 2015 так и произойдет, ведь Google в очередной раз закручивает гайки в механизме ранжирования своей поисковой выдачи.

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

Что представляет собой адаптивный дизайн?

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

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

Примеры адаптивного дизайна

Тема Divi 2.0

Не нужно далеко ходить. И на WordPress есть отличный пример качественного отзывчивого дизайна – тема Divi 2.0 . Просто откройте эту тему на мобильном устройстве. Она сразу же приобретет ширину экрана и компактно отобразить все элементы дизайна в читабельном виде. А вот как поведет себя тема, если вы будете изменять размеры окна браузера на своем компьютере:

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

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

Чем меньше его ширина, тем больше сайт оптимизирован под мобильные устройства типа iPhone или Android.

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

Сайт Time.com

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

Как можно расширять свои знания об адаптивном дизайне?

Тестирование ранее посещаемых сайтов

Если тестировать все посещаемые сайты на разных устройствах, то через некоторое время это войдет в привычку. Некоторые сайты абсолютно по-разному выводятся на экран на разных устройствах. Например, Google использует абсолютно отличающиеся таблицы стилей в зависимости от ширины экрана устройства. Такой метод требует дополнительного кода CSS помимо стандартного CSS, и применяется еще и на таких крупных сайтах, как Google, Amazon, Yahoo.

Другие методы

Также в самообразовании в сфере отзывчивого дизайна поможет:

• Чтение тематических блогов и руководств
• Прохождение курсов
• Посещение воркшопов
• Пополнение знаний о CSS3 и использовании Media Queries
• Самостоятельное внедрение знаний на практике
• Создание, пусть и простого, сайта с помощью основ HTML и CSS для понимания принципа их работы.

Как сделать сайт на WordPress отзывчивым?

Ну вот, самая интересная часть поста. Для создания адаптивной версии сайта на WordPress необходимо использовать CSS3 Media queries, о которых сегодня уже упоминалось.

Стандартное media-query-заявление выглядит таким образом:

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

В коде есть элемент @media с ограничением (max-width: 700px) и это значит, что если разрешение экрана или окно браузера достигает 700 пикселей или меньше, то применяются параметры, указанные в скобках.

Лучше конечно использовать эти правила @media без фанатизма и по-меньше.

Пример

Для демо версии будут использованы основы HTML и CSS, чтоб показать на примере, как создаются правила адаптивного дизайна внутри кода. Этот же метод используется и для сайта на WordPress. Нужно только применить стили в файле style.css, чтобы изменить дизайн сайта.

Код HTML

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

Вот как отображается страница в Chrome:

Конечно же, мы не можем оставить ее в таком виде, и используем CSS.

Код CSS

После применения стиля страница выглядит уже вот так:

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

Что же тогда делать?

Необходимо использовать media query, что поможет подстроить страницу под изменения в CSS. Для этого нужно добавить нижеуказанный код CSS в низ файла style.css.

Теперь, когда код добавлен, можно изменить размер окна браузера, чтобы увидеть эффект адаптивности:

Отлично! Можно настроить еще несколько элементов, как только браузер приобретет минимальную ширину. А использование media query поможет улучшить результат. Добавьте эту часть внизу файла style.css:

Понемногу дизайн приблизился к желаемому конечному виду. Правда уже лучше?

Теперь адаптивный дизайн полностью готов. Этот принцип можно использовать для любого сайта, независимо от CMS.

Обработка изображений

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

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

Вот как отображается графика на сайте после применения этого решения:

Читабельность

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

Юзабилити

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

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

Заключение

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

Источник: elegantthemes.com

Насколько полезным был этот пост?

Нажмите на звезду, чтобы оценить этот пост!

Средний рейтинг: 5 / 5. Количество голосов: 2

Как сделать адаптивный сайт под все разрешения экрана

Приветствую вас, случайные посетители и постоянные читатели блога Royal-Site.ru!

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

В предыдущей статье я уже писал о том, что такое адаптивный дизайн и зачем он нужен. Но как достичь этой самой адаптивности?

Для этого есть разные способы. Кто то использует javascript, кто то что то еще. Но я считаю, что самый простой и правильный способ – это адаптивная верстка сайта с помощью CSS.

Как сделать адаптивную верстку сайта

Во-первых, если вы взялись верстать адаптивный дизайн сайта, между тегами вставьте следующий код:

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

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

Как так? Я стал перепроверять все стили, правильно ли я прописал классы, в итоге дошел до того, что через javascript проверил ширину окна браузера в px. Я был в шоке. При проверке на ноутбуке я получил результат 1024px, и примерно такой же результат я получил открыв сайт на смартфоне!

Но ведь этого не может быть!

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

Из-за своей глупости и некомпетентности я потерял очень много времени. Зато теперь запомнил навсегда))).

Адаптивная верстка CSS media запросы

Чтобы сделать адаптивную верстку сайта с помощью CSS, необходимо использовать media запросы.

Это как? Да, очень просто. В CSS файле нужно прописать запросы типа:

Это код означает, что стили заключенные между “ < >” будут работать для экранов с минимальной шириной 1440px и максимальной 1599px.

То есть те стили элементов сайта, которые должны быть адаптированны в зависимости от разрешения экрана, должны быть прописаны отдельно для каждой возможной ширины экрана.

Самые важные разрешения экрана, при адаптивной верстке

• 320 px — Мобильные устройства (портретная ориентация);
• 480 px — Мобильные устройства (альбомная ориентация);
• 600 px — Небольшие планшеты;
• 768 px — Планшеты (портретная ориентация);
• 1024 px — Планшеты (альбомная ориентация)/Нетбуки;
• 1280 px и более — PC.

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

bootstrap адаптивный дизайн

Очень удобно использовать для создания адаптивной верстки bootstrap. Удобство в том, что все стили для адаптации блоков, кнопок, таблиц и т.д. уже прописаны в bootstpap. Нужно только разобраться какой класс к какому элементу присвоить.

Для начала, качайте свежую версию bootstrap и подключите его к своему сайту. Учтите, что подключение стилей и скриптов к wordpress имеет свои особенности.

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

Например, такая конструкция позволит выделить один широкий блок для контента шириной в 8 частей и один узкий для сайдбара шириной в 4 части экрана:

Ширина блоков будет рассчитываться автоматически в зависимости от ширины экрана. А при просмотре на мобильном устройстве эти блоки будут смещаться друг под друга.

Также можно регулировать отступ блок от края, опять же, на нужное количество частей. Например такая конструкция:

Будет создан блок шириной в 10 частей с отступом слева в 1 часть экрана.

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

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

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

Но возникает вопрос: как проверять адаптивность сайта? Вот прописали вы media запросы в CSS, подключили bootstrap и используете нужные классы. А как вы проверите, что на всех разрешениях экрана сайт правильно адаптируется.

Я для этих целей рекомендую использовать следующий онлайн сервис – http://quirktools.com/screenfly/ . Просто введите URL страницы для проверки и переключайте разрешения экранов в панели управления.

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

Ну как вам статья? Все понятно? Если нет, пишите в комментарии, будем разбираться вместе.

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

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

26 июня 2020 года. Опубликовано в разделах: Азбука терминов. 11387

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

Адаптивная верстка сайта сегодня создается при помощи языка разметки HTML5 и каскадных таблиц стилей CCS3. Но до того момента, как соответствующие технологии стали стандартом для всех популярных браузеров, для соответствующих целей использовался язык программирования JavaScript. Еще раньше (до 2010-го года) верстальщикам приходилось создавать несколько вариантов одних и тех же страниц, но с разной разметкой, чтобы разрабатываемый ими сайт правильно отображался на различных экранах.

Для чего нужна адаптивная верстка страницы

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

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

Почему и когда появилася адаптивный дизайн?

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

• массовый приток в интернет новых пользователей;
• появление множества устройств с разными разрешениями экранов;
• прессинг со стороны поисковиков, которые стали применять санкции в отношении сайтов, на которых присутствовали несколько вариантов страниц с одним и тем же контентом.

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

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

При помощи чего и как создается адаптивная верстка?

Прежде чем приступить к рассмотрению вопроса, который касается того, как сделать адаптивную верстку, необходимо кратко рассмотреть основные применяемые технологии. Сейчас их две: HTML5 и CSS3. До недавнего времени применялись HTML4 и CSS2, но чтобы при помощи них можно было создать универсальный дизайн, приходилось использовать еще и JavaScript.

CSS3 – это новое поколение каскадных таблиц стилей. Данная технология предназначается для создания правил отображения элементов страницы в браузере пользователя. При помощи нее можно указать, например, какой размер должен иметь элемент при определенном разрешении экрана пользователя, либо установить правило, что тот всегда должен занимать определенный процент пространства (100% — заполнение всей рабочей области браузера).

Именно в CSS третьего поколения появилось правило «media queries», используя которое верстальщик может создавать отдельные классы для каждого конкретного разрешения.

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

Что касается HTML5, то при его помощи выполняется непосредственно разметка страницы, т.е указывается то, где должны размещаться определенные элементы. Чтобы объекты подстраивались под разрешение, в параметрах HTML-тегов указываются заранее созданные при помощи CSS3 классы.

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

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

Вначале при помощи HTML разместим на странице сам элемент:

Тег DIV – указывает, что все, что в нем заключено, является отдельным блоком. Когда на странице много таких блоков, указывается атрибут «class». Это необходимо, чтобы браузер понял, какое правило применять для конкретного блока.

Теперь необходимо создать непосредственно само правило, так называемый,

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

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

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

Можно сделать еще проще. Чтобы проверить, работает ли адаптивный дизайн, нужно зажать CTRL, а затем нажать на «+» или «-«. После этого действия страница должна увеличиться или уменьшиться соответственно, но элемент, к которому применена адаптивная верстка, сохранит соотношение своих пропорций (или сделает что-то другое, то, что было указано в правилах).

Инструменты, упрощающие верстку адаптивного дизайна

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

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

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

Как создать адаптивный дизайн?

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

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

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

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

1. Размер. Адаптивный дизайн сайта должен иметь незначительные отличия при показе страницы на различных устройствах, поэтому размеры изображений, текста и других просматриваемых элементов должны соответствовать размерам самих устройств. Для этого веб-разработчики адаптируют дизайн так, чтобы он имел несколько версий просмотра.
2. Адаптация контента. Материал, наполняющий сайт (изображения, видео и другие мультимедийные элементы) также должен соответствовать требуемым разрешениям экрана, не теряя при этом качество показа.
3. Гибкость дизайна. Включение в разработку элементов, позволяющих максимально быстро подстраивать конструкцию сайта при изменении просматриваемой веб-страницы. Например, пользователь листает страницу вверх-вниз, переходит по разным разделам или меняет положение экрана из вертикального в горизонтальное и наоборот.
4. Упрощение элементов в зависимости от устройства для более удобного использования.
5. Скрытие малозначительных блоков на экранах меньшего размера.

Основы

Сайтостроение определенно связано с языками программирования, потому что без них просто не обойтись. C помощью HTML и CSS браузер распознает состав и порядок объектов (тексты, иллюстрации, видео) — так происходит формирование сайта.

CSS отвечает за цвет, начертания, размеры, шрифты, выравнивания, отступы, фоновые элементы, формы и т. п. HTML в ответе за общее содержание и структуру сайта. Таким образом, происходит построение веб-ресурса в совокупности двух важнейших методов описания.

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

1. Обеспечивает единство дизайна при большом количестве страниц, внешний вид сайта и управляет отображением HTML-документов.
2. Дает возможность заниматься проектированием дизайна и контентом одновременно.
3. Применяет несколько стилей и возможность просмотра на разных устройствах.
4. Осуществляет сложные дизайнерские решения.
5. Характеризуется высокой скоростью работы.

Для разработки сайта необходимо знать некоторые базовые понятия.

Селектор CSS обозначается наименованием стиля, который определяет свойства и параметры форматирования. Он указывает браузеру, к какому конкретно элементу применяются свойства.

Свойство — это структурная единица. Она определяет внешние параметры (размер, расположение, цвет, форму и т. д.) и выражается в определенном коде.

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

В совокупности эти элементы образуют такую схему:

Размеры и разрешения макетов

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

Разрешения и размеры адаптивного веб-дизайна основных видов устройств:

• В данном дизайне придерживаются принципа начинать работу с мобильного разрешения. Макет для смартфона создается в размере 460 × 960 px.
• Размер макета для планшета — 768 × 1024.
• Размер для ноутбука — 1280 × 802.
• Размер для ПК — 1600 × 992.

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

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

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

Верстка

Цель верстки адаптивного дизайна — в создании гибкого макета, или как еще принято выражаться: «резинового шаблона». Суть заключается не в однозначных размерах страницы, а в пропорциональной сжимаемости шаблона для удобного просмотра на всех устройствах.

Строится он в основном на CSS. При разработке определяются контрольные точки экранных размеров. Таким образом, определяется ширина остальных объектов. Для этого ширина страницы задается свойством css max-width, в зависимости от этих критериев размер других элементов подбирается в процентном значении. Например, размер блока на главной странице равен 600px, а ширина блока сайдбара (боковой панели сайта) 400px, соответственно ширина контента будет равняться 60 %, а ширина сайдбара 40 %.

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

1. Тип макета, позволяющий переносить блоки при уменьшении экранного разрешения. На многоколоночных сайтах дополнительные блоки переносятся вниз экрана.
2. Когда для каждого разрешения прорабатывается отдельный шаблон. Это вид адаптивного дизайна занимает больше времени, но является самым удобным при чтении.
3. Простой тип дизайна, задачей которого является масштабирование всех элементов. Его нельзя назвать гибким.
4. Панельный тип удобен для использования в мобильных приложениях, когда дополнительные функции появляются при смене положения самого экрана.

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

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

Пример: img — здесь следует применить способ, при котором ограничивается размер контейнера, содержащего изображение, а не саму картинку. Это будет выглядеть примерно так: div img . Такой метод решает проблему верстки маленьких изображений, но не подходит для больших иллюстраций.

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

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

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

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

Создание сайта

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

Вспомогательные теги для написания:

• #wrapper — тег, объединяющий все элементы шаблона;
• #header h1 — логотип;
• #header — шапка для меню и других важных элементов;
• #content — блок;
• #colLeft — контентный размер;
• #colRight — сайдбар (боковая колонка);
• #footer — завершающая часть сайта;
• #media screen — задает нужное разрешение.

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

• #viewport — тег, позволяющий сохранять размер текста в уменьшенной версии дизайна. Он располагается между тегами .
• #max-width — для оптимизации сайта, что избежать растягивание при разрешениях свыше 1000 пикселей.

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

Чем отличается адаптивный дизайн от мобильной версии

Для полного понимания следует рассмотреть несколько поясняющих примеров, т. к. путаница между этими двумя понятиями — не редкость.

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

Адаптивный дизайн оптимален для всех разрешений устройств. Он имеет возможность масштабироваться и корректно отображается независимо от условий просмотра.

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

Преимущества

В чем превосходит адаптивный дизайн мобильную версию?

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

Эффективное продвижение в поисковиках. Что нельзя не отнести к главным плюсам адаптивного устройства. Поисковики предпочитают выдавать пользователям адаптивные сайты.

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

Легкость и простота как в реализации проекта, так и в его использовании.

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

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

Плюсы и минусы мобильной версии

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

У мобильного адаптивного дизайна есть определенные достоинства и недостатки.

1. При наличии готового сайта нет нужды разрабатывать дизайн для мобильной версии с нуля. Можно внести лишь некоторые поправки, освободив данный макет от нетребуемого функционала.
2. Благодаря всевозможным упрощениям мобильная версия считается более скоростной при загрузках.
3. Пользователь видит самую важную часть информации из всего контента.
4. Быстрая реализация. Существуют плагины, с помощью которых можно реализовать мобильную адаптацию, даже при незнании тегов и кодов.
5. Выбор поисковых систем более благосклонен к адаптивным версиям, потому что они требуют меньше времени на анализ.

1. Не все мобильные версии могут соответствовать разрешениям мобильных устройств. Сайт, конечно, откроется, но не всегда разрешение экрана совпадает с макетом. Иногда отлично спроектированный дизайн под смартфон может отличаться при открытии в планшетном формате.
2. Мобильные версии требуют отдельные платные домены.
3. Есть небольшие проблемы с публикацией контента. Если имеется несколько версий сразу, контент следует подстраивать сразу под все форматы. Подача нового материала на основном сайте и его копирование в мобильную версию может считаться воровством. Чтобы избежать подобной проблемы, возможно, придется доказывать связь ресурсов.

Способы реализации

Основные способы реализации:

• После создания дизайна макетов и верстки происходит подгрузка под необходимые размеры при помощи сайта операторов и основного кода. Это классический метод, который используют при создании средних и уменьшенных вариантов (планшетов, смартфонов и т. д.).
• BootStrap — простой и понятный набор инструментов для адаптации. Подходит к созданию версий под Landing Page и других не очень сложных веб-проектов. Он дает хорошую возможность применять много разных стилей в функциях интерфейса.
• Responsive Grid System — популярный набор универсальных инструментов. Легко применяется и не требует глубоких знаний. Включает в себя большое разнообразие инфографики.
• GUMBY — CSS-фреймворк может похвастаться гибкой адаптивностью и прекрасным инструментарием.
• Cookies — позволяет реализовать адаптивные изображения. Автоматически сопровождает запрашиваемые браузером файлы.
• ExpressionEngine — еще один способ создания адаптивных картинок. Определяет, является ли устройство мобильным, способен изменять изображения под требующееся разрешение.
• ProtoFluid — обеспечивает быстрое прототипирование. Подходит для всех видов устройств.

Основы CSS — Руководство для самых маленьких

Приветствую, дорогие друзья! В этом уроке вы узнаете что такое CSS, для чего нужен и как его правильно использовать. Это базовый урок из серии «Для самых маленьких», в котором я постараюсь объяснить наиболее понятным языком основы стилизации документов посредством CSS — Каскадных таблиц стилей (Cascading Style Sheets).

Часть 1. Основы CSS

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

Обращаю ваше внимание, что в данном руководстве мы будем рассматривать CSS только в контексте использования с HTML документами в веб-браузере. С помощью CSS можно стилизовать и другие документы, использующие различные языки разметки. Например, стилизовать XML в Android приложениях, SVG или различные Desktop Environment в Unix-подобных операционных системах.

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

1.1 Использование CSS в HTML документах

CSS довольно просто использовать в HTML документах. Его можно:

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

Прописать стили в самом документе, используя тег

Инлайновое использование CSS свойств в конкретных тегах с помощью атрибута style.

Такой способ внутренней стилизации используется очень редко в особых случаях, когда необходимо: А. Вывести из админ. панели сайта параметры для конкретных тегов; Б. Сделать динамическую стилизацию элементов посредством JavaScript.

Пример инлайнового вывода фонового изображения секции из админ. панели сайта:

Вывод $bgi_option — простой пример, показывающий что значение свойства задается в админке сайта.

1.2 CSS синтаксис

Как я уже говорил ранее, CSS имеет довольно простой синтаксис. Давайте разберем его.

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

Просто, не правда ли?

Самое сложное в CSS объявлении — селектор. Подробнее узнать о том, как формируются и как используются селекторы вы можете в уроке Все CSS селекторы в одном уроке — это очень важная тема, так как здесь раскрывается вся магия выборки элементов на странице, рекомендую посмотреть этот урок в обязательном порядке всем новичкам.

Вкратце CSS селектор — (от слова select — выбирать) — это конструкция, с которой начинается каждый блок объявлений и которая служит для выборки элемента или однотипных элементов на странице для дальнейшей стилизации. Чаще всего в качестве селектора используется определенный класс тега, например:

Здесь селектором выступает класс my-class тега div, который получает необходимое оформление в CSS файле. В данном случае фоновый цвет — серый. Соответственно, если на странице есть несколько тегов (не только div) с классом my-class, все эти элементы получат одинаковое оформление — серый фон цвета #999.

1.3 Каскадирование, наследование и приоритет

Понять принцип каскадирования несложно. Давайте взглянем на пример:

Из примера мы видим, что в CSS написан каскад, в котором класс .parent стоит на первом месте, после него через пробел указан дочерний класс .children, который отвечает уже за стилизацию только дочернего элемента. Дочерний тег обязательно должен быть вложен в тег с классом .parent. Если в HTML документе мы вынесем тег .children из тега div с классом .parent, он потеряет свое оформление, так как каскад уже не будет работать, структура нарушена.

Что мы получим в результате нашего примера. Тег с классом .children получит цвет текста #666, так как имеет более длинный каскад, а .parent покрасится в цвет #999. Родительский класс будет иметь внутренние отступы 10px, в то время, как дочерний этих отступов иметь не будет, так как свойство padding не распространяется на дочерние элементы. Однако если мы уберем color: #666; у селектора .parent .children, то его текст покрасится в цвет родителя color: #999;

Каскадирование и наследование позволяют стилизовать конкретные элементы на странице и определять приоритет применяемых стилей. Давайте рассмотрим иерархию приоритетов.

1. Самым высоким приоритетом обладают свойства, в конце объявления которых указана конструкция !important. Не важно, какую вложенность имеет селектор, каким образом используются стили — инлайново или подключением внешнего файла, у них будет наибольший приоритет. Я крайне не рекомендую использовать !important при стилизации, так как в процессе поддержки или даже в процессе разработки в дальнейшем обязательно возникнет путаница, которую спасет только рефакторинг стилей. Как показывает практика, всегда есть способ не использовать !important.
   Пример использования !important:
2. Следующим по значимости приоритетом обладают инлайновые стили, прописанные в самом теге через атрибут style, которые мы рассмотрели ранее:
3. Стили, заданные в теге style в самом документе имеют меньший приоритет;
4. Ещё меньшим приоритетом обладают стили, подключенные к документу как внешний CSS файл посредством тега
5. Самый низкий приоритет, окромя стандартных стилей браузера имеют стили родительских селекторов перед дочерними, например:
   В результате тег

, находящийся в теге с классом .my-class получит значение свойства margin: 15px.

Стоит также отметить, что количество классов или идентификаторов, а также наличие дополнительных псевдоклассов и конструкций в селекторе повышают приоритет для стилизации:

И т.д. по логической цепочке.

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

В результате последний селектор в потоке документа получит значение свойства margin: 15px, так как является наиболее приоритетным. Однако если бы селектор первого объявления был длиннее, значния его свойств несомненно бы превалировали.

Что касается наследования, здесь всё просто. Все дочерние элементы наследуют некоторые свойства родителя. Какие именно свойства наследуются предстоит выяснить вам в процессе изучения различных свойств и применении их на практике. Например, цвет текста всегда наследуется потомками, а отступы — нет.

Часть 2. CSS свойства

Я думаю нет смысла перечислять все CSS свойства, так как их очень много и практичней обратиться к справочнику всех CSS свойств. Я рекомендую изучить CSS свойства в справочнике на HTMLBook.

Однако рассмотрим 10 самых используемых CSS свойств в верстке. Я взял 10 больших CSS файлов из своих проектов и отсортировал свойства по частоте использования.

CSS Свойство

Частота использования

Описание

color 960 раз Цвет текста элемента: background-color 755 раз Цвет фона элемента: font-size 524 раза Размер шрифта: opacity 435 раз Уровень прозрачности элемента: padding 372 раза Размер полей внутри элемента: width 356 раз Ширина блочного элемента, не включая размеры границ и полей: margin 311 раз Внешние отступы элемента: height 305 раз Высота блочного элемента, не включая размеры границ и полей: font-weight 280 раз Насыщенность шрифта: text-align 245 раз Горизонтальное выравнивание текста:

Часть 3. Медиа-запросы

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

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

Медиа-запрос пишется в самом файле стилей или в теле документа (тег style) и начинается с объявления правила @media. Структура медиа запроса довольно проста:

Условием может выступать либо устройство — all (все устройства), screen, print, tv и т.д., либо медиа-функции, которые задают параметры устройства или разрешение экрана, на котором отображается документ.

Наиболее часто используемые медиа-функции определяют именно максимальное и минимальное разрешение экрана устройства:

Здесь устройства с максимальным разрешением экрана 480px или минимальным разрешением 320px будут отображать текст тега с классом .my-class серым. Данное условие я привел для примера, практически оно бесполезно. Чаще всего требуется указать либо только максимальное разрешение, либо только минимальное, в пределах которого будет прменяться свойство.

Кроме всего прочего, как мы видим из примера, функции могут содержать условия and (И), not (НЕ) и only (Для старых браузеров, не поддерживающих медиа-запросы). Нет логического оператора or (ИЛИ), его роль выполняет запятая. Медиа-функции, как мы видим заключают в обычные круглые скобки.

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

Часть 4. Рекомендации

Ну и конечно-же мои рекомендации. За всю практику верстки у меня накопились некоторые правила, которыми я с радостью поделюсь.

1. Старайтесь использовать только внешние подключаемые CSS файлы. Внутреннюю стилизацию применяйте только если это необходимо для корректного функционирования веб-сайта;
2. Старайтесь стилизовать только классы. Не стилизуйте идентификаторы (задаются через >

Премиум уроки от WebDesign Master

Создание контентного сайта на Jekyll от А до Я

Создание современного интернет-магазина от А до Я

Я — фрилансер! — Руководство успешного фрилансера

Основы адаптивного дизайна в HTML5 и CSS3

Когда начали появляться первые смартфоны и планшеты, многие веб-мастера начали разрабатывать под эти устройства отдельные сайты. Чуть позже начали появляться методы по внедрению на сайте адаптивного дизайна. И тогда большинство веб-мастеров подхватило эту идею, тем самым реализуя принцип DRY (Do not repeat yourself – не повторяй себя), которая заключается в том, что информация любого вида не должна дублироваться.

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

Итак, давайте рассмотрим, за счет чего на сайте создается адаптивность.

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

Медиа-запросы являются частью CSS3, и они делают то, благодаря чему отзывчивый веб-дизайн становится возможным.

На изображении ниже приведен пример срабатывания стилей CSS для устройств разного размера. Например, для устройств с шириной экрана превышающую 768 пикселей, размер шрифта увеличивается до 35px.

Пример соответствующего медиа-запроса:

Подробнее о медиа-запросы можно прочитать здесь.

Популярные фреймворки, такие как Bootstrap и Foundation, широко используют медиа-запросы для создания своих мощных систем сеток (grid).

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

Сетки и контрольные точки

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

Сетки состоят из строк (row), которые разделены на столбцы. Столбцы не являются физическими колонками, а представляют собой абстрактную единицу измерения для ширины элемента. Строки, как правило, разделены на 12 столбцов, поскольку 12 легко разделить поровну на целые части. Классы столбцов коррелируют со статическими значениями в процентах, как, например, .col-xs-5 < width: 41.66666667%; >.

Синтаксис может отличаться в отдельных фреймворках, но общая концепция такая же. Каждый размер устройства имеет соответствующие медиа-запросы и свойства стилей, которые строят нужный макет страницы. Эти медиа-запросы называются контрольными точками (breakpoints). В Bootstrap контрольные точки таковы: xs (маленькие устройства), sm (небольшие), md (средние), lg (большие). Эти контрольные точки позволяют вызвать стили CSS в соответствии с разными размерами устройств.

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

Ниже приведен пример того, как работает сетка Bootstrap. Для различных классов в фреймворке прописаны в стилях разные значения ширины блока (в %), и, соответственно, разные стили срабатывают в зависимости от ширины экрана устройства:

Например, для больших устройств (шириной от 1200px), по соответствующему медиа-запросу, вступают в действие стили для класса .col-lg-[1-12] .

Некоторые сетки выступают в роли контейнера. Элемент контейнера (container) является внешним элементом макета. Его задача состоит в том, чтобы создать пустое пространство между макетом и краем окна браузера. Для этого блока заданные отступы (padding) справа и слева. А также, в медиа-запросах прописаны максимальная ширина, в соответствии с размером устройства. Строка сеток (row) – это дочерний элемент относительно контейнера. Для строки заданы отступы (margin) справа и слева с отрицательным значением. А блоки col-lg-[1-12] , соответственно, — это дочерние элементы относительно строки. На странице может быть неограниченное количество контейнеров.

Пример кода с использованием метода контейнера в Bootstrap.

RWD (responsive web design) фреймворки, такие как Bootstrap или Foundation – это прекрасная отправная точка при разработке адаптивного макета, и они включают в себя основные компоненты пользовательского интерфейса и основные функции для создания прототипов.

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

Пожалуйста, не стесняйтесь задавать вопросы и комментировать статью в форме ниже.