kir

Спасибо за мнения. Убрал градиент.

В полосе меню однородный серый фон заменил на легкий градиент. Градиент очень легкий — почти незаметный. Интересны ваши мнения: как лучше смотрится, с градиентом или без? Также вариант с градиентом можно посмотреть на самом сайте: e-book-reader.ru.

Если не затруднит, на вскидку подскажите, пожалуйста, куда стоило бы интерактивности добавить? Вроде, и так всё, что только можно, интерактивное (в моем представлении). Или вы имели ввиду плавную анимацию?

А как же вы книжки читаете? Бумага ведь белая (хорошая бумага) и с черными буквами ; ) А вообще — да, это у вас "личная вкусовщина", большая часть людей предпочитает читать черное (темное) на белом (светлом).

Благодарствую за разъяснение. Исправил свой старый вариант на сайте на правильный. Учту в будущем. Сейчас же попытался добавить его в содержание и забил — пришлось бы еще несколько стилевых свойств менять (завязанных на последовательности тегов), тестировать... В общем, забил : )

Viper, спасибо за подробные рекомендации. Вы всё хорошо и правильно пишите. Мне даже неудобно перед вами за то, что из 6-ти пунктов я сделаю только пункт номер 2. Но, может, кто-нить другой будет следовать приведенным рекомендациям по верстке и ваше сообщение ему окажется очень полезным. В своем случае считаю это нецелесообразно — будет больше пользы, если я за время, которое понадобится для 1., 6., напишу и добавлю пару статей на сайт. Сделал. <strong> и <em> использую не только для графического выделения, но и для поисковиков, в связи с этим заменять их на <b> и <i> невыгодно для ранжирования. Видимо, надо Влада ругать: http://htmlbook.ru/html/time, — или его вариант все-таки тоже допустим? У меня <nav> используется для навигации между постами в категории (сейчас этой навигации не видно, т. к. в каждой категории только по одной статье). Все равно для содержания стоит <nav> добавить или два таких тега на одной странице не нужно делать? Еще раз спасибо за ссылки — знать полезно.

Спасибо, не знал.

Спасибо за указания, понял ваш подход. Согласен с тем, что перечисленные таблицы не нужны — я же так сверстал только потому, что мне так было проще. Но при профессиональной верстки так лучше не делать, понимаю. В лого таблицу использовал же для выравнивания по вертикали — но, не спорю, это можно и без таблицы сверстать. Галерея чужая. А вот "float: left и display: block" я задаю для нескольких идущих подряд ссылок-превьюшек, как например здесь для пяти ссылок-превьюшек. Тут что-то не правильно? "display: block" для того, чтобы ссылки стали блочными элементами, а "float: left" для того, чтобы эти ссылки-блоки строились подряд по горизонтали.

Так и задумано. На белом однородном фоном сам контент формирует визуальные границы блоков — как в печатных газетах и журналах. Также заметные границы блоков отвлекали бы внимание на себя от контента — в связи с этим решил отдельно границы не делать. Ориентировался на отступ на Youtube — там 40px, а я сделал 40px + 1px (на border). Насколько я разобрался, основное влияние верстки на SEO изложено главной SE в рекомендациях по SEO. У вас появилась возможность любить верстку еще больше ; ) Согласен. Может даже раздражать ситуация, когда жмешь на "КИР" с ожиданием получить сайт разработчика, а вместо этого открывается почтовый клиент в ОС / загружается почтовый сервис в браузере. Однако т. к. в будущем для "КИР" ожидается все-таки ссылка на сайт и т. к., вообще говоря, мало кто из пользователей туда будет тыкать, то решил пока в качестве временного варианта оставить как есть. Градации серого в дизайне — это стилизация под изображение, которое выдают монохромные E-Ink экраны. Делать же всё серым не рискнул : ) — элементы управления оставил в привычном для веба синем цвете; ну и картинки цветные. Я рассуждал так: главное для большинства пользователей — это красивые картинки; после картинок — текст. Следовательно, надо было сделать такой дизайн, который всё внимание будет направлять на картинки — дизайн с легкими оттенками серого подошел идеально, т. к. с ним цветные картинки получают максимум внимания. Ну и для чтения текста серый (ближе к черному) хорошо подходит. Контраст графических элементов (да и текста), действительно, меньше, чем на большинстве сайтов — это сознательный шаг: по-моему, текст с такой контрастностью читается хорошо + выглядит мягче.

Интересный взгляд. В целом, по-моему, дизайн получился достаточно оригинальным — в том смысле, что аналогов я не встречал. А вот по-отдельности дизайн некоторых элементов я, действительно, стащил у Хабра и Вики : ) (конечно, изменив их внешний вид под свой) Хабр: серые заголовки, внешний вид комментариев. Википедия: подчеркнутые горизонтальной чертой заголовки, содержание с ссылками. Это то место, где я пожертвовал удобством ради красивости и логичного единообразного поведения: есть три единообразные по внешнему виду и по поведению иконки-ссылки. Все три выглядят одинаково, значит, логично, чтобы и вели они себя все одинаково — были просто ссылками на другие страницы. Если бы одна из них не ссылалась на другую страницу, а выдвигала плашку с текстовым полем, то и выглядеть она должна была б иначе. Забавно, что никто внимание не обращает (может, и видит, но молчит) на мягкие переносы в сочетании с полной выключкой. А ведь это нечастое явление для веба. Я-то ожидал, что найдутся ярые противники (например, среди подростков, которые читают только в вебе и бумажных книг не успели застать) и твердые сторонники — и начнется holy war : ) Конечный код плохо отформатирован в связи с тем, что генерируется CMS из разных файлов и БД. Как вариант, можно смотреть код в браузере через инструменты разработчика — там из кода строится красивое хорошо отформатированное дерево. Если не затруднит, укажите, пожалуйста, где таблицы явно излишни. Я применял таблицы там, где ими было верстать удобнее, чем div-ами — может, и не прав был где-то.

