С учетом того, что адаптивность практически становится стандартом, определить лучший размер для веб-сайта стало сложнее, чем когда-либо. До того, как адаптивность стала мейнстримом, мы использовали ширину нашего дизайна, на которой размеры экрана были популярны в настоящее время.
Таким образом, вы знали, что, по крайней мере, большая часть посетителей ваших сайтов увидит сайт так, как вы хотели. Но с ростом экранов выросли и наши сайты Только за ним следуют меньшие размеры экрана, из-за популярности ноутбуков меньшего размера.
К счастью, быстро реагирующие сайты решают эту проблему, так что вы можете сделать свой сайт хорошо выглядящим на большинстве экранов. Но это все еще не отвечает на вопрос, какой размер веб-сайта является наилучшим. Время заняться исследованиями.
Немного истории размеров экрана
Источник: Statcounter
Давайте сначала посмотрим на некоторые из самых популярных размеров экрана за эти годы. Согласно данным Statcounter (популярный бесплатный счетчик посетителей), 1024 × 768 был самым популярным размером до марта 2012 года. В этом месяце он был превзойден 1366 × 768, который до сих пор остается самым популярным на сегодняшний день.
Разница между этими двумя размерами? 1366 × 768 — это широкоэкранный формат с соотношением 16: 9, где 1024 × 768 имеет более традиционное соотношение 4: 3. Этот переход знаменует собой переход от обычных настольных мониторов к все еще очень популярным широкоэкранным ноутбукам.
Размер 1366 × 768 предназначен только для экранов с диагональю экрана от 10,1 до 16 дюймов, но вы можете себе представить, что на последнем он будет выглядеть не очень хорошо.
Поэтому можно с уверенностью сказать, что если вы решите использовать статический размер, 1366 × 768 — ваша самая безопасная ставка. Это если вы обслуживаете широкую аудиторию.
1920 × 1080 (Full HD экраны) также растут, особенно с технологически ориентированной аудиторией. Это означает, что эти люди увидят ваш сайт 1366 × 768 с большими пустыми полями слева и справа.
А вы видели большую строку «Другое» на скриншоте StatCounter? Существует целый ряд экранов разных размеров, которые не подпадают под указанные категории размеров. Вот где в игру вступает отзывчивость.
Как насчет отзывчивости?
Создание адаптивного сайта популярнее, чем когда-либо. Это позволяет для одного дизайна, который отображается во всю ширину на любом размере экрана. Адаптация размера просмотра веб-сайтов регулируется с помощью CSS и зависит от области просмотра устройства, которое использует посетитель. Окно просмотра — это видимая часть вашего сайта без полос прокрутки.
Аннарита написала отличную статью о концепции адаптивного дизайна здесь, на SitePoint.com. Вы можете прочитать это здесь .
Общее предположение заключается в том, что вы можете использовать адаптивный дизайн, чтобы веб-сайт выглядел хорошо на любом типе устройства. Это не совсем верно. Адаптивный дизайн гарантирует, что максимальное пространство просмотра каждого устройства используется при просмотре вашего сайта. Это в основном означает отсутствие горизонтальных полос прокрутки. Но это не значит, что на самом деле это будет хорошо выглядеть.
Чтобы увидеть живой пример, пожалуйста, посмотрите на один из моих сайтов, который использует адаптивный дизайн. Он использует фоновое изображение на всю страницу, которое, как мне кажется, отлично смотрится на мониторе Full HD (который я использую сам). Боковые панели все еще на настройках по умолчанию.
Тема WordPress, которую я использую, оптимизирована для адаптивной работы, что означает, например, уменьшение количества даже призывающих к действию блоков «Применить».
Теперь измените размер своего браузера и посмотрите, что получится. Боковые панели перемещаются ниже основного содержимого, поэтому теряют свое использование в качестве боковых панелей. Они становятся просто кучей ящиков, за которыми никто не приложит усилий, чтобы прокрутить вниз, чтобы увидеть их. Представьте себе, если бы там размещалась реклама: это сильно снизит ваши доходы. Это выглядит еще хуже на мобильном телефоне, так что ваш маленький мобильный экран кажется еще меньше.
Хотя мне не нравятся боковые панели под контентом, я бы не хотел, чтобы они помещались между контентом. Я могу быть немного предвзятым, так как я действительно не люблю отзывчивый (я решаю купить больший телефон и вместо этого использовать размеры рабочего стола), но вы должны быть очень креативными, если хотите правильно использовать боковые панели.
В основном вы должны принять тот факт, что вам нужно включить в контент наиболее важные ссылки и рекламные объявления, иначе они, вероятно, не будут видны. Но вы должны быть уверены, что этот дизайн по-прежнему хорошо выглядит на настольных компьютерах или планшетах (для которых вы должны отключить адаптивный режим), поскольку он может испортить ваш макет, если вы не будете за ним следить.
Адаптивный дизайн лучше работает для макетов, которые не содержат боковых панелей. Но на маленьких экранах остается очень мало места, поэтому даже при оптимизированном мобильном макете вам нужно решить, какой контент вы хотите показать больше всего.
Так является ли адаптивный лучший «размер» для веб-сайта? Наверное, да, но жизнь была намного проще, когда мы все использовали одни и те же экраны.
Сообщите мне в комментариях, какой размер веб-сайта вы считаете наилучшим, или что вы думаете об адаптивном дизайне в целом.