-
Posts
45 -
Joined
-
Last visited
-
Days Won
1
Content Type
Profiles
Forums
Calendar
Store
Posts posted by kir
-
-
В полосе меню однородный серый фон заменил на легкий градиент. Градиент очень легкий — почти незаметный. Интересны ваши мнения: как лучше смотрится, с градиентом или без?
Также вариант с градиентом можно посмотреть на самом сайте: e-book-reader.ru.
-
... добавить чуть-чуть интерактивности...
Если не затруднит, на вскидку подскажите, пожалуйста, куда стоило бы интерактивности добавить? Вроде, и так всё, что только можно, интерактивное (в моем представлении). Или вы имели ввиду плавную анимацию?
-
Возможно личная вкусовщина. я не могу долго находится на страницах черное на белом. в глазах рябит. То что вы предложили - вообще ужас, ушел бы сразу!
А как же вы книжки читаете? Бумага ведь белая (хорошая бумага) и с черными буквами ; ) А вообще — да, это у вас "личная вкусовщина", большая часть людей предпочитает читать черное (темное) на белом (светлом).
- 1
-
Можно устанавливать время без атрибута datetime, Но только если оно идентично формату - YYYY-MM-DD...
Благодарствую за разъяснение. Исправил свой старый вариант на сайте на правильный.
... ограничений в количестве этих тегов [<nav>] на странице нету... использование его как контейнера для анкоров Содержания - это его прамое назначение по спецификации.
Учту в будущем. Сейчас же попытался добавить его в содержание и забил — пришлось бы еще несколько стилевых свойств менять (завязанных на последовательности тегов), тестировать... В общем, забил : )
-
Viper, спасибо за подробные рекомендации. Вы всё хорошо и правильно пишите. Мне даже неудобно перед вами за то, что из 6-ти пунктов я сделаю только пункт номер 2. Но, может, кто-нить другой будет следовать приведенным рекомендациям по верстке и ваше сообщение ему окажется очень полезным.
1. Адаптивность.
6. ... переделаете верстку без таблиц(где они не являються таблицами).
В своем случае считаю это нецелесообразно — будет больше пользы, если я за время, которое понадобится для 1., 6., напишу и добавлю пару статей на сайт.
2. <html lang="ru">.
Сделал.
3. ... о правильном использовании тегов <strong> и <em>, <b> и <i>.
<strong> и <em> использую не только для графического выделения, но и для поисковиков, в связи с этим заменять их на <b> и <i> невыгодно для ранжирования.
4. Тег <time> нужно указывать с атрибутов datetime...
Видимо, надо Влада ругать: http://htmlbook.ru/html/time, — или его вариант все-таки тоже допустим?
5. Использование тега <nav>... - обрамлять им Содержание статьи
У меня <nav> используется для навигации между постами в категории (сейчас этой навигации не видно, т. к. в каждой категории только по одной статье). Все равно для содержания стоит <nav> добавить или два таких тега на одной странице не нужно делать?
Еще раз спасибо за ссылки — знать полезно.
-
Спасибо, не знал.
-
Верхнее меню - display:inline-block со всеми вытекающими.
карта сайта, поиск, рсс...аналогично
В лого я вообще не понял зачем таблица. Ну вот совсем не понял.
А еще у тебя в галерее вместе прописаны float: left и display: block; Но я так понял, что галерея тоже чужая.
Спасибо за указания, понял ваш подход. Согласен с тем, что перечисленные таблицы не нужны — я же так сверстал только потому, что мне так было проще. Но при профессиональной верстки так лучше не делать, понимаю.
В лого таблицу использовал же для выравнивания по вертикали — но, не спорю, это можно и без таблицы сверстать.
Галерея чужая. А вот "float: left и display: block" я задаю для нескольких идущих подряд ссылок-превьюшек, как например здесь для пяти ссылок-превьюшек. Тут что-то не правильно? "display: block" для того, чтобы ссылки стали блочными элементами, а "float: left" для того, чтобы эти ссылки-блоки строились подряд по горизонтали.
-
2. Границы основных блоков вроде и есть, но они еле заметны.
Так и задумано. На белом однородном фоном сам контент формирует визуальные границы блоков — как в печатных газетах и журналах. Также заметные границы блоков отвлекали бы внимание на себя от контента — в связи с этим решил отдельно границы не делать.
3. Отступы между основной колонкой и сайдабаром можно сделать побольше.
Ориентировался на отступ на Youtube — там 40px, а я сделал 40px + 1px (на border).
Вёрстка действительно влияет на SEO? Думаю, разве что микроданные и отсутствие совсем уж нелепого говнокода. Если убедите, что вёрстка влияет на SEO, буду любить это занятие ещё больше.
Насколько я разобрался, основное влияние верстки на SEO изложено главной SE в рекомендациях по SEO. У вас появилась возможность любить верстку еще больше ; )
Поставить протокол malito на... КИР... я думаю, ошибка) Хотя бы иконку конвертика рядом чтоли.
Согласен. Может даже раздражать ситуация, когда жмешь на "КИР" с ожиданием получить сайт разработчика, а вместо этого открывается почтовый клиент в ОС / загружается почтовый сервис в браузере. Однако т. к. в будущем для "КИР" ожидается все-таки ссылка на сайт и т. к., вообще говоря, мало кто из пользователей туда будет тыкать, то решил пока в качестве временного варианта оставить как есть.
И цвета скудные. Их мало и половина из них серые) Ещё и светло-серые. Контраст для текста маленький.
Градации серого в дизайне — это стилизация под изображение, которое выдают монохромные E-Ink экраны. Делать же всё серым не рискнул : ) — элементы управления оставил в привычном для веба синем цвете; ну и картинки цветные. Я рассуждал так: главное для большинства пользователей — это красивые картинки; после картинок — текст. Следовательно, надо было сделать такой дизайн, который всё внимание будет направлять на картинки — дизайн с легкими оттенками серого подошел идеально, т. к. с ним цветные картинки получают максимум внимания. Ну и для чтения текста серый (ближе к черному) хорошо подходит.
Контраст графических элементов (да и текста), действительно, меньше, чем на большинстве сайтов — это сознательный шаг: по-моему, текст с такой контрастностью читается хорошо + выглядит мягче.
-
1. Похоже на смесь Хабра и Википедии.
Интересный взгляд.
В целом, по-моему, дизайн получился достаточно оригинальным — в том смысле, что аналогов я не встречал. А вот по-отдельности дизайн некоторых элементов я, действительно, стащил у Хабра и Вики : ) (конечно, изменив их внешний вид под свой)
- Хабр: серые заголовки, внешний вид комментариев.
- Википедия: подчеркнутые горизонтальной чертой заголовки, содержание с ссылками.
3. ...а зачем форма поиска на отдельной странице? Если не хочется лепить поле для ввода - сделай выезжающую плашку, как в браузере при Ctrl-F например.
Это то место, где я пожертвовал удобством ради красивости и логичного единообразного поведения: есть три единообразные по внешнему виду и по поведению иконки-ссылки. Все три выглядят одинаково, значит, логично, чтобы и вели они себя все одинаково — были просто ссылками на другие страницы. Если бы одна из них не ссылалась на другую страницу, а выдвигала плашку с текстовым полем, то и выглядеть она должна была б иначе.
4. Ну а типографика че? Стандартная такая типографика. Чисто - и слава Богу. Отступы в основном правильные, места достаточно, глаз не замыливается.
Забавно, что никто внимание не обращает (может, и видит, но молчит) на мягкие переносы в сочетании с полной выключкой. А ведь это нечастое явление для веба. Я-то ожидал, что найдутся ярые противники (например, среди подростков, которые читают только в вебе и бумажных книг не успели застать) и твердые сторонники — и начнется holy war : )
6. Код плохо отформатирован, трудно читать... Таблицы не всегда там, где они по-настоящему нужны.
Конечный код плохо отформатирован в связи с тем, что генерируется CMS из разных файлов и БД. Как вариант, можно смотреть код в браузере через инструменты разработчика — там из кода строится красивое хорошо отформатированное дерево.
Если не затруднит, укажите, пожалуйста, где таблицы явно излишни. Я применял таблицы там, где ими было верстать удобнее, чем div-ами — может, и не прав был где-то.
- Хабр: серые заголовки, внешний вид комментариев.
-
Код, конечно, хреновенький. Но кто, кроме нас, смотрит в код?
Ага, в основном в код на сайтах смотрят другие верстальщики и, бывает, тестировщики. Это также как и с ПО: ну кто будет смотреть код OpenOffice-а или другой какой программы? — только программисты (здесь это обобщающее слово, обозначающее различных специалистов по разработке ПО).
А с тем, что код смотрят еще и
Поисковики(SEO), разнообразные программы...
тоже согласен. Так их, по-моему, мой код более-менее удовлетворяет:
- Верстал с учетом рекомендаций Google по SEO (на мое удивление Google проиндексировал сайт в течение суток после открытия для поисковиков — хотя, может быть, SEO-верстка на это и не повлияла).
- Safari Reader парсит код и нечто читаемое выдает.
Огромный жирный плюс: сразу понятно, о чём этот сайт и зачем он. У таких сайтов и появляется аудитория, такие сайты и читают.
Приятно видеть такую оценку. Рад, что вы считаете, что у сайта есть потенциал — постараюсь не забрасывать его, развивать.
Дизайн не мешает восприятию информации — уже замечательно...
Однако, дизайн может и помогать и привлекать...
Точно подмечено. Для этого сайта отсутствие такой черты в дизайне (помогать и привлекать) не особо критично — дизайн не мешает и хорошо: пользователь спокойно может почитать приглянувшиеся ему статейки; а вот для какого-нибудь промо-сайта она, конечно, уже обязательна.
Буду учиться. Дизайн мне интересен.
- Верстал с учетом рекомендаций Google по SEO (на мое удивление Google проиндексировал сайт в течение суток после открытия для поисковиков — хотя, может быть, SEO-верстка на это и не повлияла).
-
Спасибо всем комментаторам за время и внимание, затрачиваемые на написание отзывов.
Про размер шрифта
Хорошо понимаю советы увеличить размер с 13px до 14px. Сам я, будучи слегка близоруким, временами на разных сайтах изменяю масштаб так, чтобы текст покрупнее становился. Однако, для своего сайта 13px выбрал осознанно, исходя из предпочтений и привычек большинства пользователей, которые имеют хорошее зрение и привыкли к мелкому шрифту. О предпочтениях и привычках судил по дефолтным шрифтам (без засечек) в следующих местах:
- Wikipedia: 13px;
- Livejournal: 13px;
- ВКонтакте: 11px;
- Kinopoisk: 12px;
- Facebook: 13px;
- ОС Windows 7: 11px.
Мне кажется, что такой большой отступ снизу у футера выглядит не очень красиво.
Хм, интересное мнение. С вами и buddah солидарен. Признаться, не ожидал, что это может показаться кому-либо некрасивым. Также как и со шрифтами делал этот отступ осознанно : ) Его цель — дать возможность скроллить так, чтобы для прочтения текста над футером и в самом футере не приходилось бы низко опускать взгляд. Т. е. этот отступ для улучшения юзабилити делал. В качестве примера для подражания брал Gmail:
Но думаю, что для сайтов с такой целью и такой тематикой, идеально подошел бы лучше подход адаптивной верстки.
Бесспорно. В моем случае фиксированная верстка является следствием отсутствия:
- Опыта работы с адаптивной версткой.
- Времени (а его в связи с пунктом 1. потребовалось бы много).
- Острой необходимости в адаптивной верстке.
под IE7-8 не тестировали?
Под IE8 смотрел : ) сайт загружается без стилевого файла, потом выдает какую-то ошибку и прячет весь контент — даже неинтересно разбираться, из-за чего эти проблемы (как бы это для кого-либо крамольно не звучало).
Я сознательно (опять-таки) кладу на неактуальные версии IE. Хотя даже IE9 не захотел отображать сайт совсем без багов (они незначительные и даже вряд ли кто заметит их, но все же есть парочка). Вообще говоря, меня настолько бесит огромное количество багов (поведений, не соответствующих стандарту) в современных браузерах (не только в IE9), что я решил попрощаться с профессиональной версткой и веб-дизайном. Оно того не стоит: вместо быстрого чистого кода с ожидаемым поведением приходится кругом костыли совать — оцениваю так в сравнении с программированием на C++, под .NET.
Chrome показивает, что вы стили подключили между HEAD и BODY...
Сие странно. Такого, конечно, у меня не наблюдается. Не поделитесь скриншотом?
Если интересуют более детальные минусы верстки, могу сделать краткое ревью кода.
Буду признателен. Разумеется, допускаю, что там много лажи в коде, т. к. верстку начал изучать недавно (полгода назад) и мало ей занимался. Однако когда верстал, то старался следовать советам с htmlbook.ru (тем, которые запомнил после прочтения теории) — ожидал, что серьезных косяков в верстке не сделаю.
P. S. Остальные советы и замечания обязательно прокомментирую, только чуть позже (сейчас со временем никак).
- Wikipedia: 13px;
-
Основная задача сайта: предоставлять контент в удобочитаемом и приятном виде.
Прошу поругать, оценить
- Общее впечатление.
- Дизайн.
- Юзабилити.
- Типографику.
- SEO.
- Верстку.
Нет времени/желания ругать и оценивать основательно? — буду признателен и за краткие отзывы, указания любых ошибок.
Рабочая среда: сайт разрабатывался и тестировался только для актуальных версий 5-ти популярных браузеров (Chrome, FF, IE, Opera, Safari) под Windows.
P. S. Логотип сознательно сделан так, чтобы он не привлекал внимания.
- Общее впечатление.
-
Забавно вышло.
... если бы хоть кто-то хоть раз это увидел, был бы грандиозный скандал...
А отчего скандал, по договору что ли IE7 должны были поддерживать?
-
Чтобы реализовать дизайнерское решение, можно, например наложить на телефонный код:
- Полупрозрачный слой / полупрозрачную картинку.
- Непрозрачный слой с текстом любого шрифта / непрозрачный слой с картинкой, которые будут загораживать телефонный код только от зрителя.
При этом телефонный номер целиком так и останется в одном теге и в случае 1. телефонный код даже мышкой можно будет выделять.
- Полупрозрачный слой / полупрозрачную картинку.
-
kir, да ладно, снова что ли? Что же вы так уповаете на человека, написавшего дизайн Яндекса?))))
Зацепились за „Вы“… ну и что. Вы сможете ответить почему с большой буквы — это плохо? И почему когда-то это было нормой и даже правилом? Почему перестало им быть? Откуда вообще взято обращение на „Вы“? А? Нет? Да вы что?, а как же „любитель типографики“? Нет? Он тоже не знает? Бог мой, да быть не может!
Круглые скобки в записи телефонных номеров нигде не регламентированы. Пробелы — да. Дефисы — ну пусть, тоже, да. Всем на сегодня приглядна запись со скобками на этот трёхзначный код. Ссылка, которую вы дали, также не отвечает на вопрос. Да там просто
сегодня в России номера телефонов нужно писать следующим образом
Что, почему, зачем — ответов нет. История и рекомендация. А связь между этими вещами?))) Ну смешно жеж)
(Кстати, статья напомнила курсовую ленивого второкурсника, честно, тот же слог. Или, может, не слог… но что-то такое, вот, есть)) )
Вот, кстати, неплохое замечание, про которое не следует забывать — http://www.ininfo.biz/2011/01/13/phone-number/
Вы, alexandr_v-vich, порой такие вещи пишите, что просто офигеваешь в недоумении: образованный взрослый человек это говорит или крикливая девка на базаре язык чешит.
- 1
-
kir, ну с грамматикой Вы, конечно, погорячились...
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-а.
- Для контролов и ссылок недостает состояния active.
-
"Вход" - только вход, такая позиция общепринятая, или нет строгих правил?
Вопроса не понял, но, возможно, вам покажется полезной инфа про открывание новых окон.
-
Да.
-
Открытие ссылок меню в новом окне категорически неприемлимо.
-
Смотрите на результат не с точки зрения разработчика, а с точки зрения потребителя.
Хех, смотрите на результат не только с точки зрения потребителя с устройством на сенсорном управлении, а еще и с точки зрения потребителя с мышью и клавиатурой. "Это верный способ получить хороший результат" ; )
- 1
-
Так и должно быть.
Однако есть люди, которым это не нравится. Меня, например, такие большие ссылки-блоки всегда напрягают: хочу выделить и скопировать кусочек текста в середине абзаца — а мне не дают.
Спрашивается, в чем целесообразность такой ссылки-блока, если без труда можно попасть и на ссылку-строчку? Google-ом все пользуемся, и я еще ни от кого не слышал жалоб на то, что в результатах поиска ссылки строчные, а не блочные.
Вообще говоря, я не против больших блочных ссылок, но только в том случае, если в них нет текста.
-
Смотрится приятно.
Как можно улучшить:
- [Work, Video] Убрать сверху черный прямоугольник — фотографии тогда можно будет показывать во всю высоту окна.
- [Везде] Логотип расположить над меню, чтобы он не отвлекал от фото.
- [Work, Video] Раз похвально желаете, "чтобы меню менее отвлекало от фото", то логично будет вертикальный полупрозрачный прямоугольник в меню заменить на полностью прозрачный — пускай остаются только пункты меню и логотип. Чтобы с фоном текст не сливался, можно сделать небольшую тень для него. Т. е. пускай меню в галерее выглядит так же, как и на главной.
- [Contact]
- В форме сделать правильные вертикальные отступы между контролами и идущими за ними лейблами — сейчас все сливается.
- "Tel" -> "Tel.", "Mail" -> "E-mail", "Theme" -> "Subject".
- Телефон, мыло и скайп лучше поместить в таблицу, где в левой колонке будут подписи, а в правой — значения. Т. о., значения будут выровнены слева по одной вертикальной линии.
- "+7 901 202 45 65" -> "+7 901 202-45-65" — не обязательно, но предпочтительнее.
- В форме сделать правильные вертикальные отступы между контролами и идущими за ними лейблами — сейчас все сливается.
- [Work, Video] Убрать сверху черный прямоугольник — фотографии тогда можно будет показывать во всю высоту окна.
Информационный сайт
in Discussion of works
Posted
Спасибо за мнения. Убрал градиент.