Проблема "Первого экрана"

В процессе обучения проектированию макетов веб-сайтов для Интернет у студентов художественно-графических и других художественных факультетов наблюдается тенденция стереотипного мышления. Они, не задумываясь, автоматически начинают создавать композицию (компоновку листа) подобно тому, как это происходит в изобразительном искусстве, в частности полиграфической продукции, что в конечном результате приводит к серьезным неудобствам или тупиковым ситуациям в информационном поле.

При проектировании полиграфического изделия мы имеем дело с материальным объектом, имеющим ограниченные линейные размеры (формат). Традиционно их измеряют в миллиметрах или дюймах. Переходя к проектированию веб-ресурса мы сталкиваемся с проблемой, когда не можем однозначно сказать, в каких линейных размерах потребитель увидит конечный результат. Это вызвано тем, что выводимое изображение ограничено количеством пикселей, а не его линейными размерами. Экраны с одним и тем же разрешением могут различаться в разы по своим размерам, например, некоторые экраны смартфонов имеют разрешение больше, чем проекторы, используемые для презентаций в офисах или в интерактивных досках.

Проследим «эволюцию» изменения разрешения экранов мониторов по своей популярности при работе с Интернет-ресурсами:

  • 90-годы – 640x480 пикселей;
  • 2000-2003 гг. – 800x600 пикселей;
  • 2004-2008 гг. – 1024x768 пикселей [1];
  • 2008-2010 гг. – 1280x1024 пикселей [2].

Начиная с 2010 года, изменилась парадигма в создании дисплеев. Если ранее большинство разрешений экранов мониторов имело соотношение сторон 4:3, то теперь в большинстве случаев оно составляет 16:9. Причиной является переход традиционного телевидения co стандартов PAL, SECAM, NTSC на цифровой формат HDTV (High Definition Television). С целью удобства просмотра видеоконтента, большинством производителей компьютерных дисплеев было принято решение перейти на новый формат. Таким образом, большинство современных дисплеев имеют соотношение сторон 16:9, а их разрешение приближается к полноформатному – 1920x1080 (Full HD). В последнее время возникает тенденция использования цифровых телевизоров в качестве дисплеев. Основными причинами является:

  • количество цифровых телевизоров превысило количество аналоговых и цена первых заметно падает;
  • диагональ телевизора превышает диагональ настольного монитора, что позволяет комфортно просматривать его на большом расстоянии;
  • вместо компьютера для просмотра Интернет страниц активно начинают использовать телеприставки, неттопы, либо внедряют подобное устройство в сам телевизор;
  • цены на телевизоры, поддерживающие 3D-контент, резко снижаются.

В результате количество устройств, просматривающих веб-страницы в разрешении 1920x1080 пикселей и с соотношением сторон 16:9 значительно увеличивается. Тем не менее, по ряду наблюдений, в 2012 году популярным разрешением было 1366x768 пикселей [3]. Чем это можно объяснить? Дело в том, что на мониторах с диагональю менее 21” читать страницы веб-сайтов, при разрешении экрана 1920x1080 пикселей крайне не удобно. Это касается и телевизоров с диагональю менее 40”. Соответственно пользователи переключаются на меньшее разрешение, с целью укрупнения размеров содержимого.

Начиная с 2009 года, пошла «обратная волна» в популярных разрешениях экрана мониторов. Причиной стало появление новых устройств – нетбуков. Их традиционное разрешение составляет 1024x600 пикселей, что меньше более популярного за последнее десятилетие - 1024x768 пикселей. С 2010 года свою лепту стали вкладывать еще более популярные устройства – планшетные компьютеры, массовое разрешение которых в среднем до начала 2012 года составляло 800x480 пикселей. Так же развивается сектор мобильной связи, где пользователи смартфонов начинают перетягивать на себя часть трафика Интернет. Разрешение же смартфонов сопоставимо с разрешением планшетных компьютеров.

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

Создавая полиграфическое изделие мы можем видеть весь лист. Соответственно можно более доступно, с учетом его линейных размеров и пропорций соотношения сторон, выстраивать на нем фронтальную композицию. При создании веб-страницы у нас такой возможности нет – мы видим только часть, отображаемую браузером, остальное для нас доступно только при вертикальной или горизонтальной прокрутке. Так же мы заранее не можем знать, какое у пользователя будет разрешение экрана монитора и соотношение его сторон. Видимую область экрана принято называть «первым экраном», так как при загрузке видно только эту часть веб-страницы [4]. Поэтому композицию веб-страницы можно считать как бы растянутой в пространстве и во времени, по аналогии как в книге или кинофильме (более точный пример – как в развернутом пергаментном свитке), и в данный момент мы можем иметь дело только с «первым экраном».

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

Проводя поиск размеров «первого экрана» для разрешения 1920x1080 пикселей (Full HD) с учетом, что у браузеров имеется определенная толщина со всех сторон (панель меню сверху, информационное поле снизу, тонкая рамочка слева, полоса прокрутки справа, а так же панель задач операционной системы), был получен следующий результат для рабочей области:

  • Internet Explorer – 1902x924;
  • Mozilla Firefox – 1920x918;
  • Google Chrome – 1920x989 .

Учитывая минимальные размеры вертикальных и горизонтальных параметров рабочей области браузеров, можно прийти к выводу, что для создания сайта в «Web HD»-стиле [5] потребуется разрешение 1902x918 пикселей. Таким же эмпирическим методом можно определить «первый экран» и для других разрешений дисплеев.

