Как верстать адаптивно без бутстрапа

Адаптивная верстка без Bootstrap, какие варианты?

Хочу в будущем попробовать себя верстальщиком в какой-нибудь конторе. В требованиях к соискателю везде вижу «навыки адаптивной верстки» где то с bootstrap, а где-то пишут мол обязательно без его использования. Такой вопрос: в чем заключается адаптивная верстка БЕЗ bootstrap, только лишь медиа запросами в таблицах стилей?

• Вопрос задан более трёх лет назад
• 5755 просмотров

Комментировать
Решения вопроса 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 на бутстрап.
Не говоря что уже жумула вордпресс давно на нем сидят.
Конечно можно говорить о вариантах но всеже бутстрап наступает.

Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

• JavaScript
• +3 ещё

Как сделать ограничитель поля символов?

• 1 подписчик
• 2 часа назад
• 35 просмотров

Создайте адаптивные веб-сайты за 37 минут без Bootstrap — Учебное пособие [ENG SUBS]

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

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

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

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

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

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

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

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

Адаптивный веб-дизайн: без Bootstrap не обойтись

Bootstrap 4 сделал приоритетом разработку веб-сайтов для мобильных устройств. Для этого в нем появились некоторые новшества.

11 января 2016 3 минуты 18935

Автор статьи
Вадим Ференец

Автор статьи
Вадим Ференец
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 — столкнутся с некоторыми сложностями. Но всё решаемо.

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

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

Тем, кто хочет разрабатывать под мобильные устройства, рекомендуем профессию «Разработчик мобильных приложений».

Адаптивная вёрстка: что это такое и как правильно использовать

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

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

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

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

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

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

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

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

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

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

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

Adaptive вёрстка, как кресло, которое подстраивается под форму тела сидящего. Открываешь сайт с компьютера — пользуешься широкоформатной версией, достаёшь смартфон — контент выглядит немного по-другому, но главные возможности сохраняются.

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

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

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

Основа любого контента — изображения. На первых этапах появления адаптивной вёрстки больше всего проблем было с картинками. На помощь приходит CSS свойство max-width, но оно не работает в Internet Explorer.

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

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

3 основных типа вёрстки

Новички часто путают адаптивную вёрстку с другими видами и не могут понять, в чём разница. Если всерьёз настроены на долгосрочную карьеру HTML-верстальщика, обязательно разберитесь в нюансах и научитесь докапываться до сути.

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

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

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

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

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

Многие верстальщики для ускорения создания адаптивной версии используют фреймворки. Самым популярным является Bootstrap, который активно развивается с 2011 года и объединил миллионы энтузиастов.

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

Зачем нужна adaptive вёрстка

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

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

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

Если на сайте нет адаптации под смартфоны, он перестаёт существовать для большинства пользователей. Доля мобильного трафика с каждым годом растёт и в последние 5 лет наметился чёткий тренд на mobile-first.

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

Хотя 5-10% аудитории всё равно будут выбирать широкоформатные мониторы. Потому что, десктопная версия в большинстве случаев гораздо удобнее мобильной и помогает экономить время на выполнении стандартных задач.

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

Доля мобильного шоппинга тоже растёт. По состоянию на 2019 году, 60% покупок в интернете жители России оформляли со смартфонов. Например, в Китае цифры ещё больше — 80%. Российский рынок e-commerce находится на стадии зарождения, но никто не будет спорить с тем, что будущее за мобильной коммерцией.

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

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

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

Преимущества adaptive вёрстки:

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

Минусы:

1. Повышается стоимость проекта. Для сайтов с нестандартными особенностями адаптация может стоить очень дорого.
2. Нужна помощь опытного разработчика. Если проект постоянно дорабатывается, придётся нанимать специалиста в штат или заключать договор на удалённую работу.
3. Подходит не для всех проектов. Некоторые сайты сложно адаптировать для мобильных устройств, потому что встроенные инструменты слишком «тяжёлые» и надо будет сильно переработать структуру.

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

Особенности адаптивной вёрстки

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

Однородность

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

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

Универсальность

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

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

Кроссбраузерность

Некоторые верстальщики ориентируются исключительно на самый популярный браузер Google Chrome и забывают, что есть пользователи, которые принципиально используют Opera, Firefox или Яндекс.Браузер.

Несмотря на то, что почти все они построены на базе Chromium, в каждом браузере есть неподдерживаемые CSS свойства. Например, grid не поддерживается в Opera Mobile, которым активно пользуются владельцы смартфонов.

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

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

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

Медиаконтент

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

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

Правильные шрифты

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

Что касается Google Fonts и других внешних библиотек, по возможности от них стоит отказаться. Когда шрифты лежат на своём сервере загрузка происходит гораздо быстрее и блокирующих запросов в head не будет.

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

Полезные инструменты для разработчиков

Собрали несколько must have инструментов для верстальщиков, которые выбрали фронтенд и хотят довести свои навыки до совершенства. Используйте их, чтобы сократить время работы над адаптивной версией.

Bootstrap

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

Bootstrap выступает в роли каркаса для адаптивных сайтов. Разработчикам надо последовательно создать HTML-структуру и присвоить элементам соответствующие классы. После этого на фронтенде появятся блоки с готовым оформлением.

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

Startup

Это визуальный конструктор, который позволяет создавать темы для Bootstrap из готовых блоков. Собираете структуру из подходящих элементов и экспортируете проект на компьютер. На выходе получается готовый сайт с HTML, CSS и JS файлами.

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

Как обычно, за всё хорошее приходится платить. Минимальный тариф обойдётся в $249 на год. Если заплатить сразу за 12 месяцев, получится сэкономить $99.

Responsinator

Популярный сервис, который показывает отображение сайта на разных устройствах. Идеальное решение для отладки адаптивной версии в процессе разработки. Можно выбрать любой доступный девайс и найти ошибки в вёрстке.

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

Caniuse

Сервис, в котором собраны таблицы совместимости разных технологий с популярными браузерами. Можно посмотреть, какой процент браузеров поддерживают, например, CSS свойство sticky или формат шрифта ttf.

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

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