Прошу заценки

[Shift-Web]

Приветствую. Прошу критики и оценки.

Специфика сабжа:

Основное:

- блог

- в перспективе набор сервисов

- стандартная НЛ

Контент:

- большую часть пишу сам, изредка заимствую с других источников дабы посетитель мог получить максимум информации

- ссылками не барыжу

- рекламой не травлю

Под капотом:

- Друпал 6

- Сторонних интеграций нет

Вёрстка

- xHTML Transitional

- RDFa (1.1 + 1.0)

- местами валидно

- CSS 3

- jQuery

- Cufon

- Corner

- пиксель перфект (старался как можно перфектовее)

Кроссбраузерность

- IE 7 (некоторые опции отключены)

- IE 8 (неплохо вышло)

- IE 9 (отличные показатели на четырёх яйцах)

- Webkit (лучшие показатели по скорости и качеству рендеринга)

- Presto и Gecko (в целом всё сносно, Presto пока не тянет динамические трансформы - свалю на оперу)

Для синхронности с IE использовал PIE индивидуальным конектом в отношении CSS3. Всё таки некоторые вещи заставить работать на IE и Opera не получилось. В отношении юзабилити использованы некоторые нестандартные подходы.

Проект личный, графика своя, идея своя, вёрстка своя, кодинг свой. В общем хочу помидорку по всей строгости И да немного сыро ибо постепенно растём (прошу принять во внимание)

Проект Cybercoding.

Edited February 7, 2011 by Shift-Web

[swetlana]

Выглядит типично, но вполне симпатишно.

Читать достаточно удобно.

Только вторая строка заголовков статей прилипла к линии — выглядит как ошибка.

Сифон — а что хорошего? Чем не угодил обычный font-face?

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

Навигация, конечно, ужасна. Очень неочевидные неожиданные решения, и оригинальность оформления их не спасает.

Не понаслышке знаю, что решения эти технически интересны, но здесь они неуместны.

ну и… по мелочам придираться надо? Есть к чему.

[Great Rash]

Ура! Наконец хорошая работа со шрифтами! Мне нравитсо. Дизайн конечно обычный, зато читать приятно.

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

[Vlad]

Работа отличная! Но по мелочам множество замечаний.

- ссылка на главной странице на себя.

- надпись Cybercoding, в title киберкодинг, лучше бы одно что-то было.

- линия под заголовками постов плохо смотрится, когда текст две строки занимает.

- в самом низу, где страницы, курсор превращается в pointer на стрелке.

- Cufon, считаю, не нужен, не настолько экзотический шрифт используется.

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

- ссылка Закладки неочевидная по своему функционалу.

[Verder]

Ура! Наконец хорошая работа со шрифтами! Мне нравитсо. Дизайн конечно обычный, зато читать приятно.

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

Ты считаешь justify, тахому и увеличенный word spacing хорошей работой со шрифтом?

[Shift-Web]

Swetlana >>Только вторая строка заголовков статей прилипла к линии — выглядит как ошибка.

>>Сифон — а что хорошего? Чем не угодил обычный font-face?

>>Навигация, конечно, ужасна. Очень неочевидные неожиданные решения, и оригинальность оформления их не спасает.

Куфон хорош тем, что это не флэш. Рендерит всегда одинаково, не зависит от особенностей ос и движка. Минусы - много весит и насилует ресурсы. В перспективе откажусь в пользу Сифр. Фонт фэйс прост и хорош но смысла в нём нет т.к. в лоу-бразуах всё равно будет говно-шрифт. Для навигации есть карта сайта. Из расчёта, что всё сполшняком читать не будут у каждой статьи справа блок для перехода на смежные темы. Ещё есть достаточно удобная карта сайта и перелинковка. Буду думать.

Great Rash >> Ура! Наконец хорошая работа со шрифтами! Мне нравитсо. Дизайн конечно обычный, зато читать приятно.

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

Принято!

Vlad >> ссылка на главной странице на себя.

>> надпись Cybercoding, в title киберкодинг, лучше бы одно что-то было.

>> линия под заголовками постов плохо смотрится, когда текст две строки занимает.

>> Cufon, считаю, не нужен, не настолько экзотический шрифт используется.

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

>> ссылка Закладки неочевидная по своему функционалу.

Ссылка на закладки очень удобна при перемещении по комментариям. Заголовок взят из функциональности релаитвного отношения ссылки rel="bookmark"(трудно было придумать что-то оригинальнее). С заголовками беда. Там иногда много текста, и он откровенно не влазит. Буду думать. Куфон отправится в топку, как только будет найдено адекватное решение. С навигацией думаю ))))

Verder >> Ты считаешь justify, тахому и увеличенный word spacing хорошей работой со шрифтом?

Есть другие работы, где и капитализация и смещение абзаца используется, а также различные типографские приёмы. Здесь мне кажется не уместно. У этих примочек есть очевидные баги(выделение)и очевидный нарост CSS.

Спасибо!

