http://www.webmolot.com/

[webmolot]

Всем привет!

homm, к тебе обращаюсь... посмотри мое первое сообщение

Предлагаю Вашему вниманию новую версию своего сайта www.webmolot.com . Сайт сделан в стиле web 2.0. Большое внимание уделялось контенту, который расчитан на целевую аудиторию. Сайт будет интересен как потенциальным заказчикам html-верстки так и начинающим html-верстальщикам. В разделе РЕЦЕПТЫ я делюсь своими мыслями и приемами верстки.

Буду рад услышать вашу оценку данному рессурсу. Принимаются все замечания и преложения. Спасибо!

что ты прицепился к dailos-m.ru , этот сайт когда то давно я верстал, после меня, как я узнал недавно, его дорабатывал какой то верстальщик, и конечно же я не отвечаю за программирование этого рессурса.

Хотелось бы получить хорошую критику именно webmolot.com

Пока из всех замечаний я уловил 2:

- сделать более темным текст на белом фоне (учел и сделал)

- ссылки на гл. странице xhtml и css на работах портфолио не работают... (в ближайшее время вывешу на показ свое новое портфолио и они заработают)

Спасибо за эти замечания maddogrts и homm !

[maddogrts]

Наверно стоит сделать еще чуть потемнее но это уже дело вкуса

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

[yopopt]

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

1. Текст

Слишком светлый. Если основной текст ещ? можно прочитать, то выполненные белым цветом надписи внизу страницы почти нереально. Зачем при таком блеклом цвете используется шрифт с засечками? Наверно чтобы было ещ? труднее догадаться что же автор пишет... Тем более "Georgia".

По самому тексту. Не надо "HTML" писать с большой буквы как название чего-то. Это не слово, а аббревиатура. Слишком много разных видов выделений в тексте: курсивное, полужирное начертание; кавычки. В текстах много семантических ошибок, но с этим у меня самого плохо, потому конкретно указывать не буду. Просто прочитайте ещ? разок свой текст.

2. Дизайн

Светленько, симпатично, мне нравится. Интересно смотрятся радужные полоски и подсказки к примерам работ. Странно что их нет на странице с портфолио. Само портфолио выглядит вполне достойно и это Вам плюс. А вот минус - это адрес на gmail. Лучше сделайте что-нибудь типа letter-box собака webmolot.com Большой минус что с отключенными картинками сайт практически переста?т существовать. Большая част ссылок становится невидимками.

3. Код

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

<li><a target="_blank" href="http://www.flingie.com" class="item">

<img border="0" width="222" src="/portfolio/flingie_com.jpg" alt="xHtml/Css верстка сайтов" height="170" /><em>

<span class="top"></span>

<strong>Сайт знакомств Flingie.com. Удобная навигация, легкое общение, приятная атмосфера.</strong>

<span class="bottom"></span>

</em>

</a></li>

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

4. Технологии

Вам не жалко траффик посетителя? Отдавайте страницу в сжатом виде (gzip). Зачем Вы на каждой странице заставляете его загружать картинки с логотипом и "Заказать в?рстку"? Вс? что там меняется - это цвет. Не логичней ли в таком разе создать полупрозрачный рисунок png, где нужный цвет будет замен?н на прозрачный, а оттенки его создаются глубиной этой самой прозрачности, сам же цвет подкладывается под рисунок фоном (backgraund-color)? Если так не можете, то хотя-бы сделайте один рисунок с несколькими изображениями логотипа и на разных страницах меняйте их с помощью background-position.

Вс?, глазки мои устали.

[tigrenok]

Мне понравилось! Особенно эта цветная полосочка сверху - очень оригинально смотрится :-)

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

В общем хорошо!

Успехов!

[maddogrts]

Очень оригинально )))) http://www.easyeyes.ru/

[webmolot]

Всем спасибо, особенно yopopt!

Вот уж человек постарался и много всего написал и, кстати, многое в тему.

1.По написанию html, вы правы, не нужна большая буква.

2.С выключеной графикой и вправда ссылки некоторые становятся невидимыми, нужно проработать этот момент.

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

