Perfect Landing Page, как?

Question

[Junior Bee]

Добрый вечер! Нужен совет опытных людей.
Одна хорошая компания дала сделать тестовое задание. По мокапу сделать небольшой лендинг, UI на свою фантазию. У самого есть год опыта во фронтенде. Лендинг должен быть анимированный, с крутыми ховер эффектами, плюс там каруселька, контактная форма.
Так вот вопрос, какие технологии использовать, что лучше делать и не делать, чтобы их удивить и все же получить эту вакансию?? На что обращают внимание опытные компании?
Верстаю достаточно хорошо, пока использую в данном проекте sass, gulp, bootstrap, flex, es6, jquery.
Надо ли использовать normalize и тому подобное? Какие единицы лучше использовать, шрифты?
Буду благодарен за любые советы, примеры хорошего UI, анимации и hover-ов)

Answer 1

[Максим]

Удивить можно:
1) скоростью загрузки
2) знание css - многие анимации сделать в css да и оформление "графики" максимально в css
2б) flex, SVG и пр…
3) микроразметка сайта
4а) минимальный вес сайта
4б) подключение уже готовых скриптов не из файла на сервере, а с https://cdnjs.com/ https://maxcdn.bootstrapcdn.com/bootstrap/…/bootst...
5) максимально использовать знание htaccess
Хотел уже закончить, но вернулся:
САМЫЙ ПЕРВЫЙ) используйте иконки!!! для каждого блока информации своя иконка и в меню тоже должны быть иконки
Сейчас заказчик требовательный пошел, ему важно, чтобы информация была максимально визуализирована, а иконки позволяют надолго записать суть информации в сознание ))
Вам простят единицы измерений, но не простят отсутствие иконок

Comments

[Junior Bee]

Спасибо)

[littleguga]

Не понял Вас про иконки, вы про favicon или обычные визуальные иконки?

[Максим]

про визуальные иконки ionicons.com хотя бы

Answer 2

[littleguga]

Использовать bem, ну хотя бы именование классов по БЭМу.
Адаптивность.
seo+meta теги.
Валидность верстки + если есть товары, то тоже разметка для ПС и seo(item-price и т.д.)

+ лучше всего набирать максимум https://developers.google.com/speed/pagespeed/insi...

используйте jade/pugjs для сборки html.

Теперь про то, что написали Вы:
sass, gulp, bootstrap, flex, es6, jquery.
bootstrap и flex?
Серьезно? Зачем? Это как-бы из разных миров. Если используете flex - возьмите просто секту, https://github.com/kristoferjoseph/flexboxgrid, например

>es6, jquery
Тоже выглядит забавно.
Либо уж используйте просто jquery+его плагины.
Либо полностью пишите свои свистелки и перделки на ES6.
Но тут стоит задуматься, что вашему соискателю важнее - умение быстро в продакшн(jquery) или умение писать js код(es6).

Answer 3

[xmoonlight]

Используйте блоковую сборку через includeHTML
1. Сможете сделать максимально близко для дальнейшего создания шаблона и полноценного SPA.
2. Сможете одной строкой менять местами блоки и скрывать их.
3. Создайте различные представления страницы, используя однократное кодирование блоков (каждый уникальный блок = один HTML-файл)!
4. Без переделки готовый код работает: локально (file:///), как приложение: в phonegap и в nwjs.
5. Просто, быстро, понятно!
Они удивятся однозначно!

PS: отсутствует роутинг из "коробки", потому, что это лишнее для данного функционала и если необходимо - делается за несколько минут.

Comments

[Максим]

а php уже не в моде?

[xmoonlight]

Максим: для чего PHP в данном случае?

[Максим]

а к чему includeHTML.js ?

[xmoonlight]

Максим: ответьте вначале на мой вопрос.

[Максим]

если вы используете includeHTML.js вы тем самым увеличиваете количество запросов к хосту со стороны user, а это извините проблемы - скорость загрузки, да и к тому же некоторые хост-компании такие как reg.ru в своих тарифах указывают ограничение http обращений, не встречали? а вы мелким подчерком почитайте: https://hosting.reg.ru/hosting/restrictions?rid=699611 75 обращений в секунду. Вы думаете, что это много? посмотрите сколько раз обратится клиент к серверу за дозагрузкой файлов?

[xmoonlight]

Максим: один раз на каждый уникальный файл и затем закеширует на стороне клиента и все дальнейшие - будет брать уже из браузера.

[Максим]

xmoonlight не учите программировать вредно. php исполняется на стороне сервера и никак не влияет на количество http запросов.
разбить сайт поблочно нужно исключительно в php, а не собирать его через js! Сформированный таким образом ваш сайт через js создат много "шума" и 5 одновременно заходящих клиентов могут вырубить аккаунт на хостинге reg.ru сервер просто перестанет отвечать. Да и сами подумайте об индексации поисковиков - это второе зло в вашем includeHTML.js
Известно, что боты Яши не исполняют js. Ваш же посыл на вредный скрипт подразумевает загрузку меню через файл html в скрипте. Т.е. бот просто не проиндексирует остальные страницы сайта )))
так что и вас предупреждаю - это вредный скрипт!

