Тема форума: «Материалы сайта. Что можно улучшить?»

выправил.

В статье "Этические символы общения" съехали картинки, контент перекрывается

Это, как и остальные 8 - детализация, поясление одного главного правила: "Корректно обосновывать, а не навязывать свои представления, какими бы важными и очевидными они не казались.".

9 пояснение означает:

9. Ссылки на авторитетные, но необоснованные утверждения (см. Компетентность или авторитет?)

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

По поводу верхнего выпадающего меню.  При наведении на конкретный пункт меню, он выделяется фоном, при этом текст получается визуально «прибит»  к нижнему краю конкретного пункта, лучше, как мне видится, выравнивать вертикально по центру.  Еще, думаю, стоит сделать внутреннюю отбивку у пунктов меню в раскрывающемся списке, что бы был отступ, а не прилипали к левому краю. При наведении на пункты меню, они выделяются, но если наводить курсором непосредственно на текс в конкретном пункте, то и он отдельно выделяется – кажется от этого нужно избавиться. Обнаружил небольшой баг, если навести на пункт меню и сразу же на подпункт, который содержит в себе еще пункты, то меню зависает полупрозрачным и не появляется – такого не должно быть, ну и стоит сделать так, что бы пошустрей оно появлялось.

По поводу кнопки «Войти». При наведении подчеркивается пустое пространство между текстом и иконкой – так, наверное, не было задумано. И, наверное, стоит весь блок сделать кликабельным, а не только непосредственно сам текст, ведь так будет удобней.

По поводу слайдера. При наведении на «стрелки» они, кроме того, что выделяются оранжевой рамкой, еще и сдвигаются. Что бы не двигались, можно использовать свойство outline с теми же значениями, что и border, но лучше сделать какой-нибудь эффект смены прозрачности – думаю, что это будет приятнее для глаз. По поводу подписи к слайдам, лучше выделять при наведении на блок с белым прозрачным фоном, а не непосредственно на текст. И еще, оранжевый текст на белом фоне немного напрягает глаз (ну может это только у меня так). По поводу длительности смены слайдов, до этого было быстро, а сейчас, наверно полминуты, по-моему, долговато. Заметил баг со сменой слайдов, если нажать на кнопку листания слайда в тот момент, когда слайд уже начал манятся, то его можно пропустить.  Ну и заодно, лучше сделать так, что бы не было возможности быстро проматывать множественными кликами, пока эффект перехода не завершился.

По поводу левого сайдбара. Разный размер шрифта смотрится как-то не очень. Считаю, что стоит сделать вертикальные отступы у ссылок на все статьи и все новости, а то как то визуально все слиплось в куче. Иконки рядом с ссылками на последние обсуждения и галерею почета можно сделать тоже ссылками, а не только сам текст. Вообще, в таких случаях лучше делать все ссылкой, а не только непосредственно текс – это же относиться к ссылкам «Читать» и «Обратная связь».

В правом сайдбаре, у поля поиска стоит сделать атрибут placeholder со значением «Поиск», а не обрабатывать это руками самому, а то ведь если ткнуть сразу, то отправит запрос «Поиск». Еще тут момент, если мы что-то введем, а потом фокус уберем, то когда кликнем назад в поле, наш введенный текст пропадет. Также стоит добавить атрибут required, что бы поле было обязательно к заполнению перед отправкой.

Это что сразу в глаза бросилось.

Пожелания по улучшению сайта.

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

