Верстка сайта – ее виды, особенности написания под CMS
От автора: в этой статье мы поговорим о верстке сайтов. Как начать верстать с нуля? Какие особенности верстки под CMS? Какие видео посмотреть, чтобы научиться? Будем обсуждать эти и другие вопросы.
Начинающим в верстке
Многие люди хотят научиться создавать сайты. Конечно, это можно сделать в каком-нибудь конструкторе. Такие программы еще называют визуальным редакторами кода. Но все-таки гораздо интереснее самому понять, как формируются веб-страницы. Верстка сайта – процесс достаточно интересный, хотя иногда и не очень легкий.
Если вы читали предыдущую статью, то наверняка поняли, что странички создаются с помощью языков HTML, CSS и JavaScript. Там мы также вкратце рассмотрели процесс верстки. Но если вы новичок, как выполнить верстку сайта с нуля? В этом вам могут помочь видеоуроки и статьи по основам HTML и CSS на нашем сайте. Они действительно предназначены для новичков. То есть, даже если вы абсолютно ничего не понимаете в процессе создания сайта, пройдя пару уроков, у вас будет уже более ясное представление, а изучив все предоставленные материалы можно достичь первого впечатляющего результата – сделать верстку сайта своими руками.
Чтобы научиться верстать простые макеты, вам достаточно изучить основы. Например, этот видеокурс по верстке сайтов для начинающих, с использованием простых техник. Сколько времени на это может уйти? Конечно, за одну ночь вы не сможете научиться, но вполне реально за 1 месяц с нуля выйти на уровень, при которой вы сверстаете свой первый, пусть и очень простой, но все-таки сайт! Далее вам следует просто повышать свой уровень, если есть желание увеличивать свое мастерство.
Сегодня происходит революция веб-стандартов. Новые технологии HTML5 и CSS3 позволяет делать намного более красивые сайты, а иногда даже обходиться без JavaScript-кода. Именно их вам нужно будет изучить дальше, потому что все больше и больше макетов сегодня верстается именно с помощью этих технологий.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Как научиться верстать лучше?
Простая верстка сайта, в основном, выполняется с фиксированным макетом, с минимумом функциональности и дополнительных элементов. Веб-сценарии либо вообще отсутствуют, либо их очень мало. Это начало. Самое простое, что вы сможете сделать. Захотите большего? Тогда вам просто придется учиться дальше. Если на основы может уйти всего лишь месяц-второй, то на более продвинутый уровень придется выходить дольше. Например, одних только плагинов для jQuery (это такая JavaScript-библиотека, самая популярная, между прочим) насчитывается много сотен. Конечно, все они вам не нужны, но чтобы набраться опыта в веб-программировании, придется изучить хотя бы несколько десятков. С помощью этих плагинов вы сможете вытворять со страницами практически все, что только можно придумать.
Здесь мы впервые затронули понятие “библиотека» в сайтостроении. Если объяснять простым языком, то это готовый набор определенных функций и сценариев, которые вам остается просто активировать. Конечно, это тоже не так просто, но, во всяком случае, проще, чем научиться писать сложные скрипты самому – на изучение этого могут потребоваться годы. Да, программисты на самом деле хорошие люди.
Они помогают своим коллегам, облегчают их труд. Еще одним термином, который неплохо было бы знать, является “фреймворк”. Это тоже файлы или файлы с готовым кодом, которые значительно упрощают вашу работу. Одним из таких фреймворков для верстки является Bootstrap. С его помощью сегодня верстают очень многие. Конечно, работу с фреймворками тоже нужно изучать. Это помогает вам развиваться и становиться лучше в своем деле.
Рис. 1 Готовые стили, уже прописанные в Bootstrap. Вам остается только применять их в своих проектах
Но фреймворков, плагинов и готовых библиотек существует тысячи. Вам и жизни не хватит, чтобы разобраться в работе всех из них. Какой выход? Просто выбирайте самые популярные технологии.
Виды верстки
Если вы собираетесь обучаться верстке, то вы обязательно должны знать, на какие она делится виды. В общем-то, в предыдущей статье мы уже частично разобрали этот вопрос. Пожалуй, его можно немного дополнить.
Итак, верстка может отличаться по тому, как будет изменяться сверстанная страница при изменении ширины окна или на разных устройствах. Мы уже разобрали, что фиксированный макет никак не изменяется. Резиновый макет всегда меняется в зависимости от ширины окна, но из-за этого также могут возникать трудности.
Адаптивная верстка наверняка показалась вам наилучшим вариантом, но так верстать достаточно сложно, этому нужно дополнительно учиться. Зато этот вариант является самым современным и очень востребованным, ввиду увеличения мобильного трафика. Чтобы у вас было явное представление об этой технике, рекомендуем посмотреть несколько видео по особенностям верстки для мобильных устройств.
Кроме этого, существуют комбинированные макеты, в которых может сочетаться резиновая и фиксированная верстка. Например, футер и шапку делают резиновыми, а основную часть – фиксированной. Иногда так нужно по дизайну. В общем, такие сайты тоже встречаются.
Верстка под CMS
CMS – это системы управления сайтом. Что-то вроде двигателя, на котором находится ваш проект. Именно так их зачастую и называют – движки. Верстка сайтов под такие движки имеет свои особенности. Самыми популярными CMS являются WordPress и Joomla.
Благодаря этим движкам страницы сайта могут генерироваться динамически. Например, если у вас на сайте 3 страницы, и вы не планируете делать больше, то вам может и не понадобиться движок. Сделать такой проект можно на чистом HTML и CSS. Но представьте, что вы запускаете новостной сайт, на котором каждый день будут публиковаться новые посты. Для такого проекта абсолютно точно нужна CMS.
Верстка сайта под WordPress отличается от обычной только тем, что готовую верстку вам нужно интегрировать в движок. Своими силами это можно сделать только после изучения самого движка. Также неплохо будет хорошо знать PHP, потому что на этом языке написаны почти все CMS. Задачу по интеграции верстки можно поручить другому человеку, который разбирается в этом, если вы сами не компетентны в вопросе. Конечно, в таком случае вам придется заплатить определенные деньги за услуги.
Альтернативный вариант – можно использовать один из шаблонов WordPress (их тысячи) и переделать его дизайн, изменив стили. Для этого вам достаточно хорошо разбираться в CSS. Некоторые вещи в шаблоне можно поменять чисто с помощью визуальных настроек, а для некоторых придется лезть в дебри движка, изменяя PHP-код. Так что основы PHP вам все равно нужны, если вы хотите полноценно пользоваться движками.
Рис. 2 Выбирайте любой из сотен шаблонов, которые уже существуют для WordPress. С помощью CSS и PHP можно серьезно изменить дизайн темы.
Joomla – верстка сайта под этот движок тоже требует интеграции написанного вами ранее кода. Тут вам понадобятся примерно такие же знания, как и для интеграции в WordPress, но если говорить коротко, то в Joomla это немного более трудный процесс. Опять же, есть сотни готовых тем, и вы имеете полное право переделывать их на свой лад.
Заключение
Как мы увидели из этой статьи, верстка может выполняться по-разному. Новичкам нужно учиться на фиксированных макетах, профи могут отточить свои навыки на создании адаптивных шаблонов и их интеграции в популярные CMS. Не лишним будет также активное использование сторонних библиотек и инструментов, облегчающих написание кода. В конце концов, вы сами можете выбрать технологии, в которых хотите развиваться. Надеемся, эта статья хоть немного пролила вам свет на основы сайтостроения. А чтобы развиваться дальше, обязательно подписывайтесь, потому что на нашем блоге каждый день публикуются новые уникальные материалы.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее 
PSD to HTML
Верстка сайта на HTML5 и CSS3 с нуля
Смотреть
Что выбрать при создании сайта: конструктор или CMS?
Делаем выводы из всего вышеперечисленного.
Конструкторы сайтов идеально подходят для быстрого запуска простых небольших интернет-проектов. Например, одностраничников, сайтов-визиток, портфолио, маленьких магазинов. И любых некоммерческих, личных проектов «для души» (типа персонального сайта любимого котика). Где нет необходимости в сложном функционале, уникальном дизайне, тысячах страниц с контентом и т.п. И это точно не понадобится в будущем (потому что очень тяжело будет переносить готовый проект на другую платформу).
Это хороший вариант для начинающих свой бизнес в интернете, кто пока только пробует себя, не разбирается в тонкостях самостоятельного создания сайта, заходит с маленьким бюджетом (на старте дешевле, но в долгосрочной перспективе конструктор получится дороже). Серьёзному бизнесу тоже могут пригодиться конструкторы.
Например, для тестирования новых направлений: создать лендинг → закупить трафик → проанализировать результаты. Ещё можно таким образом запускать дополнительные разделы, спецпроекты (страницы Tilda, к примеру, можно вставлять в существующий сайт).
Движки или CMS однозначно стоит выбирать для создания мощных корпоративных сайтов, информационных порталов, крупных интернет-магазинов с десятками тысяч позиций. Потому что многочисленные ограничения конструкторов не позволят нормально реализовать такие проекты.
В то же время они подойдут и для создания простых сайтов — тех же визиток, личных блогов, небольших интернет-магазинов. Правда, это вариант для тех, кто готов потратить достаточно времени и сил на освоение CMS, изучение веб-разработки и вопросов безопасности сайта. Зато в долгосрочной перспективе получится дешевле, чем арендовать сайт у конструктора.
Кстати, по поводу персональных и корпоративных блогов. Можно не выбирать между конструктором и CMS, а попробовать специализированные блог-платформы: LiveJournal, Teletype, Medium или «Яндекс.Дзен» (здесь авторам ещё доступна монетизация).
Наполнение и запуск сайта — это только начало. Самое интересное впереди: оптимизация под поисковые системы, настройка рекламы, анализ конверсий и т.д. Много надо уметь, чтобы получать хорошие результаты по трафику и лидам. Курс «Я — интернет-маркетолог PRO» поможет разобраться с этими вопросами от А до Я. После обучения сможете продвигать и свой проект, и любой другой — за достойную зарплату.
Что лучше использовать – чистый HTML, самописный движок или CMS WordPress ?
Тема вопроса на самом деле гораздо шире.
Что лучше использовать для своего сайта? Статичную верстку на HTML, популярную CMS или самописный движок? Я не буду вдаваться в глубокий анализ, но поделюсь своими мыслями и наблюдениями, которые накопились за почти 10 лет работы в сфере создания сайтов.
Сайты на статичном HTML
Сайты на чистом HTML – это отличное решение для одностраничных сайтов, тех же лендингов и для малостраничных статичных сайтов. Статичная верстка – это первый этап работы над созданием сайта под какой-то движок (CMS), то есть, любую верстку можно без проблем посадить на CMS, но тут уже возникает вопрос – нужно ли это? Зачем landing page ставить на движок, если никакого динамического контента на нем не будет, если все блоки статичные и не шаблонные? Зачем создавать админку, если максимум, что нужно будет – поменять какие-то тексты или картинки, и по временным затратам это будет быстрее сделать в HTML, чем настраивать CMS, чтобы потом поменять 2 абзаца в админке, а не в верстке. Точно такой же посыл и при верстке небольшого сайта в 3-5 страниц, у нас уже есть его верстка, и возникает вопрос – ставить ли дальше эту верстку на CMS? Зачем, если на сайте нет никаких блоков новостей или блога, если есть только несколько статичных, нешаблонных страниц, которые уже сверстаны? Достаточно просто вылить сайт на хостинг, и он уже работает. Форму обратной связи можно сделать на php, можно скачать готовый скрипт, можно поставить сторонний виджет, которых много сейчас.
Плюсы сайта на HTML:
- Просто и недорого создать, верстальщиков сейчас много.
- Просто и недорого обновить в случае чего, рабочее время верстальщика дешевле времени работы программиста.
- Моментальная скорость работы сайта, сайт на чистом HTML работает быстрее чем какая бы то ни была CMS.
- Маленький вес, меньше файлов, меньше места на хостинге, понятная и простая структура.
- Под такой сайт сгодится даже самый дешевый хостинг с минимальными параметрами.
Минусы сайта на HTML:
- Сайт не динамический, нет блоков новостей, нет возможности вести блог или ежедневно обновлять его (хотя можно использовать Jekyll, но это уже другая история).
- Могут быть сложности с заменой информации, если это нужно делать часто без привлечения верстальщика, например, это должна делать менеджер компании. При минимальных знаниях HTML – это не проблема.
- Будут сложности в добавлении новых страниц или блоков, в расширении функционала. Для любой такой работы нужно будет привлекать верстальщика и, возможно, дизайнера.
Хороший пример статичного сайта на HTML – сайт ритуального агентства – ritual.in.ua.
Если данные минусы кажутся существенными, то нужно разрабатывать сайт с использованием CMS.
Сайт на популярной CMS (WordPress, Magento, Bitrix, etc.)
Самый популярный и самый удобный вариант. На данный момент существует множество различных систем управления контентом (CMS) под любые задачи – для блогов, для новостных сайтов, для интернет-магазинов, для лендингов, форумов, порталов, каталогов и т.д.
В зависимости от назначения сайта можно подобрать нужный движок, можно скачать бесплатный шаблон, купить премиумный или сверстать свой (самый идеальный вариант).
Если вы ищете создание сайтов в Киеве, то рекомендую обратиться к ответственной и серьезной студии Great Pro. У ребят очень крутое портфолио, и тонкий подход к каждому клиенту, они точно не новички в этом деле.
Самый простой и быстрый вариант обойдется меньше чем в 100$ и займет от пары часов до 1 дня по времени на настройку всех необходимых плагинов и нужного функционала. Более серьезная настройка занимает больше времени, но и результаты будут уже не ширпотребные, а заточенные под конкретный проект.
Плюсы CMS:
- Простота развертывания и создания, много специалистов и фрилансеров.
- Низкая цена на самые простые вариации.
- Удобство использования и администрирования.
- Гибкость и функциональность, можно добавить любой функционал без знаний программирования.
- Безопасность. Популярные CMS имеют большое ядро программистов и тестировщиков, постоянно обновляются и поддерживают самые последние технологии.
- Быстрая поддержка и большое количество специалистов.
Минусы CMS:
- Бесплатные шаблоны и популярные премиумные шаблоны используются на сотнях похожих сайтах.
- Некоторые CMS очень требовательны к хостингу, и поэтому, пытаясь, сэкономить на хостинге, можно получить медленный и регулярно «падающий» сайт.
- Платные CMS требуют хороших специалистов, которые будут стоить недешево.
- Чтобы уникализировать свой сайт, нужно будет заказывать уникальный шаблон, что будет стоить не 59$, как за популярный премиумный, но это будет стоить того.
- Популярные плагины могут сильно нагрузить сайт, если использовать их бездумно все подряд.
- Для хорошего результата потребуется хороший программист или команда программистов, иначе получится еще один сайт, которых уже тысячи одинаковых.
Если вам не подходит статичный сайт на HTML, если ваш проект будет развиваться и расти, то это однозначно должен быть сайт на CMS.
Сайт на самописной CMS
Это самое большое зло, которое вам может предложить начинающая веб студия или небольшой стартап фрилансеров. Начинающие программисты очень любят делать свои движки, потому что таким образом учатся и оттачивают свои навыки. Главный аргумент, который они преподносят – ваш сайт будет уникальным и более быстрым чем на какой-то известной CMS. Это ложь. Уникальность сайта будет зависеть от шаблона, который можно сверстать для любой CMS, а скорость работы можно улучшить кучей разных способов. Но правда в том, что на самописном движке вы получите кучу «сложностей» и проблем, зато студия, у которой вы закажете такой проект получит себе постоянного клиента и «дойную корову», потому как будет очень сложно найти программистов, которые захотят ковыряться и переделывать чужой «на коленке написанный код».
Плюсы самописной CMS:
- Их нет.
- Разработчики будут уверять, что вы получите уникальный сайт, но это манипуляция.
- Их нет.
Минусы самописной CMS (эти минусы я видел и исправлял на десятках реальных проектов):
- Низкое качество кода, в 90% случаев самописные CMS делают новички, поэтому код у такого движка – говно.
- Низкое качество внешнего вида сайта по той же причине, что эти же новички без должных знаний верстки и дизайна, сделают на коленке гуано.
- Никакая оптимизация сайта для поисковиков, из-за того, что код – говно. В таких CMS миллион ошибок и проблем, о которых начинающий программист даже не подозревает, и я сталкивался с этими проблемами и решал их, это долго, сложно и трудозатратно.
- Нет поддержки таких CMS, они очень редко обновляются.
- Нет гибкости или масштабируемости, если вам понадобится фотогалерея, то разработчики выставят прайс – 100$, нужна форма связи – еще 100$, при том, что сайт сделали за 50$. Но весь дальнейший функционал будет идти по другому прайсу, и никакие сторонние разработчики не захотят браться за такую работу. Поэтому вы или будете на крючке у таких горе-разработчиков, или забьете на свой сайт.
- Отказ от поддержки, я знаю много случаев, когда фирмы, которые делали такие сайты или перепрофилировались, находя идеальную для себя CMS или закрывались, не выдерживая конкуренции, но дорабатывать через пару лет свои «детища» они потом отказываются.
- Потраченное время и силы.
- Хороший и качественный самописный движок будет очень дорогим и очень дорогим в обслуживании и поддержке.
Исключение из правила, что самописные CMS – guano:
- Это большая и серьезная компания, которая предлагает вам свой движок, который основан на каком-нибудь мощном и популярном фреймворке типа Symfony. У такой компании будут сотни наработок, годы опыта и вычесывания кода своего движка. Обычно такие движки заточены под какой-то конкретный тип сайтов. И естественно стоимость такого сайта будет далеко от 1000$.
- У вас нестандартный высоконагруженный проект, под который большая IT-компании пишет уникальное решение, которое опять-таки пишется не на коленкке на php 5-ой версии, а на каком-нибудь популярном фреймворке (Laravel, Symfony Yii, CodeIgniter, Zend и т.д.).
- У вас есть конкретные требования к админке сайта, которые не удовлетворяются популярными движками, и вы сами пишете ТЗ, занимаетесь проектированием нужной админпанели, и ваша команда занимается разработкой и поддержкой, а не заказываете за 100$ у фрилансера самописную админку.
То есть самописные движки нужны только для редких случаев, когда заказчик сам понимает, что такой проект на WordPress не развернешь, и соответственно, понимает, что стоимость такого сайта будет исчисляться в кило-долларах.
Выводы:
- Для лендинг пейдж – HTML-верстка.
- Для статичного сайта в 1-5 страниц – HTML-верстка.
- Для всего остального (магазин, блог, портал, форум, визитка, сайт компании, каталог и т.д.) – CMS.
- Для динамичного сайта, которому нужна админка – CMS.
- Для «Розетки» – самописный движок за миллион денег.
Проанализировал фриланс, учить JS или натяжку верстки на CMS? — Хабр Q&A
Доброе.
Просто интересно ваше мнение, решение я сам приму.
Вообщем сижу на фрилансе 3-ий день, и понимаю что делать там без знаний как делать сайты под ключ — нечего, ну почти нечего.
Все заказы аля — Сделайте мне сайт на WP и пр. движки.
Начал учить JS.. и думаю, а смысл, через какое то время я всё равно толком не смогу брать заказы, ибо большинство всё же просит делать сайты под ключ, мало кому нужна верстка, мало это не значит что она вообще не нужна — нет, просто шанс взять такой заказ новичку очень мал, разве что учить JS и иди в студию, или на удалёнку, и тогда да, буду полноценным верстальщиком, к тому же планирую изучить английский, уже начал потихоньку, и потом идти на апворк либо вообще в США поехать, если гринку выиграю, либо по какой нибудь программе работать если это вообще возможно.
Вообщем много воды.(дальше ещё больше) Я тут думаю, может вообще тупо научиться натягивать верстку на WP и брать спокойно заказы (только не отговаривайте потому что я потенциальный конкурент, желательно с аргументами) сразу скажу что знания мои в php 0, но я с ранних лет увлекался созданием разных порталов, с движками, начиная от форумных таких как IPB, vBulletin, XenForo заканчивая WP, DLE, OpenCart, модули там всякие ставить, шаблончики править, просто в WP это как мне показалось более сложно сделать, или я что то путаю, ибо в DLE как я помню ты просто заходишь в template, название шаблона, и там куча файлов с главной страницей и css файлы, в WP же там как мне показалось другая система, или я ошибаюсь + слишком много php?
В общем, какие ваши соображения на данную тему, учить натяжку верстки на CMS, идти к тому что делать сайты под ключ на WP, всё же мне пока знания JS я не скажу что прям ппц как нужны, ибо всякие слайдеры, анимашки и прочее уже давно есть в виде плагинов, просто подключай и пользуйся, другое дело что в чистом JS и Jquery я не могу ничего поправить или вообще понять код. И долго ли учиться натягивать сайты на WP, сложно ли найти нужные модули (популярные слайдеры типа owl, таймеры какие нибудь, плавный скролл, анимейт css с js что бы при прокрутке анимации срабатывали и блоки появлялись и всё в таком духе, в общем для создания современных Landing Page сайтов) — если учесть все нюансы чему мне нужно будет обучиться, что лучше выбрать по вашему мнению, сразу скажу что сроки у меня горят и я хочу зарабатывать прямо сейчас и в данную минуту, но я трезво оцениваю ситуацию, я не бросаюсь брать сложные проекты или ещё что-то, я просто хочу качественно выполнять свою работу, без капли сомнения натягивать шаблоны, добавлять нужные модули т.д и т.п, и мне интересно сколько времени это займёт в плане обучения, JS я всё равно буду учить, и php, и SQL и как с хостингами работать, вообщем всё, что нужно для работы в сфере создания сайтов, что бы чувствовать себя уверенно в этом деле, просто сейчас идёт расстановка приоритетов, и если например научиться натягивать верстку Landing Page с плагинами займёт месяц, а изучение JS минимум пол года, то я бы попробовал 1 вариант с натяжкой шаблонов на CMS.
Что значит «опыт верстки под битрикс, вордпресс и т. д.»? — Хабр Q&A
Тут 2 варианта:
1. Заказывают верстку, подразумевают создание шаблона/темы для CMS. По хитрости, по не знанию, по глупости — не важно. Важно не подписаться пилить это по цене только верстки.
Верстка — это когда макет превращается в набор html/css/js файлов.
Да, могут быть вариации. Может быть сразу под движок: Smarty, Twig, Jade, или все шаблоны в Handlebars, или сразу чтобы всё под Angular было. Но это всё частные случаи, требующие более высокой квалификации, или находящиеся уже где-то во front-end разработке.
2. Просят учесть особенности CMS.
Маленьких нюансов может быть много.
Вот Битрикс, например, и его Эрмитаж (тыкнул в блок — тут же его отредактировал если по простому). Где-то лишняя обертка элемента, чтобы в режиме редактирования не разваливалось. Везде — z-index меньше 1000, чтобы Эрмитаж не перекрывало.
WordPress вообще генерирует огромное количество своих классов. Взять те же навигационные меню. Использовать их = наплевать на все эти ваши БЭМ и прочее.
И т.д.
Если я верстал и без проблем натягивал свои макеты на WordPress — могу ли сказать что у меня есть опыт верстки под WordPress?
Могу.
Так же как могу сказать что есть опыт верстки под Drupal (не знаю натягивали ли какие-то из моих работ на Drupal, но чё бы нет).
Правда нет гарантии что человек, который будет натягивать мою верстку, не затупит например с
.nav
.nav__list
.nav__itemКогда ему движок выдаст меню в виде
.menu
ul
li Но я не считаю это своей проблемой.
Когда понадобилось, оказалось нет ничего сложного 1 раз потратить время и написать свой вывод меню в WordPress, чтобы можно было любую верстку натянуть. Почему так не может сделать тот кто натягивает? Почему в ТЗ об этом не предупредили?
Уменьшает ли «опыт верстки под CMS» время верстки?
Если не были оговорены нюансы (те же меню WP) — то нет.
Может увеличиться время натягивания верстки на движок, но это уже проблемы заказчика, который не озвучил требования заранее.
Таким образом, хотя в идеале на движок должно быть возможным натянуть любую верстку, действительно некоторые имеют CMS особенности.
Об этих особенностях следует договариваться заранее. Должно быть конкретное ТЗ на верстку.
В остальном как правило речь об «опыте верстки под %CMS%» — просто болтовня.
Пересядь с иглы WordPress на Static Site Generator и Headless CMS #нивкакиестэки / Хабр
Что делать, если WordPress (WP) уже не вставляет, а сайт пилить надо? Кейс авторского блога на Static Site Generator (SSG) и Headless CMS (HCMS).
Разбираем достоинства связки SSG + HCMS для программистов, диджитал номадов и современных контент-мейкеров.
I. Я устал, я ухожу
Меня зовут Давид. Вот уже шесть лет я каждый день пользуюсь WordPress. Я устал от такой жизни. Дал себе обещание найти новые решения для создания авторского контента.
Так я наткнулся на Static Site Generator (SSG) и Headless CMS (HCMS), потыкался и влюбился.
О причинах моей влюбленности сегодня и хочу рассказать.
Почему сравниваю с WordPress? Потому, что это платформа для контентных сайтов по умолчанию. Альтернатив с хорошей экосистемой плагинов практически нет. А те, что есть, абсолютно однотипные и имеют одинаковые проблемы/особенности: PHP, рендеринг на сервере, шаблоны, БД и т.д.
А почему не облачные сервисы типа Medium? Главная причина — ограниченная кастомизация (невозможность добавлять код со своими функциями и плагинами).
II. Что такое SSG?
Static Site Generator — это (чаще всего) консольная утилита, которая при запуске специальной команды берет шаблоны вашего интерфейса, данные из источника данных и создает из них HTML, CSS и JS файлы с контентом.
Для шаблонов интерфейса вы можете использовать широкий инструментарий: от React.js, Vue.js до шаблонизаторов типа Pug, EJS, etc.
Как источник данных для SSG вы можете использовать: любую Headless CMS (о которых чуть ниже), HTML или Markdown файлы, любой API, да даже WordPress!
Вот пример Markdown файла, вот пример шаблона на React.js, а вот пример страницы сайта, которая была из него сгенерирована.
Представим ситуацию: у вас в блоге 99 постов.
В случае с WordPress для написания 100-го поста вы создаете его контент в админке и сохраняете его в Базе Данных (БД).
Когда к вам на сайт заходит посетитель, WordPress на каждый запрос берет шаблон, берет данные из БД, объединяет их и отдает клиенту.
В случае с SSG, вы пишете контент 100-той статьи в одном из удобных для вас форматов (от Markdown, до Headless CMS или того же WordPress), вручную или автоматически запускаете генерацию данной статьи, которая в итоге превращается в готовые HTML, CSS и JS файлы с контентом.
Таким образом у вас получается 100 HTML файлов, по одному на статью.
Когда к вам на сайт заходит посетитель, сервер сразу же отдает ему уже заранее подготовленные файлы со статьей.
Никакого серверного кода, походов в БД и подобного топтания.
Вот здесь на staticgen.com можно посмотреть список разных SSG и их возможности.
Сегодня в качестве примера SSG я буду упоминать Gatsby.js, потому что мне было быстрее и удобнее всего работать с React.js.
III. Что такое Headless CMS?
Headless это не всадник без головы. В данном случае headless значит не имеющий интерфейса.
Но на деле, как минимум административная панель всегда идёт вместе с HCMS, а клиентскую можно сделать или купить, как Тему.
Поэтому на практике headless означает, что весь функционал системы доступен в формате API. Чаще всего, HTTP REST или GraphQL.
Это также можно назвать API-first подходом.
В остальном это самая обычная CMS: создавайте свои типы данных, посты, категории, тэги, блоги, интегрируйте плагины и так далее.
Дисклеймер. SSG и HCMS по факту являются составляющими понятия JAM-stack, но для упрощения, я решил опустить этот термин.
IV. А теперь поженим SSG + HCMS и сравним этого минотавтра с WordPress-подобными CMS
Чтобы рассмотреть достоинства SSG на фоне WordPress, поиграем в ролевую игру (гусары, молчать):
Вы — современная команда разработки, которая пилит SaaS криптовалютный распределенный мессенджер. И пора начать вести свое комьюнити единомышленников, где вы будете устраивать холливары, мериться кармой/IPO и всячески деградировать. Поздравляю, вы созрели для своего корпоративного блога.
Ваши девелоперы, оторвавшись от создания нового frontend фреймворка, предлагают воспользоваться SSG + HCMS, поскольку… да хрен его знает, они сами плохо понимают, но говорят, что это годная технология.
Вы уже почти согласились, КАК ВДРУГ в дверь влетает бородатый, вонючий, пропитанный алкоголем седовласый мужчина. Все сразу понимают — это PHP разработчик по-умолчанию.
А что происходит, когда в комнату врывается PHP разработчик? Правильно, он начинает предлагать WordPress или 1С-Битрикс. Пропатченные версии кодеров кричат еще что-то невнятное про Ларавел, но там не разберешь.
Делать нЕчего, придется вступить с ним в словесную перепалку и решить, кто победит: мудрость пердящих дедов или пыл новомодных нубов.
P.S. Я одинаково ненавижу / люблю всех разработчиков, поэтому не воспринимайте близко к сердцу.
P.P.S. Однако на месте рубистов я бы вышел из чата.
V. Дизайн
В первую очередь, вам, как уважающему себя стартапу, важно иметь крутой и полностью настраиваемый дизайн.
В случае с WordPress у вас есть варианты:
1) Скачать Тему и начать вставлять в каждый css !important-ы и править полуживой js код.
Тогда верстка будет лететь по швам и вы никогда не будете до конца уверены, что ваш сайт отображается так, как вам этого хочется.
2) Начать пилить Тему самому. Но для этого придется использовать PHP, CSS, HTML и рендеринг шаблонов на сервере.
Ваши разработчики — полноприводные Full-stack-JS-гуру, а значит в разработке они не более 2-х лет (кто выдержит это дольше?) и в жизни не видели голый HTML и CSS.
Фрилансеров, которые будут разрабатывать тему, брать не хочется, потому что все знают: WordPress фрилансеры — самый подлое племя. В аду Данте для них кипит котел с примордиальным супом в бескислородной среде при температуре 660 градусов Цельсия. Чего это я? Да они хуже гоблинов. Не было ни одного случая, когда они не обманывали своего наниматели и не сбегали с награбленным золотом.
И тут на вашу тусовку влетает SSG!
SSG (Gatsby.js, VuePress, 11ty, etc.) позволяет писать клиентскую часть на современной Frontend экосистеме, например, React или Vue.js. В крайнем случае шаблонизаторы типа Pug, EJS.
А значит можно забыть о голом HTML и писать на удобных современному разработчику инструментах.
Кроме этого, можно купить Тему для SSG и она тоже будет использовать библиотеки последнего писка моды frontend-а.
Итоги по дизайну:
WordPress: +2 балла — за разнообразие Тем, среди которых иногда можно найти достойные, а еще балл за плагины кастомизации (site-builder).
SSG + HCMS: +4 балла — за темы и при этом современный стэк для создания своего дизайна. Поэтому в вопросах именно уникального дизайна SSG точно выигрывает.
P.S. Да, WordPress можно затюнить и подключить webpack с шаблонизаторами, но это процесс болезненный и хрупкий в случае использования сторонних Тем. А SSG идет с современным стэком прямо из коробки.
VI. Кастомизация
Ок, кроме офигенного дизайна, мы хотим расширить наш функционал сервисами подписки, комментариями и даже магазином с продажей ИМБА ЭНЕРД… кхм… простите… продажей своего мерча.
А еще к вам приходит задача добавить в блог чарты с графиком стоимости вашей компании на IPO, данные для которого лежат в вашей Cassandra и раздается все это богатство Serverless лямбдами с AWS.
В случае с WordPress первые три задачи решаются подключением соответствующих плагинов (стандартные комментарии, WpForms и WooCommerce).
Но я не могу не добавить ложечку Содома (потому что за последний год WP потрепал мне нервов):
- Чтобы дойти до WPForms пришлось перепробовать еще 2-3 плагина. Все имели или проблему с дизайном, или проблему с настройками.
- Если отваливается SMTP сервис, то вы никак и нигде не увидите об этом предупреждения. Вам придется самому время от времени лезть в логи и проверять в чем дело.
- Подключение сторонних сервисов вроде MailChimp обычно доступно только в платной версии плагинов форм.
- Чтобы сделать нотификацию с Telegram, приходится качать очень мутный плагин и надеяться, что он будет работать, поскольку алертов про отвалившийся VPN вам не видать (на 18.06.20 слава богу VPN не актуален).
Задачи решаемые, но долгосрочно, даже при самых простых требованиях, вы потратите много времени на установку, настройку, пробу и удаление.
Еще нужно не забывать про жертвоприношения богам святого Рандома, чтобы какой-нибудь из плагинов (например email и Telegram, как было у меня) не вступил в перепалку и не порушил всю систему при следующем обновлении.
WooCommerce вообще считаю очень годным решением, поэтому шуршать кульком в его сторону не буду. Да, есть свои проблемы, но проблемы есть с любым eCommerce.
Итак, все вопросики решаются… до момента с чартами.
Чтобы решить его, придется что-то напиливать на PHP, HTML, CSS и какой-то библиотеке графиков, которая требует при этом еще JQuery…
Это будет долго, тяжело и больно.
Ок, а как тут справится SSG + HCMS?
Во-первых, SSG и HCMS устроены так, что их легко и удобно интегрировать с любой системой, которая имеет API.
Во-вторых, существует куча готовых плагинов.
Нужны комментарии? Берете любой из существующих сервисов (Disqus, Isso, Commento), интегрируете его. Можно даже подключить готовый плагин комментариев, которые сохраняются в Git репозиторий.
Нужна обратная связь/подписка? Берете любой MailChimp, SendGrid, TypeForm, пилите пару React форм, подключаете готовый API, та дааааам.
Интернет магазин? SSG спокойно можно подключить к Stripe, Paypal, Shopify или более бушкрафтовые решения типа ReactionCommerce / Saleor.io.
А еще всегда можно воспользоваться Redux или Firebase для написания более сложной логики корзины на фронте.
Чарты? У нас с вами в руках React/Vue.js, мы просто берем под него библиотеку чартов, делаем обычный HTTP запрос и отображаем данные… easy.
+ Все эти плагины можно сделать статически сгенерированными, что будет огромным плюсом для SEO.
Итоги кастомизации:
WordPress: +3 балла — 1 балл за кучу готовых плагинов, которые позволяют собрать все в одном месте, если для вас это важно. 2 балла за WooCommerce, годную площадку для российского интернет-магазина.
SSG + HCMS: +3 балла — балл за удобное подключение любого сервиса через SDK + балл за отсутствии попытки собрать все в одном месте, что уменьшает количество багов и несовместимостей + балл за большое количество плагинов под SSG.
Тут я решил соблюсти равновесие, потому что подходы АБСОЛЮТНО разные и каждый решает задачу по-своему.
VII. Размер имеет значение
А здесь начинается несколько пунктов, где связка SSG + HCMS безоговорочно доминирует над WordPress-like решениями.
С помощью SSG + HCMS мы можем полностью управлять дизайном на современном стеке; можем легко интегрировать дополнительные плагины без потребности вшивать их куда-то глубоко внутрь системы. На выходе получаем оооочень оптимизированный и легкий бандл HTML, CSS, JS и других ассетов.
Более того, у многих SSG есть встроенные плагины по автоматической оптимизации картинок, svg и другой статики (lazy-loading, обрезка, сжатие, etc.).
В вебе размер имеет значение, я так думаю.
Меряемся размерами:
WordPress: -1 балл — просто никуда не годится —минификация и компиляция исходников на WP — это боль. И чем больше вы добавляете плагинов, тем больнее. Довести WP до нормы размера бандла очень сложная задача.
SSG + HCMS: +2 балла — здесь все и сразу из коробки, вообще не надо ни о чем думать. Значит, размер будет самым минимальным из возможных.
Важно: SSG на React.js или Vue.js дает больше гибкости с точки зрения написания кастомного функционала, но с ними бандл получается достаточно большой. Поэтому, если для вас критична именно скорость, лучше воспользоваться SSG на шаблонизаторах, например 11ty.
VIII. Скорость
А теперь просто киллер-фича: SSG позволяет выгрузить весь контент в заранее собранные HTML файлы минимального размера, что уже дает максимальную скорость показу сайта клиенту, так?
Но ведь вы при этом можете выложить эти HTML на любой облачный распределенный CDN.
А это означает, что ваш сайт будет загружаться практически моментально у любого человека, в любой точке мира, в любой момент времени.
Такой скорости клиентским витринам WordPress и другим CMS вообще никогда и не как не добиться.
Минимальный размер размер бандла и хорошая скорость: наш сайт будет невероятно технически SEO-оптимизирован.
Итоги скорости:
WordPress: -2 — поскольку эта паскуда очень медленно работает.
SSG: +10 — быстрее быть не может.
Важно: Конечно, у нас есть wp-cache. Но кроме его настройки и проблем с инвалидацией, вы по-прежнему располагаете сайт на одном конкретном сервере, что вообще несравнимо с распределенным CDN.
IX. Безопасность
Есть у меня дядя из Армении (а любой знакомый мужчина старше тебя в Армении считается твоим дядей, если твои волосы тоже черны и лихо завиваются густыми прядями в труднодоступных местах), учредитель фирмы кибер безопасности. Однажды он рассказал, как продает услуги кибербезопасности:
“Я захожу к владельцу престижного онлайн-издания в Армении. И задаю ему всего одни вопрос: «что будет, если ваш сайт взломают хакеры из {вставьте любую другую кавказскую страну, они там все питают такую личную неприязнь друг к другу…} и в одном из постов годом ранее поменяют текст на призыв напасть на своих соседей?”
После такого питча, директор любого СМИ быстро достает мешок денег и заказывает его услуги.
В случае с нашим блогом ставки не такие большие, но мы точно не хотим, чтобы каким-либо образом нас взломали и выкрали данные из CMS.
В случае WordPress о безопасности говорить практически бессмысленно. Давным давно известна куча методов взлома, и каждая новая версия версия рано или поздно ломается под натиском мамкиных хакеров.
Но еще большая дыра в безопасности это эксплойты плагинов, которые авторы очень редко лечат.
И так будет всегда.
Интересный факт: наиболее подвержены взлому системы, на которых административная панель/источник данных доступны из клиентской панели.
Поскольку страницы WordPress формируются на лету и приходят к нам с сервера, злоумышленник всегда знает адрес, куда можно долбиться, пока не найдет способ проникнуть в систему.
SSG же компилирует все заранее и готовым HTML страницам нет никакой нужды ходить на сервер.
Выкладываем их в одном месте, нашу HCMS в другом, и все.
Злоумышленник не имеет никакого способа узнать, где лежат наши данные/админка, а, значит, не знает откуда начинать ломать систему.
Готовые плагины, чаще всего, связаны с API их поставщиков (MailChimp, TypeForm, Stripe). Это серьезные дядьки, взломать которых является задачей не для мамкиных хакеров, а для скандинавских пиратов, которым такие взломы уже не интересны.
Итоги безопасности:
WordPress: -10 — взлом сайта на WP это только вопрос времени. Садбатру.
SSG + HCMS: +10 — злоумышленник не может узнать, где лежит ваша админка. Плагины сделаны на API серьезных фирм, которые гарантируют дополнительную безопасность.
P.S. Безусловно, никто не защитит от социальной инженерии. Но это вопрос ваших личных практик соблюдения безопасности в сети.
X. Контент не только для сайта
Так, теперь вы решили, что новости из сайта должны дублироваться в вашем мобильном приложении. Смотрим:
HCMS — это API-first системы. Значит, ВЕСЬ их функционал полностью заточен, чтобы быть доступным через API (хоть HTTP, хоть GraphQL). Ergo, плагины, которые под них делают, тоже будут заточены под API.
Вы можете получить доступ к этому функционалу как на сайте, так и на мобильном, да хоть в терминале или умном утюге.
У WordPress есть плагины, которые позволяют раздавать API через HTTP и GraphQL.
Но, вы понимаете насколько большая разница качества и удобства подобного функционала? Когда это не “дополнительная функция с плагином”, а основной механизм технологии?
Итоги по доступности контента:
WordPress: 0 баллов — REST API рабочий, это факт. Но иногда приходится нехило извернуться при работе с ним, поэтому я не накинул балл. Я суров и полон предубеждений.
SSG + HCMS: +1 балл — удобный и полнофункциональный API.
Вместо десерта
XI. Условная бесплатность
Поскольку ваш итоговый сайт представляет собой набор HTML, вы можете использовать GitHub, GitLab, Vercel, Netlify как бесплатный хостинг для своего сайта.
И даже когда вам понадобиться что-то мощнее, подобного рода хостинги стоят копейки.
Итоги хостинга:
WordPress: 0 баллов — хостинг будет дешевый, но он всегда будет стоить денег.
SSG + HCMS: +2 балла — за возможность хостить сайты абсолютно бесплатно и за минимальную стоимость хостинга при максимальной скорости.
XII. Это еще не все
Самое главное во всех CMS — это текстовый редактор, который мы используем для создания контента.
WordPress Gutenberg — на мой взгляд замечательный редактор (post-ironic mode off). Он удобнее, чем у Medium и чуть хуже редактора Notion. Здесь кастомизация и общее количество возможностей на высоком уровне, поэтому я снимаю шляпу и пальто.
Но SSG + HCMS не отстают:
Во-первых, если использовать HCMS, то вы получите очень мощные и красивые редакторы, схожие с Gutenberg.
Во-вторых, если вы можете писать контент в виде файлов (например, Markdown), а значит можете использовать хоть Linux терминал.
В-третьих, можно подключить любой удобный визуальный редактор для ваших файлов, например, Editor.js.
А в-четвертых, есть такие гибридные, крутые и специфичные инструменты, как TinaCMS, которая превращает статические страницы в Site builder.
И подобных решений для SSG море. Это позволяет выбрать любой из интересующих вас подходов.
Итоги по редактору:
WordPress: +1 балл — правда хороший редактор.
SSG + HCMS: +2 балла — 1 балл за редакторы, 1 балл за гибкость и возможности настройки.
XIII. Известность
SSG и HCMS — это уже зрелые, известные и широкоиспользуемые в узкой среде решения.
Они существуют давно и никуда не денутся.
WordPress: +10 баллов — тут без вопросов, WordPress известен гораздо сильнее и обыгрывает SSG + HCMS.
SSG + HCMS: +3 балла — вундервафля для smooth operators, эту связку уже спокойно можно использовать в production + развитая экосистема + есть разработчики.
XIV. WordPress + SSG
Я это уже говорил выше, но повторюсь: вы можете использовать WordPress вместе с SSG!
То есть, вы пишите контент на WordPress и выгружаете его через отдельный SSG.
Есть даже возможность выгрузить статические HTML, без дополнительного SSG, используя специальный плагин! Например, этот (там еще прекрасное англоязычное видео о том же, о чем я сейчас говорю здесь).
Но, в этом случае, нужно учитывать, что другие плагины могут с ним не работать (например WooCommerce) и по-прежнему вы не властны над своим бандлом.
XV. Большие итоги
Подсчитаем баллы? Нет. Все мы знаем, что бенчмарки очень субъективны, поэтому измерять разницу между технологиями «бально» тоже считаю некорректным. Они здесь в качестве промежуточных итогов.
Лучше так: SSG + HCMS — убийца WordPress?
Конечно, нет.
Если у вас среднего размера СМИ или у вас уже есть PHP разработчики, то вам подойдет WordPress.
Вы хотите сделать небольшой, но функциональный интернет-магазин вместе с удобным блогом за минимальную плату? — вам нужен WordPress.
Вам нужно прям сегодня взять конкретную Тему, немного поправить ее руками и запустить блог с кучей плагинов? — ваш удел снова WordPress.
С фронтом вы никогда не работал или вы не разработчик, а вам нужно сделать сайт за полчаса, то WordPress будет верным выбором.
Широта возможностей WordPress впечатляет. Но даже такой универсальный инструмент подойдет не всем.
Это как демократия — нравится всем, но у некоторых декадентов она вызывает только жалость об упущенных возможностях.
Мне кажется, что сегодня WordPress будет оптимальным решением для большинства задач.
Время от времени я и сам выбираю WordPress, когда ситуация требует этого.
Но сейчас я делаю блог для себя, строю личный бренд, mea culpa. Поэтому мне важны:
- Полная кастомизация дизайна.
- Скорость отдачи контента.
- Свободное добавление кастомного функционала.
- Безопасность.
- Простота обсуживания и деплоя.
- Меня достало копаться в css и ставить везде !important.
- Меня достало возиться с полурабочими плагинами.
- Я не хочу бэкапить БД зная, что любой апдейт, плагин, да что угодно, могут развалить весь мой сайт.
- Я хочу использовать современные технологии и современную экосистему для удобной разработки.
- При этом я Full-stack, поэтому для меня нет никакой проблемы в самостоятельной кастомизации системы.
И все это из коробки или с возможностью написать с нуля, а не бороться с CSS, JS, PHP и плагинами.
Дисклеймер в конце, как вы любите
Поэтому я выбираю SSG в его Gatsby.js инкарнации + Headless CMS на Ghost.io.
Ведь пока мы поддерживаем WordPress, эта легаси машина будет продолжать покрываться новыми слоями некачественного функционала.
(Отойдите от экранов, ща будет революционный лозунг!)
Пора сделать Pull Request к чему-то новому! Плагины для всех CMS, объединяйтесь!
Да, может сейчас количество плагинов для SSG + HCMS несравнимо с кучей шлака под WordPress (особенно, для русскоязычного сегмента), но почему бы не начать их пилить?
Шаг за шагом вкладываясь в экосистему SSG этот инструмент имеет все шансы догнать WordPress.
Вот например на создание Headless FAQ хватило всего 3-х дней и день, чтобы подключить его в SSG блоге и даже на WordPress блоге (форма внизу страницы).
Короче, я хотел чего-то нового, оно меня нашло. Я его попробовал и теперь новое решение меня полностью устраивает.
Англоязычный блог я уже веду на SSG. Русскоязычный, скорее всего мигрирую c WordPress на SSG. Тогда и напишу статью на тему переезда.
Круто, если вы дочитали до конца, спасибо.
Не могу не добавить стандартное окончание:
Был ли у вас опыт работы с SSG + HCMS? Что понравилось, а что оставило неприятное послевкусие?
Серебряных пуль не бывает. Бывают проблемы, которые вы готовы или не готовы проглотить.
9 уроков по рисованию макета сайта, его верстке и установке на CMS WordPress.
- Тема: Веб-дизайн
- Время ролика: 00:15:41
- Cложность: легкая
- Прикладные программы: Adobe Photoshop CS5
- Автор: Захаренко Алексей
В этом уроке мы сделаем разметку макета, используя направляющие. Это необходимо чтобы все элементы сайта были выровнены, а не «налазили» и «прятались» друг за другом. Направляющие в дальнейшем значительно облегчат вёрстку сайта.
- Тема: Веб-дизайн
- Время ролика: 00:58:53
- Cложность: средняя
- Прикладные программы: Adobe Photoshop CS5
- Автор: Захаренко Алексей
В этом уроке мы сделаем коллаж на тему путешествия из предметов, которые берём с собой или встречаем во время путешествий. В процессе мы обработаем каждую картинку: осветляя, затемняя, добавляя блики, тени, рисуя свои фигуры с нуля, деформируя и изменяя формы разных предметов и многое другое. Мы сделаем из кучи картинок гармонично вписывающуюся шапку в общий дизайн блога, когда посетитель будет заходить на сайт – он сразу будет понимать, куда попал и что его здесь ждёт.
- Тема: Веб-дизайн
- Время ролика: 00:29:48
- Cложность: средняя
- Прикладные программы: Adobe Photoshop CS5
- Автор: Захаренко Алексей
В этом уроке мы сделаем простое и удобное меню, поиск по сайту, красивый ротатор картинок на всю ширину, правый блок с категориями стран. Также создадим посты, которые будет удобно читать, и сделаем футер, который не будет отвлекать от контента, но будет давать всю необходимую информацию о сайте.
- Тема: HTML, CSS
- Время ролика: 00:57:52
- Cложность: средняя
- Прикладные программы: Adobe Photoshop CS2, DreamWeaver 8
- Автор: Бернацкий Андрей
В этом уроке мы продумаем разметку будущей HTML страницы, выделим основные блоки из которых она будет состоять. Вырежем из макета все необходимые для работы изображения. Сверстаем «шапку» сайта, меню и форму для поиска. Так же установим логотип и слоган сайта.
- Тема: HTML, CSS
- Время ролика: 00:66:41
- Cложность: средняя
- Прикладные программы: Adobe Photoshop CS2, DreamWeaver 8
- Автор: Бернацкий Андрей
В этом уроке мы сверстаем область основного контента, навигацию по рубрикам и «подвал» сайта. Чтобы уменьшить количество используемых картинок и не увеличивать вес страницы, при верстке будем использовать новые свойства CSS 3. А так же, чтобы уменьшить количество используемых классов, будем активно применять псевдо-классы.
- Тема: HTML, CSS
- Время ролика: 00:23:01
- Cложность: средняя
- Прикладные программы: Adobe Photoshop CS2, DreamWeaver 8
- Автор: Бернацкий Андрей
Как известно, Internet Explorer ниже 9-ой версии не поддерживает свойства CSS 3. В данном уроке мы все-таки «заставим» Internet Explorer поддерживать эти свойства, чтобы сайт смотрелся одинаково во всех браузерах. Так же в данном уроке мы установим слайдер на нашу страницу для прокрутки изображений.
- Тема: WordPress
- Время ролика: 01:07:30
- Cложность: средняя
- Прикладные программы: WordPress
- Автор: Кудлай Андрей
Этот урок мы начнем с необходимых теоретических пояснений и установки CMS WordPress. В частности, узнаем об особенностях создания темы для выбранной нами системы управления сайтом, разберем структуру любой темы, поговорим о том, что необходимо знать для успешного создания темы.
После установки CMS WordPress и создания папки для будущей темы, мы рассмотрим наиболее часто используемые функции WP, знание которых является неотъемлемой частью при создании любой темы. При этом уже на данном этапе Вам станут понятны принципы создания и работы с темами WordPress.
После краткого знакомства с функциями мы перенесем имеющийся у нас шаблон в папку с создаваемой темой. Ну и, наконец, мы разделим шаблон на логические части: header (шапка), footer (подвал), sidebar (боковая колонка), которые подключим к главному шаблону темы (index).
- Тема: WordPress
- Время ролика: 01:14:24
- Cложность: средняя
- Прикладные программы: WordPress
Этот урок мы начнем с рассмотрения понятия «безопасного подключения скриптов». Узнаем, почему желательно выбрать именно данный вариант подключения, который рекомендован в документации WordPress. Ну и, конечно же, выберем именно этот способ, безопасно подключив к теме скрипты и стили.
Далее в цикле WordPress мы осуществим вывод статей на главную страницу. Добавим теме поддержку произвольных меню, создадим эти меню и выведем на сайт.
Также добавим теме поддержку виджетов и создадим области для виджетов в сайдбаре и футере. В конце урока создадим два дополнительных шаблона: шаблон отдельной статьи (single) и шаблон страницы (page).
- Тема: WordPress
- Время ролика: 01:18:00
- Cложность: средняя
- Прикладные программы: WordPress
Фактически наша тема уже готова. Остались некоторые мелочи, которые мы и реализуем в последнем уроке. В частности, мы создадим следующие шаблоны:
— шаблон рубрик;
— шаблон для результатов поиска;
— шаблон 404-ой ошибки;
— шаблон комментариев.
Кроме шаблонов мы реализуем две вещи, которые практически всегда реализуются при помощи специальных расширений — плагинов. Мы реализуем постраничную навигацию (пагинацию) для материалов сайта, а также реализуем управление слайдером из админки. При этом для решения последней задачи нам необходимо будет познакомиться с пользовательскими типами записей и создать новый тип постов для сайта.
Макеты CMS
Описание
В версии 4.0 вместо столбцов появилась новая единица измерения — кадров .
Кадр — это термин, используемый для обозначения группы блоков.
DIV Frames намного более гибкие, чем столбцы таблицы — у вас есть возможность создавать любые макеты с собственными блоками
позиционирование. Макеты CMS по умолчанию: Три столбца, два столбца, один столбец и Горячий макет .Их настройки находятся в
CMS> Макеты CMS . Для создания нового макета мы рекомендуем взять один из доступных макетов по умолчанию и использовать его в качестве примера при создании
свой собственный.
В этом руководстве мы проиллюстрируем процесс создания нового макета, используя, например, новый макет Multi-Hot.
Пример: создание новой раскладки Multi-Hot
Давайте создадим структуру макета с двумя горячими блоками, одним горячим блоком вверху, двумя обычными столбцами внизу и вторым горячим блоком под ними,
третий столбец будет одним фреймом от верхнего до нижнего колонтитула.За основу возьмем шаблоны Hot Layout: ‘templates / user / layout_hot.html’
и ‘templates / admin / admin_cms_hot_layout.html’. Скопируйте эти файлы на свой компьютер и назовите их, например, layout_hot_2.html и admin_cms_hot_layout_2.html.
Далее:
- Нарисуйте картинку, как вы хотите расположить блоки, например, как показано ниже
- Используя этот набросок, создайте макет шаблона администратора. Самый простой способ сделать это — использовать структуру таблицы:
<таблица>{заголовок} {smallcart} {hot} {справа} {слева} {средний} {hot2} {нижний колонтитул}
Обратите внимание на фигурные скобки для фреймов {} — они необходимы, чтобы мы могли применить соответствующие теги в CMS> CMS Layouts.
{meta_title} {head_tag}{hidden_blocks}{заголовок}{smallcart}{горячей}{оставил}{средний}{hot2}{право}{нижний колонтитул}
ПРИМЕЧАНИЕ. Не забудьте использовать в фигурных скобках те же заголовки фреймов, что и в шаблоне администратора.
/ * Четыре кадра-2 * /
.fourFrames2 .headerStyle {float: left; положение: относительное; ширина: 80%;}
.fourFrames2 .smcStyle {float: right; положение: относительное; ширина: 20%;}
.fourFrames2 .hotStyle {float: left; положение: относительное; ширина: 80%;}
.fourFrames2 .leftStyle {float: left; положение: относительное; ширина: 50%;}
.fourFrames2.centerStyle {float: left; положение: относительное; ширина: 50%;}
.fourFrames2 .hotStyle2 {ясно: оба; плыть налево; положение: относительное; ширина: 100%;}
.fourFrames2 .rightStyle {float: left; положение: относительное; ширина: 20%;}
.fourFrames2 .leftStylePadding {padding: 0 10px 0 0;}
.fourFrames2 .centerStylePadding {padding: 0 0 0 0;}
Обратите внимание, что вам может потребоваться отредактировать несколько существующих стилей, используемых в этом макете, чтобы он выглядел лучше, например, в этом случае нам нужно будет отредактировать .contentStyle
где мы должны добавить clear: оба свойства :
.contentStyle {clear: both; высота: 1%; переполнение: скрыто; положение: относительное; z-index: 1;}
Теперь, когда мы заложили фундамент, мы можем добавить новый макет в админке:
- Перейдите в CMS> Макеты CMS и щелкните ссылку New .
- Укажите Порядок сортировки , Имя и путь к шаблонам.В разделе «Блоки макета» в столбце Имя укажите заголовки фреймов, которые вы хотите видеть в админке.
Важно! В столбце Имя тега укажите точные значения из фигурных скобок {} в шаблонах этого макета, если вы ошиблись даже в одном символе, таком как дополнительный пробел или заглавная буква, блоки не будут проанализированы в кадрах .
Если все сделано правильно, вы сможете выбрать Multi-Hot Layout из выбора Layout Type и добавлять блоки в новые кадры.
А на сайте это будет выглядеть так:
Примечание: каждый дизайн индивидуален, поэтому, скорее всего, вам придется отредактировать другие стили, чтобы добиться идеального внешнего вида вашего сайта.
.
макетов и шаблонов | Заставка CMS
Макеты
разделяют страницы вашего сайта на разные столбцы или области, где можно разместить контент.
Основной инструмент
Backdrop для позиционирования контента — это Layouts . Модуль Layout позволяет вам назначать определенные «шаблоны» вашему сайту или определенным страницам вашего сайта. «Шаблон макета» — это шаблон, который определяет регионы, в которых могут быть размещены части контента.
Определения
- Макет — конфигурация, в которой конкретный шаблон макета был назначен пути к веб-сайту.Макет по умолчанию применяет шаблон по умолчанию ко всем путям без указанного макета.
- Шаблон макета — дизайн страницы, созданный с помощью разметки HTML и переменных PHP, которые определяют области, в которых могут быть размещены части контента
Макеты по умолчанию
Чтобы лучше понять макеты, мы можем взглянуть на значения по умолчанию, предоставленные Backdrop. По умолчанию на новом сайте будет определено три макета:
- один для домашней страницы, использующей макет Бокстона
- один для макета по умолчанию, который использует макет Moscone Flipped
- и один для административного макета по умолчанию, который использует макет Бокстона
Макет по умолчанию назначается для всех путей на сайте Backdrop, поэтому по умолчанию все страницы вашего сайта, кроме домашней страницы, будут использовать шаблон Moscone Flipped, что означает, что блоки контента на вашем сайте будут организованы в соответствии с определенным шаблоном. по этому шаблону.
Если, однако, вы решили, что все страницы вашего сайта должны использовать другой шаблон, вы можете изменить шаблон по умолчанию, перейдя в Структура> Макеты> Макет по умолчанию> Настроить макет и изменив значение Moscone Flipped на другой шаблон по вашему выбору. . Если вы выбрали шаблон Тейлора , например, чтобы иметь боковую панель с двумя столбцами; как только вы это сделаете, все страницы сайта будут иметь конфигурацию боковой панели с двумя столбцами.
Шаблоны макетов
Шаблоны макета
— это файлы PHP и HTML, которые определяют области страницы. Предоставляется несколько основных шаблонов, и дополнительные шаблоны можно установить с помощью модуля Project Installer.
Основные шаблоны включают: Бокстон, Гири, Харрис, Москоне, Москоне Флиппед, Рольф, Симмонс, Сутро, Тейлор и Тейлор Флиппед
.
Каждый макет определяет регионы, в которых могут быть размещены блоки.
Включение и отключение шаблонов макета
Страница настроек макета на странице Admin> Структура> Макеты> Настройка содержит список всех основных и дополнительных шаблонов макетов и позволяет вам выбрать, какие из них будут доступны при создании новых макетов.Чтобы отключить шаблон макета, снимите флажок над его значком на этой странице и нажмите Сохранить конфигурацию , когда закончите.
(Подробнее о настройке макетов см. В Deep Dive: Advanced Layout Options)
Книжная навигация
.
15 уникальных макетов сайта | Блог Webflow
Многие веб-сайты, кажется, следуют одному и тому же утомленному старому шаблону. Вот изображение героя с призывом к действию по центру, а под ним — три моих столбца. Это неплохой дизайн, потому что он работает. Проблема в том, что это предсказуемо. Поэтому мы хотели показать вам несколько примеров веб-сайтов, которые используют другой дизайн макета, чтобы вы могли создавать страницы, которые ломают стереотипы, не разрушая ожиданий пользователей.
1. Heco Partners
Макет: герой с полным кровотечением, разбитый на расположенные в шахматном порядке секции из двух столбцов с фоновой анимацией, запускаемой прокруткой
Heco Partners вовлекает вас на свой веб-сайт своим плавным движением.
Нам просто не хватает этого сайта! Когда вы заходите на сайт Heco Partners, чикагского дизайн-агентства, вы сталкиваетесь со словами: «Мы превращаем информацию в жизненный опыт, который волнует людей», парящие над волной.
Эти два элемента объединяются, чтобы символизировать их обещание превратить идеи в действия. Даже без прокрутки мы получаем четкое представление о том, кто они и чем занимаются. В целом, этот сайт представляет собой великолепный пример того, как правильно объединить портфолио с более подробной справочной информацией, на примере каждого из их проектов.Мы увидим, как они помогли своим клиентам добиться успеха, и узнаем все о том, как они подходят к своей работе.
Отсутствие навигации и стрелка побуждают вас прокрутить вниз, чтобы получить всю историю Heco Partners, но вы также можете перейти к их тематическим исследованиям на основе проектов. Наконец-то появилась навигация здесь, в разделе проектов, где вы можете пролистывать проекты, используя ползунковые стрелки в правом нижнем углу экрана.
Эта неспособность перейти от одного выбранного вами раздела к другому немного болезненна; по сайту нелегко ориентироваться.Но красота плавных переходов между каждым разделом, а также различные другие анимации делают сайт настоящим удовольствием для прокрутки.
О, и мы упоминали, что он полностью построен на Webflow?
2. Балбесы
Макет: полноэкранное изображение, которое прокручивается на страницу и переходит в серию макетов сетки
Когда я впервые наткнулся на этот веб-сайт, я сразу же добавил его в свои закладки для вдохновения.
Джозеф Берри решил взять один из своих любимых фильмов, классику 1980-х «Балбесы», и превратить его в веб-сайт в рекламном стиле. Обладатель награды «Почетное упоминание» и «Сайт дня» от Awwwards, The Goonies — отличный пример скроллтеллинга, в котором используются возможности современного веб-дизайна и повествования.
Джозеф использовал взаимодействие и анимацию Webflow для создания очень привлекательного пользовательского интерфейса, который позволяет фанатикам Goonies пережить некоторые из их любимых моментов из фильма.
3. Портфель Нелу Чеботарь
Макет: герой из трех столбцов, который трансформируется в главное меню навигации при прокрутке
Сайт-портфолио должен демонстрировать ваши способности как дизайнера. Nelu Cebotari’s делает именно это.
Портфолио дизайнера дает вам возможность не только продемонстрировать отличные проекты, над которыми вы работали, но и продемонстрировать свои навыки дизайна веб-сайта с помощью самой страницы.Нелу Чеботари создал онлайн-портфолио, которое отражает его личность и навыки как дизайнера, умело избегая при этом ловушек клише.
Желтый может быть немного резковатым, но он выбрал правильные приглушенные оттенки для своего фона и форм, размещенных на нем. Этот выбор цвета действительно выделяет черный текст. В целом, цветовая гамма впечатляет.
Еще одна уникальная часть этого дизайна — навигация, размещенная спереди и в центре как призывы к действию, работе и контакту.При наведении курсора на каждую из них появляется коробка, которая скользит снизу вверх. На каждом из этих квадратов есть небольшой текст, предлагающий вам узнать больше или связаться с вами. Это, в сочетании с простыми значками контура, делает работу без усилий.
Такой лаконичный, спартанский подход кажется удивительным для дизайнера — по крайней мере, поначалу. Но когда вы наводите указатель мыши на тизеры его портфолио, образцы дизайна оживают, побуждая вас глубже погрузиться в проект.
Контактная форма также восхитительно проста в использовании по сравнению с ее разговорным подходом к дизайну. Все, что вам нужно сделать, это заменить несколько заполнителей, нажать «Отправить», и ваш запрос будет отправлен. Сокращение дизайна формы до необходимой информации делает ее более эффективным способом общения.
Контактные формы не должны быть сложными. Такой простой подход позволяет легко связаться с нами
4. Сноуборды Never Summer
Макет
: полноэкранное фоновое видео обеспечивает переход на более традиционные страницы электронной торговли
Never Summer концентрируется на своих продуктах, не теряя при этом чувства удовольствия.
Компании, занимающиеся активными видами спорта, например производители сноубордов, могут легко рассчитывать на харизму и способности своих райдеров. Тот, кто раскручивает больше или становится больше, может продать почти любой сноуборд своим обожающим фанатам. Never Summer, у которой есть солидный состав команды, позволяет этим гонщикам быть частью их истории, но реальный акцент здесь делается на их высококачественной продукции.
Вы найдете множество технических характеристик, но они подкреплены причинами, по которым они помогут вам на спусках.Вместо того, чтобы использовать жаргон дыма и зеркал, они сообщают вам (довольно ясным языком), как все эти материалы и строительные технологии делают их доски лучше.
С техническими характеристиками и упором на конструкцию платы, этот макет страницы мог пострадать от серьезной информационной перегрузки. Но они могут избежать этого, привлекая много индивидуальности. Все это берет то, что может быть безликим производителем, и показывает, что у него также есть беззаботная сторона.
5. Soul Jazz Records
Макет: Сетевое воспроизведение обычного магазина пластинок.
Sound of the Universe дает вам реальный опыт посещения музыкального магазина в цифровом формате.
Sounds of the Universe — это цифровое ответвление эклектичного звукозаписывающего лейбла Soul Jazz. От переиздания малоизвестного фанка, джаза и панка до выпуска новых релизов — они следят за тем, чтобы музыка, которая может не привлекать большого внимания, была услышана.
Веб-сайт электронной коммерции дает хорошее представление о многих жанрах, которые они выпускают. Есть много справочной информации об артистах, а также образцы звуков, чтобы понять, как они звучат.
Я сам фанат музыки, поэтому много времени просматривал альбомы в музыкальных магазинах. Что мне нравится в этом макете веб-сайта электронной коммерции, так это то, что он передает ощущение пребывания в музыкальном магазине. Вы можете пролистывать различные выпуски в галерее.Если какое-либо произведение искусства привлекло ваше внимание, вы можете нажать на обложку, чтобы рассмотреть его поближе. Это все равно, что перелистывать стопку воска, хватать то, что сразу же хватает, и вынимать для дальнейшего осмотра. Переводя физический процесс просмотра записей в цифровой формат, Sounds of the Universe выделяется среди других музыкальных магазинов, которым не хватает такой знакомой интерактивности.
Sounds of the Universe позволяет перелистывать музыку из музыкального магазина на экран компьютера простым наведением курсора.
6. Музей современного искусства Сан-Франциско
Макет: полноэкранное фоновое видео с минимальным количеством ссылок на наиболее важные действия, которые посетители могут выполнять.
SFMOMA создала шедевр веб-сайта, ориентированного на артистизм и удобство использования.
Музеи содержат искусство, которое вдохновляет и захватывает наше воображение. Их веб-сайты должны делать то же самое.
Большинство веб-сайтов музеев достойно демонстрируют избранные работы, публикуют информацию о текущих выставках и предоставляют важную информацию для посетителей, такую как часы работы и информацию о билетах.SFMOMA делает все то же самое, но более красивым способом.
Вместо неподвижных изображений некоторых из их наиболее примечательных работ мы можем видеть видео посетителей, стоящих перед ними, все они сняты с точки зрения, которая заставляет вас чувствовать себя там, где вы находитесь. Эти клипы дают представление о том, что вы испытаете сами, когда посетите их. Это эффективное использование героя видео, которое так много передает их музейный опыт.
Интуитивная навигация, сделанные со вкусом шрифты и упор на композицию — все это делает веб-сайт SFMOMA отражением великого искусства в их стенах.
7. R2D3
Макет: Z-образный узор из двух столбцов с множеством анимированных графиков.
Веб-сайты — это инструмент, который также может научить. R2D3 использует возможности Интернета для объяснения машинного обучения.
Похоже, что большинство посещаемых нами веб-сайтов связаны с какой-то коммерцией. Но мы никогда не должны использовать огромный потенциал веб-сайтов для обучения.
R2D3 делает именно это в своем «Визуальном введении в машинное обучение.«Посредством серии анимаций они могут относительно просто передать эту сложную концепцию. Это делает обучение более увлекательным, чем разглядывание слов и цифр в учебнике.
В этом модуле они используют наборы данных об атрибутах домов в Сан-Франциско и Нью-Йорке, чтобы показать, как компьютеры используют статистическое обучение при решении задач. Для такого нематематического человека, как я, этот урок поддержал меня, и я оставил чувство, что у меня есть более глубокое понимание концепции.
R2D3 использует привлекательную анимацию, чтобы показать нам, как работает машинное обучение.
8. Peerspace
Макет: полноэкранная обложка с переходом на два фрагментированных участка сетки, затем еще несколько жестких сеток.
Peerspace меняет то, как люди используют и находят места для своей творческой и деловой деятельности.
Peerspace стремится соединить креативщиков и других предпринимателей с краткосрочными пространствами.Будь то всплывающий магазин или место для видеосъемки, Peerspace хочет упростить процесс обеспечения безопасности.
Их годовой обзор не только выглядит круто, с его нежными пастелями и стилизованными заголовками, но и создает повествование на тему «Как мы создаем впечатления, изменилось». От интернет-магазинов, которые создали всплывающие магазины для связи со своими покупателями, до альтернативных физических упражнений за пределами спортзала — это все области, где Peerspace предлагает решение для поиска местоположения.Хотя кажется, что в размещении этих элементов не так уж и много рифмы или причин, эта случайность добавляет ощущение необычной индивидуальности, которая, кажется, лежит в основе бренда.
Peerspace также отлично справляется с задачей, позволяя своим клиентам рассказывать свою историю. С помощью фотографий, видео и письменных материалов мы узнаем, как Peerspace им помог.
Однако стоит отметить, что большая часть этого контента доставляется через изображения.Это значительно вредит как SEO (поисковой оптимизации) страницы, так и ее доступности, поэтому мы должны задаться вопросом, почему они пошли по этому пути. Если пользователи не могут найти ваш сайт через свою поисковую систему или потреблять его контент, тогда другие функции веб-сайта, такие как прекрасные элементы визуального дизайна, не имеют большого значения.
9. Презентация
Макет: герой, в котором преобладают копии, перетекает в список проектов в одну колонку.
В презентации сочетаются порядок и эксперименты, чтобы создать интересный и увлекательный дизайн.
Presentation — агентство веб-дизайна и художественного направления, базирующееся в Перте, Австралия. Агентства всегда испытывают соблазн наполнять свои веб-сайты всеми уловками, чтобы ослепить всех, кто посещает их, своим творческим талантом. Презентация может взять несколько простых элементов и расположить их таким образом, чтобы не переусердствовать с их дизайном.
В сети, наполненной микровзаимодействиями и потрясающими взаимодействиями, приятно встретить что-то настолько простое, понятное и целенаправленное.В презентации есть что рассказать — так они и рассказывают. Это так просто.
10. Интенсив
Макет: герой с полными краями переходит в жесткую и ломаную — и визуально открытую — сетку.
Благодаря нетрадиционному дизайну веб-сайта эта страница создает уникальный пользовательский интерфейс.
Создание нового варианта общей темы дизайна или полное отклонение от нее — вот что отличает вас как веб-дизайнера.Если вы хотите показать, как ваш курс дизайна поможет людям создавать веб-сайты в Webflow, выходящие за рамки обыденного, вам нужно создать страницу, которая будет впечатляющей. Интенсивный показывает силу хорошего дизайна и хочет научить вас использовать эту силу для себя.
В этом дизайне показано главное видео, показывающее переходы по различным веб-страницам. Это призыв к действию, но вместо того, чтобы стоять на месте, это асимметричный макет, выровненный по левому краю. Три страницы, преобразованные в 3D, встают на свои места.Дизайн легко потерпит неудачу из-за ограничений, связанных с их двумерной природой, но эти наклонные веб-страницы нарушают правила, чтобы создать что-то визуально интересное. Каждый раздел отделен угловым блоком, за которым следует текст, выложенный традиционным способом.
Этот дизайн вдохновляет нас привносить новые измерения в нашу работу и должен вдохновлять начинающих дизайнеров хотеть узнать, как это сделать.
11. Bike Time Bali Road Bike Camp
Макет
: Герой с полным кровотечением переходит в довольно жесткую сетку, которая кажется сломанной .
В основе дизайна Bike Time лежат великолепные изображения и тщательное использование самых разных размеров шрифта.
Благодаря сочетанию великолепных фотографий, минимальных графиков и коротких абзацев, Bike Time погрузит вас во все крутые впечатления и ландшафты, по которым вы сможете проехать, если вы посетите этот лагерь шоссейных велосипедов. Типографика логотипа Bali перекликается с движением дороги на изображении ниже. Это элемент дизайна, который мог бы отвлекать, но прекрасно сочетается с извилистой горной дорогой.
Дизайн насыщен фотографиями, которые демонстрируют потрясающую красоту местности. Есть также ряд графиков, линии которых отражают линии местности.
Наряду с отличными фотографиями есть текст разных размеров, некоторые из них очень большие, а другие намного меньше. Он создает контраст на странице и символизирует пики и спады, по которым вы будете крутить педали.
12. Superimpose Studio
Макет: на наши экраны проталкивается куб с вращающейся каруселью эскизов проектов, образующих границу.
Веб-сайт
Superimpose Studio выходит за рамки просто «уникального» и прочно обосновывается на экспериментальной территории. Он берет традиционную сетку портфолио и растягивает ее в трех измерениях, создавая вращающийся фрейм проектной графики вокруг названия студии, который служит единственным элементом навигации по сайту.
Щелкните одно из этих вращающихся изображений, и вы попадете на страницу сведений о проекте, которая поворачивает карусель главной страницы таким образом, чтобы изображения прокручивались вертикально, наклоняясь к вам при прокрутке мимо них.Это хитрый, хотя и несколько дезориентирующий и требующий большого объема памяти дизайн.
Мы видим все больше и больше экспериментальных художественных портфолио от веб-дизайнеров и студий. Затем это экспериментирование становится уникальным способом оформления содержания сайта, давая понять потенциальным клиентам, что эта студия стремится предоставлять инновационные дизайнерские работы.
13. Портфолио Лорен Виквар
Макет: переходы героев без полей при прокрутке в «карточки проекта с разделенным экраном».”
Еще один сайт-портфолио, который по-настоящему привлек мое внимание в последнее время, — это сайт дизайнера книг Лорен Виквар. Многомерная прокрутка создает удивительно плавный и увлекательный опыт, который сочетается с прокруткой без ощущения принуждения или ограничений.
Страницы с описанием проекта используют более традиционный подход, с серией красивых, почти полноэкранных изображений и коротких фрагментов великолепно красиво набранного текста.Это не только красиво, но и помогает посетителю сосредоточиться на ее великолепной редакционной работе.
14. Коллектив Поулоса
Макет
: макет в стиле каменной кладки с отдельными картами, которые исчезают при прокрутке
Poulos Collective — это консалтинговая компания, специализирующаяся на дизайне и стратегии UX. Его сайт обеспечивает чистый, простой и, что самое главное, функциональный интерфейс. Мое внимание привлекла простота веб-сайта, созданного Стефаном Поулосом.Цветовая палитра приятная, текст легко читается, а легкий внешний вид обеспечивает чрезвычайно высокую скорость загрузки, обеспечивая отличное взаимодействие с пользователем.
Веб-сайт кажется… гладким.
Я еще больший поклонник мобильной версии этого сайта. Он дает вам все, что вам нужно, и ничего лишнего. Понять, о чем идет речь, действительно легко. Когда я просматриваю веб-сайт Poulos Collective, меня не сбивают с толку сложный жаргон или безумный дизайн.
15. Дэн Перрера
Макет
: простой канал сообщений в блоге, содержащий только заголовки и даты, плавно переходящий в подробные представления сообщений при нажатии.
Я нахожу много радости в уникальных минималистичных макетах, и блог Дэна Перреры предлагает поистине восхитительный пример. Домашняя страница состоит из простого потока сообщений блога с отметками времени и липкой навигационной панелью слева. В этом году я все чаще и чаще сталкиваюсь с уникальными вариантами использования навигации на боковой панели.
В довершение всего, Дэн создал красивую страницу с информацией, которая выдвигается с правой стороны экрана, когда вы нажимаете кнопку информации, придавая домашней странице ощущение слайдера. Браво, Дэн, об этом идеальном минималистичном дизайне!
Найдите вдохновение и продвиньте свой собственный дизайн дальше
Как дизайнеры, мы знаем, что клиентам часто нужны проверенные и надежные решения. И нам легко выполнить именно то, что они просят.Придерживаться условностей — это нормально, но в дизайне у разработчиков есть много возможностей попробовать что-то новое. Применяя нестандартный подход, мы можем создавать веб-сайты, которые запоминаются и не теряются в море единообразия.
.
Добавить комментарий