Оцените сайт

[jazzic]

Здравствуйте!

piano-play.com

что удобно / не удобно

бросается в глаза

и т.д.

спасибо)

[red4pony]

Сделайте логотип кликабельным.

Кнопки социальных сетей - немного отодвиньте от основного блока / разместите внизу / сделать под общую цветовую композицию.

Сделайте выделение кнопки соответстующей активной странице (чтобы знать где находится пользователь)

Будет круто если при нажатии на клавишу происходит какое-либо действие (Моцарт выпригивает / звук) - любая пасхалка.

[jazzic]

Ок. к логотипу сделаю ссылку.

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

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

Сейчас проверял скорость сайта, так на одной из страниц она вообще 20 очков из 100 составляет, ужас.

мерял здесь - https://developers.google.com/speed/pagespeed/insights#url=piano-play.com&mobile=false&rule=DeferParsingJavascript

Кстати, вас не кажется, что плавная подзагрузка страницы - это не гуд?

Сделайте логотип кликабельным.

Кнопки социальных сетей - немного отодвиньте от основного блока / разместите внизу / сделать под общую цветовую композицию.

Сделайте выделение кнопки соответстующей активной странице (чтобы знать где находится пользователь)

Будет круто если при нажатии на клавишу происходит какое-либо действие (Моцарт выпригивает / звук) - любая пасхалка.

[red4pony]

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

Привычка, что сайты по бокам захламлены рекламой? Если Вам будет комфортнее, сделайте небольшой арнамент из нот.

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

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

Кстати, вас не кажется, что плавная подзагрузка страницы - это не гуд?

Я считаю что в данном случае она уместна. (хоть и противоречит "общему" мнению)

[Daiver]

Первым делом бросились в глаза адреса страниц.

К примеру http://piano-play.com/transcriptions.html

Создайте папку с названием transcriptions и сделайте адрес вида http://piano-play.com/transcriptions/, используя в каждой папке файл index.html

Что общего между instructions, about и faq?

Если это раздел faq, то так и назовите его как в меню, так и страницу, чтобы и в адресе не было не соответствий.

Если есть отдельная страница order, то для чего эту же форму вставлять на страницу transcribing?

На главной странице блоки "What is it?" и "Lifetime" слиты воедино. Нужно добавить расстояние.

В меню справа есть пустой блок без пункта. Кнопки меню стоит сделать чуть шире, чтобы не оставалось пустого куска.

Исправить ошибки

[jazzic]

Привычка, что сайты по бокам захламлены рекламой? Если Вам будет комфортнее, сделайте небольшой арнамент из нот.

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

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

По поводу звуков- отличная идея! Сделаем. Уже инструкцию нашел - http://raftkorn.com/...atii-na-ssylku/

Я считаю что в данном случае она уместна. (хоть и противоречит "общему" мнению)

Ок, но почему-то тормозит сайт заметно

Первым делом бросились в глаза адреса страниц. К примеру http://piano-play.co...scriptions.html Создайте папку с названием transcriptions и сделайте адрес вида http://piano-play.com/transcriptions/, используя в каждой папке файл index.html

Почему бросились в глаза? Это стандарт такой?

Что общего между instructions, about и faq? Если это раздел faq, то так и назовите его как в меню, так и страницу, чтобы и в адресе не было не соответствий.

Как вы это заметили??? Знал только я об этом!))

Если есть отдельная страница order, то для чего эту же форму вставлять на страницу transcribing?

Вы правы, хочу убрать полностью страницу order и там и там. Сделать что-то -типа кнопки сверху (transcribing). Вы мне с той страницей помогли.

На главной странице блоки "What is it?" и "Lifetime" слиты воедино. Нужно добавить расстояние.

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

В меню справа есть пустой блок без пункта. Кнопки меню стоит сделать чуть шире, чтобы не оставалось пустого куска.

Да.. над этим не задумывался. Хочу еще уменьшить количество кнопок и сделать выпадающие.

Исправить ошибки

Как понять на каких именно страницах та или иная ошибка?

Edited May 11, 2013 by jazzic

[nerv]

не понятно на какой именно странице нахожусь

[red4pony]

нужно убрать.

Не стоит. Оставьте Twitter и Facebook (сайт англоязычный, ближе к контингенту), а всякие Вконтакте и Одноклассники сидят на другой музыке (никого не хочу обидеть). Кнопки Twitter и Facebook разместите внизу, сделайте их серыми и круглыми, а при наведении голубыми/синими (их родной ) цвет. Думаю будет отлично смотреться.

