Два вопроса про качественный в кавычках CSS
Бывает так, что день, в том числе и рабочий, начинается вполне удачно, бывает же такое, что буквально первые шаги вхожнения в рабочий процесс ошарашивают. Вроде ничего такого не произошло, а картина мира как-то в дребезги разбивается просто. На этот раз какие-то неувязочки с нашим новым заотлантическим арт-директором. Получаю от ихнего руководства два письма. И сижу думаю, что бы эдакое в ответ написать, дабы и меня попустило, и ситуация прояснилась для обоих сторон. А с другой стороны – может, и правда это у меня пробелы в знаниях? Похоже, будет сегодня пара вопросов по “профессиональной” вёрстке. Пока в кавычках – но это потому, что я не совсем понимаю, что у нас просиходит.
Предыстория такая. Наши украинские дизайнеры (типа младшая группа) рисовала много эскизов “в туда”, часть из них проходила, и мы делали по этим эскизам небольшие сайты. При старом арт-директоре были, конечно, расстраивающие недопонимания, плохо была налажена обратная связь, переписка в основном состояла в том, что я ему писала “дайте же наконец хоть какие-то комментарии”, в мессенджере пинала, мол прочти письмо и ответь, получала ответ, что ASAP, и всё, дальше молчание. К вёрстке у нас каких-то конкретных требований не было, кроме как бы и так понятных – валидный HTML, валидный CSS, никаких табличных макетов (это, кстати, по поводу дискуссии про то, что лучше, это другие могут выбирать то или другое или даже дискутировать, а у нас, помимо идеологии и принципов, так было заявлено в ТЗ), по возможности текст делать текстом (ну, если уж совсем декоративные заголовки, то хидерами-подменками с длинными координатами).
Причём все эти месяцы я слышала (и получала известиями в мессенджере) информацию о том, что нам будут высланы какие-то технические требования к макетам, которые мы должны соблюдать. Я периодически напоминала, получала ответ о том, что “да-да, готовится”, а потом первого арт директора уволили и взяли второго, с которым мы общаемся уже скоро месяц как (третью неделю, вроде, или четвёртую). И всё по-новой: мы готовим вам документ с техническими требованиями к верстаемым сайтам, и этот документ будет выслан ASAP. Как в, разумные мои читатели, и сами понимаете, этот документ уважаемые наши заатлантические партнёры так и не прислали, и я даже сомневаюсь в том, что они его досочиняли, и вообще у них в голове есть какая-то типизированная схема, по которой эти требования можно составить.
Бр-р-р опять много букв на вступление, а теперь вопросы:
1. В коротком письме, отосланном (вчера вечером по их канадскому времени или сегодня ночью по нашему) этим вторым арт-директором, было отчаянное требование ОСТАВЛЯТЬ В ОТПРАВЛЯЕМЫХ ОБРАТНО .PSD ДОКУМЕНТАХ СЛАЙСЫ. Опс. Какие слайсы? Это в том смысле, что наши верстальщики не должны были учиться вменяемой вёрстке, а должны были тупо резать скетчи в Image Ready? Вот здесь вопрос. Может я чего-то не знаю про слайсы и удобные инструменты для автопорезки? Последний Image Ready – может, я про него чего-то не знаю? Насколько мне известно, даже в самом настроенном случае, в самом правильном этот красавец генерит либо (очень аккуратную) табличную вёрстку (с RollOver`ами, с готовым скриптом) или же CSS разметку макета с абсолютным позиционированием. Т.е. если его и пользовать как-то, то, получается, только для быстрой порезки фоновых картинок. Может, и правда имеется ввиду быстрая нарезка фончиков, но вдруг нет, вдруг есть какие-то продвинутые инструменты для работы со слайсами? А я отстала от жизни со своей недешёвой ручной работой?
2. Второе письмо зацепило ещё больше. Содержало обиду на то, что этот самый второй арт-директор жалуется на вёрстку в одном из последних сайтов, якобы на то, что кнопка “Download Now почему-то оказалась бэкграундом“. Ну понятно, что по аналогии с предыдущими макетами “Download Now”
Нет, но пример с псевдокнопкой всё равно следует обсудить здесь, для начала.
Если этот арт-директор считает, что эта графика обязательно должна быть прописана через img – пусть придумает alt-текст для нее. Аргументировать можно просто: если нет аттрибута alt – HTML невалиден, если alt-текст есть, но пуст, это кажется плохо для SEO.
Нет проблем с альтами. Была формальная постановка делать валидную профессиональную вёрстку, и выносить всю графику в css.
Здесь вопрос в том, как вернее с точки зрения “профессиональной вёрстки”:
Кнопка Download делается линком. Так вот оформление этой кнопки (красивый фончик и декорированная надпись Download) должно быть:
1. в CSS фоном для класса этого a href`a или
2. тегом img (эта картинка) в этом a href`e
?
Я не зря привел пример с alt-текстом. Это и есть критерий.
Если можно придумать вменяемый alt-текст – значит реализовано должно быть через img. Если нет – значит CSS фон.
Касательно примера с кнопкой Download – однозначно img, потому что alt текст для него придумывается в полтакта. А вот если не придумывается иного alt-текста чем “Правый верхний закругленный угол” – значит фон через CSS.
Это обоснованно. Принимается.
alt может присутствовать с пустым значением, так что это не аргумент. мне вообще непонятна ваша логика.
Я в таких ситуациях иногда (для проверки) представляю себе вот что: а имело бы смысл, чтобы эта картинка, к примеру, появилась в результатах поиска в имиджах в, скажем, гугле?
Если это лого компании, то – да, можно поставить имидж как объект в документ, логично.
Если это иллюстрация коробки для коробочного решения на рекламном сайте – тоже вроде да.
А если это кнопка “Download Now!” – то как бы скорее нет. Т.е. будет использоваться там Input (type=”button/image или что-то ещё”) или a href – визуал, оформление этого объекта всё равно должен быть вынесен отдельно.
Но в нашем случае выяснили, что есть такое требование. Будет линк, в котором будет имидж. С альтом “Download Now”.
Вообще, на мой взгляд, логичнее всего делать все текстовые элементы именно текстом. С тем, чтобы при отключённом CSS вёрстка выглядела совершенно логичной.
В том числе и логотип можно ставить текстом. А изображение логотипа – фоновым изображением. Потому как всё-таки HTML-документ является в первую очередь текстом. И уже во вторую – оформлением этого самого текста.
мне очень жаль Вас разочаровывать, но alt не может присутствовать с пустым значением. то, что пустое значения альта допустимо при валидации XHTML есть не более чем промашка разработчиков валидатора.
почему именно так хорошо написано в спецификации. и прекрасно иллюстрируется, если зайти на сайт например Linx.
“Do not specify irrelevant alternate text when including images intended to format a page, for instance, alt=”red ball” would be inappropriate for an image that adds a red ball for decorating a heading or paragraph. In such cases, the alternate text should be the empty string (”").”
http://www.w3.org/TR/html401/struct/objects.html#h-13.8
Обсуждение деталей типа: должен ли там где-то быть src или href или что-то еще заранее обречено на провал, я бы даже не затевал, а сосредоточился именно на “конструктивно, обменяться технологическими процессами и знаниями для взаимной пользы и выработать (с обоих сторон) новые правила и критерии качества.”, а в основном – на общих причинах – почему надо делать по-другому и почему это важно.
А спорить про “рюшечки” (прошу прощения, что уничижительно) – это очень “богатая” по потенциальным затратам времени тема, но совершенно непродуктивная.
Угу, на завтра уже назначили совещание по громкой связи. Но это завтра. А вчера канадское руководство уже выслушивало громкие крики о том, какие украинские верстальщики лохи, за ними перевёрстывать придётся. Хоть это и не справедливо, но руководство-то лишний раз негатив на нас уже получило.
Про слайсы ничего сказать не могу, а вот насчет ссылки я полностью согласен с вашими верстальщиками. Тегом img должны вставляться только изображения в их изначальном понимании, а ссылка которую дизайнер захотел сделать в виде кнопки должна остаться ссылкой и все оформление уйти в css. Я конечно говорю про идеальную верстку в вакууме, но чтобы намеренно использовать семантически неверную конструкцию — тут нужны довольно веские причины (я даже не могу придумать ничего подходящего). Интересно будет услышать аргументацию канадского арт-директора.
Ура! Вы поняли о чём я написала! Очень приятно познакомиться.
Да, кажется (я предполагаю), что у них там в механизме заложена привычная (хоть и давно уже разработанная) модель – они прописывают идентификаторы, которые ловятся для статистики, в картинку, которая находится в ссылке. Я лично не вижу никакой проблемы в том, что бы прописывать этот идентификатор в хреф. Но может там есть какие-то ещё особенности, кроме консервативности модели дальнейшей интеграции сайта в систему, не знаю.
Сегодня вроде должны узнать.
Танюш, почему б тебе не открыть свою компанию? Или не выйти на рынок рабочей силы и выбрать адекватного работодателя?
прекрасный совет. я просто млею от таких советов. а бумажную работу и финансовую отчетность Вы на себя возьмете? если да, то может быть Вам нужен в соучредители Java Developer?
Я почему-то верю в Таню и думаю, что в её круге общения может найтись хороший партнёр. Бухгалтеров хватит на всех.
У меня нет проблем с тем, чтобы найти бухгалтера. Но менять свою жизнь, свою карму – это, Рома, не хухры мухры. Я стремлюсь к этому, многое меняется, да, но если честно – мешает единственная вещь. Неуверенность в себе. И ужасный страх перед всем. Есть такая беда. Но я честно работаю над собой и надеюсь, рано или поздно научусь верить в себя и ставить перед собой более смелые цели
в том числе и в бизнесе.
Знаю, Танюш
Лучше рано, помни, что есть люди, которые в тебя верят и будут готовы помочь. И это не только я. Подумай сколько лет ты ещё сможешь терпеть такие несостыковки с “их” стороной?
Тут нет ничего такого, что надо было бы терпеть, превозмогая себя
Это ведь не война, не болезни, не цунами и не ледниковый период. Пока что – только проблемы с коммуникациями, в том числе и с языковым барьером. Как психологически, так и по уровню знания английского мне бы ещё потренироваться на канадцах не мешало бы 
:):)
Таня, может быть конечно я чего-то не знаю, может быть конечно где-то чего-то недопоинмаю, но не кажется ли тебе, что картинки фоном в CSS — это крайняя мера? вот если по-другому никак — тогда да, тогда там. а до тех пор все-таки img? я буду благодарен за аргументированное опровержение, все-таки я не верстальщик. но как по мне, все-таки если в верстке присутсвует графика, то логичнее ее поместитть явно. потому что уже не раз и не два я тратил кучу времени на поиск картинок, и обнаруживал их в CSS. это не прозрачно. ну как минимум. я чего-то не понимаю?
Да, в данном случае и конфликтная ситуация возникла от того, что надо было поправить мелочь, а этому арт-директору было “не так прозрачно ясно”, что картинка прописана фоном в таблице стилей. Он её не нашёл в коде документа, а в css искать не догадался – это не вписывается в его картину мира
Ок, сек. Итак. Мы отделяем представление документа от его логики. Функциональный элемент в документе – это ссылка, которая ведёт (в данном случае) на страницу Download. Это могла бы быть и кнопка, ситуации это не меняет – я переопределяю свободно визуальное отображение кнопки любого типа, так же как и визуальное отображение ссылки в CSS. В данном случае визуальное представление кнопки – это миленькая картинка с красненьким градиентиком и красиво написанным словом *Download*. Но это – всего лишь представление объекта *ссылка*. Сама картинка не является функциональным элементом, она всего лишь привлекает внимание пользователя и своим внешним видом намекает на то, что “там надо кликнуть”.
Всё, что относится к внешнему виду документа, выносится в таблицу стилей. Поэтому в коде документа остаётся тег, который реализовывает заданную функциональность (a href), а в таблице стилей – представление, внешний вид этой ссылки.
Хотя на самом деле нам всё равно
и сегодня с утра я получила уже формальное подтверждение того, что нужно будет делать именно a href=”", в котором будет лежать img src=”"
а как же. Вдруг оно только от того, что их верстальщики не достаточно знают теорию?
Хотя на сегодняшнем собрании мы всё-же попросим “ту сторону” мотивировать своё требование
На мой взглад – абсолютно правильное разделение на сам документ и его оформление. То, что атр-директор не достаточно квалифицирован для работы с грамотно созданными документами – это, по большей части его проблемы.
Хотя можно задачу решить простым вставлением комментариев в HTML. И чёткой договорённостью об этом с Канадской стороной.
В этом случае можно будет чётко выделять блоки, которые программисту нужно будет брать и что-то с ними делать.
Кстати, лично я для себя до сих пор не определил, как рисованные кнопки вставлять? Иногда я переопределяю стилями input, иногда это блочная ссылка с фоном, иногда это изображение обрамленное в ссылку.
Дело в том, что когда стили отключены, кнопка, имхо, должна оставаться кнопкой и всем своим видом показывать, что это некий контрол, а не просто линк.
У нас обычно программный комплекс диктует объект, а мы его уже оформляем – где-то программерам нужно использовать линк, где-то кнопку. Обычно не верстальщик говорит программисту, что “вот ссылка, я её уже оформил”, а программист верстальщику – здесь будет такой-то контрол, поэтому такой вопрос не встаёт.
Но с другой стороны ведь не программисту решать вопросы связанные с доступностью сайта. Он может и линком сабмитить форму. Тут скорее программист под верстку подстроиться должен.
Вот как прикольно;) начали с технической мелочевки и дошли аж до кармы… Вот мое глубокое и нерушимое имхо: это абсолютно неважно хреф оно или css. Но очень важно другое, а именно заказчик лазающий в коде, это абсурд! Это нужно обговаривать в тз? Ну не может заказчик править ваш код, что бы он там себе не думал;)))
Балин;)) Свободу Попу.. тьфу ты, Свободу Дизайнерам!!!:)))))
Уважаемый Diushych, меня очень тревожат комментаторы,которые “комментируют”, не прочитав внимательно исходный текст. Кто и где говорил о том, что “в код лазает заказчик”? Это вы себе придумали.
Будьте внимательны.
Регулярно читаю тут про верстку…. про нетабличную верстку. не холиварю … меня завидки берут, нельзя ли как-то выйти на связь чтобы посмотреть на те сайты, которые вы делате. Ну очень хочется научиться верстать блоками ПРАВИЛЬНО. Так чтобы ничего не падало при двойном-тройном увеличении шрифта . И чтобы если клиент вставил свой контент (таблицу) в мой макет, то она бы и не пряталась и блоки бы не падали . Но пожалуйста … пришлите ссылок на то что вы делаете для “них” (ведь это уже работает в сети ?) Потому что уж столько копей поломано, а так хоть поучиться .
Уважаемый xzirrow, я здесь даже название компании ни разу не написала, в которой работаю
не уверена, что будет правильно давать ссылки на работы, уже опубликованные в сети.
И кроме того, нет уверенности, что моё руководство не читает эти заметки
Что касается “и если клиент вставил свой контент” – так чудес не бывает. Конечно, всё расползётся. Особенно если у владельцев Вася-менеджер копипастом через предоставленный ему визуальный редактов типа tekerik`а постит контент из word`а, и тут же его правит – там и кривые незакрытые таблицы, и кривой код самого телерика и ессно руки Васи.
Татьяна, спасибо за ответ. Про название компании не знал что это закрытая информация, да я вас понимаю, просто было интересно посмотреть на вашу продукцию – столько пишете, что так и подмывает посмотреть.
А по поводу версти – да все именно так, как вы и пишете только у нас FCKEditor
вообще вместе с коллегами на работе – пришли к выводу что просто верстка div-ами это одно, а вот верстка дивами под CMS (где можно вставить все что хочешь) это совсем другое.
Вот буквально на днях – что-то типа каталога высоко технологического оборудования (три колонки – справа/слева – новости/анонсы – в центре описание, спецификация). Верстка сложная – с отрицательными marginами и пр. все чудесно.
В один станок клиент в описание вставляет широкую таблицу спецификаций станка. Все падает.
И переверстать то не получится, потому что div не расширяется как td. И если бы было td то у него бы скроллбар появился и он бы понял что сглупил поставив такую таблицу, а тут он нам пишет – а чего оно мол падает?
Наверное все это вам знакомо, наверное и я не так много знаю о блочной верстке. И поэтому стараешься лазиешь по сети, смотришь как другие делают. Но увы чудес не бывает.
Татьяна, здравствуйте.
По поводу слайсов считаю, что заказчик обосновано требует их сохранение. Единственное, он может быть не в курсе, что вы не используете слайсы для верстки, тогда просто объясните ему это.
Что такое слайсы и почему это важно
Слайсы – это направляющее линии по которым в дальнейшем вырезаются картинки и генерится код.
Нужны он для того, чтобы:
а) получить сгенерированный код (в 99% он нафиг не нужен)
б) использовать получившуюся сетку для последующей верстки в случае корректировки дизайна.
Я у своего верстальщика требую грамотной разметки слайсами до написания кода. Во-первых, это заставляет осмысленно подойти к написанию структуры кода. Во-вторых, хорошая сетка в дальнейшем упрощает “перевырезание” элементов при изменении дизайна. Например, взяли и сменили иконки, а размер остался прежним. Верстальщику не нужно думать над тем с какими отступами для теней он вырезал иконки, он просто открывает PSD в IR и пересохраняет слайсы. Дел на 5 минут.
По поводу фоновой картинки.
Есть просто правило: если элемент (картинка) является частью содержимого страницы, то она кодируется соответствующим образом (img).
Например, фотографию интерьера гостиницы не рекомендуется делать фоновым изображением (если нет других объективных причин), а вот фон страницы, ссылки, скругленные уголки не несут самостоятельной информации. Поэтому кодируем их теми элементами, которые для этого больше соответствуют. Это, как бы и есть семантика.
Является ли изображение кнопки самостоятельным элементом, несущим информацию – пусть решает арт-директор.
p.s. И я тоже присоединюсь к просьбе xzirrow – очень хочется посмотреть на работы (можно скинуть на ящик). Мне интересен не столько код, сколь все остальное: тематика, сетки, гаммы, стили.
Поздновато, наверное, но всё же спросить хочется: Уважаемый Junior, а Вы слайсы с гайдами не попутали случайно?
О вёрстке, холиворах и реалиях [...] так давно к посту “Два вопроса про качественный в кавычках CSS” получила много полезных развёрнутых [...]
У меня есть аргумент против img:
при выделении (CTRL-A, или мышкой) будет выделяться также и картинка, что иногда неудобно. С бекграундом не будет.
Плюс, если таких кнопок много, то через CSS кода будет меньше.