Точка, точка, запятая - вышла версточка кривая

[Bassline]

Сверстал страницу девятого уровня, по одному небезызвестному макету.

Проверял пиксель перфектом, в пределах одного метра все более-менее сходится.

Больше интересует кривость реализации.

 

Особо безнадежные моменты:

1. HTML5 теги. Что не на своем месте?

2. Квадратная деградация в IE. Можно ли ее назвать изящной или нужно поизвращаться?

3. Тег h1. Так и не придумал куда его воткнуть.

4. Форма с чекбоксами и горизонтальные менюшки. Кажется, что все сделано через одно место.

 

Большая просьба оценить все это безобразие.

[Ludwig Voltman]

По-моему очень круто! А что за система организации стилей? По стилистике похожа на АНБ.

1) Контактный телефон вверху (We can help. Email or call +1-570-708-8788) я бы обернул в address

2) Внутри структурных тэгов (section, например) заголовки начинаются с h1. По крайней мере, так делают во всех примерах, которые я видел, хотя это создает дополнительные сложности со стилизацией заголовков

3) Зачем оборачивать текст div, если внутри текст? Может, лучше p?

4) По деградации: я посмотрел в IE7, все отображается хорошо.

5) В h1 я бы обернул логотип

Edited December 10, 2013 by Ludwig Voltman

[ShumNo]

h1 чисто для продвижения - что продвигаем то и оборачиваем
пользователю все равно в чем заголовок в h1 или span

[cyklop77]

мне понравилось

 

а что означает вездесущий префикс b- , можно узнать?

[Ludwig Voltman]

b- значит блок. Такой префикс используется в БЭМ и АНБ. В БЭМ очень полезен, когда большой сайт постепенно переводят на эту систему: видно, в каких частях кода новая методология используется, а в каких нет. Здесь в верстке он отличает блоки от, например, глобальных стилей (с префиксом g-)

http://vitaly.harisov.name/article/independent-blocks.html

Edited December 10, 2013 by Ludwig Voltman

[mrnobody]

мне понравилось

 

а что означает вездесущий префикс b- , можно узнать?

Наверное box

[SelenIT]

3. Тег h1. Так и не придумал куда его воткнуть. 4. Форма с чекбоксами и горизонтальные менюшки. Кажется, что все сделано через одно место.

Про h1 поддерживаю мысль, что название этой страницы выражено логотипом.

 

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

 

В горизонтальных менюшках смущает, что пропадает место под отступы, тогда как текст умещается практически впритык (добавится одно слово текста в любую из ссылок — и привет вторая строка). Я бы рассмотрел варианты CSS-таблицы либо чего-то такого. А то и флексбоксов с деградацией до нынешнего варианта в старье.

 

Еще я бы не делал заголовки списков их элементами (<li class="title">), а поставил бы отдельные h3 какие-нибудь. Не стоит экономия одной обертки такого насилия над логикой.

 

Внутри структурных тэгов (section, например) заголовки начинаются с h1. По крайней мере, так делают во всех примерах, которые я видел

Так можно в HTML5, но знатоки советуют этим не злоупотреблять, т.к. 1) не все браузеры/читалки и т.п. освоили новый алгоритм структуры заголовков, 2) у многих поисковиков по-прежнему особо трепетное отношение к h1, и лучше, чтобы в нем было только самое-самое главное.

[Zverushka]

Внутри структурных тэгов (section, например) заголовки начинаются с h1. По крайней мере, так делают во всех примерах, которые я виде

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

[cyklop77]

я обычно всё таки ставлю много h1(по стандарту html5  то есть), но при этом обязательно присваиваю класс(например '.h1') и все css-правила прописываю через него. то есть при желании семантику можно изменить очень легко. верстальщику думать про заморочки сеошников(тем более у сеошников часто подходы могут отличаться) не стоит

[Xenia Wanger]

Раза три открывала-закрывала ссылку, думая, что предоставленная верстка не открывается и это просто страница хостинга) Очень круто!

Edited December 11, 2013 by Xenia Wanger

[Bassline]

1) Контактный телефон вверху (We can help. Email or call +1-570-708-8788) я бы обернул в address

 

Да. наверное, стоит.

 

 

2) Внутри структурных тэгов (section, например) заголовки начинаются с h1.

 