Можно для <body> задать background-color: #ccc (что-то в этом духе). Тогда сливается нижняя граница белых клавиш с фоном (добавьте границу на изображении).

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

[jazzic]

не понятно на какой именно странице нахожусь

Выделение кнопок делать не хочу т.к.:

1) Не представляю как это сделать (меню брал из шаблона)

2) Дизайн немного изменит (хотя может будет все хорошо)

Не стоит. Оставьте Twitter и Facebook (сайт англоязычный, ближе к контингенту), а всякие Вконтакте и Одноклассники сидят на другой музыке (никого не хочу обидеть). Кнопки Twitter и Facebook разместите внизу, сделайте их серыми и круглыми, а при наведении голубыми/синими (их родной ) цвет. Думаю будет отлично смотреться.

Но у меня же это не ссылки на страницы в социальных сетях, а просто скрипт для добавления в закладки.

Я видел только (пример с большими серыми кнопками, когда их делают с ссылками на существующие страницы своего сервиса.

Можно длязадать background-color: #ccc (что-то в этом духе). Тогда сливается нижняя граница белых клавиш с фоном (добавьте границу на изображении).

Про фон - интересно, сделаю. А что за граница на изображении? Рамка таблицы?

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

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

[Daiver]

Я считаю что в данном случае она уместна. (хоть и противоречит "общему" мнению)

Ок, но почему-то тормозит сайт заметно

Ошибки валидации тоже могут притормаживать загрузку сайта.

Первым делом бросились в глаза адреса страниц. К примеру http://piano-play.co...scriptions.html Создайте папку с названием transcriptions и сделайте адрес вида http://piano-play.com/transcriptions/, используя в каждой папке файл index.html

Почему бросились в глаза? Это стандарт такой?

Нет, но считается устаревшим стилем.

Что общего между instructions, about и faq? Если это раздел faq, то так и назовите его как в меню, так и страницу, чтобы и в адресе не было не соответствий.

Как вы это заметили??? Знал только я об этом!))

Мой девиз - "Искать и не сдаваться. Найти и пристебаться."

Лучше пусть я вам сейчас укажу на не заметные обычному пользователю недочеты, чем потом поисковик ваш сайт будет выдавать в конце поисковой выдачи.

На главной странице блоки "What is it?" и "Lifetime" слиты воедино. Нужно добавить расстояние.

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

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

В меню справа есть пустой блок без пункта. Кнопки меню стоит сделать чуть шире, чтобы не оставалось пустого куска.

Да.. над этим не задумывался. Хочу еще уменьшить количество кнопок и сделать выпадающие.

Я бы перенесла из подвала в отдельный пункт меню Musician и создала бы сводную страницу со всеми музыкантами.

Исправить ошибки

Как понять на каких именно страницах та или иная ошибка?

Все приведенные ошибки только на главной. Вообще желательно все страницы прогнать через валидатор.

[red4pony]

Не представляю как это сделать (меню брал из шаблона)

Можно вот так:

У Вас есть файлы index.html - соответствует странице home

transcriptions.html - страница Transcriptions

order.html - страница Order

about.html - страница Instructions

samples.html - страница Sample

transcribe.html - страница Transcribing

news.html - страница News

Каждый пункт меню соответствует отдельной странице. Их нужно связать.

Для страницы index.html в <body id = "homePage">

Для страницы transcriptions.html в <body id = "transcriptionsPage">

Для страницы order.html в <body id = "orderPage">

Для страницы about.html в <body id = "instructionsPage">

Для страницы samples.html в <body id = "samplesPage">

Для страницы transcribe.html в <body id = "transcribePage">

Для страницы news.html в <body id = "newsPage">

Теперь меню:

Пункт меню "Номе" - <li id ="buttonHome">

Пункт меню "Transcriptions" - <li id ="buttonTranscription">

Пункт меню "Order" - <li id ="buttonOrder">

Пункт меню "Instructions" - <li id ="buttonAbout">

Пункт меню "Sample" - <li id ="buttonSample">

Пункт меню "Transcribing" - <li id ="buttonTranscribing">

Пункт меню "News" - <li id ="buttonNews">

В файле CSS пропишите следующее:

