Консультации и оценка качества html-вёрстки (бесплатно)

Del · 26.03.2012

_Andre_ сказав(ла):
Залил сюда andremarkup.ucoz.ру/index.html
andremarkup.ucoz.ру/images/for_PP.jpg

Как я уже писал выше - в общем - нормально, но до "хорошо" ещё ой как далеко.

Валидацию надо-бы поправить:
Тільки зареєстровані користувачі бачать весь контент у цьому розділі
При 1024 - горизонтальный скролл.
Почему не-иллюстративная графика в jpg а не png? Всякие фоны кнопочек и прочее? /images/side_title.jpg, posts_bg.jpg, main_bg.jpg, search_bg.jpg, head_menu.jpg.
Опять-таки - почему не на CSS3?
Аналогично, .menu li {display: inline} - хаки для IE6 нужно выносить.
.header_menu form {margin-left: 712px} - завтра пункт меню слеа переименуют, что делать будете?
input value="serch", search и это должен быть placeholder="search"
зачем clearfix у .content:after, .sidebar:after ?
Тільки зареєстровані користувачі бачать весь контент у цьому розділі
выведут из админки текст из визига внтурь <p> - и всё рухнет.
<a class="mac_link" href="#"><img alt="" src="images/arrow.png"></a> - что за презентационный код?
div.posts - а вот тут бы не помешал бы объединяющий логический wrapper для всех .posts, на лицо явлая отдельная сущность.
Опять-таки, почему не разметить всё в hAtom?
.posts p - аналогичная беда с текстом из визига.
.posts_button a - ну wtf?
зачем .all:before?
вначале должны идти префиксы, потом - официальные свойства, смотри Макеева:
Тільки зареєстровані користувачі бачать весь контент у цьому розділі
где h1?
jpg нужно сохранять в progressive

zoofun сказав(ла):
И вопрос к Del'у:
что ты думаешь по поводу js - который находится не в head, я имею ввиду "Grade A on Put JavaScript at bottom" есть какой то нюанс, почему так сплошь и рядом не делают?

2009 год
• у нас прогресс! обсуждают - нужна или не нужна валидность
• у "них" - CSS3, canvas, SVG, @font-face, video

2010 год
у нас по-прежнему обсуждают - нужна или не нужна валидность
...

AterDeus сказав(ла):
Сайт еще не закончен, думал, что посмотрите только дизайн и верстку.
Цены и статьи еще будут.

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

AterDeus сказав(ла):
Контактной информации в контактах не достаточно разве? Как раз хотел избавиться от подвала.

Нет, не достаточно.

AterDeus сказав(ла):
СЕО еще не занимался, буду и мета тэги делать и тайтл. Если H1 сделать невидимым, как в h2-h3 на страничке с контактами, не повлияет ли это на индексирование Гуглом?

Повлияет, нельзя делать невидимым, да и зачем?

AterDeus сказав(ла):
Все-таки сайт фотографа - поэтому главное тут фотографии, поэтому смысла нет заходить на такой сайт с iPad или используя 3G.

К концу этого года >50% посещений будут заходы с мобильных, люди ноуты не всегда покупают, берут мабилы/планшетники и выходят в инет...

_KurT_ сказав(ла):
Если будет возможность, то вот еще на проверку:

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

постараюсь в течении рабочей недели.

AterDeus · 26.03.2012

Поработал с СЕО. На странице с портфолио, если добавить тексты в альты картинок - это что-то даст?
Я так понимаю, мета тэг Keywords уже нигде не используется или лучше его добавить?

Del · 26.03.2012

AterDeus сказав(ла):
Поработал с СЕО.

гляну в течении рабочей недели.

AterDeus сказав(ла):
На странице с портфолио, если добавить тексты в альты картинок - это что-то даст?

Не в вашем случае.
Ну что вы туда напишете? У вас же не иллюстрации к товарам, не фото к статьям... а просто - примеры работ. Что там писать? Высококонкурентные "свадебное фото и бла-бла"? Я не сеошник, но думаю врядли будет толк от такого.

Вам над текстами надо работать, но это даже вторично - в первую очередь - над конверсией.

AterDeus · 26.03.2012

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

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

