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

  • 🔴 21:28 Повітряна тривога в Харків.обл.
  • #141
_Andre_ сказав(ла):
Залил сюда andremarkup.ucoz.ру/index.html
andremarkup.ucoz.ру/images/for_PP.jpg
Натисніть, щоб розгорнути...
Как я уже писал выше - в общем - нормально, но до "хорошо" ещё ой как далеко.

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



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

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



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


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


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


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

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

Вкладення

  • markup-main-diff-usa-russia.png
    79.5 КБ · Перегляди: 583
Останнє редагування:
  • 🔴 21:28 Повітряна тривога в Харків.обл.
  • #142
Поработал с СЕО. На странице с портфолио, если добавить тексты в альты картинок - это что-то даст?
Я так понимаю, мета тэг Keywords уже нигде не используется или лучше его добавить?
 
  • 🔴 21:28 Повітряна тривога в Харків.обл.
  • #143
AterDeus сказав(ла):
Поработал с СЕО.
Натисніть, щоб розгорнути...
гляну в течении рабочей недели.

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

Вам над текстами надо работать, но это даже вторично - в первую очередь - над конверсией.
 
  • 🔴 21:28 Повітряна тривога в Харків.обл.
  • #144
Да вот хотелось бы вплотную заняться версткой, поэтому интересуют все подробности.
Это да, тексты и цены распишу и напечатаю визитки.
Стоит ли делать на сайте что-то типа книги отзывов?
 
  • 🔴 21:28 Повітряна тривога в Харків.обл.
  • #145
Del: Сори за нескромный вопрос, но сколько же тогда будет стоить идеальная, по вашему мнению, вёрстка вот такого вышеозначенного макета
⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.
? Допустим только одна эта страница, или даже не цена, а колличество времени которое будет затрачено?
 
  • 🔴 21:28 Повітряна тривога в Харків.обл.
  • #146
Идеал недостижим в реальных рабочих процессах, излишний перфекционизм в 99% случаев просто не нужен:
  • ни клиенту (и так всё отлично и зачем тратить больше времени и денег),
  • ни разработчикам
  • ни даже самим пользователям (большинство просто не заметит никакой разницы)

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

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

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



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

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

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

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

Если есть "вопросы с ХФ" - давайте, передам
 
Останнє редагування:
  • 🔴 21:28 Повітряна тривога в Харків.обл.
  • #147

Спасибо за конструктивную критику, но у меня есть пару комментариев:
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 соответсвенно меньше весит но более затруднительна поддержка в будущем, можно что-то посоветовать по этому поводу?

И если будет возможность:
⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.
 
Останнє редагування:
  • 🔴 21:28 Повітряна тривога в Харків.обл.
  • #148
Добрый день, Del! Я новичок в вопросах верстки. Изучаю полностью сама. Об ошибках мне сказать, к сожалению, некому. Можно я Вам вышлю сверстанную страничку, а Вы мне напишете замечания? Хотябы какие недочеты бросаются в глаза.
 
  • 🔴 21:28 Повітряна тривога в Харків.обл.
  • #149
Сорри, за долгую паузу, продолжим разбор полётов.

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

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

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


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

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

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

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

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

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

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

присылайте сюда ссылочку и макет, ну и напишете что волнует, о чем хотите поговорить Стандартные вещи в своей верстке я надеюсь вы уже проверили? Соответствие макету, валидация, кроссбраузерность включая просмотр в стандартных разрешениях и на мобильных устройствах (в первую очередь iOS) ну и т.д.
 
Останнє редагування:
  • 🔴 21:28 Повітряна тривога в Харків.обл.
  • #150
Да, согласен, viewport исправил, а скролл при 1024px это уже задумка макета, он фиксированный и рассчитан на разрешения от 1280px.
Del сказав(ла):
Вы уверенны что тут нужно использовать article а не section?
Натисніть, щоб розгорнути...
Да, конечно section.
Сделал, что скажите ?

У меня тут проблемы с кроссбраузерностью в новом макете.
⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