#homePage #buttonHome>a, /*Запись говорит о том что если на странице будет найдена кнопка которая вызвала данную страницу, то она покрасится в серый цвет*/
#transcriptionsPage #buttonTranscription>a,
#orderPage #buttonOrder>a,
#instructionsPage #buttonAbout>a,
#samplesPage #buttonSample>a,
#transcribePage #buttonTranscribing>a,
#newsPage #buttonNews>a{
	background-color: #333;/*цвет взял для примера, подберите другой*/
	color:#fff;
} /*вместо id можно использовать уникальный класс*/

А что за граница на изображении?

Граница между клавишами и фоном исчезает:

Подрисуйте её в любом графическом редакторе цветом, который разделяет белые клавиши.

P.S. Подправил свойства CSS

Edited May 11, 2013 by red4pony

[red4pony]

Но у меня же это не ссылки на страницы в социальных сетях, а просто скрипт для добавления в закладки.

Вот:

<a target="_blank" title="Share on Facebook" onclick="window.open('http://www.facebook.com/sharer.php?u=http%3A%2F%2Fpiano-play.com%2Fnews.html&t=Recently%20Transcribed%20Pieces%3A%20Erroll%20Garner%20transcriptions%2C%20Play%2C%20Piano%2C%20Play%2C%20Herbie%20Hancock%20transcriptions%2C%20Gaslight%2C%20Turquoise%2C%20Don%27t%20be%20that%20way', '_blank', 'scrollbars=0, resizable=1, menubar=0, left=200, top=200, width=550, height=440, toolbar=0, status=0');return false" href="#" rel="nofollow">f</a>
<a target="_blank" title="Share on Twitter" onclick="window.open('http://twitter.com/share?text=Recently%20Transcribed%20Pieces%3A%20Erroll%20Garner%20transcriptions%2C%20Play%2C%20Piano%2C%20Play%2C%20Herbie%20Hancock%20transcriptions%2C%20Gaslight%2C%20Turquoise%2C%20Don%27t%20be%20that%20way&url=http%3A%2F%2Fpiano-play.com%2Fnews.html', '_blank', 'scrollbars=0, resizable=1, menubar=0, left=200, top=200, width=550, height=440, toolbar=0, status=0');return false" href="#" rel="nofollow">t</a>

Первое это кнопка для Facebook (в <a> вложена буква "f"), вторая для Twitter (ситуация аналогичная). С помощью CSS украсите их как хотите.

[jazzic]

Ошибки валидации тоже могут притормаживать загрузку сайта.

52 ошибки только на 1-й странице! это ужас!) я застряну перед компьютером навечно

но спасибо, для индексации это, вероятно, очень важно

Нет, но считается устаревшим стилем.

ок, попытаемся исправить

Мой девиз - "Искать и не сдаваться. Найти и пристебаться." Лучше пусть я вам сейчас укажу на не заметные обычному пользователю недочеты, чем потом поисковик ваш сайт будет выдавать в конце поисковой выдачи.

На самом деле у меня это актуальная проблема. Посетители путаются. Исправим-с

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

Из-за ошибок и наличия нескольких css пока этого не получается сделать. Тоже справим.

Я бы перенесла из подвала в отдельный пункт меню Musician и создала бы сводную страницу со всеми музыкантами.

Я сделал этот блок с надеждой в лучшую индексацию. Похожая страница с музыкантами уже есть http://piano-play.com/transcriptions.html

[Daiver]

52 ошибки только на 1-й странице! это ужас!) я застряну перед компьютером навечно

Не думаю. Там однотипные ошибки. Достаточно понять как исправить 5-7 ошибок, а все остальные будут решатся по шаблону. Больше 2 дней на весь сайт не должно занять.

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

А еще для исправления ошибок будет полезно почитать о meta тегах и их атрибутах.

[jazzic]

Граница между клавишами и фоном исчезает: Подрисуйте её в любом графическом редакторе цветом, который разделяет белые клавиши.

Фон уже исправил на белый, как было задумано заранее. Вот что получилось - http://piano-play.com/. Изменился он случайно при добавлении другого кода в css.

Про выделение кнопок меню в цвет. Принцип понял, но при добавлении id в меню и необходимого кода в css ничего не изменилось.

За код с кнопками (facebook, twitter) благодарю. Скопировал себе, на днях добавлю кнопки, спасибо.

[Daiver]