4.С png картинками Вы немного перегнули. Я очень люблю этот формат, и стараюсь его использовать, где это необходимо. В данном случае его использование считаю неоправданным по следующим причинам:

- не получится передать такой градиент, если делать прозрачный png

- вес картинки увеличится еще больше... иконка ЗАКАЗАТЬ ВЕРСТКУ в формате png c альфа-каналом весит 24KB в формате gif - 8KB

- объединение в одну картинку и использование background-position не оправдано в данном случае, т.к. картинки довольно большие для этого приема. В этом случае картинка увеличиться в 6 раз (48KB)... а это очень замедлит загрузку главной страницы, что недопустимо, т.к. если у пользователя главная страница будет долго грузиться, то он просто не пойдет на внутренние.

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

[webmolot]

maddogrts , спасибо за ссылку

вот же оказывается как сложно придумать что то оригинальное. На другом конце света найдется такой же "креативист", которому придет в голову точна такая же идея. Жалко, но все равно у меня лучше смотрится

[yopopt]

Всем спасибо, особенно yopopt!

Всегда пожалуйста.

4.С png картинками Вы немного перегнули. Я очень люблю этот формат, и стараюсь его использовать, где это необходимо. В данном случае его использование считаю неоправданным по следующим причинам:

По порядку:

- не получится передать такой градиент, если делать прозрачный png

Градиент можно передать любой, особенно градиент из индексированного изображения.

- вес картинки увеличится еще больше... иконка ЗАКАЗАТЬ ВЕРСТКУ в формате png c альфа-каналом весит 24KB в формате gif - 8KB

Удивился и проверил: да, картинка большая получилась, ~15Кб, но пользователю прид?тся загружать один раз 15, а не шесть раз 8Кб.

- объединение в одну картинку и использование background-position не оправдано в данном случае, т.к. картинки довольно большие для этого приема. В этом случае картинка увеличиться в 6 раз (48KB)... а это очень замедлит загрузку главной страницы, что недопустимо, т.к. если у пользователя главная страница будет долго грузиться, то он просто не пойдет на внутренние.

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

В любом случае эта большая картинка весит меньше чем шесть маленьких. Да и количество запросов на сервер уменьшается в шесть раз.

Потратил немного времени и сделал пример Вашего логотипа в формате png с альфа-каналом: http://vsevsegdaok.net/test/webmolot_logos.html Получилось немного топорно, но если иметь исходник и потратить больше времени, то можно сделать аккуратнее. В итоге получилось что вместо 3,7*6Кб пользователю надо загружать только 7,5Кб, а пользователям IE6 ещ? килобайт фиксов. А также, опять таки, уменьшается количество запросов на сайт.

P. S. Фикса для IE6 не писал, так что смотрите страничку по адресу выше из других браузеров.

[webmolot]

yopopt, спасибо!

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

[Вадим]

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

Так же интересует как ты сделал ?Блок с портфолио?. Офигенно смотрится!

Ссылка ?читать дальше? - прибейте е? к одному из элементов. Когда смотришь страницу сверху, то понятно к какому заголовку относится ссылка, когда смотришь в середине, то начинаешь немного путаться, ощущать не комфортно. Это типичная ошибка дизайнеров. Просто поднимите ссылку на 2-4px к тексту/заголовку.

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

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

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

Ссылка ?заказать верстку? сделайте на обычной странице, как и весь текст. SVG ? это круто, но лишне. Вообще на сколько я владею информацией 50% фирм работают на *nix системах, а там брОузеры вообще ничего не поддерживают. Так что есть риск потерять клиента. С другой стороны, если ваши заказчики ? web-студии, то волноваться не о чем, они оценят ваши познания в программировании!

Раздел ?Отзывы? несерь?зный. Да, сайт не консервативный, это сразу видно. Но рука редактора явно не трогала отзывы. Так дело не пойдет, просто данный раздел вызывал (лично у меня) улыбку и здоровый смех. Вообще это полезно. Смотрите сами ? смотря КТО ваши заказчики.

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

Резюме: общая оценка: 5 -. А вообще сайт супер, таких всего в RU зоне 2-3% максимум! Так что держать курс на хороший и удобный дизайн!

