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

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

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

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

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

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

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

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

Новые комментарии

Спасибо,
что читаете наш блог!
Posts popup