Покритикуйте верстку, какие в ней есть ошибки?

Question

[Emptyform]

Народ, покритикуйте, плиз, верстку:
dzn.16mb.com/fudi

Моя первая адаптивная верстка (пока вручную, без бутстрапа).
И на JS посмотрите, плс, там его немного.

Макет к ней вот здесь можно взять:
https://yadi.sk/d/5IwJMyZqht5jt

зы. Было бы здорово, если бы еще HTML/CSS/JS код покритиковали ))
ззы. Пофиксил замечания.

Comments

[Кирилл]

При ширине меньше 420 пикселей появляется горизонтальный скрол. То есть на большинстве телефонов с небольшим экраном (как у 4 айфона), будет этот самый горизонтальный скрол.

[Emptyform]

Кирилл Кубляков: ага, недоглядел я для маленьких девайсов )) спасибо

Answer 1

[Илья]

Используйте объетно-ориентированный подход при написании HTML/CSS, именуйте классы понятно (посмотрите на SMACSS & BEM, побродите по github, изучите как пишутся современные фреймворки). Избавляйтесь от лишних контенеров для которых не пишите стили.

<a name="fudi"></a>

Это не нужно, достаточно добавить id c именем для контейнера.

Comments

[Emptyform]

Илья Спасибо )) Пара вопросов:
1- Не нужно именно в этом месте или замечание касается и остальных ? Меня учили избегать, насколько возможно, исползования id
2- Укажите, пожалуйста, пример лишнего контейнера в моем коде

[Илья]

1. Везде. Id избегать не нужно, но завязывать на них стили не стоит.
2. Например, шапка: header > .bg (объединить), .logo и .logo-big (объединить, изменять размеры блока), .top-menu-header > .top-menu.ul-menu (объединить) и т.д.

[Emptyform]

Илья: Понял. Спасибо!

Answer 2

[NKros]

Везде на всю ширину, а футер нет.
Картинки рецептов - сделать плавное при уходе курсора, а не резкое.
Текст после картинок рецептов - читать в таком виде затруднительно. Сделать в виде 3 колонок как и вверху.

Comments

[Emptyform]

NKros // Текст после картинок рецептов - читать затруднительно.// - это имеется в виду текст где числа - "23,567 Recipes Available" и т.д.? Или вы про текст белым шрифтом на самих картинках ?
Я старался делать максимально приближенно к макету, но наверно явные недочеты дизайнера можно и поправить)

Answer 3

[Артур Мудрик]

«пока вручную, без бутстрапа» — с чего вы взяли, что адаптивная верстка, да и верстка вообще, делается обязательно с Бутстрапом? Это совершенно ненужный цсс-фреймворк, который почему-то все пихают везде.

Comments

[Emptyform]

Что ж поделать, заказчик хочет "бутстрап", вот и подстраиваются разрабы) А так то да, если рука хоть немного набита, нафиг он не сдался.

Answer 4

[Archakov Dennis]

1. Логотип при сужении экрана не отступает от границ и выглядит уже не как в полной версии.
2. Желательно придать какую-нибудь анимацию верхнему меню (при наведении).
3. При наведении на "GET STARTED" плавно переключается в белый фон, но как только убираю мыщь, резко цвет становится по стандарту. Честно сказать, это не кравсиво.
4. Размер изображения первого слайда, больше моего экрана. А он вроде должен подстраиваться под любой размер экрана.
5. Нижний блок, самый последний (серый), у тебя какой-то суженый тоже. И текст внутри него.

Comments

[Emptyform]

Ingush Archakov угу, спасибо )

Answer 5

[MegaMufa]

Здорово у вас получилось.
Вот тут заметил, что текст наезжает на стрелочки: take.ms/W0T40

Comments

[Emptyform]

HaruAtari угу, спасибо )

Answer 6

[Николай]

1. Меню по кнопке справа сверху при небольших(600-900px по ширине) расширениях не поверх всего.
2. text-shadow очень мешает читать текст. Либо убрать его, либо сделать более ярким сам текст.
3. В карусельке с отзывами текст заезжает под контролы при небольших расширениях.
4. Не хватает ховеров (например как на GET REWARDED) на пунктах меню сверху.

А вообще очень даже неплохо.

Comments

[Emptyform]

Николай text-shadow делал как в макете и с компа он вроде не страшно смотрится, а с мобильника, да, бросается в глаза. Наверно для мобильников или сильно ослаблю или выключу вообще. Спасибо )

Answer 7

[Alex]

Так же обратите внимание что для iPhone 4 сайт не адаптирован joxi.ru/MAj7XWpHpOe1re и не толко. На большинстве мобильных девайсов появляется горизонтальная прокрутка.

Comments

[Emptyform]

Alex ага, спасибо, недоглядел для маленьких девайсов ))