Спасибо, что дочитали до конца. Надеюсь мои слова помогут.

В данном посте не было задачи обидеть автора или как-то унизить достоинство третьих лиц.

[webmolot]

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

Логику новигации понять можно после нескольких переходов. Активный раздел всегда вынесен на передний план и подсвечен более насыщенным цветом. Название раздела на закладке дублируется названием заголовка (думаю, не стоит заголовок выделять таким же цветом, визуально не будет смотреться). Так же все навигационные элементы активного раздела "перекрашиваются в фирменный цвет", что так же помогает понять, в каком разделе находится пользователь. Согласен, есть небольшая нестыковка с первой закладкой (главная), т.к. она тоже вынесена на первый план во всех разделах кроме раздела ПОРТФОЛИО. Но все же, я думаю, после 2-3 переходов пользователь освоится и будет чувствовать себя комфортно.

По блоку портфолио стучи в асю, расскажу как я его сделал.

С "читать далее" согласен, нужно подкорректировать.

Само понятие ВЕРСТКА знает не каждый человек. Большинство пользователей даже не подозревают как делаются сайты. Мой сайт расчитан на целевую аудиторию - на заказчиков и начинающих верстальщиков. Если уже человек зашел на мой сайт и хочет заказать верстку, то с оновными понятиями, я думаю, он должен быть знаком. Тем более их будет знать начинающий верстальщик. Жалко, что у меня не хватило времени окончить журфак, писал бы более интересно.

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

Раздел ОТЗЫВЫ мне кажется очень даже серьезным, т.к. потенциальный заказчик может увидеть мнения моих клиентов.

Спасибо за хороший анализ сайта и приятную оценку!

[Dimitry Wolotko]

Я думаю, заказчик будет рад увидеть себя в топе и это будет его стимулировать делать больше заказов

Что за бред?

[webmolot]

ну я бы так не сказал. Ссылка с главной страницы сайта еще ни кому не помешала. И все остаются только в плюсе.

[Dimitry Wolotko]

У тебя тысячи уников в сутки что ли? Иначе с какого рожна им есть смысл размещать заказы у тебя, дабы попасть на главную?

[webmolot]

Еще раз повторюсь:

"Ссылка с главной страницы сайта еще ни кому не помешала. И все остаются только в плюсе."

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

[polecat]

maddogrts, жжете)

[maddogrts]

webmolot ?

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

http://webmolot.com/work/ вот здесь мне кажется наиболее близка к реализации моя мысль (однако здесь те же "проблемы" что и на всем сайте).

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

Мелочи не в счет, но мне кажется у вас хромает стилистика и подача текста.

Понравившиеся сайты из портфолио, dell-computers, грация (классная идея насчет приближения, раз 5 посмотрел), арко.

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

И кстати, мало берет за работу, не хочу показаться странным, но с такими отзывами 50 долларов ? это смешно даже за одну страницу

А вы все сами делаете (имеется ввиду что вы делаете и что делаете не вы, а что делают другие люди )?

Кстати про сайт который я привел в пример, сделан под руководством моего коллеги ? приходиться думать, мало ли..., что?, полосочки вы у него взяли (шучу ), или вы одинокого мыслите.

[webmolot]

Неоднозначно как то звучит: "мне ваш сайт не нравится", "нет сайт отличный, красивый, делал явно проффесионал."

А вы все сами делаете (имеется ввиду что вы делаете и что делаете не вы, а что делают другие люди )?

Я верстальщик поэтому логично, что я верстаю, а другие люди делают все остальное, что нужно для создания сайтов

Эту полосочку, как и все остальные элементы сайта, прописал я изначально в ТЗ а дизайнер, который рисовал макет моего сайта очень красиво реализовал мою задумку.

А за высказывание спасибо, maddogrts!

[Sotnikov]

ааа.. так ты не рисуешь?)

был бы вдвойне молодцом, если бы рисовал вс? это сам и сам верстал!

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

В общем мне нра!

[webmolot]

Спасибо, Sotnikov

Хедер я перенес в конец страницы, чтобы основной контент был вверху (для SEO)