[xmoonlight]

Максим: Боты ПС - исполняют JS. Про остальные страницы - это Вы сами придумали. Всё делается через роутинг и указание URL для текущей страницы.
Так что, советую немного почитать про SPA: как оно организуется при одной и нескольких страницах, как индексируется, что такое роутинг и что для этого нужно.
Ну и про кэширование, конечно тоже)))

Можно делать в PHP - но зачем тянуть всю страницу, когда можно один раз загрузить необходимые части и использовать их постоянно?!
А PHP нужен - только для ОБРАБОТКИ ДАННЫХ НА СТОРОНЕ СЕРВЕРА и вместе со SPA: он может отлично применяться как REST-сервис для работы через AJAX на стороне SPA.
Если НЕ ТРЕБУЕТСЯ ОБРАБОТКА ДАННЫХ НА СТОРОНЕ СЕРВЕРА - можно ограничиться HTML-хостингом.

SPA приложение в несколько раз быстрее для пользователя, чем обычная страница с генерацией посредством PHP при каждом очередном запросе!

[Максим]

Ну начнем с самого вопроса:
"удивить и все же получить эту вакансию"
Если соискатель на вакансию мне всунет вместо сайта "includeHTML" - он будет сразу "пойдет гулять"
Где вы видели принудительное кеширование без htaccess (или не слышали, что многие отключают в браузерах это)? - на хостинге html ? )) (добрый улыбко) А это где? free.1gb.ru - кажется последний монстр .
Я отдам 11 рублей в месяц на социальном тарифе ofsoo.ru и получу полноценную панель ISPmanager, c PHP, MySQL, htaccess, Cron, Почтой и прочими услугами профессионального хостинга с местом hdd 500Mb
Зачем городить роутинг и прочие звездопляски с танцами и бубном? Landing для поставленной задачи - совсем не тот случай.
зачем включать а еще подключать и без того судя по ТЗ загруженному проекту? И где вы видели исполнение js ботами, кроме определение ссылки через ajax?
SPA приложение возможно и хорошо и к тому же есть слово "зачем"?, в навигации для Landing совсем не подходит.
Если вам нравится сидеть на хостинге HTML и использовать includeHTML - это ваше право, конечно. Но давать вредные советы соискателям на вакантное место работы, это просто вредительство.

[littleguga]

xmoonlight: зачем, если можно собирать через jade?

[littleguga]

Максим: не стоит пользоваться хостингами, а reg.ru и подавно.

[littleguga]

Максим: >2016
>htaccess
nginx же есть.

Если честно, то смутно представляю, кто и как отключает кэширование в браузерах. Особенно пользователи IE.

[littleguga]

Максим: а как же ПС боты сайты на react/angular индексируют?

xmoonlight: Максим: вообще для лендинга(1 страницы) не нужно ни то, ни другое. Достаточно 1 раз собрать html файлик и залить его.
Если нужна динамическая подгрузка блоков для более быстрого отображения страницы, о чем и хотел сказать xmoonlight, то можно извратиться. Но зачем? Я таких лендингов не встречал.

[xmoonlight]

littleguga: "зачем, если можно собирать через jade?" не вижу тут смысла, т.к. jade - ближе к скрипт-генерации DOM'a, а includeHTML - всего лишь вставка готового кода.
Про 1 файлик - да согласен, можно один. Но там придётся всё подряд грузить: все секции сразу.
Я уже писал, что целевое применение includeHTML - это вёрстка HTML из уникальных блоков, чтобы потом можно было легко, например, создать php-шаблон под CMS, просто переименовав куски кода в php и заменив include-тэги на PHP-шные или в HTML5-приложениях (phonegap, nwjs).
Используя замену по тэгу, можно "склеить" страницу через PHP-скрипт без модификации HTML-кода.
Я создавал для себя и как по мне: очень удобно и быстро "клеить" разметку из уникальных блоков, поэтому и выложил на гитхаб.
Но видимо, нужно еще презентацию и позиционирование раскрыть более детально, чтобы понимали все: для чего конкретно это сделано и в каких случаях стоит применять.
В принципе, чтобы понять, один раз нужно попробовать создать одну страницу и посмотреть удобство и скорость.
Кстати, include-тэг - рекурсивный: если в куске, который инклудим, есть еще инклуд(ы) - то он(и) автоматом тянется(-утся) и т.д.

[littleguga]

xmoonlight: да не, смысл применения я понял. Но всё равно как-то не очень подходит для данной задачи. Не встречал лендингов, где динамически секции грузятся.
+
При создании шаблона для CMS важно "впихивать" контент между нужными тегами, а не просто секции подтягивать, так что тут не понимаю, в чем преимущество.

[xmoonlight]

littleguga: "Не встречал лендингов, где динамически секции грузятся." - правильно, потому как это не просто сделать. А с includeHTML - это один тэг.

[littleguga]

xmoonlight: Вам бы в продажники)

Answer 4

[Артём Цымбалюк]

Я бы всё таки взял normalize
Единицы, у меня помню при наборе сделали замечание насчёт line-height, оказывается правильнее всего писать в em