ZI DAN

Это был сарказм.

Даже не хочу влезать со своим мнением в этот срач. Просто открыл для интереса главную Яндекса и обнаружил там вот такие вещи : А Гугла такие: Вот же говнокодеры там сидят) Т. е. у Гугла я обнаружил как минимум три нотации на одной странице (верблюд, дефис и нижнее подчёркивание), а у Яндекса две, но комбинированные в рамках одного названия класса.

Ещё раз объясню, что фокус с фоном не выйдет. Мало того что он двигается, так он ещё и меняется при разных разрешениях, т. к. представляется собой радиальный градиент с прозрачностью и мощёной подложкой под ней. Вообще с резиновой вёрткой приём подгонки одного изображения на позицию другого редко проходит) Через Color Quantizer и подобные программы получается либо хреновое качество, либо несущественное сжатие. А учитывая очень плавную прозрачность в некоторых местах картинки, замороченный фокус с jpeg'ом тоже не даст не отличимой на глаз картинки (а глаз у меня достаточно придирчивый, особенно в сочетании с неплохим монитором).

1. Да, не заметил, спасибо. 2. Ну я бы не стал так однозначно утверждать. В стандарте разрешается использование заглавных букв. Да, названия классов нечувствительны к регистру. Однако мне ближе CamelCase, и особо веских причин отказываться от него я пока не нашёл. 3. С неполной адаптированностью согласен (в терминологии путаница вышла). Удалил новость про мобильные устройства. Там вообще-то .png с прозрачностью, поэтому никакого перебора нет. Делать .jpeg-ом — не вариант, т. к. фон сложный и меняющийся в зависимости от размера экрана.

Всё обсуждаем. Критика адаптивной вёрстки правильная. Изображения под неё неоптимизированы. Но задача оптимизации трафика и не ставилась, т. к. ставилась задача сохранения внешнего вида. Ну а на приличную адаптацию именно под мобильные ОС, а не под размеры экрана, естественно, нет времени (очень жаль).

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

IE давно страдает такой ерундой (у меня тоже масштаб в системе 125%). Правда на этом сайте ни в последнем Firefox, ни в последнем IE проблем с масштабом нет. Если эта проблема появится в большинстве браузеров, то буду решать.

В Safari для Windows такая же хрень. Но разъезжающаяся вёрстка не при 100%-ном масштабе — это практически нормальное явление, на мой взгляд.

<footer> <div class='footer'> Это для не очень свежих версий IE. Также многое в разметке запутано из-за адаптивной вёрстки. С «не важно» в поиске, может быть, не очень красиво вышло. А с ценой должно быть всё очевидно, т. к. на территории Российской Федерации цены давно уже указываются только в рублях (указание цен в других единицах запрещено законом, хотя он легко обходится). Я смотрю PageSpeed вообще изменил алгоритмы расчёта в последнее время. Информацию на la mask нужно скорректировать. Опять же по данным дополнения PageSpeed для Chrome 92 балла)

На PHP/MySQL сайт написан. Кнопки сделал нажатыми, спасибо.

Мне эти баннеры вообще на фиг не нужны, но их наличие — обязательное требование заказчика (причём, они должны быть на видном месте). На маленьких экранах они слева, т. к. правая колонка на них удаляется в целях экономии места. 1. Я могу прочитать сжатые баннеры (правда у меня хорошее зрение). Согласен, что сжатие баннеров — плохое решение, но решения вроде переноса их вниз не одобряет заказчик( 2/3. Требований по размещению Flash и HTML5-баннеров не было. Зато было требование впихнуть сайт полностью в экраны дорогих мобильников (уровня iPhohe 4).

Но и совсем не строчный http://www.w3.org/TR...the-img-element. Всё-таки, если мы говорим вёрстке, то нужно рассматривать её в контексте стандарта, по которому она сделана (естественно, это HTML5). Мне HTML 5 тоже не во всём нравится. Однако это индустриальный стандарт, и выбора у нас к счастью нет. На экранах побольше они окажутся именно на правой стороне)

Это валидно, по крайней мере. Опять же помещать <img> в <a> всегда было нормально, а <img> тоже блочный (строчно-блочный).

Начальник решил добавить в нашу копилку сайт для поиска недвижимости. Экономическую целесообразность этого я обсуждать не хочу, но был бы рад услышать отзывы о сайте с технической точки зрения (как обычно, дизайн, вёрстка, юзабилити и т. д.). Заполнением ещё особо никто не занимался, поэтому есть только несколько объявлений в Калужской области.

Мужик, хорош оверквотингом заниматься — некрасиво это.

Это такая маркетологическая шутка-провокация.

Добавлю ещё ложечку дёгтя: — Мне не нравится главная. Она полностью дублирует «Новости» и вообще не очень информативна. Думаю, нужно её удалить и сделать главной «Новости». — Ссылки на страницы (1, 2, 3...) зачем-то обёрнуты в span (он там лишний). Почему-то у ссылки на текущую страницу нет номера (пустой маленький квадрат). Она ещё должна быть оформлена по-другому, чтобы было понятно — на какой мы сейчас странице, да и ссылкой её делать не стоит (лучше div или span). — Фантомный знак вопроса в блоке «Интересное». Я его еле вижу на своём неплохом мониторе. Думаю, на дешёвых мониторах его не будет видно вообще. Да и в целом он там не к месту. Лучше убрать его совсем. — Много мусора в head. Ещё раз убедитесь в необходимости каждой строчки. Например, верификацию для Яндекс и т. п. можно сделать внешними файлами. Очень много подключаемых скриптов (особенно для такого простого сайта). Все используемые скрипты нужно перенести в один js-файл.

Там span используется только для выбранного пункта меню. Т. е. нельзя перейти по ссылке на страницу, на которой уже находишься, поэтому это и не ссылка. Исключение составляют только «Отзывы» и «Связь», оформленные как обычные ссылки. Ещё раз повторюсь про поиск. Он там малозначителен, поэтому и незаметен. Так и задумано.

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

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

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

У меня не получилось добиться такого отображения. Ряды машин, естественно, автоматически формируются. А так как всё выровнено по центру, то последний неполный ряд тоже выравнивается по центу. Адаптивный дизайн, конечно, нужно сделать. Просто я оставил его на потом ) С семантикой согласен — нужно поработать. Однако не считаю предложенную структуру полностью правильной (например, логотип в h1 не катит — h1 на странице должен быть один, ИМХО). Во вспомогательных классах не вижу ничего криминального. Не стоит путать парадигмы десктопного ООП с использованием классов в CSS. Класс в CSS не описывает сам объект, а описывает именно внешний вид объекта. Приведу пример. Допустим у меня есть 100 разных объектов, выглядящих по-разному. Но у них у всех должна быть зелёная пунктирная рамка с отступом. Естественно, я создам дополнительный класс .gBorder и не получу массу геморроя, когда мне все зелёные рамки нужно будет сделать красными. Это можно сравнить с наследованием или интерфейсами в ООП, а ещё лучше с методологией повторного использования программного кода. Спасибо за рекомендации.

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

Это не в Chrome косяк, а попугай обрезанный. Единственный true-способ от этого избавится — вставить картинку с попугаем в полны рост. Почему-то многие верстальщики забывают, что у всех экраны разного размера. На моём мониторе, например, чёрное пространство под попугаем занимает почти половину высоты страницы.

Изменить в CSS ширину для #page, #container и #content не составит труда. Однако в этом нет никакого смысла, т. к. весь дизайн сделан картинками, а под новую ширину эти картинки нужно нарисовать заново. Иначе они просто разъезжаются.