Оценка верстки лендинга

[Brick]

http://trumplin.org/test

Ребят, нужны советы по доработке, указания на явные косяки, в общем любая критика приветствуется. Заранее спасибо.

[xzarxzes]

http://trumplin.org/test

Ребят, нужны советы по доработке, указания на явные косяки, в общем любая критика приветствуется. Заранее спасибо.

У вас лишний закрывающий - </script> на странице

[cyklop77]

<div class="cl"> </div> 

это что? очистка потока? а зачем неразрывный пробел?..

 

а вообще нормально. только css оформлен не лучшим образом(есть селекторы, записанные в столбик, есть - в строку)

 

вот это тоже не очень хорошо с точки зрения производительности:

* { margin: 0; padding: 0; outline: 0;}

Edited August 2, 2014 by cyklop77

[Brick]

xzarxzes, спасибо, поправил.

 

cyklop77, спасибо, поправил. Отформатирую css, это временные меры. Пробел - скорее привычка, тоже почищу.

[swandev]

Мне кажется такой метод очистки потока уже устарел, зачем делать лишние дивы.

Edited August 2, 2014 by ALEEX SWN

[cyklop77]

автор, подскажи пожалуйста как ты реализовал изменение активного пункта в #navigation при прокрутке страницы вниз

 

то есть как получается так , что пользователь крутит страничку вниз и при прохождении определенного блока к верху окна браузера, меняется активный пункт у  #navigation ?

[Z1gnet]

автор, подскажи пожалуйста как ты реализовал изменение активного пункта в #navigation при прокрутке страницы вниз

 

то есть как получается так , что пользователь крутит страничку вниз и при прохождении определенного блока к верху окна браузера, меняется активный пункт у  #navigation ?

обычный параллакс скрипт. типа такого http://habrahabr.ru/post/142137/

[Z1gnet]

1. http://take.ms/IIrzw используйте сокращенную запись font:16px/1.em "MyriadPro",Arial,Helvetica,sans-serif;

http://take.ms/9pyh2 та же фигня padding: 0 15px;

2. не выровнял по высоте текст в инпутах http://take.ms/aYatd.

3. <div class="cl"> </div> сам по себе метод не самый лучший. и вы его не правильно используете http://take.ms/50SVD, не туда вставили, надо вставлять сразу после последнего флотнутого элемента http://take.ms/l6ZuG

я бы вместо <div class="cl"> просто задал бы на .slons{overflow: hidden;}, в данном случае подходит. но если overflow: hidden; что-то обрежет тогда можно прописать вот так

.slons:after{

    content: "";

    display: block;

    clear: both;

}

4. у div.slon1(2,3) код неправильно записан. вы дублируете одни и те же стили кучу раз. у этих 3-х блоков одинаковые стили, фактически отличаются только цвет фона и заголовков.  ваши 42строки кода http://take.ms/ySXCq превращаются в 30 просто на ровном месте, и код более удобным становится http://take.ms/pppKJ

в таких случаях нужно объединять похожие блоки и перебивать только отличающиеся стили. так же можно было каждому из этих 3-х блоков задать общий класс, скажем, .slon и от него задавать. либо воспользоваться селекторами атрибутов -  [class^=slon] подробнее здесь http://htmlbook.ru/samcss/selektory-atributov

5. http://take.ms/x46I5 это все тупо лишние свойтва которые ничего не делают в данном случае. у вас просто заливка сплошным цветом, вы можете хоть растягивать фон, хоть позиционировать, хоть еще что либо - ничего не поменяется!

6. для .two заданно - background-origin: initial; background-clip: initial; это вообще что за значения? initial - таких нету просто, эти записи ничего не делают, да и вообще зачем вам тут background-origin и background-clip? далее, используйте сокращенную запись http://take.ms/8z5av превращается в background: url("../img/slonbig.png") #292929 no-repeat fixed 0 0 / cover;

и не пишите свойства которые заданны по умолчанию, к примеру - background-repeat:repeat; это писать не надо, по дефолту и так стоит репит

7. http://take.ms/KAkg1 тут нужно не марджином центрировать, а задать text-align:center на .square и все будет отцентрировано. и это не очень хорошо вырезать картинку с отступами, надо резать реальные размеры http://take.ms/bsTMp

8. http://take.ms/eNrOD мне кажется что этот желтый бордер это не ховер, это фокус на инпут. так логичнее

думаю хватит) надеюсь дал дельные советы

[cyklop77]

 

извиняюсь, что встреваю, но вы не могли бы и мой лендинг так основательно разнести в пух и прах?

http://htmlforum.ru/index.php?showtopic=49768

Edited August 3, 2014 by cyklop77

[Z1gnet]

 

 

извиняюсь, что встреваю, но вы не могли бы и мой лендинг так основательно разнести в пух и прах?

http://htmlforum.ru/index.php?showtopic=49768

 

хорошо, щас гляну))) но сразу скажу, в целом у вас все очень даже хорошо. возможно мелкие штуки

[Brick]

Z1gnet, огромное человеческое, все по полочкам разложили. Это первая верстка, сейчас над второй работаю. Советы дельные, с завтрашнего дня начну править. Еще раз спасибо.

 

Большинство косяков в верстке из-за сжатых сроков и небольшой спешке. Буду учиться работать над качеством.

Edited August 4, 2014 by Brick

[Brick]

Все, сайт поправлен, переехал на основу. Всем спасибо, тема не актуальна...

[cyklop77]

куда переехал?..

[Brick]

cyklop77, не далеко, на одну директорию выше)