Оцените сайт-портфолио по полной :)

[stan077]

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

Оцените, пожалуйста, дизайн , юзабилити , верстку …
Буду очень рад дельным советам.

http://web-verstka.com.ua/

 

[blackcot]

А что оценивать-то?
Ну... Ссылки кликабельны... Круто чё...

 

[stan077]

[member=blackcot],

а с юзабилити как?

 

[blackcot]

Какое юзабилити может быть у сайта из ДВУХ страниц, считая главную?!

 

[BaNru]

В картинках - так как заголовок и картинка ведут на одну страницу, то разумнее подсвечивать из одновременно.
Даже верстка к этому располагает. А ещё зум, как верстальщик, мог бы сделать на CSS3.
И дерганый у тебя зум получился, если увести с элемента пока он анимруется, то анимация "схлопывается".

Отзывы открывают другой сайт - это шок для посетителя )

Контакты. Какую заявку отправить? На о**здюливание?
Там же. У емайла и скайпа какой-то квадратик. Почему бы не сделать картинки маленькие мыла и скайпа соответственно?

У тебя там адаптивный дизайн.
Но почему не до конца? Или ты думаешь что нету устройств меньше 675px шириной?

 

[stan077]

В картинках - так как заголовок и картинка ведут на одну страницу, то разумнее подсвечивать из одновременно.
Даже верстка к этому располагает. А ещё зум, как верстальщик, мог бы сделать на CSS3.
И дерганый у тебя зум получился, если увести с элемента пока он анимруется, то анимация "схлопывается".

Отзывы открывают другой сайт - это шок для посетителя )

Контакты. Какую заявку отправить? На о**здюливание?
Там же. У емайла и скайпа какой-то квадратик. Почему бы не сделать картинки маленькие мыла и скайпа соответственно?

У тебя там адаптивный дизайн.
Но почему не до конца? Или ты думаешь что нету устройств меньше 675px шириной?

Спасибо, буду исправлять.

 

[stan077]

Исправил,так лучше?

 

[blackcot]

Ссылки с портфолио должны открываться в отдельном окне, что бы не мотаться назад-вперёд.

 

[BaNru]

так лучше?

Иконки - нет, только испортил

 

[motek]

Ссылки с портфолио должны открываться в отдельном окне, что бы не мотаться назад-вперёд.

можно в модальном окне открывать + сделайте возможность скачать понравившийся макет

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

Контакты. Какую заявку отправить? На о**здюливание?

я отправил пожелание :laugh:

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

 

[stan077]

Всем спасибо!!!

так лучше?

Иконки - нет, только испортил

Какие иконки??? Может Вы имели ввиду левый бордер у картинок?

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

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

 

[motek]

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

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

<a class="animated" href="http://web-verstka.com.ua/portfolio/Babaika/">
<span class="work_title">Landing Page "Babaika"</span>
<figure>
<img src="images/works/Babaika.jpg" alt="картинка">
</figure>
</a>

поменяйте <span> на <figcaption> , а ссылкам добавьте титле:

<a class="animated" href="http://web-verstka.com.ua/portfolio/Babaika/" title="Babaika">
<figcaption class="work_title">Landing Page "Babaika"</figcaption>
<figure>
<img src="images/works/Babaika.jpg" alt="Babaika" title="Babaika">
</figure>
</a>

Вы зря избавились от слогана в футере (мне он симпатизировал), и поставили не тот значок валидного html
поставьте значок html5 и сделайте его ссылкой на валидатор (не забыв закрыть от индексации)

 

[stan077]

[member=motek]
Вроде все исправил, спасибо!

 

[Женька]

Смысл сайта - непонятен. Дизайн нужно переделывать. Слова "Web Verstka" в шапке выглядят мрачно и тяжеловесно, за кадром - нелепо. На фоне них все остальные надписи сайта смотрятся блёкло и невыразительно.

 

[mrlasking]

Без претензий к сути советов, есть претензия к написанию. Я не знаю, как кому, а вот мне аж шаблон рвет подобное изречение:

а ссылкам добавьте титле

Чем вам так не угодило слово "заголовок", что пришлось писать, вырывающее глаз, "титле"?

 

[motek]

Чем вам так не угодило слово "заголовок", что пришлось писать, вырывающее глаз, "титле"?

сразу отпадает вопрос, а что такое заголовок , и потом это скорее всплывающая подсказка, чем заголовок...
буду писать так title="";

 

[motek]

Чем вам так не угодило слово "заголовок"...

вот мы дошли и до заголовков ... для группировки заголовков используется тег <hgroup>

<section class="service clearfix">
<h2>Услуги</h2>
<div class="left">
<h3>Блочная HTML5, CSS3 вёрстка</h3>
<h3>Кроссбраузерность (Google Chrome, Firefox, InternetExplorer 8+, Safari, Opera)</h3>
<h3>Соблюдение стандартов валидности верстки W3C</h3>
</div>
<div class="right">
<h3>Интеграция скриптов</h3>
<h3>Подключение нестандартных шрифтов</h3>
<h3>Разработка Landing Page под ключ</h3>
</div>
</section><!--end service-->

<section class="service clearfix">
        	<h2>Услуги</h2>
            <hgroup class="left">
                <h3>Блочная HTML5, CSS3 вёрстка</h3>
                <h3>Кроссбраузерность (Google Chrome, Firefox, InternetExplorer 8+, Safari, Opera)</h3>
                <h3>Соблюдение стандартов валидности верстки W3C</h3>
            </hgroup>
            <hgroup class="right">
                <h3>Интеграция скриптов</h3>
                <h3>Подключение нестандартных шрифтов</h3>
                <h3>Разработка Landing Page под ключ</h3>
            </hgroup>  
        </section><!--end service-->

не забыть добавить в стили в список новых тегов display: block;

что касается ссылки на валидатор, то и картинка не та и ссылка ведет не туда...и валидатор не тот

<a rel="nofollow" href="http://validator.nu/?doc=http%3A%2F%2Fweb-verstka.com.ua%2F">
<img width="50" height="50" alt="Valid HTML5" title="Valid HTML5" src="http://motek.16mb.com/wp-content/uploads/2012/04/html5.png">
</a>

картинку себе скачайте и исправьте ошибки валидации

 

[stan077]

[member=motek],

для группировки заголовков используется тег <hgroup>

тег <hgroup> уже год как исключен из спецификации HTML5. - http://www.sitepoint.com/html5-hgroup-element-dropped/

что касается ссылки на валидатор, то и картинка не та и ссылка ведет не туда...и валидатор не тот

<a rel="nofollow" href="http://validator.nu/?doc=http%3A%2F%2Fweb-verstka.com.ua%2F">
<img width="50" height="50" alt="Valid HTML5" title="Valid HTML5" src="http://motek.16mb.com/wp-content/uploads/2012/04/html5.png">
</a>

картинку себе скачайте и исправьте ошибки валидации

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

 

[motek]

тег <hgroup> уже год как исключен из спецификации HTML5.

вот тут желательна ссылка на спецификацию, а не на блогера...

 

[stan077]

тег <hgroup> уже год как исключен из спецификации HTML5.

вот тут желательна ссылка на спецификацию, а не на блогера...

На оф. спеке. не смог найти(может уже удалили), единственное что нашел - http://lists.w3.org/Archives/Public/public-html/2013Apr/0060.html