Del сказав(ла):
Вам над текстами надо работать, но это даже вторично - в первую очередь - над конверсией.

Это да, тексты и цены распишу и напечатаю визитки.
Стоит ли делать на сайте что-то типа книги отзывов?

Хаттабыч · 27.03.2012

Del: Сори за нескромный вопрос, но сколько же тогда будет стоить идеальная, по вашему мнению, вёрстка вот такого вышеозначенного макета

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

? Допустим только одна эта страница, или даже не цена, а колличество времени которое будет затрачено?

Del · 31.03.2012

Идеал недостижим в реальных рабочих процессах, излишний перфекционизм в 99% случаев просто не нужен:

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

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

Для личного блога вёрстки andremarkup.ucoz.ru/index.html - вполне достаточно и не нужно вообще ничего менять. Отображается кроссбраузерно? Не тормозит? На мабилках - ok? Ну и хватит.

Хорошая вёрстка стоит в диапазоне $200-300 - морда сайта, $50-70 - внутряк.

04/20 еду в Яндекс.Симферополь (головной frontend-офис) пообщаться, подедится опытом.

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

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

Уверен по ходу дела в общении куча интересных тем всплывёт.

Если есть "вопросы с ХФ" - давайте, передам

_KurT_ · 01.05.2012

Del сказав(ла):
Цитата:
Сообщение от _KurT_
Ну вроде отполировал. Заколебался уже всякие мелочи вычищать.

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

Ну раз полировал, то буду смело придираться ко всем мелочам Поехали!

4. Точки в слайдере:
Тільки зареєстровані користувачі бачать весь контент у цьому розділі
- это же слайдер? Почему тогда самого слайдера (автосмены блоков, с возможностью ручной смены кликом по точкам) - нет?

5. Микроформаты есть, похвально. А провалидировать:

8. Придумайте названия лучше чем wrapper и wrapper1 - от них веет безисходностью. Хороший верстальщик всегда назовёт блок так что никто и не подумает что он там ради презентационных целей. Аналогично - div.middle - ну хочется вывести в чистое поле, поставить к стенке и немножко расстрелять. Это ж .content! .underRightMenu - сегодня он under, а завтра - before. Переименовывать будете? И вообще зачем вам первый wrapper? Ради фона? Повесьте его на html!

11. Внутри заголовков выделять отдельные слова кошерней через em или strong.

13. не нравится что пункты списка в контенте разделены по два внури div.contentLine. Зачем? Это же один список. Почему? Нет же необходимости так делать.

14. для CSS неплохо бы юзать CSSDoc

15. дефолтные стили вы обнули, а выставить заново? Вот я вкинул дефолтный тестовый код от tripoli:
Тільки зареєстровані користувачі бачать весь контент у цьому розділі
Где буллеты? Где нумерация?

Спасибо за конструктивную критику, но у меня есть пару комментариев:
4. Сделал, только какой-то баг, в начале меняется одна картинка несколько раз, потом все нормально.
5. Сделал, Warnings же допускаются, правильно ?
И еще по поводу микроформатов, например в макете нет названия организации и валидатор соответсвенно говорит что "Warning: Missing required field 'name (fn)'". Я добавляю это поле и делаю ему display:none, так как в макете нет такого. После этого валидацию проходит, но правильно ли так делать ?
8. Да, у меня проблемы с придумыванием названий, я пользуюсь готовыми. Но все же, что плохого что он там для презентационных целей, этого требует макет, ну и название ведь со смыслом.
div.middle (сейчас div.all) - как раз таки не .content, ведь это вся средняя часть (вместе с сайдбаром), а контент это у меня article.content.
По поводу .underRightMenu и первого wrapper - согласен.
11. Я так понял это относится к h3.meaningfulPhrase, но там у меня выделяется только цветом. А не будет ли это не правильным семантически, ведь em-курсив, а strong-жирный, а у меня просто цветом выделяется!?!?
13. Я так предположил, что если в одном из списков будет больше пунктов, чем в соседнем, то что бы нижнее два отображали на одном уровне, так скаазать что б все не поехало.
14. Постараюсь использовать в будущем.
15. На самом деле я их выставил, просто именно про нумерацию и буллеты забыл