Вообще, немало страниц, которые «выпрыгивают» из общего дизайна сайта без какой-либо на то причины (не присутствует дополнительная сложная верстка). Например, вот тут (http://scorcher.ru/collection/0_content.php) почему то уже белый фон страницы вместо фиолетового.  А вот тут (http://scorcher.ru/me/me.php) шапка уехала в левую сторону.

На каких-то страницах (например, http://scorcher.ru/sys/gid.php ) в верхнем меню обрезается текст (см. скриншот - смотрел в Фаерфоксе). Там высота строки другая (значение не на самих ссылках, а наследуется) в отличие от тех страниц, где нормально все – свойство line-height установлено в 1.5 у главного див элемента (который оборачивает всю страницу). Собственно и по этой причине не стоит делать так, что бы прилипало к нижнему краю (я в предыдущем сообщении писал про то, что лучше выравнивать вертикально по центру).

А еще на каких-то страницах (например, http://scorcher.ru/publisher/index.php ) меняется шрифт надписи «Поиск по сайту» (см. скриншот). Задумано, что он должен наследоваться от того же оберточного див блока, но там уже не указан шрифт. И тут же ссылки при наведении почему то уже красные, а не оранжевые (см. скриншот).

Еще момент. Тут было кем-то верно подмечено, что закругленные углы можно делать без использования картинок.  Это стоит учесть и это позволит экономить время и силы, ведь на самом деле, так уже очень давно никто не делает, потому что это долго и не гибко. Например, если сейчас захочется поменять что-то на кнопке с закругленным углами (например, цвет или радиус закругления), то придется заново перерисовывать картинку.  Для этого есть CSS свойство border-radius.

Кое-что из твоих предложений прошлого поста уже реализовал. В частности применение outline вместо borderрешил применить, несмотря на то, что ни в каких версиях ИЕ это не поддерживается и элемент просто оказывается без окантовки. ИЕ многие все еще используют. Другие предложение с использованием элементов HTML5 более критичны и эффект их использования не оправдывает отсутствия кроссбраузерности. Это касется и скругленных углов. Пусть уж тупое, но апсалутно надежное решение будет, оно точно не подведет.

Некоторые предложения, связанные с изощренными попытками вывести элемент из нормы, исправлять не стал: если пользователь хочет получить удовольствие, добиваясь какими-то действиями абсурда, то не буду лишать его удовольствия, а нормальному юзеру это не помешает :)

Да, есть очень много страниц, где дизайн не унифицирован. Они изначально создавались как заплатки и остались так. Возможно, постепенно вправлю. Что касается белого фона на некоторых страницах, то все еще у меня сомнения насчет агрессивного ультрафиолета вокруг. Он оправдан в чем-то, но в некоторых случаях пытаюсь отставить страницу без такого отвлекающего фона, упрощая впечатление. Тут довод унификации оказывается для меня более слабым, чем желание на парить лишним для данной страницы.

Сейчас я исчезаю до 13 числа, потом еще посмотрю.

Обратил внимание, приятно быть полезным :)

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

А так вообще, когда был border, получалось так, что когда мы наводили на элемент, то у него появлялась рамка, которая занимает свое место и, соответственно, элемент сдвигается. Если хочется именно с border, то можно одновременно при добавлении border смещать сам элемент на один пиксел вверх и на один пиксел влево - в таком случае ничего визуально не будет прыгать. Еще вариант, исходно делать рамку прозрачной, в таком случае она уже будет занимать свое место, для этого есть ключевое слово transparent вместо конкретного цвета.

Если говорить про старые версии IE, то их поддержка, как я считаю, оправдана только в определенных случаях, а так это тяжкий труд, особенно если мы говорим о более менее динамичной верстке, а не о простых вещах. Многие популярные сервисы уже не поддерживают старые версии IE, причем не в плане визуальных неточностей и упрощений, а функционально.

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

А так, есть еще возможность использовать Javascript полифиллы, которые добавляют в старые браузеры поддержку тех возможностей, которые уже есть в современных. Есть специально для border-radius.

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

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

Мне нравится такое меню, хотел было написать то, каким образом, как мне кажется, можно облагородить, но решил просто сделать пример, так мне проще и сразу наглядно :)

Update: Вот здесь можно глянуть

Спасибо! Да, так лучше. Учел почти все моменты, в том числе организацию 2-х рядов просто за счет задания ширины <a в блоке, плавность смены под курсором (transition) с взбрыкиванием строки. 

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

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

Не решен вопрос привлечения внимания к окну сообщений, если оно открыто, но не на первом плане. Так, хром вообще игнорирует focus() а мигание титула тоже оказывается проблематичным, да и если окно свернуто, а не вкладкой, то бесполезно. В общем, не нашел лекарства от навязчивой попытки браузеров оградить пользователей от навязчивости программеров.

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

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

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

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

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

Хотелось бы учесть разумное мнение компетентных участников, особенно daxon71.

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

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

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

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

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

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