Проблему «первого экрана» приходится учитывать при проектировании шаблонов веб-страниц. В частности такие композиционные закономерности гармонизации формы как: композиционный центр и пропорции (рациональные и иррациональные отношения форм), – мы не можем использовать в их традиционном виде.

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

Вопрос о пропорциях в веб-страницах рассматривался уже давно [6, с. 82-83], но тем не менее под влиянием изобразительного искусства к нему вновь и вновь обращаются молодые дизайнеры, в надежде внести «свежую струю» [7-9]. Пропорции объекта должны учитывать окружающую среду. Если для полиграфического издания точкой отсчета является формат листа, то для веб-страницы такой точкой отсчета является размер и пропорции экрана монитора, которые, как мы выяснили ранее, являются величинами не постоянными. Соответственно, не учитывая этот факт, объект, имеющий самое из самых «злотых сечений», вступит в диссонанс с окружающей средой – пропорцией «первого экрана» и рамкой экрана монитора. В результате, мы не можем говорить о «золотом сечении» для веб-страницы в целом, а только лишь об отдельных элементах и их окружающих объектах на этой странице.

Первые сайты имели статичную верстку. Такая верстка была «безопасной» для компоновки блоков и элементов на веб-странице, в ней легче применить композиционные закономерности. Вследствие чего появилась популярная сетка «960gs» [10]. Но для экранов мониторов с разрешением 1280x1024 пикселей и более она была неприемлемой, т.к. оставалось много пустого пространства. Выходом было появление «резиновой верстки», когда размеры блоков веб-страниц подстраиваются под текущее разрешение экрана монитора. Но при появлении экранов с разрешением по ширине от 1600 пикселей и более встал вопрос об ограничении предельной ширины веб-страницы средствами каскадной таблицы стилей (CSS), так как читать строчки текста растянутые по всей ширине экрана становится значительно труднее. Более элегантным способом заполнения пустого пространства стал прием, когда блоки веб-страницы располагаются последовательно по вертикали, выровненные по центру, но при этом применяется фиксированная верстка, а задний фон блоков равномерно распределяется по всей ширине экрана. Примером такой верстки можно считать дизайн веб-сайта сервиса Skype [11].

Появление планшетных компьютеров и смартфонов, немного «перевернули» представление о привычной верстке. Теперь для просмотра веб-страниц стала доступна не только альбомная, но и книжная ориентация экрана (ранее доступная лишь в профессиональных мониторах с функцией вращения экрана, и соответственно не столь учитываемая при разработке дизайна веб-страниц). Для преодоления трудностей создания композиции под такой вид экрана, у большинства веб-разработчиков, в данное время вызывает интерес адаптационный или реагирующий дизайн [12]. Суть метода заключается в автоматической перекомпоновке блоков веб-страницы с учетом текущего разрешения экрана. С применением этой технологии вопрос композиционного центра и пропорций становиться как никогда более остро.

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

Список литературы

  1. Browser Display Statistics, URL: http://www.w3schools.com/browsers/browsers_display.asp (дата обращения: 12.10.2012 г.)
  2. Статистика рунета по экранному разрешению мониторов на октябрь 2008 - ноябрь 2009 г., URL: http://www.globi.ru/usability/ekran200810.htm (дата обращения: 12.10.2012 г.)
  3. Статистика разрешений экранов интернет-пользователей с 2012 г. в режиме реального времени, URL: http://ru.screenresolution.org (дата обращения: 12.10.2012 г.)
  4. Nielsen J. Scrolling and Attention, URL: http://www.useit.com/alertbox/scrolling-attention.html (дата обращения: 20.10.2012 г.)
  5. Филенко Р. Е. «Web HD» – новый стиль в Web-дизайне или старый подход к новым технологиям / Р. Е. Филенко // Актуальные проблемы художественного образования: история, опыт, перспективы: сб. науч. тр. / под ред. С. П. Машовец. - Хабаровск: Издательство ДВГГУ, 2010. - С. 196-199.
  6. Кирсанов Д. Веб-дизайн: книга Дмитрия Кирсанова. – СПб.: Символ-Плюс, 2004. – 376 с.
  7. Золотое сечение в веб-дизайне, URL: http://seleckis.lv/journal/web-dizayn/zolotoe-sechenie-v-veb-dizayne (дата обращения: 20.10.2012 г.)
  8. Лунева Л. Композиция в веб дизайне или принцип Золотого сечения, URL: http://prodengiblog.ru/archives/2346 (дата обращения: 20.10.2012 г.)
  9. Золотое сечение для объектов и веб-разметки, URL: http://watcherr.wordpress.com/2010/10/28/applying-the-golden-ratio-to-web-layouts-and-objects/ (дата обращения: 20.10.2012 г.)
  10. 960 Grid System, URL: http://960.gs (дата обращения: 20.10.2012 г.)
  11. Skype, URL: http://www.skype.com (дата обращения: 20.10.2012 г.)
  12. Раскрытие тайны реагирующего веб-дизайна, URL: http://naikom.ru/blog/archives/5566 (дата обращения: 20.10.2012 г.)

Источик:

Филенко Р. Е. Проблема "Первого экрана" / Р. Е. Филенко // Актуальные проблемы, тенденции, перспективы развития художественно-педагогического и профессионально-художественного образования в отечественной и зарубежной теории и практике / под ред. Ф.Ф. Бандуристого, О.Б. Павленкович. - Хабаровск: Издательствово ДВГГУ, 2013. - С. 82-86.