Какие технологии вы используете для лендингов?

Question

[warcevil]

Меня интересует, как верстать лендинги максимально быстро и качественно? Какие библиотеки, фреймворки и прочие хелперы можно использовать для их верстки. Для себя пока открыл следующие штучки:

• Slick slider
  
• Font awesome
  
• scroll-reveal
  
• parallax
  

Что ещё интересного и полезного можете предложить?

Answer 1

[Николай Стариков]

Если без фреймворка, а просто верстка по макету, то:

• Emmet - быстрый кодинг html и сss
  
• less - переменные для шрифтов, вложенность селекторов или бэм-нейминг.
  
• flexbox - для сетки, расположения элементов и респонсива.
  
• autoprefixer - добавление css-префиксов
  
• Imagemin-pngquant - для сжатия картинок
  
• gulp - для сборки вышеперечисленного
  
• slick - карусели и слайдеры
  
• remodal - модалки
  

Если использовать фреймворк, например, bootstrap, то быстрее будет работать с исходниками бутстрапа и потом собрать их:

• переопределить переменные
  
• подключить нужные js-скипты из коробки
  
• подключить нужные less-стили
  
• собрать это всё галпом
  

Comments

[Антон Мудренок]

Николай Стариков поделитесь вашими ссылочками на то, как варить сетки на flexbox?

Answer 2

[Sanes]

Uikit CSS Framework в плане верстки закроет 99% свистелок.

Comments

[Eastar]

Twitter Bootstrap это фреймворк из той же области? Или есть какие-то концептуальные различия?

[Sanes]

Роман Шаталов: Бутстрап попсовый и совершенно пустой, если сравнивать с Uikit

[dhat]

Зашел на https://getuikit.com/docs/form-advanced.html
Это что за ублюдочное уродство? Там все такие "красивое" как эти радио и чекбоксы?
Кроме того, документация вообещ НИКАКАЯ. Мне нужно обладать телепатией, чтобы узнать как пользоваться Uikit CSS Framework? Или мне нужно убить несколько дней, ковыряясь в нем?

[Sanes]

dhat: Не нравится, не используй.

[lukoie]

dhat: а прочесть описание на главной - не судьба? ублюдочное уродство - это результат работы ВАШЕГО браузера. Кто-то Вам забанил цсс? Или это тоже должно само по себе работать? Так в УиКит это тоже возможно. Если дочитать. Или нормально по человечьи спросить у тех, кто спромогся прочесть и использовать.

[Ankhena]

lukoie: dhat:
даже открыла полюбопытствовать
s018.radikal.ru/i518/1611/0a/cf3b64ed9c37.png
У меня ничего не забанено, но почему в одном из самых популярных браузеров даже кружочки не отцентрированы?

[lukoie]

Ankhena W: на заглавной: "UIkit's very basic style can be extended with themes and is easy to customize to create your own look." Я например против того чтобы фреймворк по дефолту отдавал некий визуальный стиль - так тыщупяцот сайтов будут одинаковыми, т.к. дефолтный стиль менять не будут - та Вы и сами знаете - бутстрапный сайт видно издалека.

[Ankhena]

lukoie: так и я о том же, зачем же они покрасили радио в голубенький да еще и так кривенько. Такое увидишь и точно даже пробовать не будешь. Ну т.е. я не буду.

[dhat]

lukoie: против того чтобы вам "отдавали визуальны стиль"? Так зачем вам тогда фреймворк??? Пользуйтесь ресетом своим каким-нибудь. А задача фреймфворка давать разработчику готовые компоненты к использованию. А свои я и сам могу сделать, с этим вашим CSS - нахер мне тогда этот UIkit?

[Sanes]

Ankhena W: dhat: Вы хоть поняли вообще смысл этого компонента?

[Eastar]

dhat: ну, я примерно понял логику утверждения. Фреймворк должен давать кроссбраузерную верстку, адаптивность, а уже внешнюю состовляющую(цвет, форму, закругления и прочее) автор утверждения предлагает кастомизировать у себя. Я в чем-то согласен, выкатить сайт на бутстрапе без кастомизации можно только на этапе прототипа, в продакшн все равно будет все меняться под макет. Но фреймфорки дают уверенность, что его разработчики позаботились о том, чтобы сайт не разваливался при изменении размера браузера или девайса, что все будет на местах, а уж какого размера и цвета будь добр подогнать под макет.

