Покритикуете верстку?

Question

[frozifonte]

https://frozifonte.github.io/template-01/

Не стыдно ли класть в портфолио такую работу для фриланса?

Comments

[cucumber111]

иди в ютуб...там блогеры комментируют верстку и дают оценку и еще отвечают на вопросы, от мне недавно сказали, на 3 типо из 5, обидно

[Виталий Першин]

Почему стили .button:hover повторяются около 7 раз?

[frozifonte]

cucumber111, спасибо за совет

[frozifonte]

Виталий, спасибо за отзыв, исправил

[pavelmosin]

Хорошим дополнением верстки будет сделать реальный счетчик, чтобы секунды, минуты и дни отсчитывались

[Дмитрий]

cucumber111, слушай, ну 3 из 5 это вполне неплохо для огурца

[Антон Литвиненко]

чтото с файлом стилей. там по много раз повторяется одно и то же

[John Didact]

ИМХО. Меня бесит, когда открываю меню и весь сайт съезжает вниз…

[mipfikus]

если смотреть как пользователь, то бесит что все такое большое, хочется нахать ctrl и покрутить колёсиком чтобы было видно нормально.

[frozifonte]

mipfikus, спасибо

Answer 1

[Никита Шинкевич]

Как человек с 12 летним опытом производства сайтов и эксперт по UI и лендингам могу сказать одно: забейте на трансформации и прочие ненужные эффекты...

1. Примитивизируйте максимально
2. Облегчайте
3. Информация: четко, просто, как для 5-летнего

И запомните - Ваш клиент в 80% заходов - это человек у которого медленный интернет в смартфоне, у него неуклюжие большие пальцы, маленький экран и смартфон старый и лагает... Если под такого посетителя сделаете чтобы "летало" и было разжевано - продаваться будет даже с хренового дизайна.

Answer 2

[Кира]

в хедере 1 и 3 ссылки никуда не ведут.
сайт заканчивается странно, какого-нибудь футера не хватает или отступа хотя бы.
попап с ума сходит если много раз нажать на кнопку при пустых инпутах

Answer 3

[Антон Иванов]

Opera 68.0.3618.173

Comments

[Антон Иванов]

При уменьшении ширины браузера - картинка налезает на форму

[Robur]

Боль, скованность, отек - сначала подумал что это фидбек на верстку

[frozifonte]

Антон, спасибо за отзыв, так было задумано (чтобы картинка накладывалась на форму), это плохое решение адаптива?
Не могли бы прокомментировать js?

[Виолетта Морозова]

frozifonte, это плохое решение, т.к. как минимум скрывает часть блока, который взаимодействует с пользователем и несёт за собой информацию

Answer 4

[Qualiant]

Не буду ничего говорить по реализации, так как не шарю во фронте. Скажу как пользователь.

"Закажите сейчас по акции" - в этом блоке отступы между абзацами бы побольше.

Анимация кнопки "заказать со скидкой" почему-то работает в обратную сторону. Кнопка должна наживаться, а не подскакивать. Не говоря уже о том, что я ничего не нажимал, но анимация намекает. Лучше просто подсвечивать другим цветом при наведении.

Визуальная правая граница верхнего блока ссылок (где "Оплата и доставка") не совпадает с белым блоком. Нужно чтобы они были ровно.

Есть понятие о максимально комфортной ширине контента. Чтобы его можно было читать, не мотая головой. Я бы ограничил толщину контента второго, третьего и четвёртого блоков до 1200 пикселей.

Comments

[Виолетта Морозова]

Действительно есть такие понятие про ширину текста, которую рекомендуется ограничивать 680рх

[Qualiant]

Виолетта Морозова, ну не всегда 680px, так как у разных мониторов разная плотность пикселей.

[Виолетта Морозова]

Qualiant, поизучайте этот вопрос. Разная плотность пикселей относится только к медиа.

[Qualiant]

Виолетта Морозова, мне незачем, я не по фронту.

[Виолетта Морозова]

Qualiant, тогда зачем писать тут свои неверные советы/убеждения, если это вообще не ваша тема и вы в ней не разбираетесь?!

[Qualiant]

Виолетта Морозова, я сказал во первых как пользователь. Во вторых как бывший фуллстек. Я не не разбираюсь в этом. Я не разбираюсь в этом досконально.

[Виолетта Морозова]

Qualiant, ну вот и не надо об этом тогда писать) Не разбираетесь в вопросе - лучше не говорите ничего. Нет ничего страшного в том, что вы чего-то не знаете и промолчите.

Answer 5

[artuh_a]

- Прелоадер или совсем уберите или сделайте его исчезновение более плавным, у вас статичная страничка и это мерцание как-то не очень смотрится;
- названия картинкам лучше давать латиницей:

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

Answer 6

[WapSter]

* {transition: .5s ease-in-out;} плохая практика. БЭМ ты вообще не понял. И почему-то мне кажется верстка не закончена.

Comments

[frozifonte]

WapSter спасибо за отзыв, не могли бы прокомментировать js?
Почему вы считаете, что верстка не закончена?

[Qualiant]

frozifonte, применять транзитивность ко всем объектам это сценарий для фильма ужасов.

[Виолетта Морозова]

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

Answer 7

[Александр]

1. В других местах тоже есть наезды текста на картинку, наезд кнопки на картинку ....
Смотри ширину окна
2. Сделай отступ снизу, а то как отрезали что то снизу )))

Если показывать на своем мониторе - то хорошо )))

Answer 8

[Lord_Dantes]

Не стыдно ли класть в портфолио такую работу для фриланса?

Я бы постыдился

Answer 9

[Дмитрий Киреев]

Открыл на мобилке. Замечания:
1. Прелоадер? На хтмл страничке? Что он делает, зачем он?
2. Бургер меню выглядит максимально не привлекательно. Посмотрите готовые варианты бургеров с анимациями css.
3. Такой стиль выпадающей меню это 2015 год. Ну реально, сделайте при клике на меню выезжающее меню на весь экран, отцентрируйте ссылки по вертикали и горизонтали для начала. Работайте над собственным ощущением прекрасного.
4. Где-то кнопку заказа перекрывает картинка
5. у модалки нет крестика, чтоб закрыть нужно попадать в пиксель мимо окна, так не должно быть

p.s. сам код не смотрео