Адаптивный веб-дизайн: без Bootstrap не обойтись
Bootstrap 4 сделал приоритетом разработку веб-сайтов для мобильных устройств. Для этого в нем появились некоторые новшества.
11 января 2016 3 минуты 18863
Автор статьи
Вадим Ференец
Автор статьи
Вадим Ференец
https://gbcdn.mrgcdn.ru/uploads/post/328/og_cover_image/fe53195b476467efba31fdb916a7f698
Веб-сайты, предназначенные для просмотра с мобильных устройств, как мы писали ранее, сильно усложнили и так нелегкий труд верстальщиков. Если ранее они были недовольны разным уровнем поддержки стандартов многочисленными браузерами, то теперь на их шеи свалилась задача адаптивного веб-дизайна.
Адаптивный веб-дизайн — подход к разработке сайтов, согласно которому ресурс должен быть удобным для просмотра на любом экране.
JavaScript vs правила CSS @media
Есть два варианта верстки, которые устраивают поисковые системы.
Вариант, когда индексная страница сайта не имеет ничего, кроме нескольких тегов и блока JavaScript, который определяет, в какую именно среду он загрузился. Далее он отправляет на сервер собранную информацию, который на основании этих данных создает персонализированный под это устройство код страницы.
Плюс этого подхода в том, что ограниченные ресурсы мобильных устройств используются экономно, в расчете на них сервер и генерирует html-код. Но минусов при этом тоже не мало, главный из которых — необходимость иметь «статические» копии страниц на сервере для индексации поисковиками. Есть и трудности с навигацией браузера кнопками «впред» и «назад».
Второй подход, который по ряду причин продвигают социальные сети — адаптивный дизайн в «чистом виде». Он основан на @media — правило, которое указывает тип носителя, для которого применяется указанный стиль. Обычно их группируют по наиболее популярным размерам экранов.
Этот подход к созданию web-страниц позволяет обойтись без Ajax, а значит и без проблем с индексацией страниц поисковиками. Но на все устройства приходит контент почти одного размера, что в случае с мобильными устройствами приводит к повышенному расходу трафика, батареи и памяти.
Разработчики мобильных сайтов выбрали Bootstrap
Однако слабые устройства сейчас занимают всё меньшую и меньшую рыночную долю: смартфоны и планшеты уже достигли показателей настольных систем. Маломощными устройствами остались носимые устройства («умные» часы, браслеты) и устройства из мира «интернета вещей». Там нет надобности в просмотре «тяжелого» контента.
А вот все остальные мобильные сайты с адаптивным дизайном чаще всего строятся на базе второго подхода с использованием фреймворков типа Bootstrap, который разработал Twitter.
Он изначально писался под мобильные устройства: сетка фреймворка разработана так, чтобы была возможность изначально проектировать дизайн под маленькие экраны, а поддержку широкоформатных устройств и телевизоров можно добавить потом. Хотя возможно и наоборот, ограничений нет. В итоге он оказался весьма удачным инструментом и быстро завоевал популярностью среди разработчиков.
Bootstrap 4 становится отраслевым стандартом
Twitter Bootstrap — open source ПО, его код доступен на GitHub, актуальная версия — 3.3.6. Bootstrap 4 пока в стадии альфа-тестирования. В комплект поставки входят HTML и CSS шаблоны оформления для веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейсов, включая JavaScript расширения. Фреймворк совместим с основными браузерами.
Но за универсальность надо платить — CSS препроцессор непривычен для начинающих программистов. Bootstrap поставляется в версии со стандартным CSS, но в исходном коде использует Sass (ранее комплектовался Less). Крупные open source проекты мигрируют на Sass, что раздражает разработчиков, привыкших к Stylus или Less.
Препроцессоры позволяют повторно использовать свойства CSS, что делает код модульным и масштабируемым. Sass же добавляет к CSS константы и примеси. Это облегчает поддержку целостности данных внутри большого набора стилей. Константы позволяют установить значение и использовать его внутри стилей, с помощью примесей, то же самое можно сделать с блоком атрибутов стиля.
Существенную помощь при работе верстальщиков окажет включение в Bootstrap спецификации FlexBox («CSS Flexible Box Layout Module»). Это расширение к стандартной CSS, поддерживается современными браузерами. Её использование позволяет строить весьма сложные макеты страниц при этом применяя простой код. При работе с мобильными сайтами это серьёзное подспорье.
Привязка к осям содержимого контейнеров в FlexBox:
Кроме того, для работы с Bootstrap необходимы навыки работы с JavaScript библиотекой jQuery. Те, кто привык к MooTools — столкнутся с некоторыми сложностями. Но всё решаемо.
Мобильный сайт — нечто другое, нежели его собрат для монитора. Всё вышеописанное могло бы показаться не очень-то и нужным лет десять назад.
Но времена меняются. Труд верстальщика переходит из разряда обычного специалиста по макетам в более сложную ипостась, приходится изучать гораздо больше «матчасти»: клиент уже не единственное место, где происходит рендеринг экрана. Да и экран экрану рознь нынче. Раз так, нужно изучать современные фреймворки, но лиха беда начало!
Тем, кто хочет разрабатывать под мобильные устройства, рекомендуем профессию «Разработчик мобильных приложений».
Адаптивная верстка сайтов: обзор подходов и CSS фреймворков
В настоящее время доля мобильного трафика растет стремительными темпами. С каждым днем людей, использующих девайсы с выходом в Интернет, становится все больше. Телефон всегда под рукой, в любом месте люди могут посмотреть необходимую информацию, прочитать новости и т. д. Обычный сайт можно просмотреть с помощью мобильного устройства. Однако, возникают некоторые нюансы при просмотре — для чтения отдельных блоков текста на относительно небольшом экране необходимо масштабировать страницу. Как следствие, теряется читабельность, удобство, сайт нужно постоянно пролистывать, растягивать, приближать. Многие элементы управления сайтов неудобно использовать, так как страницы не рассчитаны на управление с помощью прикосновений к экрану. Для решения этих проблем начали разрабатывать сайты, способные удобно отобразить информацию на любом устройстве.
О статье
Данная статья предназначена для разработчиков, имеющих опыт верстки сайтов, знающих HTML и CSS, понимающих назначение CSS селекторов и т. д.
В данной статье будут рассмотрены виды версток, позволяющие корректно отображать сайты на любом разрешении, техники, с помощью которых это осуществляется. Разберем понятие CSS-фреймворка и сделаем сравнительный анализ наиболее популярных.
Виды версток
Рассмотрим основные виды версток, их разницу и основные принципы, используемые при их реализации.
Фиксированная верстка
Фиксированная верстка (Fixed Layout) — подход создания страниц сайта, которые имеют заданную ширину. Ширина компонентов на странице не изменяется. На мониторах с маленьким разрешением появляется горизонтальная полоса прокрутки. Данный тип верстки не подходит для удобного отображения информации на мобильных устройствах.
Пример ниже демонстрирует строгое задание ширины для тега body:
Резиновая верстка
Резиновая верстка (Elastic layout) подразумевает возможность компонентов сайта менять свои размеры в зависимости от размера окна браузера, растягиваться от и до указанных минимальных и максимальных размеров. Это достигается благодаря использованию относительных значений, max-width / min-width (максимальная / минимальная ширина), max-height / min-height (максимальная / минимальная высота).
Примеры использования техник резиновой верстки:
Адаптивная верстка
Адаптивная верстка (Adaptive Layout) позволяет подстраиваться основному контейнеру и любому другому элементу сайта под разрешение экрана, делая возможным менять размер шрифта, расположение объектов, цвет и т. д. Происходит это динамически, например, с использованием медиа-запросов (@media), позволяющих автоматически определять разрешение монитора, тип устройства и подставлять указанные значения в автоматическом режиме. В примере ниже задается ширина div равная 960px для всех устройств, ширина которых меньше 1200px и 320px для всех устройств, ширина которых меньше 480px.
Отзывчивая верстка
Отзывчивая верстка (Responsive Layout) — это объединение резиновой и адаптивной вёрстки. При данном подходе используются как медиа-запросы, так и процентное задание ширины компонентов. Используя данный вид верстки можно с уверенностью сказать, что сайт приспособится к любому устройству.
Ниже задается ширина div равная 50% от размера родительского компонента для всех устройств, ширина которых меньше 1200px и 100% для всех устройств, ширина которых меньше 480px.
Основные техники реализации сайтов под любое разрешение
Относительные значения
Использование относительных значений позволяет отобразить информацию и компоненты на странице без потери читабельности и удобства просмотра.
Относительные значения для размеров и отступов
Относительные значения можно задавать для width, height, margin, padding и т. д. Самый известный способ задания относительного размера — указание в процентах (%).
Ниже приводится пример задания ширины равной 90% от размера родительского компонента.
При этом значение высчитывается относительно родительского компонента.
Также существуют значения относительно размера экрана:
- vw — 1% ширины окна. При уменьшении ширины окна, уменьшается ширина, высота, шрифт элемента;
- vh — 1% высоты окна. При уменьшении высоты окна, уменьшается ширина, высота, шрифт элемента;
- vmin — выбирается наименьшее из vw и vh;
- vmax — выбирается наибольшее из vw и vh.
Ниже рассмотрен пример использования vw и vh. В данном случае ширина и высота тега div будут равны 50% от ширины и высоты экрана соответственно.
Относительные значения для размера шрифта
Существуют следующие относительные значения для шрифтов:
- em — задаёт размер относительно шрифта родителя;
- rem — задаёт размер относительно шрифта .
Вычислим размер шрифта для тега body. В данном примере размер шрифта для body задается относительно размера html. Таким образом, размер шрифта для body будет равен 30px (20px * 1.5 = 30px).
Также относительные размеры шрифта можно задавать с помощью %, vw, vh и т. д. В следующем примере размер шрифта для body равен 80% от размера шрифта html — 16px.
Максимальные и минимальные размеры компонентов
Для задания максимальных и минимальных значений ширины и высоты компонента используются свойства max-width / min-width и max-height / min-height соответственно.
Допустим, что родительским компонентом данного div является body. Тогда, при изменении ширины экрана, ширина данного компонента будет составлять 60% от ширины body. Однако он будет увеличиваться только до величины, определенной в max-width, это 500px. Как только контейнер достигнет этой ширины — он перестанет увеличиваться.
Использование медиа-запросов
Медиа-запросы позволяют задать стили для определенного размера экрана, типа устройства на основе характеристик устройства и т. д. Все медиа-запросы начинаются с @media, а далее следует условие.
С помощью медиа-запросов можно задать стили для следующих типов устройств:
- all — все типы (значение используется по умолчанию)
- braille — устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми
- embossed — принтеры, использующие для печати систему Брайля
- handheld — смартфоны и аналогичные им аппараты
- print — принтеры и другие печатающие устройства
- projection — проекторы
- screen — экран монитора
- speech — речевые синтезаторы, а также программы для воспроизведения текста вслух
- tty — устройства с фиксированным размером символов
- tv — телевизоры.
Пример задания ширины для тега div, на экранах мониторов, смартфонах и т. п.
Ссылки по техникам реализации адаптивной верстки
Подробнее просмотреть и изучить рассмотренные в данной статье подходы и другие можно по ссылкам:
- Делать ли мобильную версию? 5 распространенных проблем, которые решает адаптивная верстка. Опыт Яндекса
- Адаптивная вёрстка: что это и как использовать
- Адаптивный и мобильный дизайн с CSS3 Media Queries
- Адаптивные изображения в CSS
- Техники адаптивной типографской разметки текста
CSS-фреймворки
CSS-фреймворк — фреймворк, созданный для упрощения работы верстальщика, быстроты разработки и исключения максимально возможного числа ошибок вёрстки (проблемы совместимости различных версий браузеров и т. д.). Данные фреймворки подразумевают использование различных подходов для корректного отображения сайтов на устройствах любого размера.
Многие разработчики предпочитают использование CSS-фреймворков, вместо прописывания всех стилей вручную. Это обусловлено следующими причинами:
- Более быстрая разработка
- Поддержка кроссбраузерности
- Поддержка различных устройств и размеров экранов
- Единообразие кода при работе в команде позволяет снизить число разногласий при разработке.
Как и библиотеки скриптовых языков программирования, CSS-библиотеки, обычно имеющие вид внешнего CSS-файла, добавляются в заголовок веб-страницы.
Рассмотрим самые популярные CSS-фреймворки.
Bootstrap
Самый популярный фреймворк для разработки адаптивных и мобильных web-проектов. Bootstrap — это инструмент с открытым исходным кодом для разработки сайтов с помощью HTML, CSS и JS. Bootstrap — интуитивно простой и в тоже время мощный интерфейсный фреймворк, повышающий скорость и облегчающий разработку web-приложений.
Bootstrap легко и эффективно масштабирует ваш проект с одной базой кода — от телефонов и планшетов до настольных компьютеров. Для этого используется 12-колоночная сетка:
В дополнение к CSS данный фреймворк включает в себя поддержку двух самых популярных CSS-препроцессоров: Less и Sass.
- 12 — колоночная сетка
- Большое количество готовых для использования компонентов
- Поддержка Less и Sass
- Использование Normalize.css.
Material Design for Bootstrap
Material Design for Bootstrap — это инструментарий с открытым исходным кодом для разработки приложений, основанный на Bootstrap и использующий подходы Material Design.
Фреймворк позволяет быстро создавать приложение с помощью переменных Sass, адаптивной сетки, большого количества готовых компонентов и мощных плагинов, реализованных на jQuery.
- 12 — колоночная сетка
- Большое количество готовых для использования компонентов в соответствии с концепцией Material Design.
Materialize
Materialize — современная, адаптивная платформа, построенная на принципе материального дизайна. В платформу включен набор компонентов, а также стили для них. Проработаны анимации и эффекты в компонентах, чтобы они были максимально плавными. Все элементы и анимации интуитивны и понятны пользователю, а единый адаптивный дизайн упрощает UX для всех платформ.
- 12 — колоночная сетка
- Большое количество готовых для использования компонентов в соответствии с концепцией Material Design
- Поддержка Sass.
Bulma
Bulma — современный CSS-фреймворк основанный на новом способе отображения Flexbox. Flexbox — самый современный инструмент компоновки, доступный в CSS.
- Использование Flexbox вместо колоночной сетки
- Большое количество готовых для использования компонентов
- Поддержка Sass
- Не используются JS-файлы
Pure
Pure — набор небольших адаптивных CSS-модулей, которые вы можете использовать в любом веб-проекте. Pure построен на Normalize.css и предоставляет разметку и стили для собственных HTML-элементов, а также наиболее распространенные компоненты пользовательского интерфейса. Pure — адаптивный фреймворк, поэтому элементы отлично смотрятся на всех размерах экрана. Pure имеет минимальные стили, что подразумевает написание собственных кастомизированных стилей.
- 24 — колоночная сетка
- Модульный фреймворк
- Не используются JS-файлы
- Использование Normalize.css
- Минимальное количество готовых компонентов и стилей.
Заключение
Быстрый рост популярности просмотра сайтов на мобильных устройствах обуславливает необходимость реализации удобного и читабельного отображения компонентов в независимости от типа устройств и размеров экранов. Рассмотренные в данной статье подходы помогут создавать сайты для различных устройств и размеров экранов. Описание CSS-фреймворков упростит выбор подходящего фреймворка для использования в проекте.
Адаптивная верстка без Bootstrap, какие варианты?
Хочу в будущем попробовать себя верстальщиком в какой-нибудь конторе. В требованиях к соискателю везде вижу «навыки адаптивной верстки» где то с bootstrap, а где-то пишут мол обязательно без его использования. Такой вопрос: в чем заключается адаптивная верстка БЕЗ bootstrap, только лишь медиа запросами в таблицах стилей?
- Вопрос задан более трёх лет назад
- 5727 просмотров
Комментировать
Решения вопроса 1
Javascript, Node.js. React.js, Vue.js, WordPress
Ну так напишите свой велосипед сетки + media queries
Заодно разберетесь что и как устроено + скил поднимите.
На самом деле ничего ахти сложного там нет.
Ответ написан более трёх лет назад
Нравится 1 3 комментария
Руслан Шадура @Houdy Автор вопроса
На самом деле так и делаю. Просто интересно, правильный ли такой подход или веб студии, ищущие себе сотрудника, хотят чего-то большего?
Руслан Шадура: С тех пор, как гугл начал учитывать адаптивность сайта для поиска с мобильных устройств, у меня было много заказов на «адаптацию» сайтов которые были сверстаны без сетки (часто просто ужастно). Переверстывать все с нуля клиенты не хотят. Поэтому все делалось ручками без бутстрапов. Так что такой опыт вполне себе полезен и в резюме можно смело указывать.
Иван Петров @juvansheer
Alex: надейся что заказчики тебя не узнали тебя по этому комментарию
Ответы на вопрос 3
Вся сила в самообразовании
Я думаю, что это Вам поможет frontender.info/adaptive-vs-responsive-terminology
Ответ написан более трёх лет назад
Комментировать
Нравится 2 Комментировать
artem_music @artem_music
CSS media-queries наше все. На высоконагруженном проекте с детальной оптимизацией возможно когда нибудь придется отказаться от бутстрапа и сделать все нативно. Опять же, возможно.
Если необходимо переставлять три блока в зависимости от размера экрана, то проще сделать нативно, чем тянуть весь бутстрап, думаю этим и руководствуются компании, когда пишут подобные требования в вакансиях.
Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
Виктор Таран @shambler81
по мне так остальные варианты верстки сейчас умирают.
Тут конечно у всех свои мениня. Но даже битрикс отказался от своего фреймворка и прееводит д7 на бутстрап.
Не говоря что уже жумула вордпресс давно на нем сидят.
Конечно можно говорить о вариантах но всеже бутстрап наступает.
Адаптивная верстка без bootstrap
See the Pen Header, 2 columns, footer responsive version by Aleksandrs (@CoolS2) on CodePen.0 HTML Все что нам потребуется в html, это стандартные блоки HTML5 (Шапка, сайдбар, контент и футер). Шапка и футер будут на всю ширину, сайдбар ширина будет 20% и у контента 80%. Еще для примера добавим внутри контента 2 блока, у которых ширина будет по 50%
My header 2 column, header and footer This example uses line-based positioning, to position the header and footer, stretching them across the grid.
Title Text on first block
Title Text on second block