[dhat]

Роман Шаталов: а грамотный дизайн и mobile first не дадут адаптивности? Кроссбраузерность можно опять же решить своими ресетами. Или вы фолбэки имеете ввиду?
зы: я не отрицаю, что могу неверно понимать подхода создателей Uikit. Толком в работе его не пробовал. Но все остальные фреймворки - это сплошная боль.

[Sanes]

dhat: Есть бюджет 3 копейки и время 2 дня на запуск лендинга. Будете страдать велосипедами или займетесь более важными вещами?

[Eastar]

dhat: вот в том-то и дело, что я в своей верстке не уверен, но мне иногда приходится ей заниматься, я более или менее освоил бутстрап и мне выше головы его хватает, но хочется рассмотреть для себя весь возможный инструментарий, может я что-то важное упускаю из вида. я думаю что эти фреймворки как раз для таких не уверенных в верстке. Понятное дело, что профессионал frontend быстрее и качественнее сам наверстает свой функционал.

[Sanes]

Роман Шаталов: Просто посмотрите на набор компонентов и хелперов в Uikit. Элементарные margin и lightbox в TB отсутствуют. Поработайте немного и поймете, сколько времени сэкономите.

[Eastar]

Sanes: спасибо, прям в понедельник попробую один небольшой проект наверстать на UIkit, хоть и не люблю это дело, но надо осваивать для расширения кругозора..

[dhat]

Роман Шаталов: не сказал бы что фреймворки для неувереных в своей верстке. Вам придется разбиратся в чужом коде, и постоянно думать как же впихнуть свой дизайн чтоб ничего не поломалось. Я однажды над тем, чтобы сместить гребанное дропдаун меню на несколько пикселей вниз в Zurb Foundaton просидел 3 часа. Либо же смирится с чужим дизайном.

[itsjustmypage]

Sanes: Не знаю какой имбицил писал этот фреймворк, но эти радио-кнопки ужасны. Синие точки заданы через ::before к input, хотя замещаемые элементы (input, img, object, video и т.д.) согласно спецификации не поддерживают их. Поэтому в хроме видны синие точки, а в файрфокс их нет, только стандартные радио-кнопки.

Более того, размеры кнопки 13x13 пикселей, а точки 8x8, то есть отступы должны быть по 2.5 пикселя, из-за чего её невозможно выровнять посередине.

С таким подходом лучше вообще фреймворки не делать.

[Sanes]

itsjustmypage: А ну расскажи, как радиокнопки сделаны в TB?

[itsjustmypage]

Sanes: А ну не нукай посторонним. Зачем ты уходишь в сторону, когда говорят о кривом отображении даже в самых популярных браузерах? Или по-твоему это нормально, что в Chrome и Opera точки не по центру, а в IE и Firefox эти стили вообще не применяются, потому что спецификация не определяет поведение псевдоэлементов для замещаемых элементов (то есть их никак нельзя применять в деле, особенно в фреймворке)?

Раз уж советуешь подобное, объясни, как ты "не придумываешь велосипеды", перезаписывая компоненты фреймворка, чтобы они работали во всех браузерах?

[Kovalsky]

Sanes: и правда, радио на хроме едут. Это единственная проблема Uikit?

[itsjustmypage]

Sanes: ты куда ушёл, люди ждут ответа)

[Sanes]

itsjustmypage: Соскучился? Дела, брат.

[itsjustmypage]

Sanes: наблюдаю за сливом. не брат ты мне)

[Sanes]

itsjustmypage: Значит, спи спокойно.

[lukoie]

Ankhena W: Артём Петренков: dhat: сходите, пожалуйста, вот сюда: https://getuikit.com/docs/customizer.html
именно там у uikit внешний вид

[lukoie]

Артём Петренков: для uikit внешний вид предусматривается делать именно там.

[Ankhena]

lukoie: да уже без разницы. Вообще нет и не было желания пользоваться бутстрапами или чем-то подобным.

[lukoie]

Ankhena W: но автор вопроса спрашивает о другом, и не стоит обламывать его тем, что не до конца понял как это делается.

Answer 3

[HelpSophie]

Нормального дизайнера.

Comments

[lemma]

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

[HelpSophie]

acbor: Знаете, я Вам завидую, если Вы не чувствуете разницу в скорости и качестве работы при сотрудничестве с нормальным дизайнером и "некачественным".

Answer 4

[Artem Verbat]

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

