Раскритикуйте мою верстку

[Bassline]

Это моя первая серьезная работа, до этого верстал только в песочнице.

Просьба оценить верстку, буду рад любым, даже самым незначительным замечаниям (стремлюсь к идеалу).

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

Правда сайт еще находится на стадии наполнения контента, так что некоторые страницы содержат мало информации.

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

http://www.arteliko.ru

p.s Очень интересует мнение о технической стороне верстки, как html, так и css.

Спасибо за внимание.

Edited June 5, 2013 by Bassline

[121990]

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

[hypnocolor]

Неужто сайт лёг под наплывом людей с форума? Так и не смог достучаться.

[Bassline]

Неужто сайт лёг под наплывом людей с форума? Так и не смог достучаться.

Нет, это все замечательный хостинг ht-systems.ru

Бывает иногда тупит.

Сейчас все заработало.

Edited June 5, 2013 by Bassline

[hypnocolor]

Вроде прошуршалось.

Вёрстка в принципе нормальная, для первого раза хорошо. Только картинки-категории мебели и пункты блока «Услуги» я бы тоже сверстал списком.

Могу ещё по дизайну замечаний поделать.

Как-то всё кучновато. Куча текста замыливает взгляд и отвлекает от самой сути — заказа мебели. Мало кто захочет читать простыню про австрийское оборудование или прочие вещи, которые, по сути, никак не помогут зашедшему на сайт человеку в заказе мебели. Сделайте красивую форму заказа и разместите её прямо на главной странице.

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

Ещё есть ссылка «ИНФОРМАЦИЯ». В отличие от остальных ссылок, идущих в одной визуальной линии с ней, эта не даёт явного представления о том, куда именно можно попасть и какую информацию можно получить, перейдя по ней. Вывод из этого — работайте над удобством восприятия навигации, да и вообще любой информации на сайте.

Ну и не злоупотребляйте прописными буквами. Пишите слова так, как они пишутся в обычном тексте, то есть первая буква — прописная, остальные — строчные. «Капсовость» текста обычно подходит для кричащих рекламных щитов, да и там далеко не всегда используется к месту.

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

Удачи

Edited June 5, 2013 by hypnocolor

[hypnocolor]

А, ну и по поводу CSS могу очень важный момент выделить: пишите каждый селектор и его свойства на новых строках. То есть, к примеру, этот кусок стилей:

#header, #section, #footer, #img_menu {
min-width:1000px; max-width:1300px; margin:0 auto; overflow:hidden;
}

должен превратиться в такой:

#header,
#section,
#footer,
#img_menu {
	  min-width: 1000px;
	  max-width:1300px;
	  margin: 0 auto;
	  overflow: hidden;
}

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

[klierik]

<!-- Шапка -->

Хорошо бы верстать без комментариев. а елси с ними так использовать англоязычные термины

    <div class="nav left">
        <a href="http://www.arteliko.ru/">ГЛАВНАЯ</a>
        <a href="gallery.php">ГАЛЕРЕЯ</a>
        <a href="about.php">О КОМПАНИИ</a>
    </div>

навигация -- это список. а списки делаются списками.

<div id="img_menu">

вместо #id следует использовать .class name.

Взять за правило никогда не использовать #id для привязки стилей.

Раздел "Услуги" больше похож на перечени услуг -- собственно это список услуг. этот момент -- скорее рекомендация, ибо мне не особо видны тут Абзацы.

    <p>www.arteliko.ru</p>
    <p>© Артелико - мебель на заказ</p>
    <p>2010 - 2013</p>

это тоже нельзя назват Абзацами.

<script type="text/javascript" src="js/lytebox.js"></script>

так же можно положить перед закрывающим </body>

Форматирование CSS, естественно, написано не читабельно. Но тут ждать чего-то большего без толку.

[Bassline]

Как-то всё кучновато. Куча текста замыливает взгляд и отвлекает от самой сути — заказа мебели. Мало кто захочет читать простыню про австрийское оборудование или прочие вещи, которые, по сути, никак не помогут зашедшему на сайт человеку в заказе мебели.

