Как лучше всего оформить header?


#1

Прошел уже довольно много интерактивных курсов и решил попробовать сверстать магазинчик Кекса из этих самых курсов. Но только уже не на флоатах, а на флексах. Ну и без подглядывания в код, чисто по макету. Надо же с чего-то начинать.) Вобщем по шапке возник вопрос. Я ее сверстал вот так: https://codepen.io/Klavinder/pen/pozXZLy
Примерно представляю и другие варианты верстки. Но как было бы лучше? В частности интересует позиционирование кнопки “Заказать”. Зарнее спасибо за ответы!

P.S. Возможно вопрос банальный, но все же я еще новичок)


#2

Вместо “как лучше”, стоит себе задать следующие вопросы:

  1. Визуально нужный результат был получен?
  2. Код будет понятен стороннему человеку? Имена классов логичны? Код читабелен, нормально отформатирован? В разметку или стили легко внести какие-то точечные изменения, не перелопачивая всё и вся?
  3. Валидаторы не ругаются на разметку и стили?

Если пока в работе только desktop-версия, то вроде все ок. Мало, но особо-то и критиковать нечего. Если доверстаешь до конца - напиши, можно будет детальней разобрать.


#3

Спасибо за ответ! Да, я планирую довести дело до конца.) Потом обязательно выложу сюда для критики


#4

Выставляю на ваш суд.) Если будет время, гляньте. Надеюсь, что разберетесь.)


#5

Славно, вечером обязательно посмотрю.


#6
  1. Структура проекта. Less-файлы со стилями лучше держать отдельно, каталог для наглядности можно так и назвать - less.
  2. Обычно на гитхабе хранят исходные файлы проекта, которые можно собрать в работоспособную версию, развернув у себя на устройстве. Например, скомпилированные css-стили можно не коммитить если в этом нет непосредственной необходимости.

Продолжение следует…


#7
  1. Исправил пункт, см. сообщение выше.
  2. LESS как собирается в CSS? Отсутствие package.json намекает на отсутствие сборщика и/или какой-то плагин для редактора. Тут лучше либо не коммитить LESS вообще, либо указать в readme чем собирались стили.
  3. Посмотри, удобная штука, “твой первый хостинг” так сказать: https://pages.github.com/
  4. Используй валидатор разметки для поиска ошибок в именовании тегов, атрибутов, вложенности, правил моделей содержимого: https://validator.w3.org/nu/#textarea (подсказка - ошибок две).
  5. Иногда стоит провалидировать и стили: https://jigsaw.w3.org/css-validator/validator
  6. Некоторые изображения можно еще немного ужать в размере - попробуй поиграться на https://squoosh.app/
  7. Стоит подключить favicon - даже если его в оригинальном курсе нет.
  8. Кнопка с ховером и без - обрати внимание на border: http://joxi.ru/Drl3Q8YCVgXNqA
  9. “Родной” браузерный outline можно убрать (т.к. у нас есть состояние для фокуса) или заменить на что-то близкое по дизайну: http://joxi.ru/l2ZoN5JFzv14oA
  10. Кнопка не до конца застилизированна: http://joxi.ru/RmzMq0PCYekoxr
  11. Для разметки кнопок использован тег input:
<input type="submit" class="btn" value="Отправить">

Лучше заменить на button.
13. В разных браузерах (Хром, Лиса, Ишак) могут быть свои кастомные стили для состояния фокуса и др., внешний вид контролов (например, для select) - желательно такие моменты делать однообразными.


#8

Спасибо за замечания. По некоторым пунктам могу прямо сейчас ответить, другие посмотрю, когда дома буду.
1, 2 - приму к сведению.)
3 - все писалось в Атоме. Я ставил для лесса по-моему два плагина. Дома посмотрю, какие именно. До конца еще не разобрался, какие именно нужны, возможно что-то еще не доставил.
4 - да, я знаю про pages.github. Вроде ж у меня эта страничка и сделана в таком виде: https://klavinder.github.io/TheGreatKeksby/. Или я что-то не так понимаю?
5, 6 - тоже приму к сведению. Насчет ошибок, поищу обязательно.
7 - ужать можно, а стоит ли? До какого уровня картинки вообще нужно ужимать? Чисто на глаз?
8 - ок. Это вообще как-то упустил из виду
9 - тут скорее всего просто из-за невнимательности. Буду дома смотреть.
10 - ок
11 - эх, видимо тоже невнимательность
12, 13 - ок, исправимся

З.Ы. Хочу попробовать адаптивность прикрутить, поэтому вопрос: если нет отдельных макетов для конкретных разрешений экрана устройства, то какие граничные разрешения брать и сколько? Где-то видел, что берут 990px, 770px и 320px.


#9

4 - а, все ок, я что-то не обратил внимание на ссылку в подзаголовке репо.
6 - в стилях все ок, упомянул для полноты картины.
7 - да, сравнение “до-после”. Смысл имеет - трафик пользователя, нагрузка на батарейку во время рендеринга, хорошие показатели в Google Page Speed, который может повлиять на рейтинг ранжирования в Гугле - в общем, не стоит пренебрегать оптимизация. Но без фанатизма.
По адаптиву - посмотри какие медиазапросы указаны в документации Bootstrap, эдакое среднее по больнице.