Мой шаблон для вёрстки - https://github.com/verbart/start-site
Мой шаблон для AngularJS проектов - https://github.com/verbart/ng-boilerplate

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

Comments

[Qairat]

а как ваш шаблон использовать?

[Artem Verbat]

Qairat Batyrbayev: а что конкретно вызывает затруднения?

Answer 5

[xmoonlight]

includeHTML

Comments

[bro-dev]

жесть, а если в браузере отключен js? + лишние запросы. Лендос это 1 страница, в нем вообще все пихают в 1 файл так как все стили скрипты и картинки будут тока на 1 единственной странице.

[xmoonlight]

Роман Бережнов: значит, моё решение - не подходит, в таком случае.

[ZaxapKramer]

Роман Бережнов, аргумент про отключенный js устарел лет на 10, откровенно говоря. Так что это проблема самих пользователей, ИМХО, - то то же самое, что сидеть с IE4.

[bro-dev]

ZaxapKramer: Есть такая штука как Тор, и вообще вероятно, что внезапно может настать эпоха вынужденной анонимности когда отключенный js это залог твоей безопасности. Я не говорю что js не нужно использовать, но нужно чтобы без него пользователю хотя бы сказали что без него не будет работать, а еще лучше чтоб бы версия сайта с 1% функциональностью но все равно рабочая без js.

[ZaxapKramer]

Роман Бережнов, ваша правда, согласен. Тоже люблю всякие вещи вроде: "А что, если скорость интернета упадет до 5-10кб/с у всех сразу, и никто не будет ждать 10 минут, пока тяжеловесные скрипты весом в сумме в мегабайт загрузятся" (без шуток).

[xmoonlight]

ZaxapKramer: Роман Бережнов: если я правильно понимаю (я могу доработать), то нужно чтобы всё сразу возможно было бы получить за один запрос в ответе от сервера, включая все картинки/звуки и т.д.
Так, фактически, это просто нужно виртуализировать пути к ресурсам в inline-ресурсы base64.
Но из-за объёмов всего контента SPA это может занимать и 10-15Мб в зависимости от общего объёма медиа: изображений/аудио/видео.
Которые еще могут быть и не просмотрены (не промотал пользователь вниз) :(
В общем, тема интересная и как лучше сделать - пишите: попробую реализовать.

[ZaxapKramer]

xmoonlight, возможно, у меня знаний не хватает (а это возможно), но даже не представляю, как за один запрос запихать запрашиваемые изображения и скрипты в base64. Если это возможно (если правильно понял вашу мысль, идею), то в ряде случаев это было бы очень полезно! Аудио и видео в base64 переводить ненужно, а вообще... Лучше (если это, опять же, возможно) сделать это опционально, грубо говоря, так:

var options = { /* ... */ base64: ["img", "link", "audio", "video"] }

(пример для большей ясности, пусть и так все ясно).
Зачастую (при подгрузке отдельных страниц, например) неважно, промотал ли пользователь вниз, а иногда достаточно будет (в случае с лендингом) в base64 впихнуть LazyLoad, и изображения загружать им по мере прокрутки...

[xmoonlight]

ZaxapKramer: так не лучше на блоки сделать LazyLoad?!

[ZaxapKramer]

xmoonlight, лишь попытался развить идею с получением всех элементов конента за один запрос.
LazyLoad - это фича, причем не имеющая отношения к вашему замечательному includeHTML.
Да, прикрутить можно, но речь не об этом: вы просили написать, как лучше сделать - изложил выше свое мнение.

[xmoonlight]

ZaxapKramer: про LazyLoad и про отношение к includeHTML - не особо понял.
Я говорю, что блоки (не картинки, а части страницы: DIV-блоки) можно загружать только тогда, когда пользователь почти промотал до него.
LazyLoad - это не библиотека, а принцип "ленивой" (отложенной) загрузки данных!
А про base64, так для js: data:text/javascript;base64,XXXXXXXXXXXX
так для изображений: data:image/jpeg;base64XXXXXXXXXXXXX

[ZaxapKramer]

xmoonlight, а кто сказал, что LazyLoad - библиотека? Судя по моим предыдущим словам, это фича, не библиотека. Про отношение - это ответ на ваш предыдущий комментарий, где вы упомянули LazyLoad, коего в вашей библиотеке нет.
Про base64: прекрасно знаю, что и как, простите, если не очень понятно выражаюсь в комментариях, - надеялся, что пишу доступным языком.
Видимо, в начале всей дискуссии, неверно понял ваши слова про base64. Была затронута тема про лишние запросы для каждого "куска" html, загружаемого вашей библиотекой. Далее вы пишете про base64, как решение (так мне показалось). Ошибочно подумал, что есть какой-то магический способ получить html+"куски" (подгружаемые includeHTML) через js одним запросом, "переделав" их в base64-формат...и вы хотите его применить, просите предложений по этому поводу... Приношу свои извинения.

LazyLoad в includeHTML использовать, конечно, можно, если вы имели ввиду, что это - хорошее решение. Главное - то, как оно будет работать: например, если вставляется футер, до которого нужно скроллить относительно долго, LazyLoad - неплохое решение, ИМХО. Главное - чтобы это не было в ущерб основному функционалу вашей библиотеки.
(вероятно, сейчас выступаю в роли Капитана Очевидность)

[xmoonlight]

ZaxapKramer: в общем, про большое количество запросов - это вряд ли будет неудобно, т.к.:
1. в браузере есть кэширование - всё грузится только 1 раз
2. кусочки - занимают несколько байт
3. они грузятся только один раз и по мере необходимости (по событиям)
4. для картинок - подключается lazyload

Иначе - сделать компилятор в один единый HTML с base64 посредством рендеринга через тот же includeHTML и сохранять все ресурсы как ОДНУ html-ку со всеми картинками, скриптами и html-кусочками.
И после выкладывать на сервер единую html-ку (1 файл: index.html).

Также, можно сделать загрузку всех блоков как из тела основной страницы, так и из любого дополнительно-подгружаемого файла, содержащего сразу все нужные блоки для SPA-приложения (для последующего отображения в нужный момент без обращения к сети).
Этот вариант вижу пока самым приоритетным.

Answer 6

[lukoie]

webflow

Comments

[dhat]

Хорошо что уже не Укоз.

[Владимир Соломыкин]

или викс)

