Лаборатория Кода, Сенсив-Код

Веб-дизайн и вёрстка сайтов. Кроссбраузерность и мировые веб-стандарты (W3C)

Менее 10% сайтов, выполненных ведущими российскими веб-студиями, соответствуют мировым веб-стандартам. Половина из них имеют простой веб-дизайн, не требующий специальных адаптаций. [+/-] 99% сайтов устарели и некорректно отображаются в современных браузерах.

соответствие сайтов мировым веб-стандартам
Данный материал начинает цикл статей о «веб-дизайне по стандартам», грамотной вёрстке сайтов. Ввиду того, что в России высшее профессиональное образование в области веб-разработок было введено сравнительно недавно (всего несколько лет назад, — ничтожно в сравнении с Западом, где такие направления существуют десятилетия), веб-мастера (верстальщики) зачастую весьма посредственно относятся к стандартам W3C, а порой даже и — к кроссбраузерности.

Статья включает принципы обеспечения кроссбраузерности (идентичного отображения веб-дизайна сайтов в различных устройствах, различных браузерах различных версий). Также, поднимается вопрос об актуальности следования мировым веб-стандартам W3C при создании сайтов. Готовы ли фирмы-заказчики на дополнительные расходы для полного обеспечения соответствия мировым стандартам W3C? Речь, конечно, о малых и средних веб-студиях, т.к. в крупных фирмах веб-дизайна цены итак ого-го — должны бы включать затраты на такое соответствие по умолчанию (хотя, по факту, картина иная). Или нет?

В качестве небольшого замечания, следует сказать, что кроссбраузерность и W3C-стандарты отнюдь не случайно рассматриваются в связке…

§1. Кроссбраузерный веб-дизайн — необходимость современности

Значимость кроссбраузерности, в современной насыщенной и высококонкурентной среде интернета, для сайта неоценима. Логика проста. Если мы адаптируем сайт для каждого посетителя (вне зависимости от типа устройства или браузера, которыми он пользуется), мы получаем 100% заинтересованной аудитории. При ориентировании только на 1-2 якобы «основных» браузера аудитория сокращается примерно на одну треть или даже в 2 раза. Недовольные посетители не будут рекламировать сайт друзьям — и мы теряем ещё N-ную часть потенциальных потребителей.

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

Некоторые веб-дизайнеры игнорируют старые версии браузеров, ссылаясь на то, что они якобы вышли из употребления. Тем не менее, часть пользователей до сих пор используют такую устаревшую версию Internet Explorer, как 6.0. Другие веб-дизайнеры, и того хуже, обеспечивают кроссбраузерность только для пары браузеров (обычно Internet Explorer и Mozilla FireFox), по каким-то личным соображениям считая другие нераспространёнными. Обратимся к глобальной статистике HotLog.

Браузеры

статистика использования браузеров

Операционные системы

операционные системы - статистика использования

Кроссбраузерный веб-дизайн: общие принципы и правила

У опытного веб-разработчика, как правило, есть собственные заготовки, обеспечивающие кроссбраузерность для абсолютного большинства пользователей. Это — т.н. CCS-сниппеты (фрагменты кода). Например, чтобы достичь кроссбраузерного отображения полупрозначного элемента, нужно указание соответствующего свойства для всех типов браузеров:

.prozr50{
filter: alpha(opacity=50); /* прозрачность для IE 5.5+ */
-moz-opacity: 0.5; /* прозрачность для Mozilla 1.6 и ниже */
-khtml-opacity: 0.5; /* прозрачность для Konqueror 3.1+, Safari 1.1 */
opacity: 0.5;
}

Мне нередко встречается как будто недописанный код других веб-дизайнеров: опущение «-moz-opacity«, «-khtml-opacity«. А уж когда опускается «filter: alpha…», совсем беда.

Существует множество сайтов для начинающих веб-дизайнеров, посвящённых грамотной веб-вёрстке с учётом кроссбразерности.

Используйте готовые кроссбраузерные решения. Прекрасный набор CSS cниппетов и готовых кроссбраузерных решений содержится, например, на сайте Xiper.

Проверка CSS-свойств на кроссбраузерность. Всегда проверяйте информацию сторонних источников. На сайте HtmlBook удобно визуализируется поддержка того или иного свойства разными браузерами.

проверка кроссбраузерности

Кесарю кесарево. Одно и то же свойство CSS может отображаться в разных браузерах по-разному. При необходимости, бывает рационально применение разных файлов стилей для разных браузеров. Для этого, может быть задействован вызов отдельного файла спешл фор IE [6, 7, <9], или включено скриптовое определение браузера и подгонка индивидуальных стилей для каждого из них (такая адаптация актуальна для разделения просмотров на КПК / мобильных устройствах и на стационарных ПК / ноутбуках).

Частичная кроссбраузерность и псевдокроссбраузерность — скажите им НЕТ