Я сделал этот блок с надеждой в лучшую индексацию.

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

[jazzic]

Не думаю. Там однотипные ошибки. Достаточно понять как исправить 5-7 ошибок, а все остальные будут решатся по шаблону. Больше 2 дней на весь сайт не должно занять. Кстати на счет css - там много ошибок из-за использования тегов и атрибутов, которые уже не вошли в спецификацию HTML5 и вместо них нужно использовать css. А еще для исправления ошибок будет полезно почитать о meta тегах и их атрибутах

Заметил, что ошибки однотипные, так-то проще! Прочитал про теги, спасибо

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

Что означает под отдельный ключ? Т.е. описание страниц не должно совпадать?

[Daiver]

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

Что означает под отдельный ключ? Т.е. описание страниц не должно совпадать?

Ключ = поисковая фраза.

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

[jazzic]

Хотел написать, но забывал.

Есть такая проблема, что бегущая строка воспроизводится лишь только при отсутствии описания страницы "<!DOCTYPE html>

А это описание страницы просто неоходимо для лучшей индексации.

Проблемная страница - http://piano-play.com/news.html

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

Что означает под отдельный ключ? Т.е. описание страниц не должно совпадать?

Ключ = поисковая фраза.

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

Идею понял, исправлю.

[red4pony]

при добавлении id в меню и необходимого кода в css ничего не изменилось.

Видимо допустили ошибку.

Вот пример http://jsfiddle.net/EpvgZ/

Уберете идентификатор у <body> - работать не будет.

[jazzic]

Видимо допустили ошибку. Вот пример http://jsfiddle.net/EpvgZ/ Уберете идентификатор у- работать не будет.

Вот, что получилось http://piano-play.com/index5.html

Идея хорошая. Теперь буду думать над лучшим испонением и дизайном.

Кстати, спасибо)

Не думаю. Там однотипные ошибки. Достаточно понять как исправить 5-7 ошибок, а все остальные будут решатся по шаблону.

Заметил, что на сайте валидаторе пишут, что выравнивание элементов в таблице лучше проводить через css.

Или: "The align attribute on the table element is obsolete. Use CSS instead."

http://validator.w3....w3.org/services

Т.е. теперь нужно переписать весь сайт только из-за того, что использование выравнивания в таблицах не актуально?

Edited May 11, 2013 by jazzic

[red4pony]

теперь нужно

Это носит рекомендательный характер.

Многие( в том числе и валидатор) придерживаются мнения, что всё визуальное офрмление должно находиться в CSS. Делайте так чтобы Вам и другим людям(если таковые есть/будут) удобно было поддерживать сайт.

[Daiver]

Т.е. теперь нужно переписать весь сайт только из-за того, что использование выравнивания в таблицах не актуально?

Нет. В HTML5 атрибут align у таблиц отсутствует. Вместо этого используйте стили css.

[jazzic]

Т.е. теперь нужно переписать весь сайт только из-за того, что использование выравнивания в таблицах не актуально?

Нет. В HTML5 атрибут align у таблиц отсутствует. Вместо этого используйте стили css.

Отсутствует? Но у меня же все работает?)

Это носит рекомендательный характер. Многие( в том числе и валидатор) придерживаются мнения, что всё визуальное офрмление должно находиться в CSS. Делайте так чтобы Вам и другим людям(если таковые есть/будут) удобно было поддерживать сайт.

Кстати, я тоже об этом минут 10 сегодня думал. Почему лучше не ставить оформление на странице сайта, а добавлять его через css?

Edited May 11, 2013 by jazzic

[red4pony]

Кстати, я тоже об этом минут 10 сегодня думал. Почему лучше не ставить оформление на странице сайта, а добавлять его через css?

HTML (от англ. HyperText Markup Language — «язык разметки гипертекста») - создан для лагоческого разделения текста.

CSS (Cascading Style Sheets — каскадные таблицы стилей) создали для того чтобы хранить все оформление в одном месте, это делает код опрятнее и повышается удобочитаемость.

Align отсутствует в HTML5 по причине того что WHATWG и W3C хотят полностью удалить теги оформления из HTML, чтобы все переложить обязанности оформления на CSS. Исправляют свои ошибки.

А работает он потому что браузеры продолжают их поддерживать. И поддерживают они потому что ставят превыше всего интересы пользователя, которым всёравно как Вы выровняли текст, они хотят видеть корректный результат.