Верстка + юзабилити

[maddogrts]

Знакомая попросила сверстать для нее сайт + проработать удобство пользования +SEO.

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

Сверстал 4 страницы.

1024 минимальное, тестил везде кроме 7 го ие, но это я поправлю.

В верстке использованы интересные приемы.

Передвигания текста, first-letter ...

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

Пока что без версии для печати и смартов. Но это не так долго

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

http://maddog-rts9.narod.ru/

http://maddog-rts9.narod.ru/index1.html

Эти для окошка в 500px

http://maddog-rts9.narod.ru/index2.html

http://maddog-rts9.narod.ru/index3.html

[Иван Шумов]

по коду замечаний высказать не могу а вот дизайн да - так себе....

[polecat]

1.

<h2 id="telephone">+7 (812) 702 18 15</h2>

--

В тег

положить. Будет верно семантически.

2.

<ul id="coreNavigation">
 <li><a href="#"><span class="number">1</span>Выбрать конструкцию, узнать КАК грамотно установить <img class="button" src="img/choose.gif" alt="Выбрать конструкцию" /></a></li>
 <li><a href="#"><span class="number">2</span>Рассчитать заказ и уточнить скидки <img class="button" src="img/count.gif" alt="Рассчитать заказ" /></a></li>
 <li><a href="#"><span class="number">3</span>Узнать интересующие детали, вызвать замерщика <img class="button" src="img/tel.gif" alt="Телефон для вызова замерщика" /></a></li>
 <li class="banners"><a href="#"><FONT size=1>[AD]</FONT><AD- t="Наши партнеры" /><FONT size=1>[AD]</FONT><AD- t="Наши партнеры" /></a></li>
 </ul>

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

• , а в

1. . И 1.2.3, если получится, желательно выставить маркерами, которые у
2. вложенных в
   1. по умолчанию циферьками идут.
      
   3.Ну и кодировку почему-то не указал.. Не знаю, насколько это обязательно.
   А так ничего(бегло одну страничку смотрел). Понравился код -- знакомая пущай на пироги зовет)
   П.С. Саму страницу не смотрел, только код.

[Dimitry Wolotko]

1.

<h2 id="telephone">+7 (812) 702 18 15</h2>

--

В тег

положить. Будет верно семантически.

В данном случае - не так и принципиально.

[maddogrts]

В тег

положить. Будет верно семантически.

Сидел как раз вспоминал какой тег для телефона используется, но не адрес, есть какой то микроформат, но не смог вспомнить, как найду скажу.

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

• , а в

1. . И 1.2.3, если получится, желательно выставить маркерами, которые у
2. вложенных в
   1. по умолчанию циферьками идут.
      Да вы правы

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

   См

   мету сами поставят (из за этого может выдавать ошибку)

   Кстати использовано передвигание текста, в телефону использовано метод first-letter для задания двух фонов (фон рисунка и рисунок телефона).

[maddogrts]

Добавил принт версию, и версию для карманных компьютеров.

[@ndrey]

По внешнему виду:

1. в опере (9.27) при уменьшении размеров окна текст выходит из-за серого блока

По коду:

1. код избыточен, не валиден (http://validator.w3.org/check?uri=http%3A%...Inline&group=0) и не совсем семантичен. Я бы рекомендовал исходить из конструкции (но это сугубо мое мнение) + использовать body как контейнер :

<!-- шапка -->
<div id="head">
</div>
<!-- контент -->
<div id="content">
<!-- левая колонка -->
<div id="left_column">
</div>
<!-- правя колонка -->
<div id="left_column">
</div>
</div>
<!-- подвал -->
<div id="footer">
</div>

,

тогда бы не было таких конструкций:

<div id="track">
 <div id="main">
 <div id="content">

2. здесь можно (нужно) оптимизировать

<ul id="subNavigation">
 <li class="ex top">

Оценка - 3

[maddogrts]

подскажи как

"исходить из конструкции (но это сугубо мое мнение) + использовать body как контейнер"

учитывая абсолютное позиционирования и фоны ра стягивающиеся в разных частях. Что бы не было

"тогда бы не было таких конструкций:"

"здесь можно (нужно) оптимизировать"

что конкретно ?

Где не валидно? Написано же русским языком

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

[Dimitry Wolotko]

<ul id="subNavigation">
 <li class="ex top">

#subNavigation li {}

?

[maddogrts]

)))) first letter не будет работать в таком случае можешь проверить , работает если только на прямую эелементу типа

li:first-letter

либо с классом

li.ex: first-letter

[yopopt]

#subNavigation li:first-letter {
text-decoration : underline;
}
#subNavigation li a:first-letter {
text-decoration : underline;
}

В коде многовато недоработок.

[Dimitry Wolotko]

[maddogrts]

Издеваетесь да ?

#subNavigation li:first-letter {

text-decoration : underline;

}

не работает в ие 6

#subNavigation li a:first-letter {

text-decoration : underline;

}

не работает (ие ff)

[yopopt]

Работает. Дело только в приоритетах.

[maddogrts]

уел, все молчу понял что я самый настоящий ((((

[@ndrey]

подскажи как

я всегда верстаю, придерживаясь указанной конструкции: семантично и все понятно, позиционирование здесь не причем.

что конкретно ?

здесь видимо уже ответили

Где не валидно? Написано же русским языком

если имеется ввиду те ошибки, что выдает валидатор, то сорри

[Andrej]

Начать наверное нужно с этого:

—————————————————

This page is not Valid XHTML 1.0 Strict!

Result: Failed validation, 7 Errors

—————————————————

[Dimitry Wolotko]

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

[Вадим]

Экспертная оценка юзабилити сайта maddog-rts9.narod.ru

При просмотре ресурса без графики навигация не доступна, так как сливается с белым фоном. Можно изменить цвет ссылок или заполнить цветом блок. Использование логотипа под основной навигацией также не корректно, как вход в магазин с крыши, а указатель входа из подвала. Контактный телефон находится слишком близко к логотипу и по этой причине выглядит как визуальный шум. Золотое правило двух вершин ? сдвиньте влево/право. Использование принципа ?покупка в три шага? некорректна по причине ошибки дизайна. С помощью цветовых приемов необходимо разделить второстепенную информацию от основной. Быстрое решение ? использование CSS с прозрачным фоном для выделения блока при фокусе в сочетании с центрирование и увеличения отступов от границ.

Использование тонкого шрифта красного цвета в черных вкладках так же является ошибкой дизайнера. Не ясно куда попад?т пользователь при клике по ссылке ?Юридическим лицам?, если для ссылки ?Частным клиентам? объясняется, что будет показано на новой странице, то для первой нет. Ссылка ?читать дальше? так же изживший способ привлечения внимания. Сейчас такой метод уже не актуальный, тем более если мы говорим о SEO, то целесообразно использовать ссылку в виде ключевых слов внутри текстового блока. Подробнее об этом можно прочитать на тематических форумах. Также не понятна логика использования заголовков, особенно их повторение. Можно отметить, что для ПС (поисковой системы) заголовок является уникальным. Это значит, если если первый h1=услуги, то второго h1 не существует. Обычно такой метод использования заголовков приводит к полному выпаданию результатов из индекса с дальнейшим наложение фильтра в виде песочницы.

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

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

Спасибо, что дочитали до конца. Надеюсь мои слова помогут.

В данном посте не было задачи обидеть автора или как-то унизить достоинство третьих лиц.