[lukoie]

Владимир Соломыкин: dhat: вообще-то даже ВеликийСамиЗнаетеКто как то хвалился что они наконец перешли на создание прототипов прежде создания проекта. Так вот Вебфлоу как раз позволяет делать рабочий прототип!

Answer 7

[Александр]

lilanding.js для навигации.
Animate.css + wow.js

Answer 8

[Kjuri]

Если ориентироваться на ваш список, те. различные скрипты js ( анимация, паралакс и слайдер) + шрифты, то список окажется очень длинным. Нужное используется по мере необходимости и исходя из минимизации допиливания.
Разве что из постоянных:
Fancybox - модальные окна для более сложных вариантов
Owl - адаптивная каруселька
+свои наработки для ajax заявок и простых модальных

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

Берите выше - для ускорения одних js-скриптов недостаточно.
Это и обвес своего редактора нужными плагинами (Emmet в первую очередь)
Это изучение клавиатурных сокращений (серьезно так ускоряет)
Это npm, сборщик проектов (gulp, grunt) + соответствующий обвес
Это фреймворк (bootstrap)
Это препроцессоры
Вот такой начальный список, а дальше - смотря что найдете и изучите полезного в интернете.

Answer 9

[soofftt91]

По технологиям для оптимизации вёрстки:

• bootstrap
  
• Font awesome
  
• свои наработки (шаблоны целых блоков) на основе бутстрапа
  
• Sass
  

Из "фишек" популярных в среде БМ и прочих клубов по интересам:

• геотаргетинг (link)
  
• мультилендинг (link)
  

Answer 10

[Александр Шаповалов]

Как не странно с головой хватает Бутстрапа, а для серверной части фреймворк Yii например, на случай если клиенты захотят вырастить из лендинга полноценный сайт, что частенько бывает

Comments

[Алексей Васильевич]

оффтоп
А не слишком из пушки по воробьям - лендинг на Yii2? :) Имхо, если клиент захочет из лендинга сделать полноценный сайт - это уже отдельная задача со всеми вытекающими.

[Александр Шаповалов]

Ну так то да, зато мне проще ))) грубо говоря основной дизайн уже готов и верстать остается лишь блоки )

Answer 11

[liscrew]

Polymer

Answer 12

[xxvxx]

вообще они делаются 1 раз и в код обычно больше не смотрят.... если ты их постоянно делаешь adobe muse то с ним будет быстрее...