p.s.: Унылость внешнего вида будут пилиться в последнюю очередь Трудно одновременно программировать, верстать, писать ещё и дизайнить Выделю для дизайна отдельно времени и сделаю что-то интересное.

Edited February 7, 2011 by Shift-Web

[Great Rash]

Ты считаешь justify, тахому и увеличенный word spacing хорошей работой со шрифтом?

Я считаю текст, который приятно читать, хорошей работой над шрифтом

Заголовки хорошо выделены, ссылки в тексте видно, а что еще надо... Ну да если придираться, то можно увидеть и выравнивание по ширине, и не подчеркнутые ссылки, и то, что переменные в тексте желательно выделять моноширинным текстом, и то, что буллеты посередине текста смотрятся фигово, и то, что line-height в списках слишком большой... Но тут хоть видно, что работа над текстом была, а не сделано от балды как на 90% сайтов.

[swetlana]

Ок, ну тогда я тоже по мелочам пройдусь.

Ссылка «подробнее». Каждый раз, когда вижу такую, вспоминаю мнение самизнаетекого на этот счёт. И в общем-то может быть он и прав на этот счёт.

Но это ладно. Действительно неудачно её размещение. Она находится примерно посередине между двумя статьями. А за счёт того, что последняя строка часто не доходит до конца, то и вовсе создаётся ощущение, как будто ссылка «подробнее» ближе к следующей статье. Неужели к ней она и относится? Неожиданно. И сбивает с толку.

А оформление этой ссылки двумя картинками не выдерживает никакой критки. Во-первых, это всё делается средствами css. Во-вторых, если уж картинками, то можно обойтись одной. В третьих, тут вообще эти рамка с фоном не нужны. Пусть будет не настораживающая кнопка, а привычная обычная текстовая ссылка.

Куфон. Ну ведь громоздкое же решение. И ничуть не оправданное.

font-face тоже не назвать образцом лёгкости. Но по крайней мере нет таких чудачеств в коде. Загрузился шрифт — кажем, как будто так и должно быть. Нет — кажем обычный шрифт по умолчанию.

Форма поиска. Зачем над полем ввода cursor: pointer? Подсознательно в этом ищется некий смысл. Но его нет. Чувствуешь себя обманутым.

А где кнопка? На вид «найти» — это какая-то левая надпись, как на заборе.

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

Ещё продолжать в таком духе к мелочам придираться?

[Shift-Web]

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

Ещё продолжать в таком духе к мелочам придираться?

Если Вас не затруднит, буду рад

[ВовчиГ]

Текст прилип к левому краю, нехорошо...

Надо либо маргинами, либо паддингом...

[Great Rash]

Shift-Web, предлагаю разнообразить тексты тегами. Применяйте по назначению всякие <abbr>, <code>, <dfn>, <var>.

А то смотрю статьи вроде по семантике, а из семантики один только <strong>...

[ZI DAN]

В общем нормально, но:

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

- Горизонтальная полоса разделяет длинные заголовки, хотя по смыслу они не разделяются (мешает восприятию).

- Я, вообще, не знаю - кто придумал justify. Не видел ни одной работы, где оно было бы уместно (я не только про сайты). Выравнивание по левому краю всегда самое читабельное.

- Выпендрёжное тормознутое меню сайт совсем не украшает.

- Текстуры в шапке смотрятся размытыми.

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

Edited February 7, 2011 by ZI DAN

[Great Rash]

Я, вообще, не знаю - кто придумал justify. Не видел ни одной работы, где оно было бы уместно (я не только про сайты).

Ну книги, газеты...

[swetlana]

…я не сторонник принимать на веру те вещи про юзабилити, которые пишут типа умные дядьки…

я тоже.

Но вроде понятно, где я передаю общепринятое мнение, высказанное «умным дядькой», не присоединяясь к нему, а где излагаю от себя, согласившись с этим мнением?

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

Ну книги, газеты...

в последнее время в некоторых газетах text-align: left;

ну нафикк. Мусорно выглядит. Пусть в газетах лучше justify будет. Глазам проще.

[deadrash]

Пожалуй опишу что не понравилось, что понравилось писать лень =)))

Навигация сложная и не очевидная, нужно дублировать.

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

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

Кроме того из-за очень слабой контрастности шрифта при чтении устают глаза. Серый шрифт на сером фоне? Глаза сильно напрягаются.

[ZI DAN]

Пусть в газетах лучше justify будет. Глазам проще.

В газетах оно не так заметно. Там мелкий шрифт и короткие слова (обычно).

Насчёт "глазам проще" завит от глаз. Мои глаза, заметив разные по ширине пробелы, сразу начинают болеть.

Edited February 7, 2011 by ZI DAN

[Vlad]

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

[Shift-Web]

Итого резюмируем:

* Куфон - обоссать и поджечь, на замену фон фэйс либо Сифр.

* Заголовки - шрифт меньше, шрифт проще.

* Текст - поиграться с цветом и отступами. Списки - допилить внешний вид

* Отказаться от скруглений в некоторых элементах.