Еще у меня такой вопрос:
вот если есть возможность вырезать одну и туже картинки с прозрачными областями в *.png, и с непрозрачными в *.jpg, и соответсвенно с меньшим размером чем у *.png, это если судить не о маленькой картинке, а о какойм-то фоне или что-то вроде того. Так вот, есть ли какие-то рекомендации по этому поводу, ведь если в *png, то в будущем будет проще поменять фон например или еще что-то, то есть картинка не привязана к фону, ну а *.jpg соответсвенно меньше весит но более затруднительна поддержка в будущем, можно что-то посоветовать по этому поводу?

И если будет возможность:

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

Promise · 04.05.2012

Добрый день, Del! Я новичок в вопросах верстки. Изучаю полностью сама. Об ошибках мне сказать, к сожалению, некому. Можно я Вам вышлю сверстанную страничку, а Вы мне напишете замечания? Хотябы какие недочеты бросаются в глаза.

Del · 23.06.2012

Сорри, за долгую паузу, продолжим разбор полётов.

_KurT_ сказав(ла):
Если будет возможность, то вот еще на проверку:

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

Думаю к 8-мой странице повторятся по поводу необходимости верстки сайта соответствовать некоторым

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

уже хватит. И вам мне скучно будет. Давайте смотреть какие-то возможно неочевидные с первого взгляда вещи: и вам и мне интерестней будет, да? Ну а стандартные ошибки исправите сами (начиная с горизонтального скролла при 1024 и отсутствия указания viewport.

Например что для placeholder внутри формы поиска стоит использовать атрибут placeholder, а в js уже делать fallback для не-html5 браузеров. Аналогично - форма внизу, там и валидацию надо на required делать.
Вместо microformats уже стоит использовать microdata
Презентационные блоки типа bgSanta плохи самим своим фактом наличия, а презентационное имя - уж совсем нехорошо. Вообще презентационных имен по вёрстке много.
Вы уверенны что тут нужно использовать article а не section?

Дальше продолжим...

_KurT_ сказав(ла):
Тільки зареєстровані користувачі бачать весь контент у цьому розділі

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

_KurT_ сказав(ла):
5. Сделал, Warnings же допускаются, правильно ?
И еще по поводу микроформатов, например в макете нет названия организации и валидатор соответсвенно говорит что "Warning: Missing required field 'name (fn)'". Я добавляю это поле и делаю ему display:none, так как в макете нет такого. После этого валидацию проходит, но правильно ли так делать ?

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

Да, добавление невидимых полей для микроформатов - нормально.

8. Да, у меня проблемы с придумыванием названий, я пользуюсь готовыми.

откуда берете готовые? Я не увидел например классического "wrapper". Хороший стиль - ориентироваться на именования в микроформатах, в хороших методологиях (БЭМ), в популярных движках (Wordpress), распространенных библиотеках (bootstrap).

Но все же, что плохого что он там для презентационных целей, этого требует макет, ну и название ведь со смыслом.
div.middle (сейчас div.all) - как раз таки не .content, ведь это вся средняя часть (вместе с сайдбаром), а контент это у меня article.content.

тем что название бессмысленное. Это все равно что вы бы программили и называли переменные в своем коде по алфавиту а не по смыслу в camelcase.

11. Я так понял это относится к h3.meaningfulPhrase, но там у меня выделяется только цветом. А не будет ли это не правильным семантически, ведь em-курсив, а strong-жирный, а у меня просто цветом выделяется!?!?

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

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

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

Еще у меня такой вопрос:
вот если есть возможность вырезать одну и туже картинки с прозрачными областями в *.png, и с непрозрачными в *.jpg, и соответсвенно с меньшим размером чем у *.png, это если судить не о маленькой картинке, а о какойм-то фоне или что-то вроде того. Так вот, есть ли какие-то рекомендации по этому поводу, ведь если в *png, то в будущем будет проще поменять фон например или еще что-то, то есть картинка не привязана к фону, ну а *.jpg соответсвенно меньше весит но более затруднительна поддержка в будущем, можно что-то посоветовать по этому поводу?

если изображение предполагает необходимость прозрачности - делаем ее, иначе - нет, экономим траффик (серьезно, очень актуально: выход с мобильных через GPRS, 3g в отсутствии выделенки, не только в ебенях, но и в дороге).
Если фон под изображением меняется или двигается, в общем условия верстки требуют - надо прозрачность, если картинка с наложением будет менятся в движке (из админки например) - надо, ну ит.д., тут вы должны на здравый смысл полагатся.
А если это фон который будет менять только верстальщик, то надо оптимизировать, делать matte и png8 или вообще jpg.

Promise сказав(ла):
Добрый день, Del! Я новичок в вопросах верстки. Изучаю полностью сама. Об ошибках мне сказать, к сожалению, некому. Можно я Вам вышлю сверстанную страничку, а Вы мне напишете замечания? Хотябы какие недочеты бросаются в глаза.

присылайте сюда ссылочку и макет, ну и напишете что волнует, о чем хотите поговорить

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

_KurT_ · 02.07.2012

Del сказав(ла):
Думаю к 8-мой странице повторятся по поводу необходимости верстки сайта соответствовать некоторым стандартным требованиям уже хватит. И вам мне скучно будет. Давайте смотреть какие-то возможно неочевидные с первого взгляда вещи: и вам и мне интерестней будет, да? Ну а стандартные ошибки исправите сами (начиная с горизонтального скролла при 1024 и отсутствия указания viewport.

Да, согласен, viewport исправил, а скролл при 1024px это уже задумка макета, он фиксированный и рассчитан на разрешения от 1280px.

Del сказав(ла):
Вы уверенны что тут нужно использовать article а не section?

Да, конечно section.

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

Сделал, что скажите ?

У меня тут проблемы с кроссбраузерностью в новом макете.

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

В IE7,8 странно работает горизонтальный слайдер, не обрезается нужная его часть, вернее визуально она не обрезается, но физически вроде как образается, так как мышка не меняет свое состояние на pointer, так сказать в обрезанных местах. Да и в IE8 он хоть как-то дивигается, а в IE7 двигаются только названия, а сами картинки не двигаются.
Селекты в форме тоже не работают, в IE8 они кликабельны, но не выбираются, а в IE7 даже не кликабельны.
И еще в IE7 не работают поля для выбора файла в форме(последние два поля в форме), я исправил это через JQuery, но хотелось бы знать можно ли без этого.
Там много и других недоделок, но пока меня интересует только кроссбраузерность, можете что-то подсказать по этому поводу?

Del · 06.07.2012

_KurT_ сказав(ла):
У меня тут проблемы с кроссбраузерностью в новом макете.

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

В IE7,8 странно работает горизонтальный слайдер, не обрезается нужная его часть, вернее визуально она не обрезается, но физически вроде как образается, так как мышка не меняет свое состояние на pointer, так сказать в обрезанных местах. Да и в IE8 он хоть как-то дивигается, а в IE7 двигаются только названия, а сами картинки не двигаются.
Селекты в форме тоже не работают, в IE8 они кликабельны, но не выбираются, а в IE7 даже не кликабельны.
И еще в IE7 не работают поля для выбора файла в форме(последние два поля в форме), я исправил это через JQuery, но хотелось бы знать можно ли без этого.
Там много и других недоделок, но пока меня интересует только кроссбраузерность, можете что-то подсказать по этому поводу?

Проблема связана с PIE.htc, я уже упоминал про такое на 4-той странице, вот смотрите как рендерятся ваши красивости:

Попробуйте задать position: relative; для .scrollBox

А вообще я бы ни для слайдера ни для элементов форм PIE не тулил, это же тормоза и куча проблем, лучше картинками fallback для старых IE сделайте.

gleb83 · 07.07.2012

Доброго времени суток,
нужен совет, как правильно сделать меню,

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

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

Del · 08.07.2012

AterDeus сказав(ла):
Поработал с СЕО.

TITLE и H1 появились, но это капля в море. На сайте по-прежнему нет контактов, цен, описания что и как.

AterDeus сказав(ла):
Все-таки сайт фотографа - поэтому главное тут фотографии

Вам надо показать свои работы или продать услугу?

AterDeus сказав(ла):
На странице с портфолио, если добавить тексты в альты картинок - это что-то даст?

В дополнение к моему ответу выше, вот рекомендации по картинкам на сайте:

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

AterDeus сказав(ла):
Я так понимаю, мета тэг Keywords уже нигде не используется или лучше его добавить?

Почти не используется:

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

,

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

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

Кстати вы читали Рекомендации Гугла и Яндекса для ~~SEOшников~~ вебмастеров? Почитайте, полезно, кратно и по-делу:

Тільки зареєстровані користувачі бачать весь контент у цьому розділі
Тільки зареєстровані користувачі бачать весь контент у цьому розділі

AterDeus сказав(ла):
Стоит ли делать на сайте что-то типа книги отзывов?

Добавьте кнопку

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

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

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

для страницы Услуг например.

_KurT_ сказав(ла):
а скролл при 1024px это уже задумка макета, он фиксированный и рассчитан на разрешения от 1280px.

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

Del сказав(ла):
Тільки зареєстровані користувачі бачать весь контент у цьому розділі

не нравится что пункты списка в контенте разделены по два внури div.contentLine. Зачем? Это же один список. Почему? Нет же необходимости так делать.

_KurT_ сказав(ла):
Сделал, что скажите ?

Ну другое ж дело совсем! :клас:

gleb83 сказав(ла):
нужен совет, как правильно сделать меню,

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

А в чем именно проблема, что не получается?

gleb83 сказав(ла):
ну и вообще, раскажите как тут все неправильно )))

