Jump to content

Нужна строгая критика верстки и дизайна


Frodo
 Share

Recommended Posts

Добрый день, я недавно начал изучать HTML/CSS, только сегодня я сверстал свой первый нормальный макет, получилось конечно так себе, но хочется знать, где я допустил ошибки, чтобы не допускать их в следующий раз. 

Просьба не обращать внимание на форму поиска и подписки, так как я планировал адаптировать шаблон под какой-нибудь движок, а там своя есть форма поиска и подписки. 

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

Извините, но сайта у меня своего нет, поэтому если я нарушаю правила сайта, то закройте тему.

 

http://codepen.io/Frodo/pen/WQaXNq- сам шаблон

 

http://rghost.ru/7tXFnFdSv- здесь PSD и шаблон

Link to comment
Share on other sites

В подвале контент не влазит в 150px, убери высоту вообще и очисти поток или же увеличь высоту.

Много лишних тегов, например зачем ссылку на read more засунуть в div? Да и криво смотрится, исправь line-height.

Link to comment
Share on other sites

sidebar зачем relative? Меня лично начинает подташнивать когда я вижу отрицательное значение.. Меню не понимает свою высоту, "read more" в спан можно засунуть и задать уже стили.. Смотри на другие проекты используй инспектор элементов(правой кнопкой мыши > исследовать элемент) и развивайся.

Link to comment
Share on other sites

sidebar зачем relative? Меня лично начинает подташнивать когда я вижу отрицательное значение..

У сайдбара правильное позиционирование и отрицательный маргин там тоже по делу. Это фокус верстки чтобы левая колонка шла в коде после контента несмотря на то, что визуально она левее контента. Отрицательные значения отступов нормальное явление там где оно уместно, как в данном случае.

 

У сайдбара другие косяки там

Link to comment
Share on other sites

У сайдбара правильное позиционирование и отрицательный маргин там тоже по делу. Это фокус верстки чтобы левая колонка шла в коде после контента несмотря на то, что визуально она левее контента. Отрицательные значения отступов нормальное явление там где оно уместно, как в данном случае. У сайдбара другие косяки там

Но можно же обойтись без отрицательных значений, это не старо как мир?

Link to comment
Share on other sites

 

У сайдбара правильное позиционирование и отрицательный маргин там тоже по делу. Это фокус верстки чтобы левая колонка шла в коде после контента несмотря на то, что визуально она левее контента. Отрицательные значения отступов нормальное явление там где оно уместно, как в данном случае. У сайдбара другие косяки там

Но можно же обойтись без отрицательных значений, это не старо как мир?

 

Нет, я думаю не старо. Возможно, задача, когда требуется контент кинуть в коде выше левой колонки имеет более красивое решение. Мне оно не известно, может быть вы его знаете?

Напишите, будет любопытно.

Link to comment
Share on other sites

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

Я не понимаю почему нельзя по порядку выставить .menu ul>(li>a)*5 .content lorem(100500) задать ширину и float:left ?

Link to comment
Share on other sites

В этом случае левая колонка же будет выше в коде, чем справа от нее контент.

Если я ошибаюсь, приведите пример в песочнице

Именно так, но вопрос заключается в следующем зачем левую колонку опускать ниже контента?

 

html:

.леваяколонка

.справаконтент

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

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

 

Так что чем выше реальный полезный контент, как визуально, так и в разметке, тем лучше. Без фанатизма :)

Link to comment
Share on other sites

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

 

Так что чем выше реальный полезный контент, как визуально, так и в разметке, тем лучше. Без фанатизма :)

Понял, теперь буду склоняться к меню с правой стороны, а не с левой.

Link to comment
Share on other sites

 

 

У сайдбара правильное позиционирование и отрицательный маргин там тоже по делу. Это фокус верстки чтобы левая колонка шла в коде после контента несмотря на то, что визуально она левее контента. Отрицательные значения отступов нормальное явление там где оно уместно, как в данном случае. У сайдбара другие косяки там

Но можно же обойтись без отрицательных значений, это не старо как мир?

 

Нет, я думаю не старо. Возможно, задача, когда требуется контент кинуть в коде выше левой колонки имеет более красивое решение. Мне оно не известно, может быть вы его знаете?

Напишите, будет любопытно.

 

А разве не подойдёт вариант Flexbox с order? Можно выставить же любой порядок плавающих блоков.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy