Какие есть особенности при верстке Landing Page

Question

[RGoldvarg]

Добрый вечер, коллеги!
Я начинающий верстальщик. Сейчас изучаю HTML5/CSS3... В принципе, уже умею верстать макеты на определенном уровне, но...

Меня крайне интересуют интерактивные лэндинги, по типу: www.entiri.com/totemic ... К сожалению, в интернете не смог найти адекватного урока по их верстке... Отсюда и вопрос...

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

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

И, да... Если мой вопрос сформулирован некорректно, прошу меня извинить. :)

Answer 1

[Игорь Воротнёв]

В целом @pettson правильно расписал. Только еще обратите внимание на различие между лендингами и между одностраничными сайтами. Это разные вещи. Лендинг (он же - посадочная страница), в рунете часто еще называют "продающая страница" - это страничка, задача которой четко конвертировать теплый целевой трафик в действия (подписка, покупка, заказ звонка, заказ услуги и т.д.). Одностраничный сайт - это просто сайт, на котором весь контент собран в виде одной страницы, чаще всего - с возможность подгрузки дополнительных данных с помощью ajax.
С точки зрения верстки все на одно лицо - это просто html + css + javascript (разметка + оформление + взаимодействие). Возможно, с бекендом, возможно без него. Но это уже другая история.

Answer 2

[Сергей Виноградов]

Верстка лендингов никак не отличается от верстки обычных макетов, имхо. Если вы умеете верстать обычные макеты, то вы сможете сверстать и лендинг.
Для добавления интерактивности на лендинг наверное имеет смысл поизучать css анимации и javascript.
На счет фреймворков, по-моему тут очень по-разному, кто-то использует, кто-то нет. Если вам удобно верстать на фреймворке, то и верстайте на фреймворке.

Answer 3

[mind3]

Ваш ответ кроется в flat design , parallax scrolling, boostrap 3, slide. Взгляните на исходный код сверстанного макета и все встанет на свои места. Удачного творчества ;)

Answer 4

[malinkin]

Очень понимаю автора. Для верстки лендинга советую fullpage.js, вещь просто незаменимая в хозяйстве.

Answer 5

[Алексей Кравченко]

https://habrahabr.ru/post/257211/
Это, конечно, по дизайну.
Верстка же, как уже сказали, не отличается для любой страницы...