Сайт проката машин

[ZI DAN]

Сделал ещё один сайт. На этот раз аренда машин. Рад буду выслушать любые замечания.

[npofopr]

Как то мне не очень нравится расположение фотографий машин.

Сперва вроде по 2 в ряд, еще и по центру, внизу почему то 3 в ряд. Не лучше ли заполнять автоматически? Чтобы не было пустого пространства.

На 1026px уже появляется скролл. Как это не нравильно. Такой сайт можно легко сделать адаптивным.

[red4pony]

Мое мнение:

Логотип-->h1

.head>max>.l-->h2(каждая строчка)

nav>div>ul(div лишний в обоих случаях)

"Лимузины в Калуге"-->h2

"Машины для случая" и "Предложения"-->h3

"Встреча из роддома" и "Песочное шоу" (и подобные в этих барах)-->h4(ну или поместить бар '.sContent r ' - в <section> и начать нумерацию заголовков сначала для правильной семантики - так как этот раздел прямо не относится к специфике этого сайта)

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

[npofopr]

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

у него вроде это вспомогательные классы, которые всегда будут. Это вполне нормально.

[red4pony]

у него вроде это вспомогательные классы, которые всегда будут. Это вполне нормально.

Для одного свойства создается один класс.....

Имена классов должны отображать суть объекта, а не его свойства.

[ZI DAN]

Сперва вроде по 2 в ряд, еще и по центру, внизу почему то 3 в ряд.

У меня не получилось добиться такого отображения. Ряды машин, естественно, автоматически формируются. А так как всё выровнено по центру, то последний неполный ряд тоже выравнивается по центу.

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

С семантикой согласен — нужно поработать. Однако не считаю предложенную структуру полностью правильной (например, логотип в h1 не катит — h1 на странице должен быть один, ИМХО).

Во вспомогательных классах не вижу ничего криминального. Не стоит путать парадигмы десктопного ООП с использованием классов в CSS. Класс в CSS не описывает сам объект, а описывает именно внешний вид объекта.

Приведу пример. Допустим у меня есть 100 разных объектов, выглядящих по-разному. Но у них у всех должна быть зелёная пунктирная рамка с отступом. Естественно, я создам дополнительный класс .gBorder и не получу массу геморроя, когда мне все зелёные рамки нужно будет сделать красными. Это можно сравнить с наследованием или интерфейсами в ООП, а ещё лучше с методологией повторного использования программного кода.

Спасибо за рекомендации.

[red4pony]

h1 на странице должен быть один

Не верно, прочитайте про новые семантические теги в HTML5 - спецификация позволяет доблять несколько h1 на страницу (если заголовки лежат в отдельных логических блоках). Для этого они(новые теги) разрабатывалить.

Например:

<header>/*Шапка сайта*/
<h1>Сайт о новостях</h1>
</header>
<section>/*Начало новостного блока*/
<header>
<h1>Fireworks умер</h1>
</header>
<article>
Adobe прекратила развитие продукта Fireworks и не добавила его в Creative Cloud
</article>
<footer>
<span>Gregory Jonson<span>
<time>01-05-2013<time>
</footer>
</section>/*конец новостного блока*/
<footer>
Спонсоры и клиенты
</footer>

Если Вы захотите поменять цвет границы для класса gBorder на красный, то логичность названия пропадает, лучше назвать mainBorder.

Как было выше сказано:

Такой сайт можно легко сделать адаптивным.

При размере экрана меньше 800px(примерно) крайним блокам нужно будет задать горизонтальную ориентацию(три узкие колонки будут не очень удобные), блок "sContent l" лучше разместить выше основного содержимого, а "sContent r". И вот тут Ваши классы "l" и "r" теряют смысл.

Для общего развития советую ознакомиться(если Вы этого еще не сделали) в БЭМ. Там много лишнего(для небольших проектов), но может будет для Вас полезно.

[ZI DAN]

Я знаю, что в HTML5 это не ошибка. Просто я сам не люблю ставить несколько h1. Ну вот не нравится мне их новая концепция )

И вот тут Ваши классы "l" и "r" теряют смысл.

При адаптивной вёрстке многое теряет смысл. Это нормально.

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

[red4pony]

Пожалуйста. Методология БЭМ полностью наверное подходит только Яндексу, много холивара на эту теме в хабре.

[Николя223]

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

[ZI DAN]

Согласен — картинок много. Поэтому левые и правые картинки я немного «приглушил» прозрачностью. Меню там бы смотрелось хорошо, но тогда нужно весь дизайн пересматривать. Да и нынешняя логика разделения пунктов меню пострадает. А сейчас логика правильная: боковые блоки — это всякая хрень, и нечего ей в меню делать. Но всё равно, спасибо за совет.

[npofopr]

для выравнивания блоков можно попробовать что-то типа masonry

[ZI DAN]

Да причём здесь masonry? Блоки абсолютно одинакового размера. Может, покажете скриншот, на котором блоки неправильно выравниваются? А то у меня во всех браузерах они выравниваются правильно.

Всё, поймал этот баг. Просто я забыл сделать боковые блоки во всю высоту контента, поэтому при некоторых разрешениях экрана происходило обтекание. Исправил, спасибо за «наводку».

Edited May 10, 2013 by ZI DAN