Jump to content

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


Bassline
 Share

Recommended Posts

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

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

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

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

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

http://www.arteliko.ru

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

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

Edited by Bassline
Link to comment
Share on other sites

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

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

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

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

Edited by Bassline
Link to comment
Share on other sites

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

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

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

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

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

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

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

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

Удачи :)

Edited by hypnocolor
Link to comment
Share on other sites

А, ну и по поводу 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;
}

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

Link to comment
Share on other sites

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

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


<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, естественно, написано не читабельно. Но тут ждать чего-то большего без толку.

Link to comment
Share on other sites

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

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

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

А, ну и по поводу 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>

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

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

Link to comment
Share on other sites

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

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

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

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

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

Edited by hypnocolor
Link to comment
Share on other sites

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

<div>, <span>

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

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

Link to comment
Share on other sites

<div id="img_menu">

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

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

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

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

Link to comment
Share on other sites

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

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

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

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

Link to comment
Share on other sites

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

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

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

Edited by Bassline
Link to comment
Share on other sites

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

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


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

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

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

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

Edited by 121990
Link to comment
Share on other sites

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

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

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

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

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

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

  • Similar Content

    • By Memphis
      Доброго времени суток.
       
      Предлагаю оценить качество вёрстки и дизайна. 
      Выслушаю всё до мелочей, прошу отклика у компетентных в данной области людей. 
      Также давайте советы, что конкретно юзать по вёрстке . Вам со стороны видней.
       
      http://gadgetpro.besaba.com/
       
      Спасибо!
       
×
×
  • 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