Адаптивная верстка, тенденции и статистика, применяем Bootstrap

Что такое адаптивная верстка сайта и почему ее применения сегодня обязательно для любого ресурса. Удачные примеры адаптации сайтов. Применение Bootstrap фреймворка для адаптивности веб ресурса.

01 октября 2020
3 минуты
23
0

Время когда адаптивности не существовало

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

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

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

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

Тенденции и статистика

  • Сегодня уже больше половины (а в некоторых нишах и 70-90%) посетителей заходят в интернет с мобильных устройств.
  • Поисковые системы учитывают в ранжировании выше сайта адаптирующиеся под любые устройства. Google еще в 2016 году ввел формулу учитывающию "мобильность сайта". Позже за ним последовал и Яндекс.
  • Есть отдельная версия поиска для пользователей с мобильными устройствами, где им показываются в поискойвой выдаче в основном сайты с адаптацией под них.
  • Корректно и функионально выполненная адаптивная версия сайта повышает поведенческие факторы (ПФ), если конечно страница точно отвечает запросу пользователя. ПФ учитываются в ранжировании сайта в поисковой выдаче.

Использовать свои стили CSS и JS или Bootstrap

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

Что такое Bootstrap?

Bootstrap

Это открытый и бесплатный HTML, CSS, JS фреймворк, который применяется веб разработчиками для адаптивной верстки сайтов и веб приложений.

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

Из чего состоит Bootstrap?

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

С чего начать изучение Bootstrap?

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

Второе это разобраться с системой сеток. Сетка Botstrap используется как для основного каркаса страницы так и для ее элементов.

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

Преимущества и недостатки Bootstrap

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

  • Высокая скорость
  • Кроссбраузерность и кросплатформенность
  • Наличие большого кол-ва компонентов
  • Возможность настройки под свой проект
  • Низкий порог вхождения
  • Приятный дизайн компонентов
  • Большое сообщество и много обучающего материала

Недостатки:

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

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

Комментарии ()