Распространённый недуг разработчиков — использование частичной кроссбраузерности или псевдокроссбраузерности. Например, закругление уголков у блоков и элементов, не поддерживается в IE ниже 9 версии. Порой веб-верстальщики ваяют веб-дизайн, который в Internet Explorer отображает острые квадратные углы, а в прочих браузерах — закруглённые. Другие веб-дизайнеры используют псевдокросбраузерность, т.н. хак для IE < 9 через вызов файла с расширением «htc» (border-radius.htc), подключаемый в стили и который якобы «учит Internet Explorer закруглению углов». На самом деле, такой хак не работает на большинстве элементов, а в некоторых случаях имеет проблемы с фоном (при CSS-спрайтах, к примеру). Вывод: лучше рисовать уголки по старинке (их даже apple-вцы рисуют).

Разрешения мониторов, для которых оптимизировать веб-дизайн

С популяризацией крупноформатных мониторов, многие веб-дизайнеры подняли планку «минимального разрешения экрана» с 1024х768 точек на 1280х1024 точек. С каких пирогов — не понятно. Смотрим статистику. Упразднённая незадачливыми веб-дизайнерами минимальная длина экрана просмотра остаётся актуальной по сей день.

разрешения мониторов для веб-дизайна

§2. Мировые веб-стандарты W3C: применимы ли к реалиям веб-дизайна или нет? Цена достижения.

Грозная аббревиатура W3C расшифровывается достаточно просто. В пер. с англ. «World Wide Web Consorcium» (или, коротко — WWW Consorcium) — значит Консорциум Всеминой паутины. Легко запомнить: Три-W, соглашение.
Консо́рциум Всеми́рной паути́ны (англ. World Wide Web Consortium, W3C) — организация, разрабатывающая и внедряющая технические спецификации и руководства для развития Web. Консорциум насчитывает в своём составе около 500 организаций. Считается, что W3C призван обеспечивать совместимость различных технологий и безопасность поведения сайта при обновлениях браузеров. На точке старта, с 1994, года самого возникновения значально W3C-установки позиционировались лишь в качестве рекомендаций. Только позже они начали называться веб-стандарты.