Я тоже об этом думал. Но я ведь еще пытаюсь совместить обязанности и оптимизатора:-) Ведь отсутствие текста затруднит продвижение сайта.

Хватаюсь за все подряд, все так интересно.

А, ну и по поводу CSS могу очень важный момент выделить: пишите каждый селектор и его свойства на новых строках. То есть, к примеру, этот кусок стилей:

#header, #section, #footer, #img_menu {
min-width:1000px; max-width:1300px; margin:0 auto; overflow:hidden;
}

должен превратиться в такой:

#header,
#section,
#footer,
#img_menu {
	 min-width: 1000px;
	 max-width:1300px;
	 margin: 0 auto;
	 overflow: hidden;
}

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

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

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

Форматирование CSS, естественно, написано не читабельно. Но тут ждать чего-то большего без толку.

Не совсем понял, что вы имели ввиду.

<p>www.arteliko.ru</p>
<p>© Артелико - мебель на заказ</p>
<p>2010 - 2013</p>

это тоже нельзя назват Абзацами.

А какими тэгами лучше пользоваться в таких случаях?

[hypnocolor]

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

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

Форматирование CSS, естественно, написано не читабельно. Но тут ждать чего-то большего без толку.

Не совсем понял, что вы имели ввиду.

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

Edited June 5, 2013 by hypnocolor

[klierik]

А какими тэгами лучше пользоваться в таких случаях?

<div>, <span>

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

совершенно верно.

[Bassline]

<div id="img_menu">

вместо #id следует использовать .class name.

Взять за правило никогда не использовать #id для привязки стилей.

Первоначально эта верстка не содержала ни одного id и всего три класса (для шапки, контента и подвала). Все стили задавал с помощью прямых потомков >, родственников и соседей +. Но спустя неделю взглянул на код в css и сам ничего не понял, то еще извращение. Затем я ввел больше классов. А после где-то прочитал, что id нужно обязательно использовать для выделения наиболее значимых частей сайта, таких как шапка, меню, контент и т.д.

Вот где правда?

[klierik]

Вот где правда?

там где сказанно для чего был придуман ID и для чего Class name

[Sly]

Хорошо бы верстать без комментариев. а елси с ними так использовать англоязычные термины

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

Взять за правило никогда не использовать #id для привязки стилей.

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

[Bassline]

Хорошо бы верстать без комментариев. а елси с ними так использовать англоязычные термины

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

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

Edited June 5, 2013 by Bassline

[121990]

То, что мешает в разработке, вряд ли можно назвать целесообразным.

Мешает если только писать в одно строку много классов. Тогда не совпадают строки в фаербаге и ему подобным. Если писать так -

.wrapper {
margin: 0 auto; padding-bottom: 100px;
      }
.header {
width: 100%; height: 50px;
	 }

ничего страшного. Это дела вкуса. Я например уже не переношу эти столбики, приелось.

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

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

Edited June 5, 2013 by 121990

[klierik]

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

если научится писать форматированный код и именовать классы человеко-понятным языком то комментарии не требуются вообще. об этом, кстати, Макеев рассказывал на одном евенте в Киеве.

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

#id будет отличным вариантом когда сервер генерирует какой-то набор данных и надо иметь возможность обратится к каждому вхождения средствами JS.

Вот тут оно себя оправдывает как нельзя кстати.

[121990]

именовать классы человеко-понятным

главное не транслитом

[klierik]

главное не транслитом

за такое -- Линчевание.

на днях увидел в проекте "<div class='productsblock'></>" -- сразу было рассказано в тим чате что я про это думаю.

[Sly]

на днях увидел в проекте "

" -- сразу было рассказано в тим чате что я про это думаю.

увы, я такое вижу часто даже у опытных верстальщиков

[klierik]

увы, я такое вижу часто даже у опытных верстальщиков

искренне сочувствую.

[Struggle]

Наверное и без меня тут написали но всё же скажу, подвал нужно как то "отделить" или "выделить", например захреначить хотя бы линию черного цвета