В IE7,8 странно работает горизонтальный слайдер, не обрезается нужная его часть, вернее визуально она не обрезается, но физически вроде как образается, так как мышка не меняет свое состояние на pointer, так сказать в обрезанных местах. Да и в IE8 он хоть как-то дивигается, а в IE7 двигаются только названия, а сами картинки не двигаются.
Селекты в форме тоже не работают, в IE8 они кликабельны, но не выбираются, а в IE7 даже не кликабельны.
И еще в IE7 не работают поля для выбора файла в форме(последние два поля в форме), я исправил это через JQuery, но хотелось бы знать можно ли без этого.
Там много и других недоделок, но пока меня интересует только кроссбраузерность, можете что-то подсказать по этому поводу?
 
Останнє редагування:
  • 🔴 21:28 Повітряна тривога в Харків.обл.
  • #151
Проблема связана с PIE.htc, я уже упоминал про такое на 4-той странице, вот смотрите как рендерятся ваши красивости:



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

А вообще я бы ни для слайдера ни для элементов форм PIE не тулил, это же тормоза и куча проблем, лучше картинками fallback для старых IE сделайте.
 
  • 🔴 21:28 Повітряна тривога в Харків.обл.
  • #152
Доброго времени суток,
нужен совет, как правильно сделать меню,
⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

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

 
  • 🔴 21:28 Повітряна тривога в Харків.обл.
  • #153
AterDeus сказав(ла):
Поработал с СЕО.
Натисніть, щоб розгорнути...
TITLE и H1 появились, но это капля в море. На сайте по-прежнему нет контактов, цен, описания что и как.

AterDeus сказав(ла):
Все-таки сайт фотографа - поэтому главное тут фотографии
Натисніть, щоб розгорнути...
Вам надо показать свои работы или продать услугу?

В дополнение к моему ответу выше, вот рекомендации по картинкам на сайте:
⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.


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

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

AterDeus сказав(ла):
Стоит ли делать на сайте что-то типа книги отзывов?
Натисніть, щоб розгорнути...
Добавьте кнопку
⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.
- это самый лучший отзыв, демонстрация удовлетворения клиентов и мерка популярности.
В чистом виде отзывы - хорошо добавлять как
⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.
для страницы Услуг например.



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

_KurT_ сказав(ла):
Сделал, что скажите ?
Натисніть, щоб розгорнути...
Ну другое ж дело совсем!



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

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), была такая картинка в шапке:

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

Начните с валидации сайта и пройдитесь дальше по
⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.
, попробуйте выполнить все его пункты. Вам прийдётся ихзменить подход к вёрстке, иначе соблюсти их будет очень сложно.
 
Останнє редагування:
  • 🔴 21:28 Повітряна тривога в Харків.обл.
  • #154
А в чем именно проблема, что не получается?
Натисніть, щоб розгорнути...
в ие8 не получается а в ие7 даже и смотреть не стал,
а версткой занимаюсь исключительно для себя, хобби
(может когда сменю работу)
 
  • 🔴 21:28 Повітряна тривога в Харків.обл.
  • #156
в ие7 плывут картинки в меню,
 
  • 🔴 21:28 Повітряна тривога в Харків.обл.
  • #157
Отлично зная HTML4, CSS2 и немножко зная CSS3 легко ли досконально научится верстать на HTML5,CSS3?
 
  • 🔴 21:28 Повітряна тривога в Харків.обл.
  • #158
gleb83 сказав(ла):
в ие7 плывут картинки в меню,
Натисніть, щоб розгорнути...
это потому что ссылки в меню имеют {display: table-cell;}, а IE7 такое не понимает. Пропишите так: {display: block; display: table-cell;} - тогда вначале применится block, а потом те браузеры что знают table-cell - применят его.

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

да
 
  • 🔴 21:28 Повітряна тривога в Харків.обл.
  • #159
На WST выложили видео из секции фронтенд РИТ 2012:
⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.

А ещё вот замечательные видео с Яндекс.Субботника 2012 в Киеве:
⚠ Тільки зареєстровані користувачі бачать весь контент та не бачать рекламу.
 
  • 🔴 21:28 Повітряна тривога в Харків.обл.
  • #160
w3c validation service в помощь
 
Ви повинні увійти або зареєструватися, щоб відповісти.
Меню
Увійти