Методология
 Скачать 151.12 Kb.
|
|
Текст и шрифты Наличие установленного набора шрифтов позволяет сайту создавать впечатление единообразного и понятного. Шрифт вносит свой вклад в иерархию дизайна и в способность пользователя прочесть содержимое. Средний домен имеет 31 заявленный различный размер шрифта во всех таблицах стилей. Количество размеров шрифтов  Количество размеров шрифтов на один домен значительно колеблется. Невозможно вычислить, сколько шрифтов было использовано на главной странице или сколько было припрятано в закромах приложения для особых случаев. Некоторые прекрасно выглядящие сайты используют в общей сложности до 20 шрифтов для своих страниц. Я считаю, что лучше не гнаться за количеством размеров шрифтов. Это создает впечатление сильного, единообразного дизайна, а также облегчает сотрудничество между дизайнерами и разработчиками. Отзывчивый дизайн Отзывчивый дизайн был впервые представлен в 2010 году Этаном Мэркоттом и вихрем пронесся по сети, оставив около 64% сайтов, очищенных за счет использования своего рода медиа-запросов в CSS. Контент должен подстраиваться под размер экрана, на котором он будет отображаться, и на то, будет ли он отображаться на мобильном или стационарном устройстве. Медиа-запросы стали доступными начиная с IE9, и они позволяют настроить стили в соответствии с определенными размерами экрана, его ориентацией, соотношением высоты к ширине, позволяя отзывчивому дизайну проявить все свои преимущества. Наиболее часто встречающиеся медиа-запросы – это max- или min-width, составляющие 89% всех медиа-запросов. Ниже представлены наиболее распространенные значения ширины, на которые разработчики заставляют реагировать свои стили:  Кривая в области точки 990 px шире других, в нее входят также множество других значений: 960, 970, 980, и 990, 992, 1000 и 1024 px. Прочие области на кривой, обозначенные при помощи зеленых линий, намного уже, что показывает меньший разброс значений относительно контрольных точек при такой ширине. Точки, которые люди выбирают в качестве контрольных, указывают на то, от каких коэффициентов формы они хотят отталкиваться. Наблюдается растущее разграничение устройств на т.н. «телефоны», «планшеты» и «настольные ПК». В частности, текущие контрольные точки Bootstrap, используемые по умолчанию, составляют 768, 992, и 1200. Здесь приведены некоторые значения ширины экранов устройств. Фреймворки  Определить используемую программную среду было непросто. Для получения значений я использовал комбинацию поиска по именам файлов, комментариям (часто оставляемым добропорядочными минимизаторами) и уникальным классам. Это наименее точно составленная таблица в этом докладе, однако она показывает, что Bootstrap с сильным отрывом лидирует в сердцах и умах разработчиков. Лишь около 10% из общего числа исследуемых доменов имели определяемую программную среду. Дополнительные ресурсы Загрузка дополнительных ресурсов также может быть определена в CSS, обычно это относится к определению фонового рисунка (background-image). Ниже представлены наиболее распространенные форматы файлов, которые мы определили в нашем исследовании. Всего было исследовано около 59800 объектов.  Такие результаты – хороший признак, так как расширение .png в целом рекомендовано для не фотографических картинок в сети. Такие файлы имеют альфа-непрозрачность, хороший коэффициент сжатия и широкую поддержку браузеров. Я уверен, что файлы .jpg более распространены в сети, чем указано здесь, но они чаще используются как атрибуты src в тегах , а не в CSS. Разное ГРОМАДНЫЙ Z-INDEX Самый высокий z-index составил невообразимое число, 999999999999999999999999999, или 9,99e26. С установленным по умолчанию значением повторений клавиши для OS X, набор этого числа займет 3 секунды непрерывного удерживания клавиши 9. Если взять такое количество листов бумаги толщиной 0,05 мм, высота получившейся стопки составит расстояние, в 10 триллионов раз превышающее расстояние от Земли до Солнца. Самое плохое, что такой большой объявленный z-index вызовет переполнение, и ни за что не будет работать так, как ожидается. Самое низкое обнаруженное значение более обосновано – -999999. ИМЕНА ЦВЕТОВ В CSS Перечисленные ниже имена цветов в CSS встречались только по одному разу: antiquewhite, azure, olive, bisque, aliceblue, lightsteelblue, blueviolet, firebrick, lightskyblue, lightseagreen, darkorange, seashell, ghostwhite, papayawhip, cornsilk, navajowhite. Мой любимый цвет – papayawhip, восхитительный оранжево-бежевый. Выводы После анализа данных, я смог сделать следующие общие выводы: 1. Люди не слишком заботятся о своих CSS 2. Хорошо выполненные таблицы стилей могут решить множество распространенных проблем 3. Современные функции CSS широко используются Лучшее, что может сделать компания (особенно, если написанием CSS занято большое количество работников) – провести аудит CSS (примечание от переводчика: краткое описание базовых принципов этой процедуры мы приведем в нашей следующей статье). Это позволит выявить допущенные ранее ошибки и внедрить в производственный процесс инструментарий, позволяющий избежать ошибок в будущем. Порядок в ваших CSS-таблицах так же важен, как и написание чистого, хорошо проработанного кода. Держу пари, что плохие CSS могут замедлить работу разработчиков больше, чем любой другой технический аспект, пропорционально обесценивая их труд. Команда должна следить за тем, чтобы CSS содержались в чистоте и порядке. |