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

[Ota]

Всем доброго дня,

 

Хочу представить на ваш строгий суд свой первый сверстанный макет. Хотелось бы получить от вас критику и советы, что можно улучшить.

 

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

 

Проверил в Хроме, ФФ и Опере. Когда начал проверять в ИЭ, все развалилось. Потратил целый день на гугл и узнал про хаки и всякое такое. В результате в ИЭ 9+ отображается нормально, только при больших разрешениях получается слишком большой отступ от правой колонки. Как это исправить так и не разобрался. В остальных браузерах такого нет.

 

Проверил код на валидность. В HTML ошибки только в форме поиска, потому что я поставил пустые значения в action, а также я поставил тег <H1> на первую статью (в макете у нее заголовок больше чем у всех остальных статей). CSS изначально был валидным, но после хаков, есть 4 ошибки.

 

Ну и собственно ссылка: http://1001.su/sample1/index.html

 

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

 

Заранее всем спасибо!

Edited March 5, 2016 by Ota

[Морская улиточка]

Здравствуйте, я особо долго не всматривался но парочку замечаний (которые сразу заметил) всё же озвучу...

 

1. У поля outline убран, у кнопки нет - не аккуратненько как-то;

2. Лично я, всегда кнопкам делаю cursor: pointer, по моему это логично;

3. У button отсутствует type;

4. Валидатор ругается только на пустой action, а если его не указывать вообще то не ругается.

 

Удачи Вам в Ваших начинаниях!

Edited March 5, 2016 by Морская улиточка

[WhatIsHTML]

Привет.

1. Логотип. Ширина картинки указана в самом теге. Я думаю, лучше это делать в css. Как-то так

.logo img{width:35px;}

2. Границы между пунктами меню сделаны картинками. Можно сделать так

https://jsfiddle.net/2aw8h9xd/1/

3. Еще заметил, что фон меню сделан картинкой. Зачем? Я так понимаю из-за нежелания (незнания) делать градиент. Если делаем картинкой, то получается еще один лишний запрос. А если заказчик захочет поменять цвет на зеленый, то делать новую картинку?

[Spotlight]

Не используйте отдельный див no-wrap для обнуления float, почитайте про clearfix.

[Ota]

Здравствуйте, я особо долго не всматривался но парочку замечаний (которые сразу заметил) всё же озвучу...

 

1. У поля outline убран, у кнопки нет - не аккуратненько как-то;

2. Лично я, всегда кнопкам делаю cursor: pointer, по моему это логично;

3. У button отсутствует type;

4. Валидатор ругается только на пустой action, а если его не указывать вообще то не ругается.

 

Удачи Вам в Ваших начинаниях!

 

Спасибо большое за ваш коментарий. Полностью согласен со всеми пунктами, кроме второго. По моему это дело вкуса. В яндексе например сделано так как вы говорите, а в гугл нет. 

Привет.

1. Логотип. Ширина картинки указана в самом теге. Я думаю, лучше это делать в css. Как-то так

.logo img{width:35px;}

2. Границы между пунктами меню сделаны картинками. Можно сделать так

https://jsfiddle.net/2aw8h9xd/1/

3. Еще заметил, что фон меню сделан картинкой. Зачем? Я так понимаю из-за нежелания (незнания) делать градиент. Если делаем картинкой, то получается еще один лишний запрос. А если заказчик захочет поменять цвет на зеленый, то делать новую картинку?

 

Спасибо за подсказки и советы. Хотел бы уточнить для себя несколько моментов:

 

1. Хочу понять почему лучше указывать размер в CSS? Просто я еще многого не знаю и поставил ширину и высоту на все картинки в самих тегах, поскольку в книге, которую я прочитал по html и css говорилось, что надо делать именно так, поскольку браузеры быстрее отрисовывают.

 

2. Да, знаю, что можно сделать так как вы говорите. Просто в макете все эти границы чуть чуть различались между собой. Я не знал как это реализовать с помощью CSS. Поэтому хотел спросить: в реальной жизни заказчики просят, чтобы все было идеально как на макете или же можно делать с помощью CSS, без картинки, но чуть-чуть с отличием от макета?

 

3. Из за незнания как делать градиент. Да я нашел в интернете, что можно сделать градиент с помощью CSS. Но как я не пытался я не мог повторить как это сделано  в макете. Поэтому и сделал картинками. Как делать градиент, который в точности как в макете? Может есть какие-то инструменты? Или подбирается на глаз?

Не используйте отдельный див no-wrap для обнуления float, почитайте про clearfix.

 

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

 

Спасибо за наводку!

[WhatIsHTML]

 

Спасибо за подсказки и советы. Хотел бы уточнить для себя несколько моментов:

 

1. Хочу понять почему лучше указывать размер в CSS? Просто я еще многого не знаю и поставил ширину и высоту на все картинки в самих тегах, поскольку в книге, которую я прочитал по html и css говорилось, что надо делать именно так, поскольку браузеры быстрее отрисовывают.

 

2. Да, знаю, что можно сделать так как вы говорите. Просто в макете все эти границы чуть чуть различались между собой. Я не знал как это реализовать с помощью CSS. Поэтому хотел спросить: в реальной жизни заказчики просят, чтобы все было идеально как на макете или же можно делать с помощью CSS, без картинки, но чуть-чуть с отличием от макета?

 

3. Из за незнания как делать градиент. Да я нашел в интернете, что можно сделать градиент с помощью CSS. Но как я не пытался я не мог повторить как это сделано  в макете. Поэтому и сделал картинками. Как делать градиент, который в точности как в макете? Может есть какие-то инструменты? Или подбирается на глаз?

1. По поводу скорости не знал, но я все равно писал бы в css просто потому, что если картинки однотипные придется менять, то в css надо один раз поменять размер, вместо 10 раз в html. Но лучше смогут аргументировать более опытные.

2. Я разницы не заметил. Если разница сильно заметная (одна граница красная, вторая - зеленая, третья - синяя и т.д.), то есть псевдоэлемент :nth-child(). В нем можно задать порядочный номер эелемента. По поводу заказчиков. Я думаю, что все обсуждается и небольшие различия допустимы.

3. Я сам не знаю как делать 100% точно как на макете,сам подбирал на глаз. Хотя, если есть .psd-файл, то можно поискать в настройках градиента, границы наложения цветов - будет легче "угадать" градиент. Думаю, что небольшие различия заказчик не осудит.

[Ota]

Спасибо за разъяснения