[Матрос]

Насколько широко распространены сегодня отзывчивые конструкции среди мировых, самых посещаемых, веб-сайтов? Какова наиболее распространенная ширина сайтов и размеры шрифтов?

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

Сбор данных

Они собрали данные по шаблонах 78 из 100 лучших сайтов по Alexa Ranking. Этот рейтинг основан на статистике панели инструментов Alexa и кодом, подобным к статистике Google Analytics в случае использования платной услуги.

Почему только 78? Первоначальная идея была взять на анализ весь Top 100 Алексы. Но, тем не менее, 17 из этих сайтов, ориентированные на Китай, с эксклюзивными услугами и контентом. Оценивание этих сайтов вызывало дополнительные трудности, и было принято решение оставить их. Пять же других сайтов были вышедшими из строя или не отвечали на момент сбора данных. Поэтому в общей сложности осталось 78 участников.

Так или иначе, были проанализированы сайты, которые ориентированы на конкретные регионы или страны и доступные по всему миру. Четыре русских, три японских и три британских сайта являются частью топ-100, большинство остальных принадлежат Индии, Бразилии, Испании, Италии, Тайване, Мексике, Канаде, Турции, Австралии и Польши. Ну и достаточное количество международных сайтов.

Что проверяли

Для начала проверялось, соблюдает ли основной шаблон на всех страницах сайта отзывчивость, понимаемую как адаптацию к различным размерам окна просмотра (с помощью запросов CSS-media). Далее классифицировали сайты на динамическую или фиксированную ширину. Для фиксированных размеров ширины, они измеряли ширину шаблона в пикселях. Отдельно измерялась максимальная ширина для динамических участков, чтобы пролить больше света на спектр возможностей сайтов. Эта величина была классифицирована в диапазонах с целью представления данных.

Данные по размерам шрифтов также собрались с каждого сайта. Первым делом шла классификация на фиксированный размер шрифта и на динамический. Многие сайты имеют шрифт, изменяющий размер в зависимости от размера экрана. Они были классифицированы в отдельную категорию как имеющие "отзывчивый" размер.

Но хватит! Давайте перейдем уже к прикольным вещам

Отзывчивость и ширина

Данный график показывает, что только 11% из 100 лучших сайтов Alexa по прежнему используют фиксированную ширину. Остальные сделали выбор в пользу динамического подхода с максимальной шириной. Это стоило ожидать в связи с процветающей тенденцией адаптирующегося дизайна и простотой использования этой технологии.

40% из проверенных сайтов имеют максимальную ширину в пределах между 900 и 1000 пикселей, в то время как 26% доходят до 1800px, как показано в следующем графике:

Было неожиданно увидеть такое большое количество веб-сайтов с max-width менее 1000px, поскольку наиболее распространенным разрешением дисплея компьютера сегодня является 1366px.

Более половины фиксированных дизайнов сайтов тоже находятся между 900px и 1000px в ширину. Они, кажется, ориентируются на традиционную ширину дисплеев в 1024px, которые имеют около 960px внутреннего пространства окна. Но, как уже говорилось, это больше не самый распространенный размер разрешение дисплея – теперь стандартной стала ширина в 1366px.

Размер шрифта

Как уже упоминалось, они измерили и основной размер шрифта содержания страниц. Размеры шрифтов, которые изменяют на экране с помощью css-media, являются наиболее распространенными среди рассмотренных сайтов. Фиксированные размеры шрифтов находятся в пределах между 13px и 14px. Более крошечные или более крупные встречаются гораздо реже. Отзывчивый размер шрифтов почти всегда реализуется с помощью средств media, а не VW и VH.

Выводы

• Отзывчивые конструкции стали правилом, а не исключением. Большинство известных сайтов включили в себя CSS-media.
• Большинство известных веб-сайтов имеют ограничение ширины менее чем в 1100px, будь то отзывчивая или фиксированная структура.
• Треть "отзывчивых" сайтов имеют максимальную ширину более чем 1600px .
• Почти нет веб-сайтов имеющих фиксированную ширину более чем 1400px .
• Сайтов уже 700px практически нет среди тех, что используют фиксированную ширину.
• 13px 14px и являются наиболее распространенными размерами шрифтов. Очень мало сайтов используют 12px или меньше, что было довольно распространенным явлением пять лет назад. Тем не менее, немногие идут и выше 15px.

[miraida]

Я заметил, что от полной резины многие стали отступать. Это скорее тенденция была 11-12 года. На данный момент стали ограничивать максималку резины 1200-1300 пикселей. Именно из-за распространенности большинства мониторов в 1366 пиксов.
Если растягивать сильнее образуются пустые области на больших мониторах - на которых сам контент смотрится нечитабельно и некрасиво.

[Strike]

Сообщение от miraida Я заметил, что от полной резины многие стали отступать

...

Сообщение от miraida Если растягивать сильнее образуются пустые области на больших мониторах

Это тренд, который становится негласным правилом уже. Смотреть "резину" на ширине в 1900 пикселей это еще тот изврат. Жалко что многие не видят свои сайты при таком разрешении.. или к счастью. Не знаю даже