Оцените мою верстку

[Shenia132]

Всем привет. Оцените пожалуйста мою верстку http://verstka-primer.esy.es/Zonya/. Первый раз использовал препроцессор less поэтому сильно не ругайтесь. Макет не такой уж сложный, но все равно хотелось бы чтобы люди опытные посмотрели и по критиковали. Скажите пожалуйста может есть какие то элементы которые было бы правильнее сверстать другим образом. Заранее спасибо !

[Vlad02]

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

[Shenia132]

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

ну а по самому коду нормально ?

[Vlad02]

код, как код, компилить less надо самому, а не отдавать это браузеру.

[Shenia132]

код, как код, компилить less надо самому, а не отдавать это браузеру.

я понял, спасибо.

[antonKar]

В Opera последней на кнопках сбилось центрирование текста

Картинки уменьшающиеся глючит, если мышкой водить по пустому пространству

5 макетов в "FEATURES OF THE PRODUCT" хотелось бы через 3D-трансформации крутить.

Не понял зачем triangle, псевдоэлементы же есть.

Edited March 22, 2015 by antonKar

[Z1gnet]

http://take.ms/Ha45S воу, что это за BR? кто ж так будет текст вбивать? в любую строку дописываю текст и все падает. надо ширину задать на .from-the-blog

Edited March 22, 2015 by Z1gnet

[raptor-dm]

При наведение уменьшаться картинки в блоки "Our Awesome Works" - это УЖАСНО со стороны дизайна. Мое личное мнение.
добавил текста в блок "Our Awesome Works" правые миниатюры сместились вниз.

 

для .post добавьте правило vertical-align: top;
без него если добавить побольше текста, остальные блоки вниз съежают.

Edited March 22, 2015 by raptor-dm

[Shenia132]

http://take.ms/Ha45S воу, что это за BR? кто ж так будет текст вбивать? в любую строку дописываю текст и все падает. надо ширину задать на .from-the-blog

то есть вместо br ширину блоку просто задать ?

При наведение уменьшаться картинки в блоки "Our Awesome Works" - это УЖАСНО со стороны дизайна. Мое личное мнение.

добавил текста в блок "Our Awesome Works" правые миниатюры сместились вниз.

 

для .post добавьте правило vertical-align: top;

без него если добавить побольше текста, остальные блоки вниз съежают.

я понял, спасибо

[forest_moss]

а мне лично нравится, как картинки уменьшаются при наведении мышкой. ну это мое имхо, конечно.

 

а вообще из больших и жирных минусов - что на маленьком экране возникает горизонтальная полоса прокрутки. у меня 1024х600, и некоторые элементы подстраиваются под мою ширину экрана, а некоторые вылезают. попробуй http://quirktools.com/screenfly/или что-нибудь в этом роде, посмотри, что получается. менять надо обязательно, ширина экрана как у меня - вовсе не редкость.

 

еще мелочи:

 - непонятно, зачем в каждой section внутри center;

 - валидатор и многие другие дружным хором выдадут, что элементу section обязательно необходим заголовок (немного странный принцип, конечно...)

 - что за дикий triangle и зачем он нужен???))) ну я понимаю, если он просто остался на случай, если ты передумаешь, как оформлять speech bubbles у happy customers, но откуда он на самой верхней полоске меню, рядом с логотипом?

 - если уж использовать осмысленную семантику, то можно было бы конечно и как-то помасштабнее ее поприменять, там, h1, h2, h3, article, все такое...

 

и да, фиксированное меню, либо хотя бы кнопка "наверх".

[Shenia132]

а мне лично нравится, как картинки уменьшаются при наведении мышкой. ну это мое имхо, конечно.

 

а вообще из больших и жирных минусов - что на маленьком экране возникает горизонтальная полоса прокрутки. у меня 1024х600, и некоторые элементы подстраиваются под мою ширину экрана, а некоторые вылезают. попробуй http://quirktools.com/screenfly/или что-нибудь в этом роде, посмотри, что получается. менять надо обязательно, ширина экрана как у меня - вовсе не редкость.

 

еще мелочи:

 - непонятно, зачем в каждой section внутри center;

 - валидатор и многие другие дружным хором выдадут, что элементу section обязательно необходим заголовок (немного странный принцип, конечно...)

 - что за дикий triangle и зачем он нужен???))) ну я понимаю, если он просто остался на случай, если ты передумаешь, как оформлять speech bubbles у happy customers, но откуда он на самой верхней полоске меню, рядом с логотипом?

 - если уж использовать осмысленную семантику, то можно было бы конечно и как-то помасштабнее ее поприменять, там, h1, h2, h3, article, все такое...

 

и да, фиксированное меню, либо хотя бы кнопка "наверх".

center это для того чтобы выровнять по центру содержимое

[swandev]

1. Нужно добавить padding слева и справа хотя бы 10px, т.к не красиво смотрится http://take.ms/cSYVa

2.  Этот блок не редактируемый http://take.ms/QTbTj

для каждого отзыва у вас задан margin, причем разный, у первого 400px, у 3го 380px.

Нужно все привести к одному виду и отступы задавать через :nth-of-type(2n) \ :nth-of-type(2n+1), чтобы можно было добавить новый отзыв и он без проблем подстроился к общему стилю.

 

3. Вот что будет если картинку добавить большего размера http://take.ms/7xasX

 

 

В целом у сайта очень много общих элементов (кнопки, заголовки, параграфы), а вы в каждом блоке повторяете стили.

Edited April 1, 2015 by swandev

[forest_moss]

... и отступы задавать через :nth-of-type(2n) \ :nth-of-type(2n+1)...

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

center это для того чтобы выровнять по центру содержимое

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

Я смотрю ты не особо активно участвуешь в собственной теме - если что не расстраивайся, сайт не ужасный, ты сам попросил критики) и дизайн очень приятный

[swandev]

 

... и отступы задавать через :nth-of-type(2n) \ :nth-of-type(2n+1)...

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

center это для того чтобы выровнять по центру содержимое

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

Я смотрю ты не особо активно участвуешь в собственной теме - если что не расстраивайся, сайт не ужасный, ты сам попросил критики) и дизайн очень приятный

 

http://htmlbook.ru/css/nth-of-type

[Shenia132]

 

... и отступы задавать через :nth-of-type(2n) \ :nth-of-type(2n+1)...

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

center это для того чтобы выровнять по центру содержимое

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

Я смотрю ты не особо активно участвуешь в собственной теме - если что не расстраивайся, сайт не ужасный, ты сам попросил критики) и дизайн очень приятный

 

спасибо за критику. Без нее никак )

 

... и отступы задавать через :nth-of-type(2n) \ :nth-of-type(2n+1)...

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

center это для того чтобы выровнять по центру содержимое

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

Я смотрю ты не особо активно участвуешь в собственной теме - если что не расстраивайся, сайт не ужасный, ты сам попросил критики) и дизайн очень приятный

 

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

Edited April 2, 2015 by Shenia132