html5 - адаптивная верстка

[gibigate]

[ссылка удалена]

от figure отказался так как в ие7 были проблемы.

Article не использовал.

Верстка адаптивная (от 320 - 640, от 640 - 980, от 980 - ~)

Верстка пока не доработана для ИЕ семейств.

Прощу оценить обьективно, в основном интересует семантика(как лучше было бы, что получилось хорошо, что стоит заменить и т.д.)

Edited November 22, 2012 by gibigate

[Great Rash]

Использовать <article> для slider очень сомнительно. По сути это тоже навигация. Много пустых элементов, что тоже не круто (уж не знаю можно ли обойтись совсем без всех, но без .breaker точно можно обойтись). Ну и вложенные <section> тоже вызывают сомнения. <section> - это контент который может быть использован сам по себе, у вас точно все секшны можно использовать как отдельный документ?

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

[gibigate]

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

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

Тоже заметил, но прокрутив шапку, скролл исчезает, не могу словить баг

UPD из за search, поправил

Ну и вложенные <section> тоже вызывают сомнения.

Обертывать вложенные section простым дивом?

Насчет breaker в основном сделал потому что бесит добавлять класс к родителю (clearfix), а так у меня в стиле написан уже фикс на него(.group), возможно при переносе на CMS переделаю

Edited November 7, 2012 by gibigate

[Viper]

1. Только 1 вразумительный/логичный header. Все остальные лишние - бессмысленные. Не нужно заголовки обрамлять в header.

2. Поле поиска - семантичнее указать type = search

3. Интересует семантика, но не использовано article и figure...

4. Перебор тегов section. Они не для обрамление, они не замена wrap'ов. И они не служат для построения сетки сайта из блоков/секций.

П.С. Ты построил дом, в котором десятки бессмысленных, крошечных, не удобных комнат, которые только занимают все место, но абсолютно не пригодные для использования, ИМХО.

[Great Rash]

Обертывать вложенные section простым дивом?

Почему нет?

[gibigate]

1. Только 1 вразумительный/логичный header. Все остальные лишние - бессмысленные. Не нужно заголовки обрамлять в header.

2. Поле поиска - семантичнее указать type = search

3. Интересует семантика, но не использовано article и figure...

4. Перебор тегов section. Они не для обрамление, они не замена wrap'ов. И они не служат для построения сетки сайта из блоков/секций.

П.С. Ты построил дом, в котором десятки бессмысленных, крошечных, не удобных комнат, которые только занимают все место, но абсолютно не пригодные для использования, ИМХО.

Возможно от чтения книг про html5 у меня с семантикой становится хуже?) Читал "изучаем html5" Лоусон, Шарп 2011 года.

Не нужно заголовки обрамлять в header.

В книге однако советуют все заголовки в секциях обрамлять в header

2. Вы правы

3. Кстати про figure, он считается блочным блоком? Можно ли обрамлять его ссылкой?

4. А что вместо них использовать? Однажды глядел сурсы бутстрапа http://twitter.github.com/bootstrap/components.html так там валом sectionов, вот и подумал что это не критично

[Viper]

Возможно от чтения книг про html5 у меня с семантикой становится хуже?) Читал "изучаем html5" Лоусон, Шарп 2011 года.

Можешь кинуть номер страницы, где про такое говориться? Мягко говоря, удивлен...)

4. А что вместо них использовать? Однажды глядел сурсы бутстрапа http://twitter.githu...components.html так там валом sectionов, вот и подумал что это не критично

Ну это еще не фактор, позволяющий воспринимать за правило

Семантика, и даже ее отсутствие, вообще не есть критично)

3. Кстати про figure, он считается блочным блоком?

_http://css-live.ru/articles/blochnyx-i-strochnyx-elementov-v-html-bolshe-net.html

Можно ли обрамлять его ссылкой?

Да, можно

4. А что вместо них использовать? Однажды глядел сурсы бутстрапа http://twitter.githu...components.html так там валом sectionов, вот и подумал что это не критично

Посмотрел код по твоей ссылке: там <section> использован по всем правилам и логично. Хороший пример. Но ты видимо не понял логику его применения. С помощью <section> они разбивали статью(article) на разделы(section). А не использовали в качестве врапов и не разбивали с помощью них сайт на блоки/секции, как у тебя...

Edited November 7, 2012 by Viper

[gibigate]

С помощью <section> они разбивали статью(article) на разделы(section)

но там нет тега article?

Можешь кинуть номер страницы, где про такое говориться? Мягко говоря, удивлен...

Начиная с 63 страницы говорится про section. Цитата:

Иными словами, можно создавать родительские элементы <section> с вложенными элементами article, в которых есть один или несколько элементов section.

Вообще мысль была сделать блоки независимыми, менять блоки местами, вставлять новые и т.д.

Семантика, и даже ее отсутствие, вообще не есть критично)

Тем не менее, это для меня больше практика, хочу понять раз и навсегда.

А теперь немного вопросов:

Нужно ли добавить nav для слайдера, карусели и других (по идее это статьи (article), но там текста только заголовок)

Нужно ли заменять section всех элементов или подождать пока кто нибудь знающий на 5+ ответит

То что сделаю:

Заменю все на figure, добавлю nav для футерных ссылок.

Прощу делать замечания если движусь не в ту сторону! Заранее спасибо всем за ответы

Ну и вложенные <section> тоже вызывают сомнения

http://htmlbook.ru/html/section Допускается вкладывать один тег <section> внутрь другого.

Edited November 7, 2012 by gibigate

[Viper]