Главная проблема - вы верстаете, разделяя элементы страницы на "кирпичики", расставляете их друг за другом, float: left, float: left как раньше td-td,td-td.

Дело даже не в float для позиционирования большинства блоков (хотя так разметку не строят), а в том как вы видите сайт. Вы пока что его видите визуально, а не по его логике, не по содержимому, цепляетесь за внешнее разделения сайта на "кусочки", а надо смотреть не на то как выглядит элемент, а что он делает.
Классический пример - блок #line_footer - у вас он из двух элементов: лого компании, вложенное внутрь линии. Вы так и сверстали: <div линия><div лого /></div> А если по правильному - этого блока вообще не существует - это лишь визуальная реализация отделения подвала от основной части сайта. Т.е. это должно быть background: (../img/bg-footer__top.png) top no-repeat;

Я тоже так верстал, когда пришёл в коммерческую разработку и верстка из хобби стала профессией. На одном из первых моих сайтов (а может и первом, это была зима 2006/2007), была такая картинка в шапке:

Я так по визуальным блокам и бил

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

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

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

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

gleb83 · 09.07.2012

А в чем именно проблема, что не получается?

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

Del · 09.07.2012

gleb83 сказав(ла):
в ие8 не получается а в ие7 даже и смотреть не стал,

А в чём выражается баг? Я посмотрел в IE9 в режиме IE8 - всё ok, также как в Firefox.

gleb83 · 10.07.2012

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

metaller92 · 11.07.2012

Отлично зная HTML4, CSS2 и немножко зная CSS3 легко ли досконально научится верстать на HTML5,CSS3?

Del · 13.07.2012

gleb83 сказав(ла):
в ие7 плывут картинки в меню,

это потому что ссылки в меню имеют {display: table-cell;}, а IE7 такое не понимает. Пропишите так: {display: block; display: table-cell;} - тогда вначале применится block, а потом те браузеры что знают table-cell - применят его.

А вот выравнивание по вертикали по людски особо не сделаешь в IE7, но на такое можно забить.

metaller92 сказав(ла):
Отлично зная HTML4, CSS2 и немножко зная CSS3 легко ли досконально научится верстать на HTML5,CSS3?

да

Del · 12.08.2012

На WST выложили видео из секции фронтенд РИТ 2012:

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

А ещё вот замечательные видео с Яндекс.Субботника 2012 в Киеве:

Тільки зареєстровані користувачі бачать весь контент у цьому розділі

vanya_vanya · 13.08.2012

w3c validation service в помощь

Консультации и оценка качества html-вёрстки (бесплатно)

Вкладення