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. телефонный код даже мышкой можно будет выделять.

Что, почему, зачем — ответов нет. История и рекомендация. А связь между этими вещами?))) Ну смешно жеж) (Кстати, статья напомнила курсовую ленивого второкурсника, честно, тот же слог. Или, может, не слог… но что-то такое, вот, есть)) ) Вот, кстати, неплохое замечание, про которое не следует забывать — http://www.ininfo.biz/2011/01/13/phone-number/ Вы, alexandr_v-vich, порой такие вещи пишите, что просто офигеваешь в недоумении: образованный взрослый человек это говорит или крикливая девка на базаре язык чешит.

Nanto, о чём вы? wildhind, смотрю, номер телефона поменяли — хорошо. Только сделали это недостаточно хорошо : ) Зачем же "+7(495)"? Раз уж решили поменять, то написали б так, как я вам советовал: "(+7 495)". Или, может, мне не доверяете ; ) тогда — пожалуйста: подробная инфа про запись телефонных номеров от любителя типографики.

Запамятовал добавить: favicon забыли сделать.

Восторга paracelso не разделяю, однако, мне сайт тоже нравится. В общем, впечатление приятное, но многие неудачные мелочи его портят и удаляют от идеала. Сравните с apple.com (для развития полезно же ставить себе высокую планку, не так ли ; ) — там неудачных мелочей немного и сайт выглядит потрясающе. Итак, мелочи, которые портят ваш сайт: Для контролов и ссылок недостает состояния active. [Пункты меню] Жирность выглядит грубо. Сравните с bold-ом у вас и без bold-а у apple.com: [Телефонный номер] Шрифт с засечками сильны выбивается из общего визуального ряда и притягивает к себе внимания больше, чем логотип и меню. "7(495)" -> "(+7 495)". "7(495)" сейчас выделено сильнее, чем основной номер телефона, и, учитывая, что в шапке на телефон идет самый большой акцент, получается, что больше всего внимания в шапке привлекается к "7(495)". Хотя, по логике, должно-то быть наоборот. Можно, например, для "7(495)" уменьшить размер шрифта и сделать одного цвета с основным номером; или не уменьшать размер, сделать одного цвета с основным номером, но добавить полупрозрачность. [*]Иконка слева от "Перейти на canesugar.ru" неоправданно жирная. [*]При переходе шапки в фиксированное меню блик на фоне съезжает вниз и получается, что в пунктах меню блик занимает полкнопки, а на фоне блик оказывается намного ниже, чем был. [*]Две тени слегка грязноваты: [*][Большие вызженные иконки] Мне кажется, что они выглядели бы лучше, если б были на 10—20% поменьше. У смайлика в пункте "Всепогодная конструкция..." глаза белые. У большинства иконок тень вызвана источником света из верхнего левого угла, а у иконок для пунктов "Прочность купола..." и "Быстрое возведение..." тень образуется от источника света из нижнего левого угла. Иконки глаза (слева от "И еще 12 причин выбрать геокупол") в обычном состоянии и при hover лучше сделать спрайтом. [*]Графические элементы с тенями имеют три разных не сочетающихся источников света. [*]Картинки в разделе "ГЕОДЕЗИЧЕСКИЙ КУПОЛ" переключаются с помощью клавиш [Стрелка влево], [Стрелка вправо]. А вот для увеличенных картинок в "МЕДИАГАЛЕРЕЯ" эти клавиши почему-то не работают : ) — вместо них картинки сменяются клавишами [Стрелка вверх], [Стрелка вниз]. [*]Состояние hover есть для всех ссылок и контролов, кроме: Кнопок "Присоединяйтесь к нам". Ссылок "Почему?" в "СПЕЦИФИКАЦИИ". [*]"Вы", "Вам", "Ваше" и т. д. следует писать с маленькой буквы, если только это слово не в начале предложения. [*][Типографика] Нехватает неразрывных пробелов после предлогов и перед знаками тире — прогоните тексты через Типограф. "30.0м2" -> "30 м2". "6.8 метра" -> "6,8 м", "3.86 метра" -> "3,86 м". "22000.0 руб/неделя" -> "22 000 руб./неделя", "24000.0" -> "24 000". "кб" -> "КБ", "мб" -> "МБ". "2006-2011" -> "2006—2011". "продажа и изготовление..." -> "Продажа и изготовление...". [*]Битая ссылка "/media/img/domes/docx.png" на иконку Word-а.

Вопроса не понял, но, возможно, вам покажется полезной инфа про открывание новых окон.

Да.

Открытие ссылок меню в новом окне категорически неприемлимо.

Хех, смотрите на результат не только с точки зрения потребителя с устройством на сенсорном управлении, а еще и с точки зрения потребителя с мышью и клавиатурой. "Это верный способ получить хороший результат" ; )

Однако есть люди, которым это не нравится. Меня, например, такие большие ссылки-блоки всегда напрягают: хочу выделить и скопировать кусочек текста в середине абзаца — а мне не дают. Спрашивается, в чем целесообразность такой ссылки-блока, если без труда можно попасть и на ссылку-строчку? Google-ом все пользуемся, и я еще ни от кого не слышал жалоб на то, что в результатах поиска ссылки строчные, а не блочные. Вообще говоря, я не против больших блочных ссылок, но только в том случае, если в них нет текста.

Смотрится приятно. Как можно улучшить: [Work, Video] Убрать сверху черный прямоугольник — фотографии тогда можно будет показывать во всю высоту окна. [Везде] Логотип расположить над меню, чтобы он не отвлекал от фото. [Work, Video] Раз похвально желаете, "чтобы меню менее отвлекало от фото", то логично будет вертикальный полупрозрачный прямоугольник в меню заменить на полностью прозрачный — пускай остаются только пункты меню и логотип. Чтобы с фоном текст не сливался, можно сделать небольшую тень для него. Т. е. пускай меню в галерее выглядит так же, как и на главной. [Contact] В форме сделать правильные вертикальные отступы между контролами и идущими за ними лейблами — сейчас все сливается. "Tel" -> "Tel.", "Mail" -> "E-mail", "Theme" -> "Subject". Телефон, мыло и скайп лучше поместить в таблицу, где в левой колонке будут подписи, а в правой — значения. Т. о., значения будут выровнены слева по одной вертикальной линии. "+7 901 202 45 65" -> "+7 901 202-45-65" — не обязательно, но предпочтительнее.