Безопасная зона сети (оптимальное разрешение) для дизайна веб-приложений - PullRequest
1 голос
/ 23 февраля 2011

Я нахожусь в процессе разработки нового веб-приложения, и мне интересно, какую «безопасную веб-область» мне следует оптимизировать для макета и дизайна приложения.Под безопасной веб-областью я подразумеваю фактическую область, доступную для отображения веб-сайта в браузере (на которую влияют разрешение монитора, а также пространство, занимаемое браузером и ОС)

Я провел некоторое исследование и обдумывалмой, но хотел бы поделиться этим, чтобы увидеть, каково общее мнение.Вот что я нашел:

Оптимальное разрешение экрана:

  • веб-статистика w3schools , кажется, самый упоминаемый источник (однако ониутверждают, что это результаты их сайта и ориентированы на пользователей, разбирающихся в технологиях)
  • http://www.w3counter.com/globalstats.php (совокупность данных с примерно 15 000 различных сайтов, использующих свои службы отслеживания)
  • StatCounter Global Stats > Разрешение экрана (статистика основана на совокупных данных, собранных StatCounter для выборки, превышающей 15 миллиардов просмотров страниц в месяц, собранной из сети StatCounter более чем 3 миллионов веб-сайтов)
  • NetMarketShareScreen Resolutions (marketshare.hitslink.com) (консалтинговая фирма, занимающаяся веб-аналитикой, которая получает данные из браузеров посетителей сайта в свою сеть клиентов по запросу в режиме реального времени. Данные составляются из примерно 160 миллионов посетителей в месяц)

Сводка разрешения экрана: Есть немного вариацийСоотношение между указанными выше источниками, но в целом по состоянию на январь 2011 г., выглядит примерно так: 1024x768 составляет около 20%, в то время как ~ 85% имеют более высокое разрешение, по крайней мере, 1280x768 (1280x800 является наиболее распространенным из них с 15-20% от общего числа веб-страниц, в зависимости отна источнике;За ними следуют 1280х1024 и 1366х768 с долей 9-14%).Я предполагаю, что более высокие значения разрешения будут еще более распространенными, если мы будем фильтровать по Северной Америке, и еще выше, если мы будем фильтровать по корпоративным пользователям из Северной Америки (к сожалению, я не смог найти бесплатную статистику с географической фильтрацией).Еще один момент, на который следует обратить внимание: количество пользователей настольных компьютеров 1024x768, вероятно, ниже, чем вышеупомянутые 20%, учитывая, что iPad (собственный дисплей 1024x768), вероятно, поддерживает эти цифры.

Моя рекомендация будет заключаться в оптимизацииОграничение 1280x768 (* примечание: разрешение 1280x768 на самом деле является относительно редким, но я думаю, что это допустимый диапазон ограничений, учитывая, что 1366x768 относительно распространено, а 1280 является наиболее распространенным горизонтальным разрешением).

Браузер + ОСОграничения: Чтобы еще больше добавить к ограничениям, мы должны вычесть пространство, занимаемое браузером (при условии IE, который занимает больше всего места) и ОС (при условии WinXP-Win7):

  • Win7 занимает наибольшую площадь панели задач на высоте 40 пикселей (для XP и Vista - 30 пикселей)
  • В стандартном представлении IE8 используется 25 пикселей внизу экрана со строкой состояния и еще 120 пикселей вверхуэкрана со строкой заголовка Windows и пользовательским интерфейсом браузера (при условиипанель инструментов «Избранное» по умолчанию присутствует, вместо этого она будет 91px без панели инструментов Favorites.
  • Если не использовать полосу прокрутки, мы также теряем 4px по горизонтали для контура окна.

Это означает, что у нас осталось 583 пикселя по вертикали и 1276 пикселей по горизонтали.Другими словами, безопасная веб-область размером 1276 x 583

Это правильная линия мышления?

Я пытался использовать Google некоторые передовые методы проектирования, но большинство все еще говорят о проектировании около 1024x768, которое кажетсяБыстро исчезать.

Любая помощь по этому вопросу будет принята с благодарностью!Спасибо.

Ответы [ 2 ]

1 голос
/ 23 февраля 2011

Как отметил Бигуд, http://browsersize.googlelabs.com было перенесено в Google Analytics.Однако перспективы также изменились.

Вместо того, чтобы пытаться создать страницу с фиксированными, «оптимальными» размерами, более современный подход заключается в разработке веб-сайтов как адаптивных страниц, которые адаптируются к различным разрешениям экрана. Twitter Bootstrap - это одна из многих библиотек CSS и компонентов, которые облегчают создание адаптивных сайтов.

Кроме того, другие инструменты облегчают тестирование отклика веб-страницы с различными разрешениями.Например, инструменты разработчика Chrome теперь позволяют разработчикам эмулировать определенные устройства или вручную устанавливать определенные размеры экрана и получать разумное представление о том, как веб-страница будет отображаться пользователям с таким разрешением:

Chrome Device/Resolution Emulation

Инструменты разработчика Internet Explorer позволяют изменить размеры браузера до заданных или настраиваемых, определенных размеров.

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

0 голосов
/ 24 февраля 2011

Немного посмотрев вокруг, я нашел действительно полезный сайт, который может показать вам, как ваш сайт будет выглядеть в разных типах браузеров (и версиях), а также в разных ОС: http://browsershots.org/

Еще одна оговорка к моему рассуждению выше заключается в том, что разные браузеры на самом деле занимают разное количество пикселей в зависимости от ОС, на которой они работают. Например, в WinXP IE8 занимает 142 пикселя в верхней части экрана (вместо вышеупомянутого 120px для Win7), поскольку файловое меню по умолчанию отображается в XP, а в Win7 файловое меню по умолчанию скрыто. Таким образом, похоже, что в WinXP + IE8 безопасная веб-область будет всего 572 пикселей (768 пикселей-142-30-24 = 572)

Опять же, я очень удивлен, что не смог найти такого типа «исследований» в Интернете. Многие сайты говорят о дизайне для 1024x768, но это только половина уравнения! Там нет упоминаний о влиянии браузера / ОС на фактическую область отображения сайта / приложения.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...