Некоторые возражают тем, что мобильная индустрия еще не настолько популярна, и большинство просто пытается имитировать iOS-интерфейс в интернете. Мы согласны, что такое встречалось, и это было не очень приятно, однако это не единственная причина, по которой клиенты задают вопросы по поводу адаптивных дизайнов. Многим из них кажется, что адаптивный дизайн можно по одному лишь велению включить или выключить, и что его в наше время абсолютно обязательно иметь, а стоимость работы при этом должна оставаться той же. На самом деле, здесь не все так просто!
Разработка адаптивного дизайна веб-сайта с использованием Twitter Bootstrap
Адаптивный веб-дизайн – это подход, который часто называют даже складом ума, так как здесь важно изменить сам ход мышления, если вы собрались переходить на адаптивный дизайн. Основная суть в адаптивном дизайне заключается в том, что один дизайн отвечает за все. Больше не будет никаких m.domain.com, не будет touch.domain.com, не будет 3 и более отдельных CSS-файлов, не будет 7 PSD-файлов для каждого устройства или ориентации устройства. Будет просто domain.com, который будет отлично приспосабливаться как к экрану настольного ПК, так и к мобильным устройствам и планшетам.
Схема действия адаптивного дизайна основана на CSS3 media queries, которые определяют конкретные разрешения и размеры экрана. Сегодня media queries используются практически повсеместно, но их зачастую используют для стилизации шаблона печати страницы. С появлением CSS3 у этих параметров появилось и другое предназначение.
Забавный факт: сегодня мы можем использовать media query для устройств, которые весят, скажем, до 3 килограмм. Забавно, не правда ли?
Если вы надумаете заниматься разработкой адаптивных дизайнов, то есть несколько аспектов, которые следует учитывать:
* Больше работы: в основном, придется писать больше CSS-кода, а часто и больше JS, но также следует учитывать дополнительные размышления и планирования самого пользовательского интерфейса, о том, как он будет изменяться в размерах, как пользователи будут взаимодействовать с ним и так далее.
* Больше тестирований – это самый основной минус. Самый действенный способ тестирования, конечно же, подразумевает под собой настоящие устройства. И теперь представьте себе, как можно работать, когда с каждыми новыми 5 строками CSS-кода, вам нужно будет открывать сайт через iPad и другие устройства, проверять, как сайт масштабируется и ведет себя при смене ориентации устройства.
Правда, сегодня мы хотим рассказать вам о практически волшебном способе разработки адаптивных дизайнов. И способ этот называется Twitter Bootstrap.
Twitter Bootstrap
Twitter Bootstrap был создан двумя парнями в Twitter, которые хотели немного ускорить свой код и рабочий процесс. Если вы зайдете на официальный сайт Twitter Bootstrap, то там инструмент описывается как «утонченная, интуитивная и мощная среда разработки внешних интерфейсов для ускоренной и упрощенной веб-разработки». И это, кстати, правда!
Многие предпочитают больше самостоятельно писать код, и не полагаться на среду разработки, и все равно теперь используют эту среду, так как каждая минута, потраченная на ее изучение, действительно стоит того!
Twitter Bootstrap предлагает вам множество интересных вещей:
* Глобальные стили для body для типа сброса и фона, стилей ссылок, сеточной системы и двух простых шаблонов.
* Стили для основных HTML-элементов вроде шрифтов, кода, таблиц, форм и кнопок, а также огромный набор иконок.
* Основные стили для общих компонентов интерфейса вроде вкладок, панелей навигации, оповещений, заголовков страницы и многого другого.
* javascript-плагины для таких вещей, как подсказки, всплывающие кона, модальные окна и многого другого.
Но самое главное заключается в том, что этим инструментом довольно легко научиться пользоваться, к тому же есть подробная документация и примеры, с помощью которых вы без труда сможете разрабатывать собственные проекты. Давайте копнем глубже!
Приступаем к работе с Bootstrap
Сначала вам нужно посетить страницу скачивания Bootstrap (к тому же, советуем вам занести эту страницу в закладки). Здесь вы сможете найти документации для всего, включая некоторые основные наставления и руководства, поэтому мы не будем здесь тратить на это время.
Важно отметить то, что вы можете скачать среду разработки с официального сайта, либо можете скачать настроенную версию (которую предпочитают многие). Преимущество данной версии заключается в том, что она включает всего 1 CSS-файл со всеми необходимыми вам media queries, в то время как обычная версия предлагает отдельный CSS-файл и отдельный CSS-файл для media queries, а также несколько JS-файлов, что создает небольшой бардак.
Если вы перейдете на страницу Customize Bootstrap, то увидите, что у вас есть возможность включить/выключить JS-плагины, CSS-стили, UI-компоненты, адаптивные queries, определение шрифтов, цветов и так далее. В рамках нашего сегодняшнего руководства, здесь вы можете оставить все как есть, и кликнуть по большой кнопке Download Customized Version.
После того, как вы скачали и распаковали архив, у вас в распоряжении будет следующее:
- bootstrap/
-- css/
--- bootstrap.css (safe to delete)
--- bootstrap.min.css
-- js/
--- bootstrap.js (safe to delete)
--- bootstrap.min.js
-- img/
--- glyphicons-halflings.png
--- glyphicons-halflings-white.png
Первое что вы можете сделать, это удалить неуменьшенные версии CSS и JS-файлов (bootstrap.css, bootstrap.js), так как мы не думаем, что вам понадобится редактировать или исправлять какой-то bootstrap-код, и к тому же минимизированные версии будут весить гораздо меньше, и будут готовыми к использованию.
Далее нам нужно включить эти файлы в проект. Давайте представим, что у нас есть чистый HTML-файл, который выглядит примерно так:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>No Boostrap in this project</title>
</head>
<body>
<p>Hey, i wanna be responsive too :(</p>
</body>
</html>
Здесь вам нужно просто сослаться на CSS- и JS-файлы, которые были созданы посредством инструмента. Например:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>With Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<p>Hello Bootstrap!</p>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Примечание 1: важно помнить, что вам не нужно включать какие-то либо js-файлы в Bootstrap, чтобы они работали. У вас будут все адаптивные свойства, сетка и CSS-стили из одного CSS-файла, но для других элементов среды разработки вроде оповещений, вкладок и так далее, нам будут нужны JS-файлы. Также не забудьте включить jQuery, если вы собираетесь использовать JS-плагины от Bootstrap.
Примечание 2: Мы всегда размещаем все наши js-файлы в самом низу HTML, потому что таким образом они не блокируют рендеринг страницы и не растягивают время загрузки CSS. По крайней мере, об этом написано в правилах ySlow и Google PageSpeed для оптимизации и ускорения загрузки веб-сайтов. Если вы новичок, то не забудьте ознакомиться с материалами по ссылкам выше, и прочитать об этом, потому что вы уже в этом замешаны.
Итак, теперь в наш проект включен Bootstrap, и мы можем воспользоваться его волшебством.
Основа Bootstrap
Посредством Bootstrap вы получаете 12-колоночную сетку с двумя опциями:
* fluid – если вам нужно, чтобы ваше приложение растягивалось на 100% ширины экрана.
* fixed – если вы создаете стандартный веб-сайт, то вам, вероятнее всего, не понадобятся все 100% ширины экрана. Часто используется лишь 940 пикселей.
Примечание: если вы воспользуетесь фиксированным шаблоном, то вам следует помнить о том, что по умолчанию в Bootstrap есть media query для «больших настольных мониторов», так что если ваш экран будет более 1200 пикселей в разрешении, 940-пиксельная сетка расширится до 1170 пикселей. Вы можете выключить эту функцию в разделе customization, о которой мы уже упоминали ранее, и тогда у вас будет простая 940-пиксельная сетка. Многие предпочитают оставить эту функцию включенной, так как на 27-дюймовом iMac все выглядит довольно маленьким.
Давайте предположим, что мы используем фиксированный шаблон для создания 3 блоков на главной странице, и нам хочется, чтобы они шли друг за другом. Если бы вы не использовали Bootstrap, вам бы пришлось писать CSS для вашего контейнера контента, каждого блока, добавлять выравнивание, убирать выравнивание, указывать отступы, поля… давайте же просто взглянем на волшебство Bootstrap:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Getting started with Bootstrap</title>
<link rel="stylesheet" href="http://flip.hr/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="hero-unit">
<h1>Awesome responsive layout</h1>
<p>Hello guys i am a ".hero-unit" and you can use me if you wanna say something important.</p>
<p><a class="btn btn-primary btn-large">Super important »</a></p>
</div><!-- .hero-unit -->
<div class="row">
<div class="span4">
<h2>Box Number 1</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">Click meeee »</a></p>
</div><!-- .span4 -->
<div class="span4">
<h2>Box Number 2</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">Click meeee »</a></p>
</div><!-- .span4 -->
<div class="span4">
<h2>Box Number 3</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn" href="#">Click meeee »</a></p>
</div><!-- .span4 -->
</div><!-- .row -->
</div><!-- .container -->
</body>
</html>
И на этом все! У нас есть 3 блока с красивым стандартным оформлением, а также мы в качестве бонуса добавили некоторый контент перед блоками, чтобы все выглядело более привлекательно. А самое главное – здесь все полностью адаптивно (вы можете просто попробовать изменить в размере ваш браузер).
Давайте немного разберем написанное:
<div class="container"></div>
- это необходимый элемент, так как он служит оболочкой для всего контента страницы. Самое интересное здесь в том, что если вам захочется использовать гибкую разметку, вам нужно будет просто добавить container-fluid вместо container.<div class="row"></div>
- еще один необходимый элемент для создания рядов, оболочка для колонок, которая отвечает за поля, отступы и очистку свободных элементов. Опять же, если вы заинтересованы в использовании гибкой разметки, просто замените row на row-fluid, и все готово!<div class="span4"></div>
- div-элемент с классом span* представляет собой колонку, и в данном случае, нам понадобятся 3 блока в один ряд. Так что, если провести простое математическое вычисление 12/3=4, то мы получим span4.<div class="hero-unit"></div>
- это просто еще один компонент Bootstrap, который мы добавили для того, чтобы сделать пример более привлекательным.Как видно, при помощи всего 3 CSS-классов вы можете уже сказать, что понимаете основу. Единственное, что вы будете изменять, это классы .span, и они могут изменяться от 1 до 12, в зависимости от того, насколько широким должен быть ваш блок. Так что, div с классом span12 должен быть шириной в 1170 пикселей для широких рабочих столов, 940 пикселей для ноутбуков, а также меньших размеров для планшетов и телефонов.
Чтобы узнать о более комплексных примерах, проверьте примеры, приведенные в Bootstrap.
Уже только с этими знаниями вы можете создавать адаптивные шаблоны буквально за минуты, но не стоит на этом останавливаться. Если вы более подробно взглянете в документации Bootstrap, то увидите, что есть и UI-компоненты вроде навигационных панелей, вкладок, гармошек, выпадающих меню, кнопок и многого другого. Не ленитесь познакомиться со всеми компонентами Bootstrap.
По поводу Bootstrap также следует отметить тот факт, что вы можете использовать множество стандартизированных js-плагинов вроде модальных окон, вкладок, гармошек и слайдеров, которые отлично работают со стилями Bootstrap. К тому же, они адаптивны и поддаются настройке.
Расширяем Bootstrap
Bootstrap изначально укомплектован большинством необходимых разработчикам элементов, что особенно подойдет новичкам, а для профессионалов здесь предоставлены некоторые плагины, которые упрощают жизнь:
* jQuery UI Bootstrap Theme
Это нечто, чем пользуется множество разработчиков внешних интерфейсов при разработке современных и интерактивных дизайнов. Мы самостоятельно протестировали этот инструмент, и можем с уверенностью сказать, что он работает отлично.
* Bootstrap Colorpicker
Еще один хороший плагин для Bootstrap, который позволяет очень удобно выбирать цвет.
* Fbootstrapp
Fbootstrapp представляет собой набор инструментов, предназначенный для того, чтобы упростить процесс разработки iframe-приложений для Facebook. Он включает основной CSS и HTML для типографики, форм, кнопок, таблиц, сеток, навигации и так далее, разработанных специально для сочетания с внешним видом социальной сети Facebook.
* Forms в Bootstrap Dropdowns
Это больше уже хак, но он оказывается очень удобным, когда вам потребуется создать формы авторизации в этих простых в использовании меню Bootstrap Dropdown.
* Font Awesome
Если вам нравится использовать иконки при создании элементов пользовательского интерфейса, то данный пользовательский шрифт был создан из иконок, которые точно удивят вас. Более 70 иконок, созданных специально для bootstrap, в одном CSS-файле.
* BootBox
Bootbox.js – это небольшая javascript-библиотека, которая позволяет вам создавать программируемые диалоговые окна при помощи модальных окон Twitter Bootstrap.
Сходим с ума вместе с Bootstrap
Возможно, вы сейчас сидите и думаете: «Все это классно, но Bootstrap предлагает нам довольно обычный дизайн, который не подойдет к моему суперскому уникальному дизайну». Остановитесь на секунду, и позвольте нам объяснить, что вы немного не правы. Вы можете использовать Bootstrap с любыми дизайнами в любых условиях. У нас были клиенты, которые предлагали нам уже имеющийся код и CSS, но не предоставляли нам адаптивных шаблонов, и буквально за пару дней мы превращали их веб-сайт в адаптивный веб-сайт.
Вы можете увидеть отличный пример в портфолио компании flip.hr.
Открывая какой-либо веб-сайт, большинство из вас никогда не поймет, что этот сайт был разработан при помощи Bootstrap, так как дизайн будет очень красив, поверх того, что было сделано при помощи Bootstrap. Это на самом деле так, и мы можем рассказать вам о некоторых использованных компонентах: навигационные панели, hero units, миниатюры, кнопки, модальные окна, основные стили и многое другое. При разработке данного веб-сайта предполагалось, что он будет открываться на весь экран, поэтому мы использовали гибкий шаблон Bootstrap, который позволил нам сэкономить много времени, и мы смогли сосредоточиться на дизайне и самом пользовательском интерфейсе.
Еще один факт по поводу Bootstrap, который следует отметить, заключается в том, что платформа очень гибкая. К примеру, в некоторые сайты включают больше параметров: центрирование шаблона, ленивую загрузку изображений, аппаратное ускорение для переходов по страницам и эффектов. Также пишут дополнительные media queries, так некоторым хочется, чтобы все выглядело одинаково на всех устройствах. Чтобы протестировать веб-сайт вроде нашего на всех устройствах и разрешениях, у нас ушло бы до нескольких месяцев, а следовательно, теперь это время мы можем посвятить дизайну, функциональности и, конечно же, SEO-оптимизации.
Секреты профессионалов
* Adobe Edge Inspect
Edge Inspect был выпущен совсем недавно, и позволяет вам осуществлять предварительный просмотр или тестирование дизайнов на iOS и Android-устройствах. Ах да, забыли сказать, что все это происходит удаленно? Это позволит вам сэкономить множество времени, и позволит вам разрабатывать лучшие и более быстрые адаптивные свойства.
* Viewport Resizer
Еще один замечательный инструмент для тестирования ваших веб-сайтов на адаптивность. Это браузерный инструмент (букмарклет, если точнее), так что вам не придется ничего скачивать дополнительно. Просто кликните и все.
Responsive Images
На самом деле, существует несколько вариантов реализации адаптивных изображений. Большинство людей, которых мы знаем, используют методику адаптивных изображений от Filament Group. Так что, пока в спецификации HTML5 не появится хорошего и родного подхода, вы можете ознакомиться со следующими ссылками:
* Responsive Images
* Adaptive Images
* Retina Images
Разное
Здесь мы хотим предложить вам что-то, что также окажется удобным при работе над адаптивными дизайнами. Плагин Fittext невероятно привлекателен, но надеемся, что вам не придется часто использовать его, потому как есть еще и плагин Responsive Slides.
* Fittext
* Responsive Slides
Бонусы и больше ресурсов
* HTML5 Boilerplate
Это отличный HTML5-шаблон для всех разработчиков внешних интерфейсов. Это набор подсказок и хаков, а также лучших примеров реализации разработки внешних интерфейсов. Мы часто используем его в собственных проектах. Конечно же, нужно использовать по востребованию, но в целом нужно знать, что это такое, и уметь этим пользоваться.
* Платформа Foundation
Это один из таких инструментов, с которым наша команда познакомилась в процессе написания статей. Мы немного поиграли с ней, и поняли, что это может быть хорошей альтернативой Bootstrap. Foundation, как говорят, это одна из самых расширенных адаптивных платформ, так как в ней есть все те функции, что и в Bootstrap, а также некоторые дополнительные.
Мы также предлагаем вам несколько других полезных ресурсов, связанных с Twitter Bootstrap.
* Building Twitter Bootstrap (Разработка при помощи Twitter Bootstrap)
* Twitter Bootstrap 101: Introduction (Twitter Bootstrap 101: Введение)
* 20 Awesome Resources for Twitter Bootstrap Lovers (20 великолепных ресурсов для любителей Twitter Bootstrap)
* 20+ Beautiful Resources That Complement Twitter Bootstrap (Более 20 ресурсов, посвященных Twitter Bootstrap)
В завершение
Мы надеемся, что у нас получилось рассказать вам о том, что такое Bootstrap. Помните, что это не поможет вам сделать веб-сайт, если вы не знаете абсолютно ничего. Но вы можете быть уверенными в том, что этот инструмент очень поможет вам, если вы понимаете, что делаете.