От автора: Адаптивный дизайн – это построение вебсайта с разметкой на базе сетки, масштабируемыми изображениями и медиазапросами, как его описывает Итан Маркотт (Ethan Marcotte). После того, как он дал определение этой технике, начали появляться framework-и адаптивного дизайна, объединяющие эти принципы. Основанные по большей части на CSS и JavaScript’е, многие из них с открытым кодом, их можно бесплатно скачать и легко модифицировать под себя.
Самые популярные сейчас – это Bootstrap и Foundation, о которых мы и поговорим в этой статье.
По мере роста популярности дизайнерских framework-ов возник жаркий спор: зачем профессиональному дизайнеру ими пользоваться?
Интернет-споры дошли до крайности. Многие заявляют, что framework-и адаптивного дизайна ужасны, и пользуются ими только те, кто не знает HTML и CSS. Вот каковы обычные аргументы против framework-ов:
Дизайнер способен написать собственную систему сеток, и просто обязан это делать, если хоть немного знает HTML и CSS.
Веб-сайты на базе framework-ов медленно грузятся.
Все сайты на их основе выглядят одинаково.
Они обычно слишком раздуты, либо благодаря дополнительным тэгам div, количеству строк CSS, составляющему от 5000, либо из-за больших файлов JavaScript.
Пока очернители громогласно кричат, framework-и адаптивного дизайна продолжают набирать популярность. Я полагаю, что у таких framework -ов есть положительные стороны, даже для самого опытного веб-разработчика программ пользовательского интерфейса, и ниже я о них расскажу.
Веб-сайт американского модерниста Пола Рэнда (Paul Rand) был создан с помощью Foundation.
Пространство framework -ов адаптивного дизайна
Однажды утром я слушал основной доклад Эли Уайта (Eli White) на конференции Northeast PHP. Уайт – разработчик PHP, и его речь была ретроспективой разработки Веба и PHP за последние 20 лет. Он также отметил, что 15 лет назад разработчики строили всю серверную часть «с нуля». В те времена в мире было не так уж много открытых исходников, а патентованные системы управления контентом (CMS) стоили сотни тысяч долларов. Если вы хотели создать для своего веб-сайта опрос, приходилось писать его «с нуля».
Сейчас, в 2014г., разработчики серверной стороны больше так не делают. Зачем это нужно, если можно применить API SurveyMonkey и создать что-то для своих клиентов за 10 часов, а не за 100 или 1000 часов? Является ли код SurveyMonkey самым замечательным в мире, самым эффективным, умнее всего написанным и не содержащим лишнего? Я не разработчик PHP и ответа на этот вопрос не знаю. Однако API протестирован и лишен дефектов, хорошо запускается и готов к внедрению в ваш следующий проект — и это имеет огромное значение.
Если только ваш клиент не желает чего-то очень особенного и способен все это профинансировать, как объяснил Уайт, большая часть разработчиков PHP поспорили бы, что в 2014г. нет особых причин писать «от руки» пользовательский опрос.
Итак, каков же эквивалентный технологический кратчайший путь для клиентской стороны сайта? К сожалению, такового не существует. На данный момент у нас имеется две возможности создания пользовательского интерфейса веб-сайта. Первая возможность — это скачать шаблон (или тему). Обычно применяемая в веб-сайтах на основе CMS, тема может идти в нескольких цветовых вариациях, а отрегулировать требуется всего нескольких переменных. Помимо прочего, большинство тем доступны бесплатно или по очень низкой цене для всего сайта. Скачать тему, изменить некоторые цвета и добавить логотип занимает немного времени.
Более того, хорошая тема постоянно обновляется, и будет идти в комплекте с документацией, что позволяет проще ее модифицировать. Минус темы в том, что ее могут использовать многие и она во многом не уникальна, а веб-сайт даже может смотреться, как будто она принадлежит к определенной CMS.
Вторая возможность – это полностью пользовательское решение. Будет нанят графический дизайнер для обсуждения брендинга, и придется выбирать между тремя проектами дизайна и, возможно, провести два раунда оценки прототипа прямо в браузере или конвертировать дизайн в HTML и CSS, объединять дизайн с CMS или клиентской стороной по выбору, если нужно, и представить (надеемся) идеальный результат клиенту.
Положительная сторона в том, что каждый тэг будет аккуратно помещен на свое место, а код будет идеально семантическим с совсем маленьким количеством «жирка» или лишних div’ов.
Чтобы добиться этого, однако, разработчик должен быть высокопрофессиональным и опытным — а там, где участие принимает разработчик такого калибра, ценник соответственно увеличивается, вынося проект за пределы финансовой досягаемости небольших клиентов и добавляя серьезных расходов крупному заказчику. Кроме того, пока не будут потрачены дополнительные средства на документацию (что, по моему опыту, не очень обычно), если уйдет изначальный разработчик, то следующему для модифицирования кода придется его поломать над ним голову. Это – дополнительные расходы клиента.
Где же «золотая середина» между скачиванием недорогого дизайна, применяемого во всем Интернете, и созданием чего-то высокопользовательского и дорогого? Где эквивалент API разработчика серверной стороны или библиотеки кодов? Можно ли некоторым образом создать массовую уникальность пользовательского интерфейса? Нам нужна возможность щелкнуть по нескольким предварительно написанным элементам, объединить их с пользовательскими добавками и разработать такое решение, которое станет более модифицировано под клиента, чем заготовленная тема, но менее пользовательское, чем высококлассное решение. Не начиная все «с нуля», мы сэкономим многие часы разработки и деньги клиента.
Говорю ли я, что мы должны отбросить пользовательские решения в пользу framework-ов? Нет, конечно же, нет. Полностью модифицированные в соответствии с требованиями клиента решения имеют такое же место в мире веб-разработки, как и заранее заготовленные темы CMS. Если у вашего клиента есть время и деньги на достижение совершенства и полностью пользовательский подход к проекту прекрасно его устаивает, то почему бы нет?
Но у многих клиентов очень ограничены время и деньги, и они, может быть, не могут долго ждать и оплачивать идеал. Можно ли вместо этого получить что-то «довольно хорошее»? Возможно, не каждый div будет идеально размещен, и их может оказаться слегка больше, чем нужно. Возможно, код грузится немного дольше, чем необходимо. Тем не менее, решение будет задокументировано, станет находиться в активной разработке и поддаваться модификации под клиента, и его можно будет быстро выстроить гораздо быстрее пользовательского веб-сайта. В этом есть определенный смысл. Как любая другая технология, имеющаяся в нашем расположении в мире веб-разработки, framework адаптивного дизайна обладает своими положительными и отрицательными сторонами, которые следует обсудить.
Веб-сайт ресторана греческой кухни Grk построен с помощью Bootstrap.
Плюсы и минусы framework-ов адаптивного дизайна
Возьмем Bootstrap 3 и Foundation 5 и разберемся во множестве положительных и отрицательных аспектов построения вашего будущего веб-сайта с помощью одного из этих framework-ов.
БРАУЗЕРНАЯ СОВМЕСТИМОСТЬ
Устранение дефектов для браузеров иногда занимает времени столько же, сколько разработка самого сайта. Если будет возможно снизить количество времени, потраченного на отладку, то вы сэкономите значительные деньги для своего клиента (и собственных волос).
Framework-и адаптивного дизайна уже протестированы в определенном наборе браузеров и устройств, что снижает количество работы, требующейся для запуска веб-сайта. (Количество необходимого тестирования будет отличаться в зависимости от того, насколько сильно вы модифицировали framework. Если поменяли всего несколько цветов, то потребуется минимум тестов. Если вы перекроили систему сеток, то придется проделать обширное тестирование.)
Последние версии Bootstrap и Foundation поддерживают Internet Explorer (IE) 9 и выше. Существуют приемы, которые могут заставить framework-и работать в IE 8, но IE 6 и 7 совершенно не совместимы. В общем, эти framework-и также поддерживают последние версии обычных браузеров, включая Firefox, Safari и Chrome, а также разные наборы мобильных браузеров.
К сожалению, если вы хотите поддерживать непротестированный браузер, то можете обнаружить недостатки, которые придется исправлять в незнакомом вам коде.
МОДИФИЦИРОВАНИЕ ФАЙЛОВ
У Bootstrap и Foundation имеются стандартные загрузочные пакеты, содержащие требуемые файлы, стили и виджеты. Некоторые файлы большие, и скачать нужно несколько файлов. В целом, файлы идут как в читаемых человеком, так и уменьшенных форматах.
Одно то, что выбранный вами framework поставляется вместе со стилями и JavaScript’ом для поддержки дюжин компонентов, не означает, что вам придется скачивать и интегрировать их все. Bootstrap позволяет модифицировать загрузочные пакеты в соответствии с требованиями, поэтому можно взять только тот CSS и JavaScript, который вам нужен для сайта. Это снижает количество лишнего «жирка» и, как результат, уменьшает время загрузки – обычный аргумент против framework-ов.
Позже, если захотите добавить исключенный до того виджет или стиль, вам придется переконфигурировать пакет. Однако этого можно избежать. Я рекомендую сначала разработать веб-сайт, не модифицируя его вида, для того, чтобы точно определить, какие свойства вам нужны. Затем модифицировать загрузочный пакет так, чтобы тот включал код только для этих свойств. Как только framework встанет на свое место, можно будет переделать вид сайта.
Обратите внимание: при выходе следующей сокращенной версии Bootstrap или Foundation вам придется перезагрузить пользовательский пакет. Тщательно запишите, что вы скачивали и что нет, с тем, чтобы можно было повторить этот процесс при обновлении своих файлов.
CMS Critic, веб-сайт, на котором проводится обозрение систем управления контентом, был построен на базе Foundation.
МОДИФИКАЦИЯ КОДА
Возможно, потребуется некоторая модификация согласно пользовательским требованиям. Вам, возможно, захочется изменить цвета. Если обладаете большим опытом, то можете пожелать сломать систему сеток.
Если вы пользуетесь framework-ом, это не означает, что ваш веб-сайт должен быть на него похожим. Можно модифицировать CSS и ваш веб-сайт будет выглядеть уникальным, либо с помощью применения LESS (для Bootstrap), либо Sass (для Foundation), или просто написав CSS «с нуля».
Стили в комплекте Bootstrap сами по себе довольно обширные, и могу предположить, что вы не станете сильно их менять. Можно отменить CSS в отдельной таблице стилей или путем применения файлов LESS или Sass. К сожалению, для файлов LESS и Sass существует мало документации, так что вам придется своими силами определить большое количеств кода. Изобилие встроенных в Bootstrap стилей делают его популярным среди неопытных веб-разработчиков клиентской стороны. (Заметьте, что Bootstrap выпустил файлы Sass в последний месяц. До того момента для этого были доступны только файлы LESS.)
У Foundation меньше встроенных стилей. Хотя их можно модифицировать с помощью отдельной таблицы стилей, Foundation гораздо эффективнее модифицируется через свои обширные файлы Sass (для которых существует документация). Приходится отменять меньше CSS, а полностью пользовательский вид легче строится. Однако менее опытные разработчики клиентской стороны могут решить, что с Foundation гораздо труднее из-за того, что требуется больше знания CSS и Sass.
Bootstrap и Foundation также можно модифицировать даже до их скачивания путем простых изменений переменных LESS и Sass. В Bootstrap пользовательские опции переходят на страницы, тогда как в Foundation можно внести лишь небольшие изменения. Но если вы не знакомы с LESS или Sass, то это – быстрый и наспех устроенный способ модифицировать вид framework-а.
Точно так же для модифицирования функциональности можно использовать предусмотренный JavaScript. Самые последним версиям Bootstrap и Foundation для работы пользовательских виджетов требуется jQuery. Если воспользоваться для Bootstrap и Foundation «родными» экранами, то ваш загрузочный пакет будет пользовательским. При выходе следующей сокращенной версии каждого каркаса вам придется заново модифицировать переменные для нового пакета.
Обратите внимание, что JavaScript Foundation’а включает множество хорошо размещенных точек с запятой. В Bootstrap’е имеется очень мало точек с запятой. Это влияет на выбор framework-а некоторыми разработчиками.
ДОСТУПНОСТЬ
Доступность становится для разработчиков все важнее. Оба framework-а предлагают надежный HTML, но давайте обдумаем доступность вне эффективного HTML.
Bootstrap немного продвинулся вперед с помощью Joomla. Joomla, CMS с открытым кодом, объединена с Bootstrap в версии 3. Разработчики Joomla издавна гонятся за доступностью, и не желают, чтобы Bootstrap снизил доступность CMS. Как результат, в Bootstrap 3, помимо прочих улучшений, вы обнаружите коды ARIA и стили, предназначенные только для скринридеров.
Foundation, к сожалению, не ставит доступность в такой степени приоритетом. Он не укомплектован кодами ARIA и стилями для скринридеров. Команда Zurb, тем не менее, заявляет, что хочет сделать нечто большее.
Webflow, строитель веб-сайтов типа «перетащи-и-оставь»,был сделан на базе Bootstrap.
Заключение
Не существует идеального адаптивного framework-а. Инструменту, выполняющему различную работу, требуется дополнительный код для того, чтобы быть гибким в соответствии с вашими требованиями. Предположим, что полностью пользовательский код наверняка окажется более эффективным для веб-сайта, чем framework.
Некоторые разработчики клиентской стороны говорят мне, что у них собственная система сеток, компоненты CSS и JavaScript’а, поддерживаемые для собственных веб-сайтов. Конечно, в таком подходе нет ничего плохого. Но вам приходится самим поддерживать такой код. Популярный framework минимизирует необходимость поддержки и тестирования.
Я призываю своих коллег – веб-разработчиков клиентской стороны – обдумать перспективы применения framework-ов адаптивного дизайна. Считайте их инструментом производительности, который можно применять полностью или частично. Скачайте лишь систему сеток или возьмите весь пакет со всеми дополнениями. Можно использовать каркас для прототипов или воспользоваться теми его частями, с которыми хорошо знакомы по своему собственному проекту.
framework предназначен для быстрой работы веб-сайта и минимальной борьбы с дефектами. Какого черта, модифицируйте его настолько, чтобы тот смотрелся совершенно по-иному, или измените всего несколько цветов и остановитесь на этом. Как бы вы им не пользовались, у вас получится стандартизированный, задокументированный код, который можно легко передать другому разработчику для поддержки и настройки, который прекрасно выглядит и отлично функционирует. Конечно, код не идеальный, но довольно хороший. Он снижает время создания веб-сайта, что также немного снизит его стоимость.
В мире наверняка найдется место для полностью пользовательских сайтов. Я не предлагаю забросить их ради массовой модификации. Однако в следующий раз, когда клиент захочет немного больше дизайна, но будет ограничен бюджетом, возможно, будет правильным вспомнить о framework-е адаптивного дизайна. Он окажется весьма полезным для вашего арсенала – для быстрого создания прототипов, тестирования или даже готового кода — расширяя ряд ваших продуктов и делая клиента более счастливым.
Автор: Jen Kramer
Источник: www.smashingmagazine.com
Редакция: Команда webformyself.