* Убить тестовую прозрачность на "тормозном меню", чтоб не тормозило

* Сделать общепринятые визуальные эффекты на инпуты type="text"

* Выкинуть панель с закладками - ибо всё равно от них толку ноль, да и не пользуются ими. (сами ссылки с закладок эффекта не дают и есть меню браузера, ридеры и т.д.)

* Сделать акцент на разметку контента в сторону семантически разнообразных элементов

* Продумать навигацию более доступной и практичной

* Выпилить нетрадиционно по отношению к другим ссылкам оформление "Подробнее"

* Сделать адекватные дизайн - ноте пимпы твита, фэйса и субскрайба.

* Заменить активный элемент подвального спойлера адекватной картинкой

* Прочее по мелочи

final >>> допилить фон шапки, разнообразить цветом, синхронизировать с заголовками и ссылками, графику конвертить в data base 64.

кажется всего то нифига ))) Вообще дизайн больше на программный упор, можно сказать он синтетический, если сравнивать с подходом изображение VS css&js(мне такой стиль больше нравится уж не знаю почему).

p.s.: Justify останется, нужно лишь некоторые "узкие" места кастомно отключить - не проблема.

Edited February 7, 2011 by Shift-Web

[swetlana]

IE6 игнорируем?

ни в коем случае не хочу это записать в недостатки!

[ShumNo]

И я покритикую:

Курсор поинт высвечивается в ненужных местах (инпуты) и лично меня сбивает с толку

- в окошке ввода комментария

- в строке поиска

- whois

Кнопки к "буедитору" оформлены страшно + большинство ненужны для гостей типа

- <!--break-->

- <h3></h3>

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

Если автор блога один, то наверное писать ник в каждой новости не стоит

[deadrash]

Курсор поинт высвечивается в ненужных местах (инпуты) и лично меня сбивает с толку

Аааа... блин, я ведь именно из-за этого решил написать сообщение. Сообщение написал, а про поинтер забыл, сказывается усталость.

И да, шрифт конского размера.

[Veseloff]

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

[Shift-Web]

Veseloff, принято, покручу z-index.

[Shift-Web]

* Куфон - обоссать и поджечь, на замену фон фэйс либо Сифр.

Куфон пока остался. Заменить нечем(шрифт очень нравится) ...

* Заголовки - шрифт меньше, шрифт проще.

fixed размер и оверфлоу(на будущее писать короткие заголовки), цвет на завёрнутой ссылке и маленький маркер для выражения

* Текст - поиграться с цветом и отступами. Списки - допилить внешний вид

цвет более глубокий 2 слабых съезда на оттенки для контента и каментов, списки стандартными скуэйрами, чутка помучал вид текста.

* Отказаться от скруглений в некоторых элементах.

Сделано, некоторые раунды убиты.

* Убить тестовую прозрачность на "тормозном меню", чтоб не тормозило

Тормоза остались только в ИЕ. Остальные тормоза не были обнаружены на win системах(есть откровенные пробуксовки на маке и никсах)

* Сделать общепринятые визуальные эффекты на инпуты type="text"

Сделано.

* Выкинуть панель с закладками - ибо всё равно от них толку ноль, да и не пользуются ими. (сами ссылки с закладок эффекта не дают и есть меню браузера, ридеры и т.д.)

Сделано

* Сделать акцент на разметку контента в сторону семантически разнообразных элементов

В новых публикациях(оформление запилено)

* Продумать навигацию более доступной и практичной

В процессе

* Выпилить нетрадиционно по отношению к другим ссылкам оформление "Подробнее"

Выпилено

* Сделать адекватные дизайн - ноте пимпы твита, фэйса и субскрайба.

Сделано

* Заменить активный элемент подвального спойлера адекватной картинкой

Изменён один символ, добавлены тайтлы на активные элементы

* Прочее по мелочи

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

Fixed

Кнопки к "буедитору" оформлены страшно + большинство ненужны для гостей типа

- <!--break-->

- <h3></h3>

Fixed

IE6 игнорируем?

А то

Вот эта плавающая штука слева,

Была плавающая штука слева ...

А где кнопка? На вид «найти» — это какая-то левая надпись, как на заборе.

Теперь не левая, но кнопкой поиск не будет(думаю так нормально).

=================================================================

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

Вылезло пару новых багов в IE7, но это уже мелочи, на которые не обращаю особого внимания.

Шапка ... Таки да, дизигнер из меня никудышный, но шапку я перерисовал ;D Да знаю, чмошно. Буду раз если пнёте что скорректировать На заголовки блоков сделан фон, чтоб было чутка интереснее.

=================================================================

Спасибо за критику!

Edited February 8, 2011 by Shift-Web

[Vlad]

Внизу, где ссылки на другие страницы курсор на треугольнике с линией превращается в pointer. Класс scroll_knob. Это не ссылка и функционала у нее нет. Короче, убрать cursor.

При наведении на значок Твиттера появляется небольшая горизонтальная полоска. Смотрел в Fx3.6