Интересная статья от известного человека по имени Якоб Нильсен (Jakob Nielsen). Оригинал на английском языке — Screen Resolution and Page Layout.
Резюме: оптимизируйте сайты под 1024х768, но используйте плавающий дизайн, который правильно растягивается под любое разрешение — от 800х600 до 1280х1024.
Один из самых задаваемых вопросов на моём курсе по «Вебу» — «Под какое разрешение нам подстраивать свои дизайны?» Основные советы очевидны:
- Оптимизируйте под 1024х768 — это самое распространённое разрешение экрана на сегодняшний день. Несомненно, ориентироваться нужно на разрешение экранов целевой аудитории. В будущем размер будет меняться. Разрешение экрана уже может меняться, если сайт создаётся для интранета, заказчик которого выдаёт своим сотрудникам большие мониторы.
- Не надо создавать сайты только под определённое разрешение, так как размеры экранов пользователей различаются. Также посетители не всегда «максимизируют» свои браузеры (особенно если у них большие экраны).
- Используйте «плавающие» дизайны, которые растягиваются под конкретный размер окна (избегайте одноразмерных статичных дизайнов).
На сегодняшний день около 60% всех мониторов настроены под разрешение 1024х768 пикселей. Для сравнения — около 17% мониторов настроены под разрешение 800х600, поэтому вполне очевидно, что нет необходимости оптимизировать именно под это разрешение. Также очевидно, что нельзя игнорировать эти 17%, и создавать страницы, которые требует больше пространства, чем есть на самом деле.
Оптимизация страниц под 1024х768
Когда я говорю «оптимизация», я имею в виду то, что ваша страница должна отображаться и работать оптимально на самом распространённом разрешении экрана. При этом никак нельзя забывать о других разрешениях. Именно поэтому я рекомендую «плавающий» дизайн.
Три самых главных критерия для оптимизации интернет-страниц под определённое разрешение:
- Изначальный обзор: видна ли пользователям вся ключевая информация без прокрутки страницы? Это компромисс между количеством показанных предметов и насколько детально показан каждый предмет.
- Удобочитаемость: насколько легко читается текст в колонках определённой ширины? (Оптимиальная длина строки.)
- Эстетичность: насколько хорошо отображается страница, если у всех элементов правильный размер и правильное расположение? Все ли элементы правильно выстраиваются — например, находится ли подпись рядом с фотографией, и т.д.
Необходимо постоянно думать об этих трёх критериях во время просмотра страницы во всех возможных разрешениях от 800х600 до 1280х1204. Страницы должны отображаться должным образом при всех разрешениях.
Также сайт должен работать при более маленьких и при более больших размерах окна, но такие ситуации не критичны. Меньше чем полпроцента пользователей работают с разрешением 640х480. Для таких пользователей сайт должен отображаться вполне приемлемо с допустимыми отклонениями.
Как гласит первый критерий — необходимо всегда помнить о прокрутке страницы. Обычно пользователям не нравиться прокрутка (в моей новой книге это детально описано, вместе со статистикой, которая показывает, сколько пользователей прокручивают различные типы страниц). Помни — когда создаёшь дизайн, всегда учитывай сколько информации увидят пользователи, если прокрутят один или два полных экрана.
Прокрутка и изначальный обзор зависят от размера экрана: чем больше экран, тем больше информации он показывает, и тем меньше нужно делать прокруток. Как раз здесь необходимо оптимизировать под 1024х768: не прибегая к прокрутке показать самый важный контент (также необходимо убедиться, что критическая информация останется видимой при разрешении 800х600).
Как на счёт крошечных экранов, например таких как мобильные устройства. «Плавающий» дизайн должен изменить свой масштаб под мобильный телефон, но не думайте, что так надо делать сайт вашей компании. У мобильных телефонов своя специфика — чтобы оптимизировать сайт под мобильное устройство, необходимо создать отдельный дизайн, в котором будет меньше функциональности и информации, и который будет целиком ориентирован на содержание сайта.
Большие экраны
У многих пользователей большие экраны. В настоящий момент около 18% используют как минимум разрешение равное 1280х1024 пикселям. Процент пользователей с большими экранами растёт, но не так быстро, как я бы этого хотел.
Большие мониторы — самый простой способ повысить производительность. Тот, кто зарабатывает минимум $50,000 в год, должен иметь разрешение экрана не менее 1600х1200. Плоский дисплей с таким разрешением стоит меньше $500. Поэтому пока большие дисплеи повышают производительность как минимум на 0.5%, это вложение окупится меньше чем за год (типичные корпоративные накладные удваивают издержки компании из расчёта на одного сотрудника; всегда помните, что в любом расчёте производительности необходимо использовать стоимость работ, а не зарплату).
Apple и Microsoft опубликовали отчёты, цель которых была подсчитать рост производительности от больших мониторов. К сожалению, результаты не дали хороших цифр, так как присутствовали методологические ошибки. Мой опыт показывает, что когда люди выполняют свою работу на больших мониторах, то примерный рост производительности равняется 5-10%. Эти проценты равняются росту производительности примерно в 0.5-1% на одного человека, который использует монитор в течение 10% от рабочего времени. Нет сомнений, что большой монитор стоит своих денег.
Лично я использую дисплей с разрешением в 2048х1536 пикселей, при этом я не называю такой монитор большим. В течении следующих 10 лет я буду ожидать, что мониторы с разрешением 5000х3000 станут стандартным решением, как минимум среди профессионалов.
Начиная с 1600х1200, пользователи редко растягивают свои браузеры во весь экран, так как мало интернет-сайтов грамотно отображаются на таких разрешениях. Большие окна волшебным образом упрощают работу с табличными данными, с графическим дизайном, и с многими другими задачами. Только это пока но не относится к настоящей парадигме интернет-сайтов. Сегодня, пользователи интернета с большими экранами утилизируют дополнительное свободное пространство несколькими окнами других приложений параллельно серфингу в интернете.
Чтобы в будущем угодить интернет-пользователям, скорей всего нам будут нужны не индивидуальные страницы, а некая другая парадигма. А может даже метафора, похожая на новостную газету или на другую информационную доску, проявит себя в лучшем свете.
В любом случае, необходимость новой парадигмы не изменит настоящих рекомендаций: оптимизируйте под 1024х768, но не создавайте дизайн только для этого разрешения. Страницы должны работать на любом разрешении, от 800х600 до 1280х1024 и более.
— перевод статьи: umade.ru
Якоб Нильсен уж явно морально устарел.
Вещи о которых он пишет уже не раз описаны многими другими исследователями веб-юзабилити.
Резиновый или эластичный дизайн звучал бы получше.
Да и вообще: CSS рулит. Нильсен нифига не разбирается в технических возмжностях, доступных уже сейчас, и потому местами лупит мимо.
Любой дизайнер-верстальщик задававшийся когда-либо такими вопросами в состоянии ответить на них сам. Полезной информации в статье – ноль.
Gobbr, для кого Нильсен устарел? Когда Рунет начнёт слушать его советы, человек уже сможет летать на Юпитер.
Максим, да — CSS однозначно рулит. Одни только max-width и min-width чего стоят для данной темы.
Korzhukov, любой дизайнер-верстальщик? Все кто создают нечто вроде порталов, считают себя таковыми, если хоть чуть покопались в коде CMS-движка. Но насколько коряво и нелепо выглядят их творенья?
Никита, те про кого вы говорите если и задавались вопросами размера экрана пользователя, то всё прекрасно знают и понимают, просто забили на это. И эта статья им не помощник. Когда человеку в принципе насрать на юзабилити никакой Якоб Нильсен ему не вправит мозги, а иначе и сам справится. Я с бОльшим удовольствием переводы с ALA почитал бы 🙂 А вообще перевод качественный, просто статья так себе, ей место в FAQ в ru.html.chainik, а тут, мне казалось посерьёзнее немного вещи постятся.
Олег, я согласен с тобой — если человек забил, то эта статья ему не поможет. Он будет дальше создавать корявые сайты, или продолжать тупо зарабатывать деньги, не смотря на безобразное расположение нагроможденной рекламы. Но если учитывать юзабилити, то ведь и прибыль увеличится. Наверно, надо делать уклон на самое дорогое для корявого создателя, и на этой почве писать о самом дорогом для пользователя 🙂
А по-моему внимание к производительности от разрешения слишком пристальное. Это один из огромного количества других факторов.
Статью даже дочитывать не стал. Все мы понимаем насколько важно не сделать размер сайта 1600×1024 потому что некоторые(например, такие как я) его не увидят. И писать статью, мне кажется, на эту тему совсем не стоит, сей нюанс описывается в любой книге по HTML.
Да кстати лично мое мнение: сайт лучше всего делать таким, что бы он на 800х600 смотрелся.(по крайней мере пока не выйдет релиз седьмого эксплорера с вкладками)Потому как многие из людей, как я заметил на практике и увидел в этой статье используют эксплорер(те кто его еще используют) в оконном режиме.
P.S не судите строго 🙂 первый раз на сайте. нравится
На самом деле, разговор не о том. Пора уже выкинуть пиксели и пункты из HTML и CSS, и перейти к процентам.
Пиксели допустимы только в тегах IMG, да и то только потому, что “рак веба” задвинул нормальные векторные форматы в ж., за что пользователи расплачиваются терабайтами лишнего трафика. Но провайдеры заработали на “раке веба” не один мегабакс, так что они всеми руками, ногами, хвостами и рогами “за!”.
Об этом Нильсен почему-то молчит. Или просто не перевели еще?
Меня просто бесит, когда 3/5 экрана монитора по ширине занимают пустые колонки справа и слева. Вот это действительно проблема, о которой нужно говорить.
Не понимаю, чего так многие в штыки восприняли эту статью. Я наоборот порадовался, да, у нас то, о чем написал Нильсен уже давно обычное явление, но вот если посмотреть на западные сайты, то там совсем другая тенденция, сплошные фиксированные сайты, даже посмотреть не на что, все одно да потому. Вот если «ихние» веб-дизайнеры обратят особое внимание на эту статью, то будет приятно посмотреть на преображение западного интернета. И это хорошо, что Нильсен заговорил о резиновых сайтах.
Не плохо бы немного практики добавить. А то слишком водянисто получилось.
Не надо ничего оптимизировать под определенное разрешение, самый лучший вариант – резиновый блочный дизайн на CSS, правда иногда оптимальнее использовать таблицы вместе с CSS.
Доля 1280х1024 растет. А вот 800х600 все-таки сдает свои позиции. Надеюсь, еще год-два, и об этом разершении можно будет забыть.
Спасибо!
Мне, как новичку помогло. 🙂
Вообще не понимаю как люди сидят на 1024х768… А есть такие, которые сидят с этим разрешением на 19″ экранах. Ведь это вообще мозахизм…
ЗЫ: Имхо 800х600 уже не юзает 17% )
А мне статья понравилась.
Может то, что написано все уже знают, но в этой статье все так аккуратненько объяснено. А, к тому-же, я полностью согласна с автором :))
Все страницы всегда оптимизирую под разрешение 800×600, я например никогда браузер не раскрываю на весь экран, а когда в браузере появляется горизонтальная прокрутка как-то уже некомфортно страница смотрится, куда приятней листать вверх-вниз, чем когда еще добавляется вправо-влево.
Нравятся мне американцы. В своё время меня значительно удивляло, что если задать любому американцу любой вопрос, то ни у кого он не вызовет затруднения: каждый американец тут же начнёт на него отвечать! Потом я понял в чём фишка: 94% его ответа составит само повторение вопроса в нескольких вариациях, выстроенных цепью, оставшиеся 6% возвестят о личном отношении говорящего к вопросу, ну а… на собственно ответ приходится оставшееся число процентов. Они много говорят, не производя никакой полезной коммуникации. Так и здесь, автор повторил тему заголовка 16 раз и спёкся. Ясен пень, что дизайн желательно делать универсальный, так сказал бы уже наконец КАК?!
> Вообще не понимаю как люди сидят на
> 1024х768… А есть такие, которые сидят с этим
> разрешением на 19″ экранах. Ведь это вообще
> мозахизм…
Это абсолютно нормально. Если приглядеться, то на б_о_льших разрешениях экран начинает заметнее мерцать, независимо от времени отклика монитора. Для глаз, естесственно, любое мерцание на пользу не идёт, но если уж выбора нет, то желательно минимизировать последствия. Тем более, что реального выигрыша большие разрешения не дают (кроме большего количества значков, помещающихся на десктопе). И не надо говорить про большое количество окон, которые можно использовать параллельно, экономя время: это время Вы потеряете, когда будете закрывать окна, прицеливаясь, вместо того, чтобы махнуть мышью вправо вверх и выполнить щелчок. Мой многолетний опыт программиста показывает, что необходимости в двух или нескольких неразвёрнутых окнах, расположенных рядом, нет даже для Drag&Drop’а, не говоря уж о более простых вещах.
> Доля 1280х1024 растет. А вот 800х600 все-таки
> сдает свои позиции. Надеюсь, еще год-два, и об
> этом разершении можно будет забыть.
Зря. Пустая надежда. Через пару лет, я думаю, уже можно будет говорить о последствиях использования больших разрешений. Детям маленьким не зря дают книжки с большими буквами.
Согласен с Дмитрием – детям не зря дают книжки с большими буквами.
Я лично посидел какое то время на 1280х1024 и понял, что зрения уже не хватает (а я фотограф, помимо всего прочего).
С другой стороны посмотреть – каждому нравится то , что нравится. У меня есть друг, так он вообще любит мелочь на экране разглядывать, хоть и зрение слабенькое.
Что касаемо сайтов – ИМХО, что любой сайт должен быть удобен пользователю, поэтому дожен быть “резиновым”, горизонтальное просматривание раздражает любого, так наш организм устроен.
Информация о 17% которые сидят на 800 на 600 устарела.. Не больше 12% а то и меньше.
А попробуйте сделать резину на портал, с лентами новостей и с кучей информаии, как текстовой так и графической, да так чтобы 800 на 600 и 1600х1200 смотрелись приблизительно одинаково.. тяжело ;).. так что резина полноценной не получится с таким разбросом разрешений.
ИМХО резина и то только под 3 самых популярных разрешения.
—-
Мерцание при увеличении разрешения – это частота обновления экрана плохая. Чем больше экран и качественней – тем большую частоту можно выставить на определенное разрешение. Но с приходом ТФТ это становится не актуальным. Трубки юзают сейчас в основном только дизайнеры, кому на качественный тфтешник денег не хватает.
А прочему у меня на плазме которая больше 1280*768 разрешение 1600*1200 не поддерживает это зависит только от видеокарты
Все зависит от проекта. Делать резину или по середина. Однозначно не по-левую сторону, тем более по-правую
резина – рулит однозначно! разрешения экранов растут быстро … а редизайны не очень частая особенность сайтов!
Резина посредине не больше 1000 и вперед!
Главное – позиции в поиске
Лучше всего при дизайне сайта вообще не привязываться к разрешению, а писать в процентах от длины и ширины!
На картинке растяжки не поставить!
Привет всем! Пожалуйста объясните! у меня есть картинка, я хочу ее поставить на background (разрешение картинки 1024*768), но если монитор 800*600 у html появляется прокрутка в право. Можно ли сделать так, чтоб картинка подгонялась под разрешение, т.е если 1024*768, то картинка 1024*768, если 800*600, то и картинка 800*600 была в html. Видел кучу сайтов с такой фишкой!
Сергей, в качестве картинки заднего фона, через CSS, необходимо разместить картинку большого размера, чтобы она автоматом подходила под большие разрешения. Вот и всё.
На сегоднешний день 1024 на 768 сменяют ЖК стандарты
Все, кто ругает текст – читайте дату публикации текста.
Я за свою трехлетнюю самостоятельную работу по освоению веба и сайтостроительства сам пришел до абсолютно таких же выводов, только с поправкой на время (сейчас уже популярные разрешения увеличились, конечно).
Все это легко отследить по данным статистики своих нескольких сайтов. Причем, чем сайт более направлен на молодую аудиторию, тем выше среднее разрешение мониторов и среди браузеров меньше IE. И делайте сами выводы при строительстве определенного сайта.
А касательно рекомендаций – все правильно в тексте. Другое дело – это не звезды с неба. Как конкретно – явно не здесь, тут общая теория.
1024 на 768 уже очень сильно устарел.