РАЗДЕЛЫ
Время когда адаптивности не существовало
Время когда интерент был местом компьютерных гиков и пространством только для текстовых данных уже прошло. Сейчас это полноценная цифровая реальность, которую можно и даже нужно использовать для получения дохода.
Что такое адаптивная верстка?
Сегодня мы входим в интернет с различных устройств: обычные домашние компьютеры, планшеты, мобильные телефоны, телевизоры. И важно чтобы Ваш сайт корректно отображался на всех устройствах. Для этого нужна адаптивная верстка сайта. Адаптивный - самонастраиваюшийся, подстраивающийся. Т.е. верстка сайта подстраивается под различные разрешения экрана пользователя.
Тенденции и статистика
- Сегодня уже больше половины (а в некоторых нишах и 70-90%) посетителей заходят в интернет с мобильных устройств.
- Поисковые системы учитывают в ранжировании выше сайта адаптирующиеся под любые устройства. Google еще в 2016 году ввел формулу учитывающию "мобильность сайта". Позже за ним последовал и Яндекс.
- Есть отдельная версия поиска для пользователей с мобильными устройствами, где им показываются в поискойвой выдаче в основном сайты с адаптацией под них.
- Корректно и функионально выполненная адаптивная версия сайта повышает поведенческие факторы (ПФ), если конечно страница точно отвечает запросу пользователя. ПФ учитываются в ранжировании сайта в поисковой выдаче.
Использовать свои стили CSS и JS или Bootstrap
Для адаптивности сайта мы можем создать свои правила стилей в файле CSS или использовать готовую библиотеку Bootstrap. Честно скажу занова создавать велосипед нет никакого смысла и проще пользоваться уже готовыми библиотеками. Тем более что Bootstrap стал этаким стандартом для адаптивных сайтов. Его используют на сайтах небольших компаний, так и на сайтах крупных организаций, гос-учреждений и др. больших проектах.
Что такое Bootstrap?
Это открытый и бесплатный HTML, CSS, JS фреймворк, который применяется веб разработчиками для адаптивной верстки сайтов и веб приложений.
Его основная область применения это разработка фронтэнда сайта и административных панелей. Легкость освоения, доступность, бесплатность и скорость работы сделали его самым популярным фреймворком для адаптивности ресурсов.
Из чего состоит Bootstrap?
- сетки
- классы для стилизации текста, изображений, таблиц, кнопок и др. контента
- компоненты, состоящие из структур html кода и классов для создания: форм, модальных окон, навигации, карточек товаров или услуг, выпадающих списков, подсказок, слайдеров, аккардеонов и многих других элементов сайтов.
- классов для решения вспомогательных задач (выравнивание текста, отступы margin и padding, задание цвета элементу или фону, скрытие или отображение элемента и др.)
С чего начать изучение Bootstrap?
Первое что нужно сделать, подключить его. Посмотреть как это сделать можно на официальном рускоязычном сайте Bootstrap.
Второе, разобраться с системой сеток. Сетка Botstrap используется как для основного каркаса страницы так и для ее элементов.
После изучения этих базовых вещей, можно переходить к верстке адаптивного сайта или веб приложения.
Преимущества и недостатки Bootstrap
Преимущества:
- Высокая скорость
- Кроссбраузерность и кросплатформенность
- Наличие большого кол-ва компонентов
- Возможность настройки под свой проект
- Низкий порог вхождения
- Приятный дизайн компонентов
- Большое сообщество и много обучающего материала
Недостатки:
- Большой размер CSS и JS файлов, в отличие если бы Вы писали сами их под свой проект
- Если требуется полностью уникальный дизайн и верстка сайта, то предется значительно переписывать CSS и JS файлы под себя.
По сути недостатки себя проявляют только в проектах, где требуется серьезно дорабатывать или изменять дизайн и структуру Bootstrap файлов.
Комментарии ()