Работая над проектом по дизайну или с сайтом «под ключ» (вместе с версткой и контентом), иногда веб-разработчики (а сегодня речь именно о них) выбирают вариант работы с шаблоном. Случается также, что и frontend-мастера тоже применяют в своей деятельности готовые решения, которые были созданы даже не ими, а найдены на просторах интернета. Прежде чем сейчас вы нахмуритесь и подумаете о том, как это все неправильно и ужасно, вспомните, а сколько раз вам самим приходилось программировать или рисовать одно и то же несколько раз за свою жизнь? Сколько раз вам приходилось создавать элементы пользовательского интерфейса похожие друг на друга или с минимальными изменениями? Описывать работу и анимацию слайдера, который отличался, максимум, размерами?

Именно поэтому для многих фреймворков существуют готовые темы, шаблоны, наборы виджетов, не говоря о том, что и сами клиенты настаивают на использовании той или иной CMS с готовой темой для сайта. Сегодня в качестве примеров мы возьмем Bootstrap c WordPress и попробуем разобраться в обоснованности шаблонности в верстке веб-сайтов. Но начнем немного с общей информацией, дабы иметь некоторую базу для размышлений.

Не такие простые готовые темы

Темы Bootstrap – это пакеты кода HTML, CSS и JavaScript, которые предоставляют стиль, компоненты пользовательского интерфейса и макеты страниц для использования в веб-проекте. По сути, они представляют собой предварительно построенные шаблоны веб-сайтов, которые разработчик может адаптировать под свои цели (заказ клиента) и использовать. Обычно такие темы устанавливаются в Bootstrap и расширяют набор его функций. Если вы уже знакомы с фреймворком, то обнаружите, что также знакомы и с некоторыми частями кода.

Но в данном случае для эффективного использования тем в Bootstrap необходимо знать, как работают HTML, CSS и JavaScript. И нужно еще уметь внедрять интерактивность в HTML, используя технологии по выбору, такие ​​как PHP, Ruby, Java, .NET, Angular и т. д.

Исключением являются темы Bootstrap, которые интегрируются с существующей CMS, такой как WordPress. В данном случае, можно просто устанавливать их и приступать к работе с контентом, не касаясь кода вообще. Хотя, зачастую, используя ту или иную тему WP, подредактировать код иногда приходится: то кажется полоска меню широкой; то хочется, чтобы строчка с тегами под статьями находилась чуть в ином месте (иногда под Ad секцией она) и так далее. Но именно серьезных изменений в коде, в данном случае, делать не приходится.

 

Разновидности шаблонов

К сожалению, термины «Тема» и «Шаблон» используются взаимозаменяемо. Это справедливо в экосистеме Bootstrap, а также в более широком масштабе. То, что называется темой в WordPress, называется шаблоном в Joomla и оболочкой в ​​DNN (DotNetNuke). Но такой подход создает большой беспорядок в понимании людей друг друга (как минимум). Все используют одни и те же термины, чтобы описывать разные вещи; или разные термины, чтобы описать одно и то же.

Таким образом, семантика не поможет установить различие между продуктами. Однако, когда дело доходит до Bootstrap, существует около четырех различных типов тем с различными наборами функций:

  • Темы, которые изменяют внешний вид существующих компонентов Bootstrap
    • Например, новые цвета для кнопок, иконок, рисунки иконок, типы кнопок. Они состоят из файла CSS, который можно привязать к текущему проекту.

  • Темы, которые добавляют новые компоненты и макеты страниц
    • Вариации новых макетов и компонентов для работы с интерфейсом очередного проекта. Задача разработчика (дизайнера) наполнить контентом статический сайт, отредактировать количество имеющихся в составе компонентов (виджетов) и иногда поработать с кодом. В составе таких тем уже находится ряд страниц, включающих в себя HTML, CSS (обычно LESS или SASS), JavaScript. Все они разделяются по функционалу, графическому наполнению, набором тематических страниц.

 

  • Темы, которые выполняют оба вышеуказанных
    • Комбинация первого и второго типа. Некоторые темы второй категории могут совсем иначе выглядеть, если используются стандартные компоненты Bootstrap и поэтому требуется установить отдельные визуальные наборы.
  • Темы, которые интегрируются с CMS (например, WordPress)
    • Такие темы обычно создаются сразу под определенную CMS (в нашем случае WP). Обычно такие оцениваются дорого и найти бесплатные в интернете сложно.

Теперь же разобравшись с тем, какие темы вообще есть, посмотрим, в чем их глобальные особенности.

Быстрота готовых проектов

Давайте будем реальны, но многие клиенты заказывают установку или доработку готовой темы, подбор её на просторах интернета только в силу того, чтобы … меньше платить. При таком варианте верстальщику не требуется начинать проект с нуля и работать с HTML, CSS и PHP. Все, что требуется от исполнителя: установить на CMS и настроить её визуально в настройках самой системы или темы.

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

Практика и обучаемость верстке

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

 

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

Чистота кода страницы

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

Обычно найти таких авторов и их работы можно по количеству скачиваний, по дискуссиям, по оценкам комьюнити и на официальных ресурсах. И конечно, если какие-то работы имеют слишком старую дату обновления, то держаться от таких проектов лучше подальше.

Собственный тандем

Наконец, темы или шаблоны могут помочь расширить свою способность создавать различные элементы веб-сайта. Инструменты и технологии постоянно меняются и у всех они используются в той или иной готовой теме. Таким образом, работая вместе, дизайнеры и разработчики могут фактически поделиться богатством своих знаний. Разработчики готовы с помощью скриптов, стилей и кода описывать красоту дизайнерской мысли, а дизайнер – только и рад стараться и рисовать, рисовать.

 Забавная аналитика

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

Но дизайнеры, как правило, делают что-то самостоятельно, просто полагаясь на вдохновение. А верстальщики? Как сказал (возможно, Пикассо? Разумеется, он): «Хорошие художники копируют, великие – воруют». Не бойтесь использовать вещи таким образом (если вы не нарушаете законы об авторском праве, конечно). Не бойтесь не изобретать велосипед. Просто сосредоточьтесь на ключевых моментах, на реальной уникальности вашей работы. Тогда велосипед тоже будет уникальным и сам на себя не похожим.

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

 

Так или иначе, но используя пользовательские наработки и имея в копилке свои наборы пользовательского интерфейса, находя нужные кусочки и скрипты в интернете, работа над проектом становится проще. Клиенты «сумасшедшие», не так ли? Поэтому, если к концу проекта клиент позвонит вам: «Эй, как насчет изменения всего дизайна на розовый? Моей жене понравилось бы!» Вы можете просто изменить несколько строк параметром цвета и все готово. Также, если даже после того, как клиент попросит вас изменить все значки, frontend-разработчик справится со спрайтами в два счета, и просто должен будет изменить одно изображение, а не весь код.

 

Заключение

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

Но глобальный недостаток заключается в том, что вы никогда не станете единственными, кто будет использовать определенный код. Обычно авторы продают сотни или тысячи копий, особенно это и касается кода (вопреки дизайну), поэтому есть и другие люди, которые будут использовать одни и те же компоненты. Этого можно избежать,найдя другой путь описания действий. Но в любом случае верстальщикам работать с кодом станет чуточку проще.

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

Но, так или иначе, использование готовых тем и шаблонов для CMS или фреймворков имеет свое значение, свое … оправдание, свои плюсы и минусы. Но всегда одно остается важным – старайтесь сделать либо код уникальным, либо научиться всё то же самое делать самостоятельно. Не для того чтобы усложнить себе жизнь, а чтобы приобрести знания и опыт.