Проверите качество сайта?

Question

[Сергей Ноздрин]

Здравствуйте! Я сделал сайт, совсем скоро он уже пойдет в продакшн.

Хотелось бы спросить вашего мнения о его качестве, может какие-то советы, что исправить (из того, что особенно бросается в глаза)?

Если кто-то увидит в этом спам, то хочу сразу отметить 2 момента:

— Сайт на тестовом домене, так что рекламить его бессмысленно
— Сайт закрыт от индексации поисковиками (что видно в robots.txt)

По поводу косяка, о котором я знаю и хотел бы узнать почему так:

Справа верху нарисован маленький телефон и написаны 2 номера черным цветом.
Черный цвет получается путем задания css color: black;
На всех устройствах, где я проверял (стационарники, Nokia N8, нетбук, сервис browsershots), номера отображаются нормально, но на планшете Texet через браузер OPERA Mini они не отображаются. В остально сайт выглядит точно так же. Как думаете, в чем может быть причина?

Адрес сайта — vamsms.ru (ничего про смски там нет, просто завалялся домен)

И, конечно, спасибо вам за помощь!

Answer 1

[BaNru]

По дизайну и типографики принимаем замечания?
Тогда сейчас до*усь докопаюсь

1) активная страница слишком не читаемая. Сливается с фоном
2) стрелка «вверх», наезжает при маленьких размерах. Она же не на том z-index лежит
3) цвета верхней плашки (и наверное нижней) не совпадают с кнопкой, так и задумано?
3+-1) Иконка телефона съехал чуть вниз, приподнять бы.

Скрины

4) Черный текст должен быть не #000, а чуть бледнее, например #222, Это уже практически догма
5) А вот ниже, серый цвет на сером, наоборот взбляднулся

Скрин

6) Интерлиньяж между строк в пунктах маленький. В других местах нормально, даже чуть перебор, а тут зажали строки.
7) Картинка с надписью слева дико не красиво смотрится.

Скрин

8) Ссылки пагинатора при наведение не подают признаков жизни.

Скрин

9) В галереи если скрипты отключены, то зеленная стрелочка разворачивания не работает.
10) Навороченная защита мыла в футере от спама при отключенных скриптах ломает локально верстку.

Скрин

так же стрелочка уехала

Думаю хватит )))

О скринах, если не грузятся

Картинки что-то хреново грузятся, а точнее вообще не открываются с habrastorage. Так что, если не отображаются или я напутал, не обессудьте.

ЗЫ И оранжевый в контрасте с чисто белым бьет по глазам

Comments

[BaNru]

В прошлый раз (было похожее дело) картинки на след день появлялись.

Скрины ещё раз

1-3


4-5

6-7

8

9-10

блять, ни в какую скрин не хотел загружаться. Пересохранил картинку, закачалась. ППЦ.
>так же стрелочка уехала

Забыл сказать — FF23

Answer 2

[Dmirty Kolesnikov]

Я дам немного более техническую оценку по личному опыту работы с юзабилити и клиентскими интерфейсами:

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

2. Также не очень понравилась «всплывающая» форма с записью, которая появляется в определенном месте при клике. Здесь наверное оптимальнее будет просто всплывающее окно, которое будет располагаться либо вблизи со ссылкой, по которой делается клик, либо по центру экрана.

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

4. На странице «Тесты» раскрытие контента происходит с передергиванием, это крайне неприятно и создает плохое впечатление о сайте в целом. Такие моменты если и стоит реализовывать, то обязательно нужно доводить до ума, чтобы все работало как часы.

5. На страницах «Притчи» и «Статьи» также эффект развертывания воспроизводится с косяками.

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

Желаю вам со всем этим разобраться и довести все вопросы до ума создав хороший ресурс.

Comments

[Dmirty Kolesnikov]

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

Answer 3

[hMartin]

В «Ближайшие события» — Запись у вас подобие всплывающего/слайдинг блока, но интерфейс и вывод не вписываются в общую концепцию дизайна.
В формах белый шрифт по светлосерому фону — кровь из глаз.
http://vamsms.ru/Novosti/index.php?news=2' — еррор репортинг у вас включен, а лучше бы нет(раскрытие путей /home/p137679/www/vamsms.ru/Novosti/index.php). + не фильтруются вводимые данные, приводи id к int.
file_get_contents(new_3.txt) nosql рулит :)

Comments

[Сергей Ноздрин]

Повключал error_reporting(0), прикрыл ошибки.

БД не использовал, так как ради 4 новостей не вижу смысла.

Answer 4

[pomeo]

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

Comments

[pomeo]

картинка умерла, повторю

[Сергей Ноздрин]

сделал и отступ справа

[pomeo]

Эх нет у вас чувства прекрасного, вы не поняли про что я, оно не сильно изменилось. У вас сетка сайта кривая во всех плоскостях.

Answer 5

[Константин Биржаков]

На айпаде посмотрите сайт, что-то не так с размерами, не влезает полностью.
Какая-штуковина справа сверху, видимо, стрелка «наверх», заслоняет меню.
Статьи не влезают по ширине. Разворачивание статей не очевидное, хочу читать про шапку, разворачивается верхняя. Лучше бы разворачивание по клику на заголовке статьи, на картинке.
В целом сайт не очень понравился, или скажем так — надо хотеть им пользоваться в силу интерса, скажем. Тогда можно привыкнуть. Форум вне дизайна, какие-ссылки ведут к прокрутке, какие-то на другие страницы. Название страниц с заглавными буквами, как-то неопрятно это выглядит.
Удачи!

Comments

[Сергей Ноздрин]

Будет сделано открытие статей по заголовку и картинке. Стрелку наверх поправил, добавил прозрачности. Спасибо.

Answer 6

[xave]

Пишите телефон с +7, чтобы мобильные телефоны сразу определяли бы номер на странице.

Answer 7

[Dmitrii]

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

Answer 8

[Дмитрий]

Стрелка/кнопка «вверх» должна появляться только после некоторой прокрутки вниз. Иначе она нелепо смотрится возле меню, и вообще там (в рауоне хедера и меню) не нужна в вводит в заблуждение.

Отступ в футере (надпись «Light Systems, 2013») сверху и снизу неодинаковый, неаккуратненько.

Иконка (вопросительный знак) возле адреса в футере — не соответствует смыслу.

Разделительная полоза внизу новостей в футере не нужна.

Answer 9

[Дмитрий]

Под фоткой руководителя, списки его заслуг — подзаголовки «Образование» и «Дополнительное образование» имеют разные отступы.

В этих же списках нет вертикальных отступов между ненумерованными пунктами — все сливается.

В этих же списках и в цитате под ними совершенно разная высота строк, т.е. отступов между строками. Это же касается и описания центра сверху, везде разнобой — нужно везде привести высоту строк к единому стандарту.

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

Новости в футере: иконки-часики там не в кассу (попросту не нужны); размер шифта даты нужно уменьшить, т.к. это элемент вторичной важности.

Там же в контактах — правильней центрировать текст и иконки по середине высоты, чем по вершине.

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

Бордер в хэдере — он не виден четко, но придает неаккуратности и размытия. Убрал бы однозначно.

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

Про верстку уже писали — присутствие стилей (style="...") в тэгах — это 90-е годы.

Answer 10

[Дмитрий]

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

<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Abel|Satisfy' rel='stylesheet' type='text/css' />

Comments

[Сергей Ноздрин]

Не страшно, в любом случае я их исключид из кода.