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

[binomer]

Всем салют! Делаю первые шаги в верстке, поэтому прошу оценить: Тыц!

Сверстал макет фиксированный ширины 1600 пикселей. Укажите, пожалуйста, все косяки.

Пока верстал, появилось несколько вопросов:

1. Если background в psd макете представляет собой что-то сложное (много слоев), то их нужно склеить и уже как

одну картинку использовать для сайта?

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

3. В макете один из заголовков сделан с использованием тени и градиента. Можно ли как-то решать это при помощи CSS или не стоит заморачиваться и вставлять такие объекты картинкой?

4. Насколько важна верстка пиксель в пиксель?

Добавлено через 10 минут

Совсем забыл, вот ссылка на исходный макет здесь

[Bassline]

А почему 1600px, а не 2000 или 5000?

[binomer]

А почему 1600px, а не 2000 или 5000?

Макет такой был

Edited October 14, 2013 by binomer

[Bassline]

А почему 1600px, а не 2000 или 5000?

Макет такой был

)))

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

Сами подумайте, как бы Вы узнали как выглядит пустое пространство по краям сайта на больших мониторах, если бы дизайнер обрезал картинку по тексту шириной, например, в 1000px? Или, при ширине макета в 1000px, когда всю область занимет текст, можно подумать, что сайт резиновый и незивисимо от размера экрана текст всегда примыкает к краям.

Edited October 14, 2013 by Bassline

[binomer]

[quote

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

Сами подумайте, как бы Вы узнали как выглядит пустое пространство по краям сайта на больших мониторах, если бы дизайнер обрезал картинку по тексту шириной, например, в 1000px? Или, при ширине макета в 1000px, когда всю область занимет текст, можно подумать, что сайт резиновый и незивисимо от размера экрана текст всегда примыкает к краям.

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

А как тогда ее уменьшить в размерах, если у пользователя небольшое разрешение и одновременно оставить большой на больших разрешениях? Я понимаю про repeat-x, repeat-y, но если фон не везде одинаковый?

[Bassline]

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

А на данный момент, например, на моем ноутбуке с разрешением 1366х768 видно только половину сайта, приходится пользоваться горизонтальной прокруткой. Разве так лучше, чем я описал выше?

[binomer]

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

А на данный момент, например, на моем ноутбуке с разрешением 1366х768 видно только половину сайта, приходится пользоваться горизонтальной прокруткой. Разве так лучше, чем я описал выше?

Хм, я просто считал, что горизонтальная полоса прокрутки - плохо

[advokatua]

Послендий хром и фаер

Полно визуальных косяков

1) шрифт у лого нужен без засечек + градиент на него, а потому лучше просто картинкой вставлять + должен быть ссылкой

2) картинка слева от почты также без тени, и вырезать надо было походу в png24, а не png8.

3) В разделе "Май ворк" первая картинка, подпись под ней, вторая строчка НЕ белого цвета. Причем первая строчка данной подписи по идее также должна быть ссылкой, а не только картинка. Рамка у картинки также не совпадает.

4) Отступы в "сервис, твитс, контактс" не соблюдены. На макете все иначе

5) Футер - отступ не такой как на макете.

На HTML, CSS при таком визуальном несовпадении смотреть влом.

Ну даже если допустить:

1) Менюшку лучше строить списком. Потом будет легче ею управлять.

<div id="top-menu">
<a href="#">work</a>
<a href="#">services</a>
<a href="#">contact me</a>
</div>

Такие заклинания в CSS не приветствуются:

#top-menu {
margin-left: 720px;
}

2) Вот почему лого надо делать картинкой

#designer h1{
font: 30px Nevis;
color: #cfcdb4;
text-transform: uppercase;
margin-bottom: 7px;
}

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

В CSS, после селектора нигде нет отступа.

Из плюсов - классы и id везде через дефис. )

3. В макете один из заголовков сделан с использованием тени и градиента. Можно ли как-то решать это при помощи CSS или не стоит заморачиваться и вставлять такие объекты картинкой?

Картинка всяко будет правильнее отображаться. Зачем колдовать там где не нужно? )

4. Насколько важна верстка пиксель в пиксель?

Это уже походу от поставленной задачи зависит. Одно дело - разная ширина у колонок, другое дело когда нет теней, цвет в половине случаев отличается и отступы везде разные.

Edited October 16, 2013 by advokatua

[binomer]

Такие заклинания в CSS не приветствуются:

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

С изображениями ясно, спасибо. По пункту 2). Там в макете строчка не белого цвета. Что меню надо списком - затупил, потому что второе меню сделано нормально списком

В CSS, после селектора нигде нет отступа.

Не понял, что это означает.

В любом случае спасибо за развернутый отзыв.

Edited October 14, 2013 by binomer

[advokatua]

Почему не приветствуются, можно поподробнее?

Добавь пару пунктов меню, даже одного хватит и увидишь.

Флоатом в право можно решить такой вопрос, и после обязательно очистить поток.

Почитай о float подробнее, и далее гугли по слову .clearfix.

По пункту 2). Там в макете строчка не белого цвета. Что меню надо списком - затупил, потому что второе меню сделано нормально списком

Открыл макет, ничего не менял:

Не понял, что это означает.

Между h1 и фигурной скобкой должен быть пробел. Вот так:

#designer h1 {
   font: 30px Nevis;
   color: #cfcdb4;
   text-transform: uppercase;
   margin-bottom: 7px;
}

Это касается оформления и читабельности кода, чтобы если кто-то будет поддерживать твой css в будущем не выбросился с окна

Edited October 14, 2013 by advokatua

[Struggle]

Это касается оформления и читабельности кода, чтобы если кто-то будет поддерживать твой css в будущем не выбросился с окна

Норм у него всё, кто хочет так и пишет, надо будет - расставят отступы. Это не грубая ошибка.

Edited October 15, 2013 by Struggle

[advokatua]

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

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