Иными словами, можно создавать родительские элементы <section> с вложенными элементами article, в которых есть один или несколько элементов section.

Да, но я спрашивал(мой комментарий был) про <header>, а именно использование его как контейнера для Единого тега-заголовка. Именно это есть ошибкой.

но там нет тега article?

Да, нету. Поторопился: думал, что у них стоит общий артикл, который разбил на разделы... Но у них нету общего контекста ко всем разделам(section), по-этому и не вставили в article. У них каждый раздел(section) является равноценным самодостаточным объектом. И заметь, они не обрамляют другие структурные теги и они не находятся в каком-то общем теге <section>.

[gibigate]

Но у них нету общего контекста ко всем разделам(section), по-этому и не вставили в article. У них каждый раздел(section) является равноценным самодостаточным объектом

не понял если честно, нашел классную статью, http://web-standards.ru/articles/avoiding-html5-mistakes/ начинаю понимать свои ошибки. А также понимаю что семантика в принципе, кроме поисковика и людей с ограниченными возможностями никому не нужна

[Viper]

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

Это пока-что... И смотря, что подразумевать под "семантикой")

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

[Sedoj]

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

Горизонтальный скролл, скорее всего, дает картинка гугл адсенса в блоке longad.

[gibigate]

блин, исходник на работе ) в общем сейчас висит недоработанный вариант, забыл закинуть файлы перед уходом домой

[gibigate]

Окончательно запутался, этот автор статьи http://popel.com.ua/blog/article/pochemu-ne-nuzhno-ispolzovat-semanticheskie-elementy-html5.html категорически не советует использовать элементы html5.

Как быть господа?

Отметил на скриншоте с измененными обертками, http://i.imgur.com/7UqP1.jpg что лучше изменить на какую и почему.

Руководствовался этим текстом

section – Used for grouping together thematically-related content. Sounds like a div element, but its not. The div has no semantic meaning. Before replacing all your div’s with section elements, always ask yourself, “Is all of the content related?”

aside – Used for tangentially related content. Just because some content appears to the left or right of the main content isn’t enough reason to use the aside element. Ask yourself if the content within the aside can be removed without reducing the meaning of the main content. Pullquotes are an example of tangentially related content.

header – There is a crucial difference between the header element and the general accepted usage of header (or masthead). There’s usually only one header or ‘masthead’ in a page. In HTML5 you can have as many as you want. The spec defines it as “a group of introductory or navigational aids”. You can use a header in any section on your site. In fact, you probably should use a header within most of your sections. The spec describes the section element as “a thematic grouping of content, typically with a heading.”

nav – Intended for major navigation information. A group of links grouped together isn’t enough reason to use the nav element. Site-wide navigation, on the other hand belongs in a nav element.

footer – Sounds like its a description of the position, but its not. Footer elements contain information about it’s containing element: who wrote it, copyright, links to related content, etc. Whereas we usually have one footer for an entire document, HTML5 allows us to also have footer within sections.

Edited November 8, 2012 by gibigate

[Viper]

Окончательно запутался, этот автор статьи http://popel.com.ua/...enty-html5.html категорически не советует использовать элементы html5.

Ну что тут сказать... То ли это троллинг, то ли человек только начал изучать HTML5. Решил, что он мего-гуру) и может нести бредистину в умы своих последователей... Из контекста: "мое ИМХО - есть истина, слушайте только меня и тд..." Не советую читать статьи таких "гуру". В статье заметно, что он опирался на данные, статьи и цитаты 2-3 летней давности... Чего только стоит его "Создание стилей для заголовков в HTML5" и заявление - "ведь на данный момент почти никто не поддерживает HTML5-структуру документов"...

Так же советую прочитать(рассуждения) сначала статью "Наша бессмысленная погоня за семантической ценностью", а после нее эту - "Ценность осмысленности". Возможно они помогут тебе определиться насчет поддержки семантики.

[SelenIT]

На самом деле всё чуть сложнее. Статья по ссылке — вольный пересказ статьи Люка Стивенса на netmagazine.com, в свою очередь являющейся переработанной главой из его книги «Правда про HTML5 для веб-дизайнеров» (подзаголовок статьи — «отчасти полемика, отчасти руководство к действию»). И ситуация с построением схемы (плана) документа по структурным элементам действительно несколько противоречива — настолько, что W3C готов выбросить этот раздел из «первой очереди» стандарта, которую он собирается выпустить к 2014 году под названием «HTML5.0» (и оставить «на неясное будущее» для следующей итерации стандарта, «HTML5.1»).

Нативно этот алгоритм (и соответствующая стилизация заголовков!) поддерживается минимум в 3-х браузерах (Fx, Сафари и Хром) и минимум одном скринридере для слепых (JAWS). Но в остальных случаях возможна неоднозначность (а семантика придумана, чтоб уменьшить ее, не так ли?). Даже такой давний авторитет в юзабилити, как Роджер Йоханссон, не советует злоупотреблять section-ами (и как минимум советует сохранять структуру заголовков обратно совместимой со старым алгоритмом схемы документа).

Реалистичный взгляд на семантику в HTML5, имхо, в этой статье (особенно насчет неоднозначной сущности <article>).

[yana33311]

Мой пост ни в тему. Мне очень понравился сайт. Если можешь, скинь плиз макет PSD.

[gibigate]

к сожалению не могу, дизайн уникальный

[yana33311]

На какой уровень можно оценить умение верстать такую страницу (интересно для себя).

[gibigate]

без понятия

[gibigate]

_millionlooks.com получился как то так