Читал об этом, но тоже думаю, что пока рано.

 

 

3) Зачем оборачивать текст div, если внутри текст? Может, лучше p?

 

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

 

 

5) В h1 я бы обернул логотип

 

 

Про h1 поддерживаю мысль, что название этой страницы выражено логотипом.

 

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

 

 

Чекбоксы, имхо, можно было бы чисто для удобства сгруппировать в плавающие столбцы по 4 шт., аналогично спискам ссылок в подвале.

 

Просто не хотелось увеличивать вложенность в этом блоке, она там и так немаленькая. Где-то читал, что большая вложенность - плохо.

 

 

В горизонтальных менюшках смущает, что пропадает место под отступы, тогда как текст умещается практически впритык (добавится одно слово текста в любую из ссылок — и привет вторая строка). Я бы рассмотрел варианты CSS-таблицы либо чего-то такого. А то и флексбоксов с деградацией до нынешнего варианта в старье.

 

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

 

 

Еще я бы не делал заголовки списков их элементами (<li class="title">), а поставил бы отдельные h3 какие-нибудь. Не стоит экономия одной обертки такого насилия над логикой.

 

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

 

 

А что за система организации стилей?

 

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

В итоге удалил большинство классов у элементов и дал им простые имена. Оставил только названия блоков спрефиксом b-, чтобы легче было визуально находить начало блока в коде, и отличать контейнеры блоков от их элементов. Чтобы хоть как-то ограничить радиус действия стилей внутри блока - начинаю каждый селектор в таблице стилей с имени блока, и визуально тоже легче ориентироваться. Ну и модификаторам дал префикс m-, например, вместо "b-menu_main" будет "m-main", чтобы короче было.

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

[SelenIT]

столько статей (особенно сеошных) не рекомендовали ни сам тэг ссылкой оборачивать, ни внутрь вставлять

Я встречал только исследование 2010 года, где влияние сочетания заголовка со ссылкой, да, признавалось отрицательным, но на уровне ниже существенной значимости. Вот картинка в заголовке, да, по тому исследованию — не ахти (честно говоря, эту страницу я только сейчас рассмотрел). С другой стороны, совсем без главного заголовка еще хуже, а больше его тут особо никуда и не приткнешь. Вообще SEO и логика разметки нередко друг другу противоречат, и, имхо, отталкиваться лучше всё-таки от логики (хотя бы потому, что она не так часто меняется, как критерии поисковиков), а SEO-проблемы решать по мере появления. В конце концов, поисковики становятся всё умнее и всё ближе подходят к идеалу, чтобы первые места в выдаче доставались хорошим страницам, удобным для пользователя, а не накрученных сомнительной магией...

 

 

большая вложенность - плохо

Слишком большая вложенность — плохо. 8 вложенных оберток ради стилизации сторон и уголков (бывало такое в до-border-radius-ную эпоху) — однозначное зло для рендерера. Но размещение 4 больших float-нутых блоков вполне может оказаться легче для рендерера, чем россыпи из 20 мелких (впрочем, надо тестировать).

 

 

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

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

 

 

Так не люблю использовать эти обертки

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

 

 

сделать все с минимальным количеством тегов.

Всё хорошо в меру, в т.ч. и упрощение. Иначе можно дойти до абсурда типа 1 тега <pre> с кучей логически неструктурированного текста . Как говорил Эйнштейн, «всё нужно делать настолько просто, насколько это возможно, но не проще».

[Bassline]

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

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

Спасибо за советы!

 

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

Edited December 11, 2013 by Bassline

[Ludwig Voltman]

Bassline, тот макет, который ты верстал -- он откуда? Я просто когда-то давно на каком-то сайте видел список макетов для верстки по нарастающей сложности. Там вроде даже ТЗ было. Этот макет не с того сайта?

[Bassline]

Bassline, тот макет, который ты верстал -- он откуда? Я просто когда-то давно на каком-то сайте видел список макетов для верстки по нарастающей сложности. Там вроде даже ТЗ было. Этот макет не с того сайта?

 

Этого сайта уже давно нет, остались только файлы в веб-архиве. Вот ссылка, если нужно https://web.archive.org/web/20130306030843/http://divhack.com/downloads/study/9/9.zip