Ага, в основном в код на сайтах смотрят другие верстальщики и, бывает, тестировщики. Это также как и с ПО: ну кто будет смотреть код OpenOffice-а или другой какой программы? — только программисты (здесь это обобщающее слово, обозначающее различных специалистов по разработке ПО). А с тем, что код смотрят еще и тоже согласен. Так их, по-моему, мой код более-менее удовлетворяет: Верстал с учетом рекомендаций Google по SEO (на мое удивление Google проиндексировал сайт в течение суток после открытия для поисковиков — хотя, может быть, SEO-верстка на это и не повлияла). Safari Reader парсит код и нечто читаемое выдает. Приятно видеть такую оценку. Рад, что вы считаете, что у сайта есть потенциал — постараюсь не забрасывать его, развивать. Точно подмечено. Для этого сайта отсутствие такой черты в дизайне (помогать и привлекать) не особо критично — дизайн не мешает и хорошо: пользователь спокойно может почитать приглянувшиеся ему статейки; а вот для какого-нибудь промо-сайта она, конечно, уже обязательна. Буду учиться. Дизайн мне интересен.

Спасибо всем комментаторам за время и внимание, затрачиваемые на написание отзывов. Про размер шрифта Хорошо понимаю советы увеличить размер с 13px до 14px. Сам я, будучи слегка близоруким, временами на разных сайтах изменяю масштаб так, чтобы текст покрупнее становился. Однако, для своего сайта 13px выбрал осознанно, исходя из предпочтений и привычек большинства пользователей, которые имеют хорошее зрение и привыкли к мелкому шрифту. О предпочтениях и привычках судил по дефолтным шрифтам (без засечек) в следующих местах: Wikipedia: 13px; Livejournal: 13px; ВКонтакте: 11px; Kinopoisk: 12px; Facebook: 13px; ОС Windows 7: 11px. Хм, интересное мнение. С вами и buddah солидарен. Признаться, не ожидал, что это может показаться кому-либо некрасивым. Также как и со шрифтами делал этот отступ осознанно : ) Его цель — дать возможность скроллить так, чтобы для прочтения текста над футером и в самом футере не приходилось бы низко опускать взгляд. Т. е. этот отступ для улучшения юзабилити делал. В качестве примера для подражания брал Gmail: Бесспорно. В моем случае фиксированная верстка является следствием отсутствия: Опыта работы с адаптивной версткой. Времени (а его в связи с пунктом 1. потребовалось бы много). Острой необходимости в адаптивной верстке. Под IE8 смотрел : ) сайт загружается без стилевого файла, потом выдает какую-то ошибку и прячет весь контент — даже неинтересно разбираться, из-за чего эти проблемы (как бы это для кого-либо крамольно не звучало). Я сознательно (опять-таки) кладу на неактуальные версии IE. Хотя даже IE9 не захотел отображать сайт совсем без багов (они незначительные и даже вряд ли кто заметит их, но все же есть парочка). Вообще говоря, меня настолько бесит огромное количество багов (поведений, не соответствующих стандарту) в современных браузерах (не только в IE9), что я решил попрощаться с профессиональной версткой и веб-дизайном. Оно того не стоит: вместо быстрого чистого кода с ожидаемым поведением приходится кругом костыли совать — оцениваю так в сравнении с программированием на C++, под .NET. Сие странно. Такого, конечно, у меня не наблюдается. Не поделитесь скриншотом? Буду признателен. Разумеется, допускаю, что там много лажи в коде, т. к. верстку начал изучать недавно (полгода назад) и мало ей занимался. Однако когда верстал, то старался следовать советам с htmlbook.ru (тем, которые запомнил после прочтения теории) — ожидал, что серьезных косяков в верстке не сделаю. P. S. Остальные советы и замечания обязательно прокомментирую, только чуть позже (сейчас со временем никак).

e-book-reader.ru Основная задача сайта: предоставлять контент в удобочитаемом и приятном виде. Прошу поругать, оценить Общее впечатление. Дизайн. Юзабилити. Типографику. SEO. Верстку. Нет времени/желания ругать и оценивать основательно? — буду признателен и за краткие отзывы, указания любых ошибок. Рабочая среда: сайт разрабатывался и тестировался только для актуальных версий 5-ти популярных браузеров (Chrome, FF, IE, Opera, Safari) под Windows. P. S. Логотип сознательно сделан так, чтобы он не привлекал внимания.

Забавно вышло. А отчего скандал, по договору что ли IE7 должны были поддерживать?

Чтобы реализовать дизайнерское решение, можно, например наложить на телефонный код: Полупрозрачный слой / полупрозрачную картинку. Непрозрачный слой с текстом любого шрифта / непрозрачный слой с картинкой, которые будут загораживать телефонный код только от зрителя. При этом телефонный номер целиком так и останется в одном теге и в случае 1. телефонный код даже мышкой можно будет выделять.