К тем, кто считает иначе (иногда называет и прямо ошибочными), относятся разработчики браузеров и большинство студий создания сайтов. Но если первые из них стараются улучшать поддержку веб-стандартов от версии к версии, то вторые, ориентированные на браузер, не склонны к переоценке ценностей, пока, как говорится, «петух не клюнет». Проводимые тесты на валидность (http://validator.w3.org/) выявляют, что менее 10 процентов из сотни сайтов, выполненных ведущими веб-студиями Рунета (по рейтингу Топ 100), действительно соответствуют веб-стандартам. Причем половина из них демонстрируют весьма незамысловатый веб-дизайн, при котором, по сути, сложно выйти за рамки стандартов.

Вдохновившись идеей исследования, почерпнутой от автора статьи «Нежелание веб-студий соответствовать веб-стандартам«, я решила произвести собственный тест. Для этого я взяла из портфолио веб-студий, входящих Топ-20 (2011 г., по версии TagLine), по три сайта и отправила их на проверку наиболее признанного сервиса http://validator.w3.org/ . Результаты оказались куда менее оптимистичными, чем цифра 10%. Из 57 сайтов всего 1 оказался валидным. На этом единственном сайте использовалась Flash, — сам код страницы ничтожно мал, и для оценки W3C-грамотности его вряд ли можно всерьёз ставить в одну линию с полноценными интернет-проектами. Есть вероятность того, что самые валидные сайты (как раз те 10%, на которые я уповала) оказались за пределами Топ-20.

соответствие сайтов, созданных ведущими российскими студиями веб-дизайна, мировым веб-стандартам

В интернете можно встретить ряд статей, в т.ч. от веб-разработчиков, ратующих за неукоснительное соблюдение всех правил и спецификаций W3C. Большинство из них имеют мало опыта, или просто не разрабатывали крупных многофункциональных проектов. Да, когда речь идёт о валидности собственного кода, всё просто — достаточно следовать W3C правилам и установкам. Но когда речь заходит о редактировании сторонних продуктов, таких, как движки сайтов (Системы Управления Сайтами, CMS) и многочисленных модулей, отнюдь не всегда соответствующих мировым стандартам веб-разработки, — здесь мы столкнёмся с весьма объёмными и разозненными пластами кода, притом чужого, который ещё надо «разобрать по кирпичикам». Безусловно, это затребует дополнительные и значительные ресурсы сил и времени веб-разработчика, которое само по себе недешевое. Но готовы ли клиенты на подобные затраты в связи с сомнительным улучшением, к тому же, незаметному обычному человеческому глазу?

На широком рынке создания сайтов, некоторые веб-дизайнеры находят удачным выделять в числе своих «конкурентных преимуществ» модные термины (как W3C). Однако они не оставляют никаких координат для проверки своих слов. Эта группа веб-разработчиков, повествующих на своих представительских веб-площадках о полной поддержке W3C-стандартов, зачастую имеют о них довольно абстрактные представления. Это легко проверяется тестом.

«Лучший валидатор – это браузер» (цитата) — чуть ли не девиз именитой студии Артемия Лебедева. В самом деле, если сайт «кроссбраузерно-выдержан» и смотрится приемлемо для пользователя, нужна ли педантичность в исполнении каких-то стандартов? Ответ на этот вопрос остается открытым. Ведь веб-разработка направлена прежде всего на результат готового продукта, т.е. сайта. В конце концов, что изменится от того, будет ли закрывающий тег (в коде) иметь вид такой: «>», — или такой: » />» (а такие мелочи тоже приурочены к стандартам)? Внешне — ничего. Кроме того, не существует никакой «полиции нравов» или штрафных мер в отношении «невалидных сайтов».

СНИПы в строительстве применяются не зря. Они выполняют важную миссию по совместимости и безопасности, вплоть до охраны человеческой жизни. Несомненно, веб-дизайн не представляет таких угроз и является областью разработки, которую можно отнести к т.н. экстремальному программированию (одна из гибких методологий разработки, характеризующими чертами которой являются малые сроки разработки и невысокие риски). Тем не менее, определённые риски всё же существуют. Ряд ключевых веб-стандартов W3C, для веб-дизайна, играют ту же роль, что СНИПы для строительства. К примеру, ещё недавно, оформление классов в коде веб-документа могло функционировать без включения в кавычки (<… class=mystyle1> — вместо правильного оформления: <… class=»mystyle1″ …>). В современном Internet Explorer такая вольность грозит тем, что веб-дизайн «разъедется» в разные стороны и превратится в бесхребетную мешанину.

Последние несколько лет, в интернете буквально трубят о том, что 99,9% сайтов устарели и некорректно отображаются в современных браузерах. Показатель спорный. Несмотря на обилие таких записей, я не нашла более-менее достоверного источника подтверждения этих данных. Между тем, с учётом устаревания JavaScript-скриптов и всё большего табуирования веб-стандартов, они кажутся весьма правдоподобными. Реальная цифра может быть ~ 98%, 80%, и даже 70% (на мой взгляд, вряд ли ниже этого). В любом случае, со всем основанием можно полагать, она высока. Каковы причины, и как избежать незавидной участи? Попробуем разобраться (история тянет на детективный роман).

Одной из наиболее вероятных причин возникшей ситуации может быть недооценка или даже злостное игнорирование кроссбраузерности. До поры до времени, Internet Explorer, поставляемый в пакете с Windows (самой популярной и даже некогда монополизировавшей рынок платформой), был, несомненно, самым популярным браузером. Вплоть до августа 2008 года он сохранял лидирующие позиции (более 50% всех пользователей интернета). Хотя разговоры о кроссбраузерности появились значительно раньше, многие веб-дизайнеры не принимали их всерьёз.

мировая динамика использования браузеров

Сопутствующей причиной устаревания сайтов можно указать устаревание некоторых JavaScript-скриптов (а особенно, java-апплетов, почти вышедших из употребления), DHTML, и другие технологии, не получившие развития. На базе JavaScript была создана современная библиотека JQuery. Выдержка из Википедии: «Основной целью создания jQuery Резиг видел возможность закодировать многоразовые куски кода, которые позволят упростить JavaScript и использовать их так, чтобы не беспокоиться о кросс-браузерных вопросах. Библиотека была представлена общественности на компьютерной конференции «BarCamp» в Нью-Йорке в 2006 году.»

Подводя итоги, можно сказать, что если завтра какой-то из браузеров не решит устроить фейерверки всем веб-разработчикам и не введёт санкции на слэши вида «… />», а также — к пробельным областям кода и иным незначительным огрехам, — при исполнении кроссбраузерности и применении современных технологий, сайты могут жить в относительной безопасности. А вот морально устаревший дизайн всё же стоит менять. Хотя бы время от времени.

Этот материал опубликован в Лаборатория Кода, Сенсив-Код и тегирован , , , , , . Bookmark the permalink.

4 отзывов на Веб-дизайн и вёрстка сайтов. Кроссбраузерность и мировые веб-стандарты (W3C)

  1. Андрей говорит:

    Много браузеров, и все работают по разному. Прям глаза открылись. Оч. полезная статья.

  2. Roman говорит:

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

    • N.Volodina говорит:

      Целью статьи не было сравнение ради какого-то уличения/уничижения. Это экспромт-исследование, представляющее объективные данные и освещающее несколько существующих точек зрения. Лично я склонна придерживаться ваших взглядов, но мы должны представлять, что у разработчиков и фанатов означенных веб-стандартов свои убеждения на этот счёт. Признать нерациональность (или рациональность) ряда жёстких w3c-правил — за читателями. Спасибо за отзыв.)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>