Редизайн сайта общественно-политического СМИ как фактор повышения его адаптивности (на примере портала «Город 812»)

Карнаухова Мария Константиновна

Редизайн сайта общественно-политического СМИ как фактор повышения его адаптивности (на примере портала «Город 812»)

АННОТАЦИЯ ВКР Карнауховой Марии Константиновны «Редизайн сайта общественно-политического СМИ как фактор повышения его адаптивности (на примере портала «Город 812») » Н. рук. – Якунин Александр Васильевич, кандидат филол. наук, доцент Кафедра медиадизайна и информационных технологий Очная форма обучения Стремительно растет количество производимых мобильных устройств, чей размер и технические характеристики значительно отличаются; увеличивается зона покрытия мобильного Интернета и качество сигнала; у веб-специалистов появляются новые возможности для разработки мобильных сайтов и приложнний. Вследствие всего этого, все больше пользователей заходят в Интернет через свои телефоны и планшеты. Многие из них получают информацию из социальных сетей и новостных агрегаторов, попадая на страницы онлайн-изданий, минуя главные страницы, часто даже не обращая внимания на бренд СМИ, чей портал они посетили. Актуальность нашего исследования, таким образом, обусловлена значением адаптивного веб-дизайна для возрождения и приращения успеха онлайн-СМИ, которые в настоящее время испытывают падение посещаемости ввиду отсутствия возможности просмотра с мобильных устройств.Новизна работы объясняется практически полным отсутствии научной литературы по теме, а также анализом современных тенденций и данных, ранее не изученных. Объектом нашего исследования являются адаптивные сайты современных общественно-политических СМИ. Предметом – редизайн портала «Город 812» с переходом на адаптивную версию. Цель работы: разработать новую композиционно-графическую модель портала «Город 812». В соответствии с поставленной целью были сформулированы следующие задачи: - раскрыть понятие адаптивного веб-дизайна как стратегии проектирования, изучить историю его развития, принципы, задачи и связанные с ним концепции; - проанализировать актуальные тенденции в дизайне онлайн-СМИ, а также исследовать примеры редизайна сайтов современных общественно-политических СМИ с переходом на адаптивные версии; - изучить предпочтения аудитории онлайн-изданий, выявить конкурентов портала «Город 812», а также его достоинства и недостатки; - с учетом полученных результатов разработать новую композиционно-графическую модель сетевого медиапроекта. В работе были использованы следующие методы исследования: опрос, интервью, анализ статистических данных, сопоставительный анализ, исторический метод, метод интерпретации, метод обобщения и метод конструирования. Теоретическую базу диплома составляют работы в области адаптивного дизайна («Отзывчивый веб-дизайн» И. Маркотта, «Adaptive web design» А. Густафсона, «Сначала мобильные!» Л. Вроблевски, «Responsible responsive design» С. Джела), исследования по юзабилити и пользовательскому опыту Nielsen Norman Group (Р. Будиу, Я. Нильсен), труды по современным медиа («Медиаэкономика зарубежных стран» и «Медиасистема России» Е. Л. Вартановой, «Интернет-СМИ: Теория и практика» М. М. Лукиной, «Как новые медиа изменили журналистику» под науч. ред. С. Балмаевой, М. Лукиной), а также работы по дизайну СМИ («Дизайн-модель интернет-версии как результат трансформации модели печатного издания» и «Особенности графической модели интернет-версий периодических изданий (на материале итальянских СМИ)» А. А. Беляева, «Специфика медиадизайна» В. В. Волковой, «Дизайн и виртуальная среда: дигитальные ландшафты в аспекте гибридных медиа» М. Н. Долгих, «Guide to Journalism and Design» Х. Чаплин). Эмпирическая база включает в себя онлайн-ресурсы современных общественно-политических СМИ, выпуски журнала «Город 812» за период с 12.09.2016 по 27.02.2017, а также статистические данные, отражающие развитие мобильной индустрии, развитие медиасферы, поведение пользователей и их медиапотребление и т.д. (Comscore, OpenSignal, Cisco, Всемирная газетная ассоциация, Reuters Research). Структура диплома включает в себя введение, две глав, заключение, список используемой литературы и приложения.

Массовая коммуникация. Журналистика. Средства массовой информации

Дипломы

Вуз: Санкт-Петербургский государственный университет (СПбГУ)

ID: 5a6f88337966e12684eea2e0

UUID: 5ecacde0-ee22-44fc-9a5c-917d7391abe7

Язык: Русский

Опубликовано: почти 7 лет назад

Просмотры: 27

Карнаухова Мария Константиновна

Источник: Санкт-Петербургский государственный университет

Комментировать 0

Рецензировать 0

Скачать - 6,5 МБ

Поделиться работой

САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ Институт «Высшая школа журналистики и массовых коммуникаций» На правах рукописи КАРНАУХОВА Мария Константиновна Редизайн сайта общественно-политического СМИ как фактор повышения его адаптивности (на примере портала «Город 812») ВЫПУСКНАЯ КВАЛИФИКАЦИОННАЯ РАБОТА по направлению «Журналистика» (профессионально-практическая работа) Научный руководитель – кандидат филол. наук, доцент А.В. Якунин Кафедра медиадизайна и информационных технологий Очная форма обучения Вх. №______от__________________ Секретарь _____________________ Санкт-Петербург 2017

2 ОГЛАВЛЕНИЕ ВВЕДЕНИЕ .............................................................................................................. 4 ГЛАВА 1. АДАПТИВНЫЙ ВЕБ-ДИЗАЙН КАК ПОДХОД: ПРЕДПОСЫЛКИ ФОРМИРОВАНИЯ, ПРИНЦИПЫ, ЗАДАЧИ И КОМПОНЕНТЫ .................... 9 § 1. Увеличение количества и растущая популярность мобильных устройств как предпосылка формирования адаптивного веб-дизайна ............................ 9 § 2. «Отзывчивый» веб-дизайн ......................................................................... 13 § 3. Принцип «прогрессивного улучшения» ................................................... 17 § 4. Определение понятия адаптивного веб-дизайна как подхода ............... 20 § 5. Концепции «сначала мобильные» и «сначала контент» ........................ 23 § 6. M-dot сайты как альтернатива адаптивным ............................................. 28 ГЛАВА 2. РЕДИЗАЙН САЙТА ОБЩЕСТВЕННО-ПОЛИТИЧЕСКОГО СМИ КАК ФАКТОР ПОВЫШЕНИЯ ЕГО АДАПТИВНОСТИ ................................ 33 § 1. Современные медиа: тенденции и проблемы .......................................... 33 § 2. Современные тренды в дизайне сайтов СМИ ......................................... 39 § 3. Примеры редизайна сайтов общественно-политических СМИ с переходом на адаптивные версии .................................................................... 43 § 4. Журнал и портал «Город 812»................................................................... 58 § 5. Анализ конкурентной среды, предпочтений пользователей и пожеланий редакции.............................................................................................................. 64 §6. Создание нового дизайн-макета портала «Город 812» ............................ 70 ЗАКЛЮЧЕНИЕ ..................................................................................................... 76 СПИСОК ИСПОЛЬЗУЕМОЙ ЛИТЕРАТУРЫ .................................................. 78 ПРИЛОЖЕНИЯ ..................................................................................................... 85 Приложение 1. Статистические данные .......................................................... 85 Приложение 2. Вероятно, первый адаптивный сайт ...................................... 87

3 Приложение 3. Примеры редизайна сайтов общественно-политических СМИ с переходом на адаптивные версии ....................................................... 89 Приложение 4. Журнал и портал «Город 812» ............................................. 101 Приложение 5. Результаты исследования предпочтений пользователей .. 107 Приложение 6. Макеты нового сайта журнала «Город 812» ...................... 118

4 ВВЕДЕНИЕ Стремительно растет количество производимых мобильных устройств, чей размер и технические характеристики значительно отличаются; увеличивается зона покрытия мобильного Интернета и качество сигнала; у веб-специалистов появляются новые возможности для разработки мобильных сайтов и приложений. Вследствие всего этого, все больше пользователей заходят в Интернет через свои телефоны и планшеты. Многие из них получают информацию из социальных сетей и новостных агрегаторов, попадая на страницы онлайн-изданий, минуя главные страницы, часто даже не обращая внимания на бренд СМИ, чей портал они посетили. Глубина просмотра невелика, как и уровень вовлеченности. Посещения больше не гарантируют успех, а доходы от рекламы в Интернете не покрывают падение доходов на ТВ и в печати. Чтобы не потерять, а привлечь аудиторию, современные СМИ вынуждены всегда быть максимально гибкими. Медиаменеджеры изобретают новые способы вовлечения читателей, журналисты – новые подходы к рассказыванию историй, а дизайнеры и веб-разработчики – новые способы передачи и отображения контента на любых устройствах в любых условиях. Решением этой проблемы является переход на адаптивные версии сайтов, которые способны изменяться в ответ на изменение среды, иначе говоря, ширины экрана устройства и его технических характеристик. Первоначально сведенный к созданию «гибких» макетов, такой подход затем развился до полноценной стратегии проектирования, названной адаптивным веб-дизайном, в которую входят концепции «сначала мобильные», «сначала контент», «прогрессивное улучшение», о которых мы расскажем в тексте нашей работы. Приверженность этому подходу продемонстрировало множество современных зарубежных и российских СМИ, что выразилось в проведении большого количества редизайнов за последние несколько лет.

5 Тем не менее, несмотря на острую необходимость, сайты далеко не всех СМИ способны корректно отображаться на разных устройствах. В особенности это касается небольших региональных медиа. Актуальность нашего исследования, таким образом, обусловлена значением адаптивного веб-дизайна для возрождения и приращения успеха онлайн-СМИ, которые в настоящее время испытывают падение посещаемости ввиду отсутствия возможности просмотра с мобильных устройств. Новизна работы объясняется практически полным отсутствии научной литературы по теме, а также анализом современных тенденций и данных, ранее не изученных. Объектом нашего исследования являются адаптивные сайты современных общественно-политических СМИ. Предметом – редизайн портала «Город 812» с переходом на адаптивную версию. Цель работы: разработать новую композиционно-графическую модель портала «Город 812». В соответствии с поставленной целью были сформулированы следующие задачи: 1. раскрыть понятие адаптивного веб-дизайна как стратегии проектирования, изучить историю его развития, принципы, задачи и связанные с ним концепции; 2. проанализировать актуальные тенденции в дизайне онлайн-СМИ, а также исследовать примеры редизайна сайтов современных общественно-политических СМИ с переходом на адаптивные версии; 3. изучить предпочтения аудитории онлайн-изданий, выявить конкурентов портала «Город 812», а также его достоинства и недостатки;

6 4. с учетом полученных результатов разработать новую композиционнографическую модель сетевого медиапроекта. В работе были использованы следующие методы исследования: опрос, интервью, анализ статистических данных, сопоставительный анализ, исторический метод, метод интерпретации, метод обобщения и метод конструирования. Теоретическую базу диплома составляют работы в области адаптивного дизайна («Отзывчивый веб-дизайн» И. Маркотта, «Adaptive web design» А. Густафсона, «Сначала мобильные!» Л. Вроблевски, «Responsible responsive design» С. Джела), исследования по юзабилити и пользовательскому опыту Nielsen Norman Group (Р. Будиу, Я. Нильсен), труды по современным медиа («Медиаэкономика зарубежных стран» и «Медиасистема России» Е. Л. Вартановой, «Интернет-СМИ: Теория и практика» М. М. Лукиной, «Как новые медиа изменили журналистику» под науч. ред. С. Балмаевой, М. Лукиной), а также работы по дизайну СМИ («Дизайн-модель интернет-версии как результат трансформации модели печатного издания» и «Особенности графической модели интернет-версий периодических изданий (на материале итальянских СМИ)» А. А. Беляева, «Специфика медиадизайна» В. В. Волковой, «Дизайн и виртуальная среда: дигитальные ландшафты в аспекте гибридных медиа» М. Н. Долгих, «Guide to Journalism and Design» Х. Чаплин). Эмпирическая база включает в себя онлайн-ресурсы современных общественно-политических СМИ, выпуски журнала «Город 812» за период с 12.09.2016 по 27.02.2017, а также статистические данные, отражающие развитие мобильной индустрии, развитие медиасферы, поведение пользователей и их медиапотребление и т.д. (Comscore, OpenSignal, Cisco, Всемирная газетная ассоциация, Reuters Research). Диплом состоит из введения, двух глав, заключения, списка используемой литературы и приложения.

7 В нашей работе, мы коснемся не только аспектов, связанных с работой дизайнера над адаптивными версиями, но и технической стороны дела, так как она обуславливает конечный дизайн-процесс, и без ее понимания невозможно спроектировать по-настоящему удачный макет адаптивного сайта. Более того, границы программирования и дизайна в настоящий момент размываются: «две культуры – дизайн и инженерия – стали тяготеть к общей заинтересованности в использовании гибких систем в интерактивных сервисах и к исследованию пользовательского опыта»1. Тенденция начала проявляться довольно давно: возникли конструкторы сайтов и программ, предлагающие готовые части кода, вроде Adobe Dreamweaver, распространение получили библиотеки CSS, а в последнее время появилось множество инструментов прототипирования, которые позволяют онлайн создавать мокапы и прототипы любой сложности, в том числе интерактивные. По данным, которые приводит Джон Маэда, известнейший специалист в области компьютерных технологий и профессор дизайна Массачусетского технологического института, из пяти дизайнеров каждый второй задействован в написании кода; каждый третий дизайнер имеет инженерное образование2. Кроме того, в современных дизайн-студиях разработка макета ведется не в отрыве от написания кода, а одновременно с ним, и процесс сопровождается постоянным тестированием. По этой причине кроме контекста в первой главе исследуются следующие концепции, связанные во многом не только с дизайном, но и с разработкой сайтов, – «отзывчивый дизайн», с опорой на труды Итана Маркотта по теме, и «прогрессивное улучшение», с опорой на тексты Аарона Густафсона. Только после этого будет дано определение адаптивного веб- Долгих М. Н. Дизайн и виртуальная среда: дигитальные ландшафты в аспекте гибридных медиа // Вестн. Том. гос. ун-та. 2014. №379. С.86-91. 2 Design in tech report 2017. // Сайт специалиста в области компьютерных технологий и профессора дизайна Массачусетского технологического института Джона Маэды. URL: designintechreport.files.wordpress.com/2017/03/dit-2017-1-0-7-compressed.pdf. 1

8 дизайна как подхода, поскольку данные работы лежат в его основе, и без детального разбора определение понятия не представляется возможным. Вторая глава содержит исследование тенденций в сфере современных медиа, и связанных с ними трендов в области дизайна сайтов СМИ, а также изучение примеров редизайна общественно-политических СМИ с переходом на адаптивные версии. Кроме того, анализируется онлайн-версия «Город 812» и ее конкуренты, а также предпочтения аудитории общественно-политических порталов. В конце формулируется дизайн-концепция новой версии портала «Город 812». В заключении сформулированы основные выводы исследования. Приложение содержит скриншоты страниц анализируемых сетевых медиапроектов, а также макеты нового сайта журнала «Город 812».

9 ГЛАВА 1. АДАПТИВНЫЙ ВЕБ-ДИЗАЙН КАК ПОДХОД: ПРЕДПОСЫЛКИ ФОРМИРОВАНИЯ, ПРИНЦИПЫ, ЗАДАЧИ И КОМПОНЕНТЫ § 1. Увеличение количества и растущая популярность мобильных устройств как предпосылка формирования адаптивного веб-дизайна Еще в 2015 году корпорация Google объявила3, что количество поисковых запросов, совершенных с мобильных устройств, превысило количество запросов с компьютеров в десяти странах, включая США и Японию. В 2015 же году вебмастеры и разработчики объявили4 «Мобилогеддон» (англ. Mobilegeddon) после смены Google алгоритмов: сайтам, адаптированным для мобильной платформы, был отдан приоритет при поиске с мобильных устройств. Согласно докладу мультинационального технологического конгломерата Cisco за 2016 год5, мировой мобильный трафик вырос в 18 раз за последние пять лет. 429 миллионов новых мобильных устройств вышли на рынок в прошлом году. Из них 45% составляют «смартфоны» (включая «фаблеты»), чья доля в общем мобильном трафике составляет 81%. Скорость мобильного Интернета (сотовая связь) увеличилась более чем в три раза. Общая тенденция касается и новостных сайтов. По данным на 10 апреля – 7 мая 2016 года компании Hitwise6, 64% переходов на новостные сайты и сайты СМИ в мире приходится на мобильные устройства (включая планшеты). Building for the next moment // Официальный блог Google Inside AdWords. 05.05.2015. URL: adwords.googleblog.com/2015/05/building-for-next-moment.html 4 Google's new search algorithm stokes fears of 'mobilegeddon' // Американское мультимедийное СМИ NPR. 21.04.2015. URL: npr.org/sections/alltechconsidered/2015/04/21/401269739/googles-new-search-algorithm-stokesfears-of-mobilegeddon 5 Cisco visual networking index: global mobile data traffic forecast update, 2016–2021 white paper // Сайт разрабатывающей и продающей сетевое оборудование американской компании Cisco. 28.03.2017 URL: cisco.com/c/en/us/solutions/collateral/service-provider/visual-networking-index-vni/mobile-white-paper-c11520862.html 6 Mobile search: topics and themes // Доклад американской аналитической компании Hitwise. 10.04.2016 – 07.05.2016. URL: hitwise.connexity.com/rs/371-PLE-119/images/hitwise-mobile-search-report-us.pdf. 3

10 За период с июля 2014 по июль 2015, сообщают Hitwise, время проводимое пользователями мобильных устройств на новостных сайтах, выросло на 40%, а число новых подписчиков – на 55%. По данным газеты «Ведомости», уже в 2015 году у журнала Forbes примерно половину всех читателей статей электронной версии составляли мобильные пользователи, у The New York Times и Dow Jones – более половины.7 Более того, аудитория мобильных пользователей новостных онлайнизданий растет быстрее, чем общее количество мобильных пользователей8. На момент июля 2016 года за трехлетний период мобильная аудитория сайтов категории «новости/информация» только в США увеличилась на 66%, в то время как общее количество мобильных пользователей увеличилось на 57%, при этом наибольший рост показали сетевые СМИ – их мобильная аудитория увеличилась в два раза, и сайты, посвященные политике, – их мобильная аудитория увеличилась более чем в шесть раз. Такой рост мобильной аудитории сетевых медиапроектов, как считают9 в ComScore (американском агентстве, занимающемся анализом рынка интернет-технологий с 1999 года), связан с тем, что медиа начали массово адаптировать свои порталы для мобильных устройств. Тем не менее, мы вынуждены заметить, что, значительную долю в приросте переходов имеют новостные агрегаторы, и, несмотря на стабильный рост Интернет-аудитории, по данным Всемирной газетной ассоциации, только в самых развитых странах количество читателей газет в Сети превысило читателей печатных версий (например, в США 80% населения пользуются Мобильный трафик на сайты СМИ растет на десятки процентов в год // Сайт газеты «Ведомости». 24.08.2015. URL: vedomosti.ru/technology/articles/2015/08/25/606050-smi-popali-mobilnuyu-propast 8 The state of mobile news audiences in 3 charts // Сайт Comscore. 8.07.2016. URL: comscore.com/Insights/Blog/The-State-of-Mobile-News-Audiences-in-3-Charts. 9 Traditional news publishers take non-traditional path to digital growth // Сайт Comscore. 31.03.2016. URL: comscore.com/Insights/Blog/Traditional-News-Publishers-Take-Non-Traditional-Path-to-Digital-Growth 7

11 электронными версиями газет), в то время как около 60% жителей Земли читают газеты в печатном виде.10 Что касается России, по данным исследовательской компании Comscore11, за 12 месяцев, прошедших с мая 2015 года, в России «десктопная» аудитория новостных сайтов снизилась на 9%, в то время как на мобильных устройствах увеличилась на 10% за тот же период. При этом около половины россиян имеют доступ в Интернет с разных платформ. Рост количества мобильных устройств обуславливает их растущую фрагментацию, в особенности это касается гаджетов, работающих на платформе Android. Во-первых, это огромная разница в ширинах экранов, вовторых, разница в операционных системах. По подсчетам OpenSignal12, выпускающей программу для улучшения сигнала сотовой и Wi-Fi сетей, в 2015 году приложение компании было установлено на 24093 различных мобильных устройствах (см. Приложение, рис. 1), в то время как в 2014 году их было 18796, а в 2013 – 11868. Каждое из этих устройств чем-то отличается от остальных, в том числе диагональю экрана. Следующие таблицы (см. Приложение 1, рис. 2-3) наглядно демонстрируют разброс размеров дисплеев устройств, работающих на Android и iOS. Можно заметить, что мобильные устройства корпорации Apple демонстрируют относительную гомогенность. Кроме того, с 2012 по 2015 годы появилось больше 1000 новых компанийпроизводителей, многие из которых создают собственные операционные системы. В начале, сопротивляясь все возрастающей неопределенности и гибкости, изначально присущим Сети, веб-дизайнеры пытались устанавливать Full highlights of World press trends 2016 survey // Сайт Всемирной газетной ассоциации. 06.12.2016. URL: wan-ifra.org/articles/2016/06/12/full-highlights-of-world-press-trends-2016-survey 11 Россия: новостные сайты формируют мобильное потребление // Сайт занимающейся исследованием аудитории транснациональной аналитической компании Comscore. 13.07.2016. URL: comscore.com/rus/Insights/Data-Mine/Russia-News-Websites-Making-Headlines-for-Mobile-Consumption 12 Android fragmentation // Доклад британской компании OpenSignal, выпускающей программу для улучшения сигнала сотовой и WiFi сетей. 08.2015. URL: opensignal.com/legacyassets/pdf/reports/2015_08_fragmentation_report.pdf 10

12 ограничения, задавая размеры шрифтов в пикселях или создавая макеты с фиксированной шириной. Однако проблемы, связанные с проектированием сайтов для различных устройств, стали очевидны уже в начале 2000-х, на заре мобильного Интернета. В 2005 году Консорциум Всемирной паутины – организация, разрабатывающая и внедряющая технологические стандарты для Всемирной паутины – в своем докладе «Scope of Mobile Best Practices» признала: «Для того, чтобы справляться с различием в производительности и ограничениях мобильных устройств, авторы контента и разработчики сервисов часто вынуждены выпускать несколько версий своих продуктов и/или полагаться на распространенные техники адаптации»13. Члены организации предложили свое видение «Единой Сети» (анг. One Web), где контент, то есть «любые данные – текст, звук, зрительные образы или комбинация мультимедийных данных, представленные в аналоговом или цифровом формате на разнообразных носителях»14, будет одинаково доступен пользователям как мобильных устройств, так и компьютеров. В 2008 году, члены Консорциума пересмотрели свое видение «Единой Сети», подчеркнув необходимость доступности информации и сервисов пользователям, независимо от устройств.15 Это стало фундаментом для разработки таких вебстандартов, как HTML5 and CSS3, которые могут реагировать и отвечать (англ. respond) на характеристики устройств. Одновременно с развитием этих стандартов члены Консорциума призывали к внедрению адаптивного вебдизайна. «У веб-дизайнеров имеется существенная проблема: мы находимся на удалении от пользователя и его окна браузера со всеми свойственными только ему особенностями недостатками… как только проект становится доступным онлайн, все начинает зависеть от человека, который его просматривает… Если Scope of mobile web best practices // Сайт Консорциума Всемирной паутины. 20.12.2005. UR: w3.org/TR/mobile-bp-scope 14 Интернет-СМИ: Теория и практика: учеб. пособие для студентов вузов / под ред. М. М. Лукиной. М, 2010. С. 22. 15 Mobile web best practices 1.0 // Сайт Консорциума Всемирной паутины. 29.07.2008. URL: w3.org/TR/mobile-bp/#OneWeb 13

13 ширина браузера посетителя сайта хоть чуть-чуть меньше ожидаемой минимальной ширины, то он столкнется с тем, что часть содержимого сайта будет обрезана, или будет вынужден пользоваться для просмотра горизонтальной прокруткой»16. В итоге у разработчиков и дизайнеров просто не осталось выбора, так как создание отдельных макетов для уже упомянутого нами выше числа разнообразных устройств было невозможно, и они были вынуждены искать новые подходы. § 2. «Отзывчивый» веб-дизайн Одним из таких подходов стал «отзывчивый веб-дизайн» (с англ. Responsive web design), объединивший уже существовавшие тогда принципы в одну концепцию. Впервые термин был использован независимым вебдизайнером Итаном Маркоттом в 2010 году в одноименной статье17. Понятие отзывчивости он перенес с изученного им принципа «отзывчивой архитектуры», подстраивающаяся под нужды владельца, например, сменой цвета стен. После он развил идею в одноименной книге18. По Маркотту, цель «отзывчивого дизайна» состоит в передаче одного HTML-документа бесчисленным браузерам и устройствам с использованием гибкого макета и медиа-запросов для того, чтобы дизайн был настолько мобильным (англ. portable) и доступным, насколько это возможно19. Таким образом, Итан Маркотт включает20 в «отзывчивый дизайн»: 1. гибкий макет на основе сетки (flexible, gridbased layout); 2. гибкие изображения (flexible images); 3. медиазапросы (media queries), модуль спецификации CSS3. 16 Marcotte E. Responsive web design. NY, 2011. P. 5-6 Marcotte E. Responsive web design. 25.03.2010. URL: alistapart.com/article/responsive-webdesign 18 Marcotte E. Responsive web design. NY, 2011. 19 Opt. cit. P. 109 20 Opt. cit. P. 11 17

14 По мнению Итана Маркотта, вместо того чтобы создавать отдельные макеты для определенных устройств или браузеров, мы должны относиться к ним как к аспектам одного пользовательского опыта. Другими словами, мы должны создавать сайты, которые будут не только более гибкими, но и смогут лучше адаптироваться к устройствам отображения. Так, показательны определения, которые использует Маркотт в контексте «отзывчивого дизайна» – перспективный (англ. futureproof) и аппаратно-независимый (англ. device-agnostic). Еще одной характеристикой «отзывчивого дизайна» является его способность к самодостаточному развитию (англ. sustainability) – способность работать успешно функционировать на устройствах в будущем21; иначе говоря, «отзывчивый дизайн» – это решение проблем, с которыми сталкивается пользователь в мире вечно увеличивающегося числа девайсов и браузеров. Гибкий макет на основе сетки. В основе «отзывчивого дизайна» лежит принцип модульной сетки – «системы вертикалей, горизонталей, а то и диагоналей, образующих своего рода каркас типографической композиции в масштабе листа, страницы или разворота»22, популяризированной Яном Чихольдом, Эмилем Рудером, Йозефом Мюллер-Брокманном. Базовой концепцией этого принципа является гармония: «Необъяснимо, но доказано, что человек принимает геометрически определенные, осознанные пропорции за более приятные и красивые… Раз уж пригодность и красота печатной продукции… зависят от пропорций страниц, то тот, кто хочет сделать красивую, приятную книгу, должен выбрать в первую очередь бумагу определенных пропорций»23. Однако веб-дизайн отличается от графического размером страницы. Более того, окно браузера может менять размер в соответствии с желанием пользователя или размерами устройств. Поэтому идеи графического дизайна 21 Jehl S. Responsible responsive design. NY, 2014. P. 6 Кричевский В. Типографика в терминах и образах / Т. 1. М., 2000. С. 112 23 Чихольд Я. Облик книги: избранные статьи о книжном оформлении. М, 1980. С. 55-56 22

15 нуждались в адаптации для современного веб-дизайна, что и сделали, например, Хой Винь24 и Марк Болтон25. Первоначально стандартной единицей для описания размеров частей сетки, то есть колонок, рядов, средников и т.д., были пиксели. Однако пиксели – единицы фиксированные, а потому не подходят для концепции «отзывчивого дизайна». Вместо этого все элементы на странице выражаются в процентах. Так, Маркотт предложил формулу «целевое значение ÷ контекст = результат», где контекст – это контейнер, в котором содержится элемент, чей размер мы вычисляем. Заметим, кстати, что кегль также выражается в относительных единицах «em», так как текст вместе с сеткой должен подстраиваться под размер экрана. Как пишет Маркотт, необходимо не просто переводить созданные в графическом редакторе фиксированные макеты в относительные единицы, а сразу проектировать с учетом пропорций. «Речь идет о том, чтобы учитывать контекст – лучше понимать основанные на пропорциях взаимоотношения между элементом и контейнером» 26. «Гибкая» сетка – это фундамент, самый первый и важнейший слой «отзывчивого дизайна», но не единственный. «Сеть, в конце концов, предназначена для просмотра всюду. «Гибкий» макет является основанием для будущего: он позволяет нам отступить от разработки под отдельные экраны и лучше подготовить наш дизайн к устройствам, которые еще даже не были изобретены»27. «Гибкие» изображения. Одна из проблем, с которой столкнулись дизайнеры при создании «гибких» сеток, – это изображения, которые при растягивании сетки выходили за пределы контейнеров, а при сужении – обрезались. Способ решения этой проблемы впервые был предложен еще в 24 Vinh H. Ordering disorder: grid principles for web design. Berkeley, 2011. Boulton M. A practical guide to designing for the web. Penarth, 2009. 26 Marcotte E. Responsive web design. NY, 2011. P.44 27 Opt. cit. 25

16 2003 году дизайнером Ричардом Раттером28. Не будем вдаваться в технические подробности, так как это выходит за пределы нашей работы, скажем лишь, что свойство max-width: 100 % позволяет ширине изображения быть любой и при этом не превышать ширину контейнера. Еще одно важное для нас замечание: это решение не подходит для сложной графики, изменение размеров которой делает ее нечитабельной. В этом случае единственный выход – создание собственной версии для каждой платформы. Медиазапросы. К моменту написания статьи, а затем и книги Итана Маркотта специалистами было проведено немало экспериментов с «гибкими» сетками. В итоге оказалось, что, расширяясь за пределы спроектированного макета, сетка становится ограничением для контента. На мобильных экранах элементы оказываются расположены друг к другу слишком близко, а на экранах компьютеров – разделены чрезмерным количеством негативного пространства. Решение было найдено29 уже упомянутым нами Консорциумом Всемирной паутины: были разработаны медиазапросы – правила CSS, которые позволяют управлять стилями элементов в зависимости от технических параметров устройств. Так, например, пользователь планшета увидит на своем экране не автоматически растянувшуюся страницу, спроектированную для мобильного телефона, а страницу, макет которой был исправлен разработчиками и дизайнерами в соответствии с устройством. Несмотря на то, что медиазапросы, кажется, касаются исключительно программистов, на самом деле благодаря им дизайнеры могут создавать более продуманные макеты, учитывая разный пользовательский опыт. Медиазапросы привносят в отображение макетов больше контроля: создав один макет, дизайнер растягивает его до тех пор, пока расположение контента 28 Rutte R. Images in liquid columns. 17.12.2003. URL: clagnut.com/blog/268. Media Queries: W3C recommendation // Сайт Консорциума Всемирной паутины. 19.06.2012. URL: w3.org/TR/css3-mediaqueries. 29

17 не покажется ему неудачным, тогда создается новый макет, где эти проблемы устраняются. Дизайнеры, по мнению Маркотта, вынуждены постоянно выбирать между гибкостью и контролем, однако «это не должно быть бинарной оппозицией». Таким образом, современный подход – это гибрид адаптивного30 (не путать с «адаптивным веб-дизайном») и «гибкого» макетов. Используя такой подход, дизайнеры и разработчики делают сайты понастоящему «отзывчивыми», способными отображаться на любых устройствах. § 3. Принцип «прогрессивного улучшения» Практически одновременно с книгой Маркотта, также в 2011 году вебдизайнер Аарон Густафсон пишет книгу Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement31. Как ни парадоксально, в этой книге Густафсон не только не дает определение адаптивного дизайна, но и практически не использует этот термин, уделяя все внимание концепции «прогрессивного улучшения» (англ. progressive enhancement), о которой более подробно речь пойдет позже. Сам Густафсон так объясняет32 парадокс названия своей книги в интервью журналу для веб-разработчиков и дизайнеров Net: «Название моей книги – «Адаптивный веб дизайн» – возникло, потому что «прогрессивное улучшение» отлично с ним сочетается. Нам понравилась идея пользовательского интерфейса, который мог бы адаптироваться под пользователя». Макет, на самом деле представляющий собой набор фиксированных по ширине макетов, например, трех – для мобильного телефона, для планшета и для компьютера. Минус такого макета в том, что на устройствах, чьи размеры отличаются от тех, для которых он проектировался, он может отображаться некорректно 31 Gustafson A. Adaptive web design. Crafting Rich Experiences with Progressive Enhancement. Chattanooga, 2011. 32 Aaron Gustafson on creating an accessible mobile web // Интервью с Аароном Густафсоном. 19.08.2014. URL: creativebloq.com/netmag/aaron-gustafson-creating-accessible-mobile-web-81412687. 30

18 Впервые термин «прогрессивное улучшение» был использован Ник Финк и Стивен Чемпион в 2003 году33: «…"прогрессивное улучшение" создает документы сначала для самых слабых устройств, затем начинает улучшать эти документы для устройств с иной логикой презентации, не накладывая чрезмерную нагрузку на базовые устройства, но создавая более богатый опыт для пользователей с современными браузерами». А появился он в ответ на существовавший ранее принцип «постепенной деградации» (англ. graceful degradation). Густафсон так описывает этот принцип: «"Постепенная деградация" заключалась в сервировке пользователям последних и лучших браузеров опыта полноценного обеда, в то время как несчастным, которым не повезло пользоваться старыми или менее мощными браузерами, бросали объедки»34. В то время разработка велась с акцентом на самые современные браузеры, оставляя тестирование более старых версий на потом. Согласно распространенному тогда мнению, пользователи последних в любом случае увидят «хотя бы что-то», а значит, не имеет смысла тратить на них время. Со временем специалисты поняли, что Интернет был предназначен для распространения и обмена контентом, а такой подход противоречит его доступности и открытости. «…потрясающий опыт не должен строиться по принципу "все или ничего"… вместо этого веб-технологии должны применяться как слои, накладываемые друг на друга, чтобы создавать более богатый пользовательский опыт и взаимодействие пользователя с системой»35. Таким образом, в основе принципа «прогрессивного улучшения» лежит идея доступности контента для любого пользователя, использующего любое устройство; сама концепция включает различные уровни разметки веб- 33 Champeon S., Finck N. Inclusive web design for the future with progressive enhancement. 11.03.200. URL: hesketh.com/publications/inclusive_web_design_for_the_future. 34 Gustafson A. Adaptive web design. Crafting Rich Experiences with Progressive Enhancement. Chattanooga, 2011. P.6 35 Op. cit. P.7

19 страницы, принципы CSS, JavaScript и дополнительные возможности (предоставляющие доступ к специальным возможностям для пользователей с нарушением зрительной, слуховой функций и ограниченной способностью к движению). Так, весь пользовательский опыт, созданный с помощью «прогрессивного улучшения», будет постепенно уменьшаться (англ. degrade) в старых браузерах, но не весь опыт, созданный с помощью «постепенной деградации», будет постепенно улучшаться (англ. progressively enhance). «Идея в том, чтобы, создавая… что-либо, не накладывать технические ограничения на пользователей. С "прогрессивным улучшением" вы фокусируетесь на контенте и главных задачах страницы и строите на этом пользовательский опыт, накладывая слои различных технологий»36. Иначе говоря, «прогрессивное улучшение» как нельзя лучше соответствует принципам «Единой Сети», ориентирующейся на всех и не допускающей своеобразной дискриминации. Так, в 2012 году команда разработчиков нового сайта телерадиовещательной компании BBC запустила блог, в котором они описывали свой опыт редизайна с переходом на адаптивную версию37: «Первый уровень поддержки мы называем стержневым опытом… мы оставляем их [прим. автора – наименее мощные браузеры] с чистым, выразительным, ключевым пользовательским опытом». Доступность, однако, означает не только доступность для пользователей устаревших браузеров. Она понимается шире: в частности, доступность контента на мобильных телефонах, используя которые их владельцы задействуют кончики пальцев, изначально являющиеся более крупными и менее точными, чем курсор мышки. В таком случае, например, кнопки увеличивают, а функции, на компьютере доступные после наведения, – делают доступными с помощью касания. Aaron Gustafson on creating an accessible mobile web // Интервью с Аароном Густафсоном. 19.08.2014. URL: creativebloq.com/netmag/aaron-gustafson-creating-accessible-mobile-web-81412687. 37 Cutting the mustard // Блог разработчиков адаптивного сайта BBC News. 2015. URL: responsivenews.co.uk/post/18948466399/cutting-the-mustard. 36

20 Как пишет Густафсон, при создании проекта с помощью «прогрессивного улучшения» в первоочередном фокусе находится контент и все строится вокруг него (о подходе «сначала контент» мы поговорим далее). Первый уровень пользовательского опыта, по его мнению, – это текст. Второй уровень составляет семантика HTML-языка, проявляющаяся в различных элементах, добавляющих новый смысл, например, источник цитаты или значение незнакомого слова. Третий – аудио-визуальный опыт, четвертый – это уровень взаимодействия. § 4. Определение понятия адаптивного веб-дизайна как подхода В настоящее время как в западной, так и отечественной академической и профессиональной сферах не существует общего мнения по поводу «адаптивного дизайна» и «отзывчивого дизайна», разобранных нами выше. Одни специалисты считают понятия синонимами, другие разделяют, третьи включают одно в другое. Это осложняется еще и тем, что в отечественной практике понятие «отзывчивый дизайн» не распространено, вместо него практически во всех контекстах используется понятие «адаптивного». В зарубежной практике, напротив, чаще используется термин «отзывчивый дизайн», причем как в узком смысле («гибкий макет»), так и в широком (что в нашем случае будет равнозначно понятию адаптивного дизайна). С распространением идей Густафсона и Маркотта в среде вебспециалистов произошла подмена понятий. Многие стали понимать под «отзывчивым веб дизайном» «отзывчивый» макет, названный Маркоттом «гибким», также иногда именуемый «жидким» или «резиновым», то есть макет, способный растягиваться в ответ на изменения ширины экрана. Но если сращивание понятий «отзывчивый макет» и «отзывчивый веб-дизайн» не так распространено, то подмена понятия «адаптивный веб-дизайн» понятием «адаптивный макет» распространено повсеместно. Последний представляет собой, скорее, набор фиксированных макетов, спроектированный под разные

21 ширины экранов, отображающиеся, соответственно, в зависимости от ширины экрана устройства. Такая подмена понятий породила множество споров по поводу того, какое из определений «отзывчивый дизайн» и «адаптивный дизайн» лучше использовать. Однако и то, и другое – подходы, где выбор макета всего лишь часть общей идеи. Например, Маркотт пишет: «Отзывчивый дизайн» – это, с одной стороны, философия, с другой – стратегия фронт-енд разработки. И как стратегия разработки она нуждается в оценке, удовлетворяет ли она потребностям проекта, над которым вы работаете»38. Джеффри Зельдман, основатель союза веб-разработчиков «The Web Standards Project» и один из самых известных веб-дизайнеров, также замечает, что понятие «отзывчивого дизайна» неправомерно сузили: «Отзывчивый дизайн – это слишком значительная идея, чтобы быть сведенной к одному техническому подходу к проблеме многочисленных, в корне отличных сред просмотра…приемы «отзывчивого дизайна» продолжат улучшаться и… адаптироваться. Наше понимание «отзывчивого дизайна» должно быть расширено, чтобы включить любой подход, который предполагает элегантный визуальный опыт, несмотря на размер дисплея и ограничения устройства»39. Кроме того, в отличие от макетов, имеющих разные принципы, эти подходы на самом деле не противоречат друг другу. Во-первых, для обоих подходов ключевыми являются концепции, из которых они развились, – «сначала мобильные» и «сначала контент», о которых более подробно речь пойдет в следующем параграфе. Во-вторых, описывая «отзывчивый дизайн» Маркотт уделяет внимание «прогрессивному улучшению», что, как мы выяснили, характерно для «адаптивного дизайна». «На самом деле "прогрессивное улучшение" – всегда было краеугольным камнем для большинства "отзывчивых" макетов…было отличительным признаком 38 Marcotte E. Responsive Web Design. NY, 2011. P. 111 Zeldman L. J. Responsive design: I don’t think that word means what you think it means. 06.07.2011. URL: zeldman.com/2011/07/06/responsive-design-i-dont-think-that-word-means-what-you-think-it-means. 39

22 «отзывчивого» подхода к веб-дизайну, основанному на стандартах»40. В итоге оба подхода в целом преследуют одну цель – сделать Интернет более удобным и доступным для всех. Этого мнения придерживается и Густафсон: «По мнению Итана [прим. автора – Маркотта], "отзывчивый дизайн" – это три составляющих: медиа запросы, "жидкая" сетка [прим. автора – в значении «гибкий макет»] и "гибкие" изображения. Эти три составляющие абсолютно должны быть частью "прогрессивного улучшения" страницы. Для меня "отзывчивый дизайн" – это техника, которая входит в состав "прогрессивного улучшения"»41. По его мнению42, «отзывчивый дизайн» решает вопросы фронт-енда43, в то время как «адаптивный дизайн» касается бэк-энда44 и принимает во внимание не только форму, но и основы создания пользовательского интерфейса. Ввиду этого подход Густафсона считается более объемным. Кроме того, некоторым специалистам термин «адаптивный дизайн» кажется более подходящим, так как «в действительности веб-сайт скорее адаптируется под устройство, чем постоянно реагирует (с англ. respond) на изменение его среды»45. Принимая во внимание все вышесказанное, ключевым для нас понятием будет «адаптивный веб-дизайн», который мы понимаем как подход, целью которого является создание веб-сайтов, одинаково доступных всем пользователям, использующим любые устройства, и адаптирующихся под эти 40 Marcotte E. Responsive Web Design. NY, 2011. P. 132 Myers A. Defining and understanding adaptive content. 12.12.2013. URL: cmswire.com/cms/customerexperience/defining-and-understanding-adaptive-content-023433.php. 42 Opt. cit. 43 front-end (фронт-е́нд) – область технологий для разработки веб-интерфейсов, включает вспомогательные инструменты и технологии, работающие в браузере или клиентсайд; внешняя часть серверной системы, отвечающая за приём данных, отправку ответов и генерацию кода для браузера, входит в серверсайд. Источник: Словарь терминов по фронтенду / под ред. В. Макеева, О. Алексашенко. URL: github.com/webstandards-ru/dictionary/blob/master/dictionary.md. 44 back-end (бэк-е́нд) – область веб-технологий, работающих на сервере; внутренняя часть серверной системы, занимается обработкой данных. Источник: Словарь терминов по фронтенду / под ред. В. Макеева, О. Алексашенко. URL: github.com/web-standards-ru/dictionary/blob/master/dictionary.md. 45 Doyle M. Responsive web design demystified. 30.09.2011. URL: http://www.elated.com/articles/responsive-webdesign-demystified. 41

23 устройства. Данный подход включает в себя идеи «отзывчивого веб-дизайна» («гибкий макет» и «гибкие» изображения, а также медиазапросы и стили CSS), стратегию «прогрессивного улучшения», концепции «сначала мобильные», «сначала контент» и «ненавязчивый JavaScript», ориентацию на перспективу. Лишь в самом конце в рамках этого подхода после этапов определения цели создания сайта, разработки контент-стратегии, создания базового макета (англ. Wireframe) и т.д. выбирается тип макета, в нашем случае, «гибкий» или «адаптивный». § 5. Концепции «сначала мобильные» и «сначала контент» Как уже было сказано, для адаптивного дизайна как подхода очень важны концепции «сначала мобильные» и «сначала контент». Первая стала логичным итогом распространения мобильных устройств и увеличением мобильного трафика. По мнению Кевина Линча, главного технического директора Adobe, «это куда более значительная смена парадигмы, чем та, что потребовалась при появлении персональных компьютеров».46 Идеологом концепции считается Люк Вроблевски, ныне директор по продуктам в Google. В 2009 году Вроблевски написал одноименную статью47, объединив уже существующие тогда идеи, а в 2011 выпустил книгу48 под тем же названием. Как видно из названия, в основе подхода «сначала мобильные» лежит идея о необходимости проектирования сайтов и приложений, в первую очередь, с расчетом на мобильные устройства. По мнению Вроблевски, создание приложений по принципу «сначала мобильные» не только открывает новые перспективы для самих разработчиков, но и значительно помогает пользователям в работе с сайтом или приложением.49 Как пишет В. Фельдман, «мобильная стратегия не только улучшит отношения с уже существующими пользователями, но также откроет 46 Wroblewski L. Mobile first! at Adobe. 27.10.2010. URL: lukew.com/ff/entry.asp?1225. Wroblewski L. Mobile first. 3.11.2009. URL: lukew.com/ff/entry.asp?933. 48 Wroblewski L. Mobile first. NY, 2011. 49 Opt. cit. 47

24 возможности привлечения новых»50, иначе говоря, данный подход актуален не только для компаний, которые ориентируются на мобильных пользователей. Согласно последним исследованиям (например, 2016 Global Digital Future in Focus51 и Mobile’s Hierarchy of Needs52), современная интернет-аудитория является мультиплатформенной, то есть заходит на сайты с разных устройств, часто переключаясь между ними во время выполнения задачи. Более того, был развенчан53 бытовавший одно время миф о в том, что пользователи заходят в Интернет с мобильных устройств вне дома, а дома используют компьютеры: значительное количество пользователей (84%) выходят в Интернет через мобильные устройства дома. Таким образом, невозможно предугадать, с какого устройства пользователь зайдет на сайт. Кроме того, поскольку мобильный сигнал, как правило, является более слабым и менее стабильным, ориентация на него позволяет увеличивать скорость загрузки версии для стационарных компьютеров. Тем не менее, это становится все менее актуальным из-за улучшения качества мобильной связи и ее распространения. Несмотря на то, что большинство браузеров поддерживают медиа запросы и JavaScript, все же бывают исключения. В таком случае сайт, созданный по принципу «сначала мобильные» будет доступен на любом устройстве – пользователь, по крайней мере, увидит на экране макет в одну колонку, характерный для мобильного дизайна. 54 Помимо перечисленных выше очевидных преимуществ принципа «сначала мобильные» есть еще как минимум два: во-первых, он позволяет 50 Feldmann V. Competitive strategy for media companies in the mobile internet // Schmalenbach Business Review. 2002. Vol. 54. P. 357. 51 Global digital future in focus 2016// Доклад занимающейся исследованием аудитории транснациональной аналитической компании Comscore. 26.10.2016. URL: comscore.com/Insights/Presentations-andWhitepapers/2016/2016-Global-Digital-Future-in-Focus. 52 Mobile’s hierarchy of needs // Доклад Comscore. 05.04.2017. URL: comscore.com/Insights/Presentations-andWhitepapers/2017/Mobiles-Hierarchy-of-Needs. 53 Smartphone owners: a ready and willing audience // Платформа для аналитики рынка акций Seeking alpha. 12.03.2010. URL: seekingalpha.com/article/193356-smartphone-owners-a-ready-and-willing-audience. 54 Jehl S. Responsible responsive design. NY, 2014.

25 сконцентрироваться на инновациях, так как именно область мобильных разработок сейчас развивается наиболее активно; во-вторых, что актуальнее в нашем случае, – выделить наиболее важный контент, ради которого пользователи приходят на сайт. «Мы обнаружили, что дизайнеры мобильных приложений научились справляться с огромным количеством ограничений, и это учит нас по-новому относиться к приложениям для стационарных компьютеров»55, – рассказывает директор по дизайну Facebook Кейт Ароновитц. Версия для большой диагонали экрана предоставляет достаточно места для размещения контента, что часто приводит к созданию сайтов, перегруженных информацией, с неочевидной иерархией. «Дополнительный функционал идет во вред юзабилити…повышая сложность продукта, а значит, достичь первоначальной цели пользователю становится сложно»56. В особенности это актуально для сайтов СМИ, поскольку они являются наиболее информационно насыщенными. В то время как ограниченное пространство дисциплинирует: «на небольшом экране… для сложных интерфейсов или контента сомнительной ценности просто нет места. Приходится оставлять самое важное. А для этого нужно хорошо знать и своих клиентов, и суть бизнеса»57. Подход «сначала мобильные» может обогатить опыт всех пользователей, считает Маркотт58, предоставляя им то, что часто отсутствует в современном веб дизайне – фокус. Таким образом, подход «сначала мобильные» позволяет грамотно проектировать веб-проект в целом: если ключевые свойства бренда были определены, то от них необходимо отталкиваться, создавая версию как для компьютера, так и для мобильного телефона. Такой принцип часто называют принципом «сначала контент», тесно связанным с принципом «сначала мобильные». Использование принципа 55 Engineers are from Mars, designers are from Venus: how to communicate & work together in harmony // Конференция для дизайнеров Warm gun. 2011. URL: ustream.tv/recorded/10072913. 56 Rachel H., Flood D., Duce D. Usability of mobile applications: literature review and rationale for a new usability model // Journal of Interaction Science. 2013. Vol. 1.1. 57 Вроблевски Люк. Сначала мобильные! М,2012. С. 8. 58 Marcotte E. Responsive web design. NY, 2011.

26 «сначала контент» значительно улучшает пользовательский опыт на мобильных устройствах, который отличается от опыта на компьютерах. Во-первых, использование мобильных устройств происходит в разных контекстах и не всегда в спокойной домашней обстановке, поэтому пользователи часто отвлекаются. «В результате, внимание фрагментировано, и мобильные сессии коротки…средняя длится 72 секунды. Для сравнения… на компьютере средняя сессия длится 150 секунд – более чем в два раза дольше»59. Однако коротки не только сессии на одном сайте, владельцы мобильных гаджетов в целом пользуются ими в течение коротких временных промежутков, поэтому разница между верхними и нижними точками на графике использования приложения для отложенного чтения статей Read it Later столь велика. «Рэйчел Хинман из Nokia, описывая различия в поведении пользователей при работе со стационарными компьютерами и мобильными устройствами, провела замечательную аналогию: она назвала первых «аквалангистами», а вторых – «ныряльщиками», – пишет Вроблевски. Ралука Будиу, руководитель исследовательской группы консалтинговой компании Nielsen Norman Group, пишет60, что, отвлекаясь, пользователи вынуждены полагаться на свою кратковременную память, так как меньше контента одновременно отображается на экране, а стоимость информационного обмена61 повышается при том же количестве информации. Вроблевски по этой причине остроумно представил среднего пользователя мобильного устройства, как «человека, который использует один глаз и один палец». Более того, несмотря на попытки производителей разместить несколько окон на экране мобильных устройств, чаще всего пользователь видит только одно окно, а это значит, что дизайн должен быть самодостаточным62, и 59 Budiu R. Mobile user experience: limitations and strengths. 19.04.2015. URL: nngroup.com/articles/mobile-ux. Opt. cit. 61 Сумма усилий, ментальных и физических, необходимых для взаимодействия с сайтом для достижения цели. Источник: Budiu R. Interaction cost. 31.08.2013. URL: nngroup.com/articles/interaction-cost-definition. 62 Budiu R. Mobile user experience: limitations and strengths. 19.04.2015. URL: nngroup.com/articles/mobile-ux. 60

27 обеспечивать пользователей всем необходимым, а не вынуждать их переходить на другие страницы и приложения. Таким образом, сайт, дизайн которого спроектирован по принципу «сначала контент», позволяет пользователям эффективнее взаимодействовать с ним. В особенности это актуально для сайтов СМИ, производящих «единый продукт – содержание»63: «на профессиональном уровне, анализируя конвергенцию в журналистике, становится понятным, что основной ценностью СМИ (и новых, и старых) становится контент»64. Однако постепенно все больше и больше специалистов пишут, что подход «сначала мобильные», как любое явление, ставшее модным, упрощается. Smart Insights считают, что это опасно, ведь в реальности большинство потребителей западных рынков для детального обзора и покупок чаще используют планшеты и компьютеры65. Поэтому целесообразно переходить с подхода «сначала мобильные» к мультиплатформенному подходу. Ралука Будиу и Кара Пернис из Nielsen Norman Group также считают, что «сначала мобильные – не означает только мобильные»66. По итогам исследования, проведенного в июне 2016 года, они пришли к выводу, что навигация на версиях для компьютеров ухудшилась на многих сайтах под влиянием мобильных шаблонов. В итоге, они также призывают не ориентироваться исключительно на смартфоны, но уделять внимание всем видам устройств. Медиасистема России: учеб. пособие / под ред. Е.Л. Вартановой. М, 2015. С. 9. Круглова Л. А. Российские печатные СМИ: специфика онлайн-версий // Медиаскоп. 2016. Вып. 4. URL: mediascope.ru/2205. 65 Mobile marketing statistics compilation // Сайт транснациональной маркетинговой компании Smart insights. 01.03.2017. URL: smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics. 66 Budiu R. Pernice K. Mobile first is not mobile only. 24.07.2016. URL: nngroup.com/articles/mobile-first-notmobile-only. 63 64

28 § 6. M-dot сайты как альтернатива адаптивным Возможно, первым примером адаптивного сайта стал портал компании «Ауди» образца 2002 года, разработанный студией Razorfish в Гамбурге67 (см. Приложение 2. рис. 1-3). «Моя позиция была однозначна…: веб-страницы должны быть гибкими и вписываться в экран устройства пользователя. Другие выступали за более контролируемый макет с фиксированными величинами», – пишет один из дизайнеров студии Jim Kalbach. В итоге компромиссным решением было создание макетов трех разных размеров – 640×480 пикселей, 800×600 и 1024×768, – которые отображаются в зависимости от размера экрана пользователя. Однако в то время создание адаптивного сайта было еще достаточно технически сложно, и практика была недостаточно разработана, поэтому реализация проекта стоила больших усилий и средств, чем первоначально задумывалось, что привело к недовольству клиента. В последующие годы широкое распространение идеи «адаптивного дизайна» не получили до того момента, как в браузеры была добавлена поддержка медиа-запросов (2012 год), о которых мы говорили ранее. В то время, когда «адаптивный дизайн» еще не был популярным, дизайнеры и разработчики активно создавали мобильные приложения, пытаясь решить проблему отображения контента для устройств небольшого размера. Со временем появились веб-приложения, которые являются не приложениями как таковыми, а сайтами, выглядящими и функционирующими как приложения; а также приложения-гибриды, которые, как и веб-сайты, основываются на HTML, но устанавливаются в память устройства и используют некоторые функции приложений. Параллельно с ними начали появляться сайты, полностью созданные под мобильные устройства и независимые от «десктопной» версии – так называемые M-dot сайты, имеющие адрес типа m.mysite.com. Пользователи либо переходят на них с 67 Kalbach J. The first responsive design website: Audi (circa 2002). 22.07.2012. URL: experiencinginformation.com/2012/07/22/the-first-responsive-design-website-audi-circa-2002.

29 помощью автоматической переадресации, либо вынуждены искать мобильную версию самостоятельно (часто ссылка находилась в меню), что уже практически не встречается. Со временем от создания мобильных сайтов начали отказываться в пользу адаптивных: согласно исследованию компании Pure Oxygen Labs68, специализирующейся на исследованиях в области мобильных технологий, количество M-dot сайтов с 2013 по 2015 уменьшилось на 25% (с 79% от общего количества мобильных сайтов до 54%) и будет продолжать снижаться. Нам хотелось бы коротко поговорить об отличиях адаптивных сайтов от M-dot сайтов и причин, по которым первые нам кажутся более удачными. Мы не будем касаться приложений, веб-приложений и гибридных приложений, так как нашей задачей является создание сайта, пользование которым приносило бы одинаковое удовлетворением владельцам любых устройств, а не работа над пользовательским опытом владельцев мобильных телефонов. К тому же, работа над дизайном приложений имеет иную логику. Итак, M-dot сайты созданы исключительно для мобильных устройств, в то время как адаптивные сайты являются универсальными и отображаются на всех устройствах. Несмотря на то, что создание адаптивных сайтов с нуля стоит дороже и требует навыков программирования более высокого уровня, чем просто создание мобильного сайта69, в долгосрочной перспективе поддержка нескольких сайтов на одном домене (то есть сайт для компьютера вместе с сайтом для мобильного устройства) стоит дороже, а обновления требуют больших усилий70. Первоначально еще одним недостатком M-dot сайтов было также то, что они создавались под одну ширину экрана, в то время как сейчас, как уже было 68 Responsive design overtakes dynamic serving as migration from dedicated mdot sites continues among internet retailer mobile 500 // Доклад специализирующейся на исследованиях в области мобильных технологий американской компании Pure Oxygen Labs. 21.07.2015. URL: pureoxygenlabs.com/responsive-design-overtakesdynamic-serving-as-migration-from-dedicated-mdot-sites-continues-among-internet-retailer-mobile-500. 69 McGrane K. Rolling out responsive. 24.11.2015. URL: alistapart.com/article/rolling-out-responsive. 70 Opt. cit.

30 упомянуто, разброс в размерах дисплеев мобильных устройств огромен. Однако со временем некоторые компании стали создавать адаптивные мобильные сайты – ресурсы, подчиненные исключительно мобильной платформе, но имеющие гибкий макет. Версии же для компьютеров они оставляют фиксированными. Примером может послужить «Фонтанка». Сайт m.fontanka.ru является адаптивным, в то время как сайт fontanka.ru имеет фиксированный макет. Однако при просмотре сайта с Apple iPad, имеющем разрешение 1024х768 пикселей и относящемся к мобильным устройствам, открывается версия для компьютера (fontanka.ru), и часть контента обрезается. В этом случае адаптивная верстка мобильной версии утрачивает свое значение, так как не поддерживает все возможные размеры дисплеев мобильных гаджетов. Кроме того, при изменении масштаба страницы сайта fontanka.ru на компьютере часть контента либо также отрезается (при увеличении масштаба), либо появляются белые поля, что само по себе не является недочетом. Но уменьшение шрифта и изображений делает контент невозможным для адекватного восприятия. Таким образом, создание отдельного мобильного сайта, пусть даже и адаптивного, представляется нам полумерой. Карен Макгрейн, автор книги Content Strategy for Mobile, пишет71, что такой подход «позволяет клиентам продолжать верить, что "десктопная версия" – это "настоящий" веб-сайт, преуменьшая значение большой и растущей группы мобильных пользователей. Это также означает, что, как и в случае со всеми M-dot сайтами, пользователи смартфонов и компьютеров все еще будут страдать от падения производительности из-за переадресации». Также M-dot сайты могут значительно отличаться от «десктопной» версии. Они содержат контент и функционал, который сочли подходящим для мобильных устройств, часто это сокращенная версия того, что доступно на компьютерах. Адаптивные сайты, напротив, демонстрируют одинаковый контент и функционал на любых платформах, что является их безусловным 71 Opt. cit.

31 плюсом, так как не делает пользовательский опыт на одних устройствах более бедным, чем на других, а также поддерживает его целостность (англ. consistency). Как пишет Стефани Стимак из команды Microsoft Edge Web Platform, «целостность – это главный принцип дизайна»72, и по мнению Якоба Нильсена, одного из первых идеологов юзабилити, целостность является одним из десяти главных принципов в дизайне пользовательских интерфейсов: «пользователи не должны задаваться вопросом, значат ли разные слова, ситуации или действия одно и то же»73. Привыкнув к одному интерфейсу на компьютере, они могут испытать замешательство, столкнувшись с отсутствием каких-либо элементов в версии для мобильных устройств. Это особенно актуально ввиду того, что пользователи мобильных устройств далеко не всегда принимают окончательные решения сразу, и часто переходят на другие устройства для выполнения задачи. Последние исследования подтверждают74, что сайты, не продемонстрировавшие целостность или противоречащие их ожиданиям, ассоциировались у них с удивлением и раздражением. В конце концов, целостность дизайна на разных платформах – это уже упомянутый нами подход «сначала контент», когда технические аспекты оказываются на втором месте, уступая контенту, что позволяет пользователям самим сделать выбор, на каком устройстве им удобнее пользоваться сайтом. Тем не менее стоит признать, что на практике адаптивные сайты не всегда демонстрируют стопроцентную целостность контента и функционала на разных платформах, но это, скорее, отступление от принципов адаптивного веб-дизайна, чем норма. Существуют также иные отличия, ставшие, однако, менее релевантными в настоящее время благодаря развитию технологий: например, ранее адаптивные сайты лучше отображались в поисковых системах (сейчас 72 Stimac S., Gustafson A. Building in 10k: Designing for Optimization and Performance. 06.09.2016. URL: blogs.windows.com/msedgedev/2016/09/06/10k-for-optimization-performance/#3kuIHb57lf8ZUJV7.97. 73 Nielsen J. 10 Usability heuristics for user interface design. 01.01.1995. URL: nngroup.com/articles/ten-usabilityheuristics. 74 Aagesen P. T., Heyer C. Personality of interaction / Proceedings of the 2016 CHI Conference on human factors in computing systems. 2016. Цит. по: nngroup.com/articles/interaction-branding.

32 разницы между ними и M.dot сайтами нет). Отметим, что распространенное мнение о том, что адаптивные сайты работают медленнее, относится лишь к сайтам, не использующим «прогрессивное улучшение». Мы же условились, что этот принцип входит в наше понимание «адаптивного веб-дизайна». Таким образом, адаптивный сайт кажется нам более удачной идеей, чем M.dot сайт, и именно в пользу него будет сделан наш выбор. Несмотря на то, что, как уже было сказано, написание кода сайта выходит за рамки нашей работы, мы не можем не отталкиваться от такого решения. Это вынуждает нас создать дизайн-макет версий для экранов нескольких размеров, принимая во внимание различие в пользовательском опыте мобильных устройств и компьютеров.

33 ГЛАВА 2. РЕДИЗАЙН САЙТА ОБЩЕСТВЕННО-ПОЛИТИЧЕСКОГО СМИ КАК ФАКТОР ПОВЫШЕНИЯ ЕГО АДАПТИВНОСТИ § 1. Современные медиа: тенденции и проблемы «Быстрое изменение – однозначно отличительная черта современной индустрии журналистики»75, – пишет Хитер Чаплин из The Tow Center for Digital Journalism Колумбийского университета. Аналогичную мысль высказывает А. А. Беляев: «Бурный рост технологических возможностей Интернета… продолжающиеся процессы конвергенции76… вкупе с многократно усилившейся конкуренцией на рынке интернет-медиа, «борьбой за внимание», связанной со сравнительно небольшими затратами на вхождение в этот рынок и приходом крупных игроков из «оффлайновых» медиа… заставляет интернет-версии развиваться активнее»77, чем их печатные аналоги. Этот фактор вместе со стремительным падением тиражей и доходов от рекламы вынуждает все большее и большее количество СМИ переориентироваться на создание контента в Интернете (так называемый «digital-first» подход). О таком решении публично заявляли крупнейшие СМИ, в том числе, и Financial Times: главный редактор издания Лайонел Барбер, заявил, что «в будущем наша печатная продукция будет производной от вебпродуктов – но не наоборот. Новая Financial Times будет создаваться небольшой командой, сфокусированной на печать, которая будет работать рядом с большей веб-командой»78. Более того, некоторые СМИ полностью отказываются от своих печатных версий и переходят в Интернет. К ним, в 75 Chaplin H. Guide to journalism and design. NY, 2016. URL: cjr.org/tow_center_reports/guide_to_journalism_and_design.php. 76 Конвергенция – интеграция информационных и коммуникационных технологических платформ, а также передаваемых ими содержательных продуктов. Источник: Вартанова Е.Л. Медиаэкономика зарубежных стран: учебное пособие. М, 2003. С. 286 77 Беляев А.А. Дизайн-модель интернет-версии как результат трансформации модели печатного издания // Вестн. Моск. ун-та. Сер. 10. Журналистика. 2008. № 2. С. 53 78 Lionel Barber memo to staff on reshaping the newspaper for the digital age // Сайт газеты Financial Times. 09.10.2013. URL: aboutus.ft.com/2013/10/09/lionel-barber-memo-to-staff-on-reshaping-the-newspaper-for-thedigital-age/#axzz3D721loZW.

34 частности, относится американский еженедельник Newsweek и ежедневная британская газета The Independent. Однако дигитализация имеет и негативные последствия для медиа: бизнес-модели традиционных СМИ были разрушены. Количество рекламы в офлайн уменьшается уже несколько лет, в то время как в Интернете – растет, но последняя не возмещает ущерб от падения доходов в традиционных СМИ. Среди причин нерентабельности рекламы – ее большое количество на одном сайте, баннерная слепота79, раздражение пользователей (больше всего отрицательных эмоций вызывает pop-up реклама)80. И, пожалуй, главная причина, которая сводит все старания рекламных отделов на нет, – это распространение блокировщиков рекламы; при этом, по данным HubSpot Research, треть установивших расширение не готовы отключить его не при каких обстоятельствах, даже при ограничении доступа к контенту81: однажды установив расширение, пользователи практически никогда его не отключают. В борьбе за прибыль не помогают и социальные медиа: в США, одной из стран, с наиболее глубоким проникновением социальных сетей в жизнь людей, только для 5% пользователей соцсети имеют важное значение при решении о покупке82. Даже самые крупные игроки, сделавшие ставку на новейшие технологии, терпят убытки: например, Guardian еженедельно теряет около миллиона фунтов стерлингов83. 79 Nielsen J. Banner blindness: old and new findings. 20.08.2007. URL: nngroup.com/articles/banner-blindness-oldand-new-findings. 80 Nielsen J. The most hated advertising techniques. 06.12.2004. URL: nngroup.com/articles/most-hatedadvertising-techniques. 81 Why people block ads (and what it means for marketers and advertisers) // Доклад аналитического центра HubSpot Research. 2016.07.13. URL: research.hubspot.com/reports/why-people-block-ads-and-what-it-means-formarketers-and-advertisers#LINK6. 82 State of the American consumer: insights for business leaders report // Доклад Аналитической компании Gallup. 2008-2014. URL: products.gallup.com/171722/state-americanconsumer.aspx?utm_source=Homepage&utm_medium=Ad&utm_content=State%20of%20the%20American%20Co nsumer&utm_campaign=Report. 83 Innovation in news media: world report 2016 // Доклад консалтинговой компании Innovation. 2016. URL: unidadeditorial.com/newsletterDN/Documentos/WAN-IFRA_Innovations_2016.pdf. P.8.

35 Помимо продолжающихся дигитализации (перевода информации в цифровую форму, цифровизации84) и конвергенции, визуализация стала одним из основных трендов развития СМИ.85 Чрезвычайно часто размещаются инфографика и видео. Последнее крайне популярно среди пользователей: в возрастной группе от 16 до 34 лет практически 95% смотрят видео, в группе от 55 до 64 – восемь из десяти86. Однако для его просмотра пользователи обычно используют такие медиа, как Facebook (на 2016 год от 8 до 9 млрд просмотров в день), Snapchat (около 8 млрд) и Youtube (4 млрд)87, в то время как, на сайтах СМИ, по данным опроса Reuters Institute88, видео популярностью не пользуются: 78% респондентов больше полагаются на текст. По мнению исследователей, пользователи находят чтение новостей более быстрым и удобным способом потребления (41%), кроме того, их раздражает реклама в начале видео (35%). Интересно, что в ходе изучения восприятия аудиторией различных видов текста (как вербального, так и визуального) в российских деловых интернет-СМИ отечественные исследователи А. В. Вырковский и М. А. Любимцева выяснили, что из всего контента на сайтах меньше всего пользователям интересны опросы и видео.89 Еще одна тенденция – переориентация качественной прессы на более глубокие тексты, предлагающие читателю контекст. Вероятно, это связано с тем, что первые новости большая часть пользователей получает из социальных сетей. Так, говоря о современных газетах (имея в виду как онлайн, так и печатные), составители Innovation in news media world report 2016 для Всемирной газетной ассоциации отмечают, что «за последние 30 лет газеты эволюционировали в ежедневные журналы с небольшим количеством Землянова Л. М. Коммуникативистика и средства информации: англо-русский словарь концепций и терминов. М, 2004. С. 104. 85 Волкова В. В. Специфика медиадизайна // Вестн. Моск. ун-та. Сер. 10 Журналистика. 2014. № 4. С. 5-21. 86 Full highlights of World press trends 2016 survey // Сайт Всемирной газетной ассоциации. 06.12.2016. URL: wan-ifra.org/articles/2016/06/12/full-highlights-of-world-press-trends-2016-survey. 87 Opt. cit. 88 Reuters institute digital news report 2016 // Доклад Reuters institute. 2016. URL: reutersinstitute.politics.ox.ac.uk/sites/default/files/Digital-News-Report-2016.pdf. 89 Вырковский А. В. Любимцева М.А. Восприятие аудиторией различных видов текста в российских деловых Интернет-СМИ // Вестн. Моск. ун-та. Сер. 10. Журналистика. 2015. № 2. С. 143-167. 84

36 прилагаемых новостей». В качестве подтверждения снова приведем цитату главного редактора Financial Times Лайонела Барбера: «Наши редакторы новостей и репортеры откажутся от сбора оперативных новостей в пользу новостей в контексте, имеющих дополнительную ценность (англ. value-added «news in context»), оставаясь верными оригинальной расследовательской журналистике»90. Невозможно не отметить влияние социальных сетей на СМИ. В этом можно проследить общую для среды Интернета тенденцию фокусирования «на человеко-ориентированных товарах или услугах»91, и, что более актуально для нас, – персонализацию как «процесс, который ведет к предоставлению пользователю все более обширных возможностей для формирования собственной повестки дня и самостоятельного обора информационных потоков»92. В особенности это касается мобильных платформ: благодаря тому, что «мобильные устройства более персонализированы, и вероятность, что их используют одновременно несколько человек, ниже, чем в случае с компьютерами. Это позволяет создавать более индивидуализированные предложения»93. Одной из причин такого решения многих изданий стало падение количества переходов на главные страницы. Если ранее СМИ имели лояльную аудиторию, которая переходила на сайты с помощью закладок или напрямую после введения адреса в адресной строке браузера, то теперь основной трафик обеспечивается поисковыми системами, новостными агрегаторами и социальными сетями, ввиду чего пользователь сразу попадает на страницу с Lionel Barber memo to staff on reshaping the newspaper for the digital age // Сайт газеты Financial Times. 09.10.2013. URL: aboutus.ft.com/2013/10/09/lionel-barber-memo-to-staff-on-reshaping-the-newspaper-for-thedigital-age/#axzz3D721loZW. 91 Долгих М. Н. Дизайн и виртуальная среда: дигитальные ландшафты в аспекте гибридных медиа // Вестн. Том. гос. ун-та. 2014. №379. С. 88. 92 Беляев А. А Особенности графической модели интернет-версий периодических изданий (на материале итальянских сми): дис. ... канд. фил. наук: 10.01.10. - Журналистика. М., 2009. С. 61. 93 Вырковский А. В., Грабарник А. В. Мобильные сайты как новая составляющая бизнес-моделирования СМИ // Вестн. Моск. ун-та. Сер. 10. Журналистика. 2014. № 3. С. 17. 90

37 заинтересовавшим его материалом, минуя главную. 94 Так, редакция The New York Times в 2014 году констатировала, что при сохранении общего трафика, «трафик на главную страницу падает каждый год, месяц за месяцем. Трафик на главные страницы рубрик − незначительный»95. Однако падение количества переходов на главный страницы и страницы разделов не единственная проблема современных медиа. Как замечает бывший редакционный директор медиапроектов Mail.Ru Group Сергей Паранько, «в 2015 году произошло заметное разделение каналов распространения контента. Если ранее социальные сети и мессенджеры были для интернет-изданий трафикогенерирующими платформами, то сейчас мы наблюдаем, как эти сервисы становятся площадками для прямой дистрибуции контента. Медиа начинают адаптироваться к новым условиям и идти со своим контентом туда, где обитает пользователь»96. Такая адаптация требует от СМИ значительных усилий, так, медиаэксперт Наталья Лосева отмечает: «В настоящее время медиацех выглядит разрозненным и растерянным. Причем это касается и иностранных медиа… – везде одни и те же проблемы. Это и фальшивые новости, и то, что дистрибуция становится важнее содержания, а как правильно дистрибутировать, никто не знает; и какой должен быть баланс контента, специально произведенного для социальных сетей»97. Осложняет положение СМИ то, что «правила игры» меняются стремительно. Например, сначала в мае 2015 года на платформе iOS, а затем через 7 месяцев на Android Facebook запустили Instant Articles, позволивших пользователям просматривать публикации прямо в приложении, не открывая браузер. Некоторое время этой услугой пользовались только некоторые крупные медиа, но с 12 апреля 2016 года зарегистрироваться могло любое издание, включая блог. Instant Articles сделали СМИ еще более зависимыми от Как новые медиа изменили журналистику / под науч. ред. С. Балмаевой, М. Лукиной. Екатеринбург, 2016. https://ru.scribd.com/doc/224332847/NYT-Innovation-Report-2014 / в переводе указ. соч. C.9. 96 Указ. соч. С. 28. 97 Полевое исследование медиацеха: интервью с Натальей Лосевой. URL: media.mail.ru/loseva_now. 94 95

38 социальных сетей, что вместе с ее постоянной непредсказуемой сменой алгоритмов выдачи материалов в ленте заставляет медиа опасаться потерять контроль над распространением контента. При этом в качестве альтернативы существуют как минимум Discover в Snapchat, Apple News для iOS и мобильной приложение-агрегатор новостей Upday от издательства Axel Springer. Но и на этом проблемы современных СМИ не заканчиваются: вследствие того, что пользователи зачастую переходят на страницы публикаций из соцсетей или новостных агрегаторов, они склонны не обращать внимания на сам источник новостей. Так, по данным Reuters Institute for the Study of Journalism за 2016 год, лишь в половине случаев пользователи в Великобритании и Канаде замечают бренд издания, а в Японии и Южной Корее – лишь в одном случае из четырех98. Кроме того, ввиду вышенаписанного, а также особенностей пользовательского опыта и поведения (например, фрагментированность внимания), описанных в первой главе, СМИ вынуждены придумывать новые способы удержания пользователей на своих сайтах. Первоначально это проявлялось в феномене «clickbait», смысл которого заключался в попытках заставить пользователя «кликать» по ссылкам: «бизнес-модель раньше строилась на эффективном читателе. Эффективный читатель – это человек, который кликает. И все, что тебе было нужно, — заставить его это делать. Контент при этом никого не интересовал. Из разряда: «Да какая разница, какая статья? Заставь его кликать, заставь его двигаться!»99. В итоге это привело к тому, что «пять лет погони за кликами сделали просмотр новостей одним из худших пользовательских опытов в Интернете… иногда может быть сложно Reuters institute digital news report 2016 // Доклад Reuters institute. 2016. URL: reutersinstitute.politics.ox.ac.uk/sites/default/files/Digital-News-Report-2016.pdf. 99 Полевое исследование медиацеха: интервью с Сергеем Паранько и Ольгой Сидоровой. URL: media.mail.ru/bigbosses_now. 98

39 отличить игровой автомат от сайта СМИ»100. Однако со временем медиаменеджеры поняли, что необходимо переходить от подхода «сначала рекламодатель» к подходу «сначала пользователь»101, и вместо «эффективного пользователя» медиа начали ориентироваться на «вовлеченного», то есть не только читающего, но и активно комментирующего и распространяющего контент. Как пишет102 Heather Chaplin из The Tow Center for Digital Journalism Колумбийского университета, «переосмысление природы отношений между СМИ и аудиторией – это грандиозный сдвиг парадигмы, предусматривающий другой тип мышления у редакторов, репортеров и медийных управленцев». В Nieman Foundation for Journalism в Гарварде считают, что решить фундаментальную для современных онлайн СМИ проблему привлечения, удержания и вовлечения пользователя помогает грамотный дизайн, что особенно важно для коммерческого успеха в цифровую эпоху103. А Хитер Чаплин из The Tow Center for Digital Journalism Колумбийского университета отмечает: «Дизайн – это методика, которая может помочь журналистам в их попытках создать новые продукты, новые истории и новые способы поддержания связи с пользователем»104. § 2. Современные тренды в дизайне сайтов СМИ В настоящее время можно заметить тенденцию повышения значимости дизайна. На этот процесс повлиял значительный успех технологических компаний, особенно выделявших дизайн – в первую очередь корпорации Apple. Вследствие этого дизайнеров стали привлекать в качестве ключевых 100 Rossback A. The year of the user // NiemanLab predictions for journalism 2017. 2017. URL: niemanlab.org/2016/12/the-year-of-the-user. 101 Opt. cit. 102 Chaplin H. Guide to journalism and design. NY, 2016. URL: cjr.org/tow_center_reports/guide_to_journalism_and_design.php. 103 Morell R. Design as a driving force for audience engagement. 9.12.2016. URL: niemanreports.org/articles/design-as-a-driving-force-for-audience-engagement. 104 Chaplin H. Guide to journalism and design. NY, 2016. URL: cjr.org/tow_center_reports/guide_to_journalism_and_design.php.

40 специалистов, принимающих решение105. Так, согласно докладу The Future of Design in Start-Ups 2016, в 87% стартапов считают, что дизайн крайне важен106. Чрезвычайно большое распространение получила концепция так называемого дизайн-мышления, популяризированная глобальной консалтинговой компанией IDEO. Хотя идея была не нова: в частности, уже в 1969 году Герберт А. Симон определил дизайн как способ мышления в своей книге «The Sciences of the Artificial». В 2009 году президент компании Тим Браун в своей книге «Change by design: how design thinking transforms organizations and inspires innovation» представил концепцию как процесс решения задач, не относящихся к дизайну напрямую, например, деловых, основанный на творческом, а не аналитическом подходе и состоящем из пяти этапов: эмпатии, определении проблемы, генерации идей, прототипирования и тестирования. Не обошла эта тенденция и СМИ: «всего за несколько последних лет произошел невероятный сдвиг: едва ли можно вступить в диалог о будущем журналистики, не услышав рассказы взахлеб о способности дизайн-мышления трансформировать редакции». Так, исполняющий обязанности директора digital-отдела The Guardian Арон Пилхофер отмечает, что «журналисты должны быть более активны в создании цифровых историй», и единственное, что может им в этом помочь, – это дизайн107. Как уже было сказано в конце предыдущего параграфа, большинству медиаменеджеров дизайн кажется способом налаживания связи с аудиторией108. Так, дизайн-консультант Марио Гарсиа отмечает: «Дизайн в эпоху журналистики помех и прерывания (англ. journalism of interruptions) и мобильных платформ – это то, что приманивает к контенту…Мы больше не просто манипулируем контентом и презентуем его, 105 Opt. cit. The future of design in start-ups // Доклад американской венчурной компании NEA. 2016. URL: daoy1b221nves.cloudfront.net/NEA_FOD_Survey_2016.pdf. 107 Opt. cit. 108 Morell R. Design as a driving force for audience engagement. 9.12.2016. URL: niemanreports.org/articles/design-as-a-driving-force-for-audience-engagement. 106

41 но также помогаем придумать новые способы его доставки и получения прибыли. Все ради одной цели: достичь аудитории»109. Такой подход требует постоянных экспериментов и переосмысления,110 а также постоянного тестирования – то есть тестирования без отрыва от создания контента, что позволяет определить проблемы и найти пути их преодоления до того, как будут израсходованы значительные средства. Таким образом, дизайн напрямую внедряется в журналистский процесс, он больше не остается финальной стадией в качестве дополнения, ранее часто игравшего необязательную роль украшения. Например, в Bloomberg News больше не относятся к дизайну как к чему-то второсортному. В компании существует такая должность, как «репортер-график» (англ. graphics reporter), а дизайнкоманды включают как программистов, так и дизайнеров в более традиционном смысле; они не только иллюстрируют чьи-то статьи, но и сами придумывают новые истории. Репортер-график Дэвид Ингольд рассказывает, что если раньше существовали должности, подразумевавшие только работу над текстом, только над графикой или только над фотографией, то теперь такое разделения нет111. Почетный декан Columbia Journalism School Николас Леманн также отмечает, что ранее «к дизайнерам и программистам относились как к людям, которые просто размещают истории в Сети, вместо того чтобы считать их людьми, способными полностью изменить то, что мы считаем своей миссией»112. Говоря о тестировании, широко распространена практика A/B тестирования. Пользователи случайным образом делятся на две группы, где первая является контрольной, а на второй тестируется измененная версия чеголибо. В итоге журналисты и дизайнеры получают доступ к результатам и имеют возможность моментально реагировать, а затем снова проверять свои 109 Opt. cit. Kramer M. Radically rethinking design. 2017. URL: niemanlab.org/2016/12/radically-rethinking-design. 111 Morell R. Design as a driving force for audience engagement. 9.12.2016. URL: niemanreports.org/articles/design-as-a-driving-force-for-audience-engagement. 112 Opt. cit. 110

42 решения. Некоторые СМИ создают собственные системы тестирования, например, с целью наиболее точного распознавания реакции пользователей в феврале 2016 года The Washington Post запустили113 Bandito – усовершенствованную версию A/B тестирования, позволяющую изменять параметры исследования в режиме реального времени. Работая совместно, журналисты и дизайнеры пытаются разнообразить материалы с помощью все возникающих новых технологий, например, панорамных видео и изображений. «Графика, которая дополняет истории – крайне важный компонент опыта читателя, и издатели, неспособные инвестировать в режиссуру, подвергаются риску потерять интерес аудитории»114. В качестве примера можно привести признанного лидера в режиссуре историй – The New York Times, который славится своим вниманием к мелочам: в онлайн-версии статьи редакция конвертировала статичное изображение из печатной версии в анимированное в формате GIF115, что придало заключенной в статье мысли дополнительную выразительность. Как мы уже писали выше, погоня за «кликбейт» породила целую массу сайтов СМИ с агрессивным дизайном, на страницах которых царил многоцветный хаос рекламы. Такие сайты у многих пользователей ассоциируются с сайтами фальшивых новостей, заставляющих пользователей бесконечно переходить по ссылкам, и не находить нужный им контент. С помощью грамотного дизайна, медиа могут не только исключить сходство с такими сайтами, но и придать своему контенту уникальный стиль, выделить Bandito, a multi-armed bandit tool for content testing // Блог разработчиков Washington Post. 08.02.2016. URL: developer.washingtonpost.com/pb/blog/post/2016/02/08/bandito-a-multi-armed-bandit-tool-for-contenttesting. 114 Virdee K. Moving deeper than the machine of clicks. 2017. URL: niemanlab.org/2016/12/moving-deeper-thanthe-machine-of-clicks. 115 UN is failing: illustration for the New York Times // Behance. 17.06.2016. URL: behance.net/gallery/38498415/UN-is-failing-Illustration-for-The-New-York-Times. 113

43 среди других схожих: «Дизайн СМИ, в высшей степени полезный, – это важный инструмент медиаграмотности116»117. Однако главная цель современных СМИ по завоеванию, удержанию и вовлечению аудитории в настоящее время не просто выполняется благодаря дизайну, достижение максимальной аудитории без него было бы просто невозможно. Ввиду того, что пользователи заходят на сайты СМИ с разнообразных устройств, количество которых постоянно увеличивается, а технические возможности кардинально различаются, использование адаптивного веб-дизайна при создании сайтов СМИ представляется нам крайне важным. § 3. Примеры редизайна сайтов общественно-политических СМИ с переходом на адаптивные версии Поскольку большинство СМИ вышли в Интернет еще до того, как создание адаптивных сайтов стало технически возможным, то единственным выходом для многих стал редизайн с переходом на адаптивные версии. В данном параграфе мы рассмотрим примеры такого редизайна западных и российских общественно-политических СМИ. Но для начала определим, что мы понимаем под общественно-политическим СМИ – это «издание, специализирующиеся на распространении информации общественно- политического характера, это периодическое печатное издание или сетевое издание, преимущественное содержание которого составляет информация, освещающая актуальные социально-значимые вопросы и события общественной, политической, экономической, культурной жизни…в том Медиаграмотность – способность адекватно взаимодействовать с потоками медиаинформации в глобальном информационном пространстве: осуществлять поиск, анализировать, критически оценивать и создавать медиатексты, распространяемые с помощью различных средств массовой информации и коммуникации, во всем разнообразии их форм. Источник: Чичерина Н. В. Концепция формирования медиаграмотности у студентов языковых факультетов на основе иноязычных медиатекстов: дис. ... д-р. пед. наук: 13.00.02 – теория и методика обучения и воспитания (иностранный язык, уровень профессионального образования). СПб., 2008. С. 3. 117 Rossback A. The year of the user // NiemanLab predictions for journalism 2017. 2017. URL: niemanlab.org/2016/12/the-year-of-the-user. 116

44 числе проблем внутренней, внешней или международной политики, путем публикации новостей, статей, мнений, интервью, критических, сатирических материалов, обзорной, аналитической, статистической и (или) иной информации по какой-либо из указанной тем»118. Перейдем к небольшому обзору переходов общественно-политических СМИ на адаптивные версии, и упомянем некоторые интересные для нас примеры (из обзора исключаются СМИ, которые провели редизайн в этот период, но чьи сайты стали адаптивными еще раньше). В 2015 году редизайн провело издание Slon.ru, сменив название на Slon Magazine. Сайт получил бесконечную ленту новостей, а главное – стал адаптивным (см. Приложение 3, рис. 1-4). «По статистике, до 30% пользователей заходят на наш сайт с мобильных устройств. Мы признаемся, что последние пару лет нещадно мучили владельцев смартфонов, подсовывая им версию для широких экранов» 119 , – цитирует редакцию издание vc.ru. Однако, как известно, в 2016 году издание уже сменило бренд и фирменный стиль, и теперь называется Republic.ru. Невозможно пройти мимо редизайна одного из крупнейших сетевых медиапроектов – BBC News (см. Приложение 3, рис. 5-8). Согласно главному управляющему новостными продуктами BBC Future Media Робин Пембрук, старый сайт не был создан с учетом опыта мобильных пользователей, и СМИ нуждалось в оправдывающем затраты решении, которое бы работало для всех на всех устройствах120. «Новый дизайн также позволит нам внедрять новые функции быстрее и реагировать более эффективно на обратную связь в будущем». Редизайн занял достаточно длительное время, и был, как мы уже упоминали в первой главе, даже запущен блог разработчиков сайта Responsive Экспертная комиссия Роскомнадзора определила формулировку понятия «издание, специализирующиеся на распространении информации общественно-политического характера» // Официальный сайт Роскомнадзора. 15.11.2012. URL: rkn.gov.ru/news/rsoc/news17398.htm. 119 Издание Slon.ru перезапустилось с адаптивной версткой и новым названием Slon Magazine // ИнтернетСМИ vc.ru. 18.04.2016. URL: vc.ru/p/slon-new. 120 BBC to roll out redesigned news website // Журнал Design Week. 15.01.2015. URL: designweek.co.uk/issues/12-18-january-2015/bbc-to-roll-out-redesigned-news-website. 118

45 news121. Новый сайт BBC News запустился в 2015 году. Он стал менее перегруженным: например, была облегчена шапка, в целом верстка стала более упорядоченной; была повышена удобочитаемость сайта за счет увеличения кегля и количества негативного пространства, а также усиления контраста. Хотелось бы отметить, что, вероятно, первым крупным СМИ, которое перешло на адаптивный дизайн, стала американская ежедневная газета Boston Globe. Редизайн был проведен в 2014 году, и стал одним из самых часто упоминаемых примеров адаптивного дизайна, в частности, о нем в своей книге писал Итан Маркотт, непосредственно участвовавший в процессе. Также на популяризацию адаптивного дизайна в среде медиа повлиял крупный редизайн The Guardian, также ставший одним из эталонов благодаря не только дизайну, но и грамотному подходу в целом: разработчики следовали всем принципам адаптивного дизайна и уделили значительное количество времени анализу реакции аудитории. В итоге новый дизайн сайта повлиял и на внешний облик самой газеты, став прекрасным примером целостности фирменного стиля на разных платформах. Перейдем к более подробному анализу двух кейсов, характеризующихся значительными изменениями, – «Российской газеты» и «Новой газеты», чтобы проиллюстрировать характерные для процесса проблемы, а также проследить тенденции. В частности, издания характеризуют две основных тенденции верстки современных СМИ: верстку первого мы бы определили, как делающую упор на новости, а вторую – на аналитику. Для первого типа характерно большое количество материалов на главной странице, большинство из которых снабжаются небольшими материалами, частое отсутствие полноэкранных фотографий, наличие лент новостей; фокус на оперативность, ассиметричная смешанная верстка, 121 Блог разработчиков адаптивного сайта BBC News Responsive News. URL: responsivenews.co.uk.

46 наличие полей. Такой тип более традиционен. Среди российских представителей можно назвать «РБК», Lenta.ru, сайты информагентств и т.д. Для второго типа типичны полноэкранные фотографии на открытие и полноэкранные фотографии в анонсах, больше внимания уделяется авторскому началу (часто на главных страницах расположен блок «наши авторы» или аналогичный), фокус на глубину содержания, оригинальную подачу, симметричная горизонтальная верстка, отсутствие полей или узкие поля. Такой тип считается более современным, часто связывается со сравнительно молодыми медиа, не имеющими печатных версий. Среди представителей – Meduza, Republic, The New Times и т.д. Безусловно, такое разделение условно, и существуют сайты, находящиеся где-то посередине – например, «Газета.ру» и «Ведомости». «Российская газета» Официальный печатный орган Правительства Российской Федерации «Российская газета», на май 2017 года занимающий пятое место по цитируемости среди российских СМИ (по данным «Яндекс. Каталога»), провел редизайн в марте 2016 года (см. Приложение 3, рис. 9-16). Была поставлена задача «разработать дизайн сайта «Российской газеты» и новые сервисы, учитывая поведение, интересы и потребности читателей»122. Как рассказывают разработчики, «существует ряд предубеждений против этого издания, которые мы попытались выяснить с помощью серий глубинных интервью»123. Результаты нескольких месяцев изучения аудитории легли в основу новой дизайн-стратегии. Так, были разработаны пять образов пользователей (англ. personas), каждый из которых отличался своим поведением и предпочтениями, но главное, – задачами, которые он пытается выполнить на сайте. Например, чтобы помочь пользователю «быстро оценить новостную 122 123 Презентация редизайна «Российской газеты». URL: agima.ru/projects/rg. Там же

47 картину вообще», UX-специалисты предложили дизайнерам создать «короткую ленту с последними/самыми важными новостями за день на страницах новостей» и т. д.. На основании отчета были создан «детализированный адаптивный прототип», который затем лег в основу «238 макетов нового сайта». Со временем дизайн незначительно эволюционировал, к примеру, была добавлена кнопка «Наш Telegram». В целом была сохранена преемственность: к примеру, не изменилась цветовая схема, что является плюсом, так как в целом аудитория негативно воспринимает слишком резкие изменения. Изменения на главной странице. Полностью изменилась шапка сайта: меню сместилось влево под новую ленту с последними региональными новостями, исчезла дата, кнопки социальных сетей сместились в самый конец страницы, поиск сократился до иконки и сдвинулся наверх к новой функции «войти». На месте кнопок социальных сетей и поиска справа от логотипа теперь располагаются трансляция и/или анонсы. Это было сделано из-за того, что пользователи не замечали начало трансляций, анонс которых раньше располагался под меню и не содержал изображения124. Вместо ссылок на свежий номер, документы и рубрикатор появились ссылки на другие сервисы и издания «Российской газеты». Документы и другие рубрики переехали в меню слева, а ссылка на свежий номер теперь выглядит как ярко оранжевая кнопка с иконкой. Как и кнопка «подписка на издания», она привлекает внимание и располагается на первом экране, что кажется нам удачным решением. Появилась функция «Календарь», позволяющая просмотреть материалы за любой нужный день. Такое решение ранее нам не встречалось, и мы считаем его достаточно оригинальным и удобным, хотя несколько неочевидным. Как уже было упомянуто, появилась лента региональных новостей, но это не единственное нововведение, касающееся контента. При разработке 124 Там же

48 новой концепции сайта, было обнаружено, что «ознакомившись с одним материалом, пользователи покидали сайт. Снижалась глубина посещения», а также, что «для беглой оценки событий недостаточно двух новостей на первом экране главной страницы»125. Поэтому было решено разделить пространство первого экрана на три части. «Слева – актуальные новости к этой минуте, центральный – редакторская подборка важных новостей, справа – главные события дня»126. При этом ленту новостей теперь можно менять в соответствии с регионом. Более свежие новости дополняются фотографиями и отделены линейкой. Кроме того, такие анонсы увеличились в размере до 220х100 пикселей. Разработчики объяснили это тем, что ранее пользователи часто путали новости с рекламой, что иллюстрирует упомянутые нами ранее принцип баннерной слепоты и тенденцию, характеризующуюся попытками дизайнеров создавать сайты СМИ, максимально далекие от фейковых. Появились такие подборки, как медиа, мнения, проекты и т.д. Изменился шрифт с Tahoma для текста и PT Serif для заголовков на более современные Noto Sans и Noto Serif соответственно. Ранее шрифт можно было считать достаточно мелким – в тексте анонсов он увеличился с 12 пикселей до 14, в заголовках анонсов до 22 пикселей. Это можно считать верным решением, как минимум, потому, что аудитория «РГ» достаточно возрастная. Чтобы пользователи не забывали, что они уже успели прочесть, использованные ранее ссылки теперь имеют цветовую индикацию. Верстка страниц разделов. В новой версии сайта весь контент разделен на рубрики, страницы которых кастомизированы. Так, например, на странице рубрики «Спорт» сначала отображаются трансляции, затем актуальные снимки, а после новости. Интерактивность. При редизайне большое внимание уделили интерактивным функциям в попытке сделать пользователей «вовлеченными». Добавился личный кабинет, который позволяет пользователю покупать 125 126 Там же Там же

49 издания через интернет-магазин, подписываться на комментарии под интересующими его материалами, а также на обновления сюжетов (оповещения придут на почту, отобразятся на сайте и в кабинете). Адаптивность верстки главной страницы. Ввиду перехода на адаптивную версию, главная страница сайта была полностью перестроена. Теперь для верстки характерно явное разделение на четыре колонки, внутри которых контент разделен на блоки. По мере уменьшения экрана, самая правая из колонок переносится вниз, а блоки контента равномерно распределяются среди блоков оставшихся колонок. Так, например, при просмотре на планшете с экраном размером 1024х600, самая правая колонка с блоками курса валют, «Главное сегодня», «Медиа» переходят под блок с главными анонсами с сохранением порядка. Оставшиеся блоки из второй, третьей и четвертой колонки перемешиваются в соответствии с иерархией важности, присвоенной им редакцией. При уменьшении экрана до размера небольшого планшета (экран 800х480), колонки сужаются, а контент уменьшается. При этом расстояние между блоками, текстом и т.д. уменьшается пропорционально. Однако мы также обнаружили, что при просмотре с устройства с экраном размером 960х600, то есть находящегося по размеру между уже рассмотренными нами, справа образуется пустое поле. Иначе говоря, три колонки в полный размер уже не помещаются на экране, поэтому сужаются до заданного значения, но экран не настолько мал, чтобы вместить узкие колонки впритык. Стоит заметить, что, если размещение меню слева само по себе спорно, тем не менее, в «десктопной» версии все рубрики, кроме одной, видны на первом экране. Но стоит экрану уменьшится до размера планшета, как в среднем половина рубрик не помещается на главном экране, и пользователь вынужден пролистывать, чтобы получить к нему доступ. Это и замеченная нами ошибка в верстке позволяет предположить, что дизайну для устройств

50 среднего размера было уделено недостаточно внимания. Такая ситуация не уникальна, и, по мнению исследователей, является распространенной127. Размере экрана меньше 760x410 сетка верстка кардинально меняется. Можно заключить, что в этом месте дизайнеры сочли, что «гибкий» макет больше не может сужаться автоматически, и необходимо создать новый, учитывающий пользовательский опыт на мобильных телефонах (вспомним это правило из первой главы). Вместо трех колонок теперь отображается только одна: в начале пользователь видит главные анонсы, затем, как и в версии с тремя колонками, курс валют, «главное сегодня» и «медиа», после размещен блок с новостной региональной лентой, который неизменно располагался слева, дальше следуют оставшиеся блоки в соответствии с иерархией важности. Полностью изменилось меню: теперь оно закреплено вверху страницы и содержит логотип, выравненный по левой стороне, «гамбургер», иконку геоопределения и иконку поиска, расположенных справа. Отметим, что перемещение логотипа в левый угол улучшает юзабилити, так как, согласно исследованию, пользователи привыкли к такому его расположению128. Сочетание логотипа, «гамбургера» и иконки поиска является в каком-то смысле классическим, но назначение иконки геоопределения для нового пользователя неочевидно. Также добавим, что размещение рядом с «гамбургером» надписи «меню» или ее аналога улучшило бы показатели юзабилити129. Сохраняется возможность переключиться между свежими новостями и вчерашними; кнопка «свежий номер» сокращается до иконки, пропадает возможность подписки на издание. Как мы писали в первой главе, сокращение функционала на мобильных платформах – распространенная ситуация. В случае нехватки пространства для размещения кнопки, ссылку на подписку 127 Nielsen J. Tablet usability. 05.08.2013. URL: nngroup.com/articles/tablet-usability. Whitenton K. Centered logos hurt website navigation. 10.07.2016. URL: nngroup.com/articles/centered-logos. 129 Mobile menu AB tested: hamburger not the best choice? // Исследование в блоге о разработке сайтов Sitesforprofit. 27.09.2016. URL: sitesforprofit.com/mobile-menu-abtest и Sherwin K. The magnifying-glass icon in search design: pros and cons. 23.02.2014. URL: nngroup.com/articles/magnifying-glass-icon. 128

51 можно было бы разместить в раскрывающемся «гамбургере». Так, например, дизайнеры поступили с функцией «войти». Хотелось бы добавить, что при нажатии на «гамбургер», пользователь переносится в начало страницы. Логика такого перехода представляется нам странной, так как желание пользователя посмотреть список рубрик никак не связано с движением по странице. Такой переход противоречит стандартной ментальной модели130 и может вызвать недоумение и раздражение, о чем мы уже говорили выше. Минимальный размер экрана, при котором возможен просмотр сайта, – 320x480. Однако существуют устройства меньшего размера, и, хотя, как мы отмечали, количество смартфонов стабильно растет, многие пользователи все еще имеют так называемые feature phone. Хотя создание макетов для таких устройств становится все менее актуальным, исключение их из дизайнстратегии противоречит принципу «прогрессивного улучшения». Адаптивность верстки новостной страницы. Что касается новостной страницы, то она состоит их трех колонок. Слева располагаются уже знакомые нам лента новостей и меню (в старой версии меню на новостной странице закреплялось), ниже поле остается пустым. По центру размещен непосредственно материал, справа снова блок «Главное сегодня», под ним анонсы, материалы партнеров, реклама, блок «Советуем почитать». В среднике между публикацией и правой колонкой – иконки соцсетей, увеличившиеся по сравнению со старой версией сайта и теперь закрепленные (до кнопки «Показать комментарии»). Вместе с ними находятся иконки комментариев и «Сохранить статью». При нажатии на иконку комментариев, пользователя переходит в конец материала, где для того, чтобы оставить комментарий или посмотреть уже написанные, он вынужден еще нажать на Ментальная модель основана на вере, а не фактах, и представляет собой то, что пользователи знают (или думают, что знают) о системе. Источник: Nielsen J. Mental Models. 18.10.2010. URL: nngroup.com/articles/mental-models. 130

52 кнопку «Показать комментарии». Такая логика вызывает вопросы, так как пользователь достигает своей цели не сразу. При уменьшении размера экрана, все содержимое правой колонки исчезает, чего не происходило с главной страницей. Возможно, разработчики сочли, что пользователь мобильного устройства видит достаточно анонсов, так как они содержатся внутри самих материалов и после них. Как бы то ни было, уменьшение контента снова противоречит принципам адаптивного вебдизайна как подхода. Также при уменьшении экрана иконки соцсетей, комментариев и «Сохранить статью» переносятся под линейку над подзаголовком и снова закрепляются (до кнопки «Показать комментарии»). При дальнейшем уменьшении страницы снова появляется комплекс из логотипа, меню «гамбургер», иконки поиска и геолокации. До того, как пользователь пролистывает до иконок социальных сетей, оно закрепляется, а затем заменяется комплексом из иконок Facebook, Twitter и «ВКонтакте», значком многоточия и «гамбургером». При нажатии на многоточие раскрывается список с остальными иконками. При нажатии на «гамбургер» пользователь, сам того не желая, снова переходит в начало страницы. Таким образом, несмотря на в целом удачное обновление сайта, улучшение вовлеченности пользователя, повышение его удобства и читабельности, для нового адаптивного сайта «Российской газеты» характерно нарушение принципа «прогрессивного улучшения» по крайней мере на уровне «гибкого» макета, некоторые ошибки в верстке и отсутствие логики некоторых функций. Кроме того, уменьшение контента с уменьшением размера экрана может свидетельствовать о том, что в приоритете у редакции пользователи ПК, что противоречит принципам адаптивного дизайна как подхода, для которого характерно равенство среди пользователей любых устройств.

53 «Новая газета» Еще одним значительным перезапуском сайта в 2016 году запомнилась «Новая газета» (см. Приложение 3, рис. 17-24). В отличие от нового сайта «Российской газеты», сайт «Новой газеты» кажется никак не связанным с предыдущей версией. Более того, нам представляется, что он имеет мало общего с фирменным стилем печатной версии. Стоит признать, что это было характерно и для старой версии сайта, однако там, по крайней мере, использовался логотип газеты. В новой версии логотип был переработан, что является иллюстрацией общей тенденции адаптирования фирменных знаков под веб-платформу131. Однако ввиду того, что цветовая гамма сайта не совпадает с фирменными цветами газеты, узнавание бренда практически невозможно. Такая потеря связи, скорее, исключение из правил, так как сайты печатных СМИ либо пытаются «мимикрировать» под бумагу («Ведомости», Financial Times), либо переносят элементы фирменного стиля, либо изменяют бренд полностью, что затрагивает все продукты (примером этого подхода стал The Guardian). Кроме того, несмотря на относительную традиционность дизайна, сайт «Российской газеты» имеет узнаваемый стиль, в то время как после редизайна «Новая газета» стала как минимум похожа на сайт «Медиазона», что заметила генеральный директор Meduza Галина Тимченко132. «Последние месяцы было особенно больно открывать материалы «Новой газеты», о которых говорят из каждого утюга, с мобильных устройств (а это почти вся аудитория соцсетей). В апреле мы отвлеклись на офшорный скандал – и вы читали о нем уже в дизайне нового сайта, адаптированного для мобайла»133, – так редакция объясняет свое решение о редизайне. По словам Беляев А.А. Дизайн-модель интернет-версии как результат трансформации модели печатного издания // вестн. Моск. ун-та. Сер. 10. Журналистика. 2008. № 2. С 52-62. 132 Тимченко Галина. Запись в Facebook: 19.07.2016 в 15:33. URL: facebook.com/photo.php?fbid=10155180794151164&set=a.442162291163.229075.717311163&type=3&theater. 133 Презентация редизайна «Новой газеты». URL: web.archive.org/web/20160719131653/https:/next.novayagazeta.ru/why. 131

54 сотрудников, среди задач было сделать сайт быстрым, защищенным, красивым и удобным. Итогом редизайна стало увеличение количества уникальных посетителей. Изменения на главной странице. В первую очередь, заметны изменения в меню сайта. Редакция издания ввела новый рубрикатор, теперь пользователям предлагают ориентироваться по жанрам, среди которых новости, расследования, сюжеты, мнения и т.д. Стандартные рубрики пользователь теперь может найти в скрытом за «гамбургером» списке. Такой отказ от привычных для пользователя рубрик является одной из тенденций в дизайне современных СМИ, в частности, такой подход использует Meduza, на сайте которой в меню расположены «Новости», «Истории», «Разбор», «Игры», «Шапито» и «Атлас». Безусловно, это противоречит ментальной модели большинства пользователей, и те, кто попал на портал впервые, могут быть дезориентированы. Тем не менее, подобные издания направлены на лояльную аудиторию, которая знакома с содержанием сайта и обычно приходит за мнением, а не за текущими новостями, поэтому тематические рубрики действительно могут быть для них не настолько важны. Дизайн современных сайтов, как мы писали ранее, находится под влиянием подхода «сначала мобильные», особенно это отражается на дизайне навигации134. Так, меню «десктопной» версии сайта «Новой газеты» очевидно напоминает типичное меню, спроектированное для мобильных телефонов – «гамбургер», иконки входа и поиска. Согласно процитированному нами в первой главе исследованию, такой подход снижает юзабилити сайта. Ранее все элементы, включая рубрики, находились в шапке сайта и были всегда видны. Кроме того, теперь, если пользователь начинает листать страницу вверх, то меню снова появляется, чего раньше не было. 134 Budiu R. Pernice K. Mobile first is not mobile only. 24.07.2016. URL: nngroup.com/articles/mobile-first-notmobile-only.

55 Первое, что видит пользователь, открывая сайт, – это полноэкранная фотография с черным фильтром для улучшения читабельности, поверх которой наложен заголовочный комплекс. В целом, исследователи не советуют размещение текста поверх изображений135, однако такой подход встречается столь часто, что пользователи, кажется, начинают к этому привыкать. На фотографии также размещаются, как их назвали в редакции, «пакеты» – подборка материалов по этой же теме, аналогично «сюжетам» в «Российской газете», что иллюстрируют еще одну тенденцию в дизайне СМИ, характеризующуюся попыткой помочь читателю проследить за развитием одной истории. «…Теперь редактор вручную собирает от 1 до 5 материалов – не больше – в тематический блок, одного взгляда на который достаточно, чтобы увидеть все самое важное и уловить нужные акценты»136, – отмечает редакция. Мы не будем подробно останавливаться на новых функциях сайта, отметим лишь, что дизайнеры ввели элементы геймификации, стимулирующие пользователей активно участвовать в жизни портала. Например, теперь за комментарии можно голосовать, опуская или поднимая их рейтинг, и лучший комментарий всегда находится на виду. Адаптивность верстки главной страницы. Значительные изменения претерпели не только навигация и материал на открытие, но, как и в случае с «Российской газетой», вся верстка сайта полностью изменилась, чтобы соответствовать принципам адаптивного дизайна. На смену четырем колонкам, содержащим множество материалов с маленькими фотографиями пришли три колонки (что иногда нарушается, например, при размещении в ряд четырех анонсов), каждая из которых содержит карточки с анонсами, включающими уже более крупные фотографии. Такую верстку иногда называют ячеистой. Описывая главную страницу, редакция пишет о «поясах», 135 Harley A. Ensure high contrast for text over images. 18.10.2015. URL: nngroup.com/articles/text-over-images. Презентация редизайна «Новой газеты». URL: web.archive.org/web/20160719131653/https:/next.novayagazeta.ru/why. 136

56 то есть расположенных в ряд нескольких материалах, объединённых темой или жанром: «пояса» означают слоистую структуру страницы и то, что ее начинку редактор может изменять… чтобы дать дополнительный акцент. Есть «пояс» опроса, есть «пояс» трансляции, есть «пояс» мультимедиа. Их может на странице не быть совсем (и не будет, если это неактуально), а может быть несколько»137. При уменьшении размера экрана происходит то же самое, что и с сайтом «Российской газеты», – карточки материалов из правых колонок перемещаются под левые, при этом содержимое карточек также адаптируется (меняется кегль, для соблюдения оптимальной длины строки меняются переносы, пропорционально изменяются пробельные элементы и т. д.). Структура меню, в отличие от меню «Российской газеты», кардинально не меняется. Сначала рубрики по мере уменьшения размера экрана пропадают и переходят в скрытый список, затем на устройстве, чей экран меньше 1024х600, рубрики полностью исчезают, логотип перемещается в центр, а «гамбургер» – в левый угол»; в конце концов на экране мобильного телефона слева снова оказывается логотип, а «гамбургер» вновь возвращается в правый угол. Такая непоследовательность кажется нам необоснованной и способной ввести в заблуждение. В той же степени, что и для дизайна «Российской газеты», справедливы замечания о желательности приписки «меню» рядом с «гамбургером». Заметим, что в отличие от редакции «Российской газеты», редакция «Новой» не лишила пользователей мобильных устройств части контента – содержание всех версий одинаково. Минимальный размер экрана, при котором возможен просмотр сайта – 320 x 240 («фичерфон» BlackBerry 8300), что делает сайт «Новой газеты» доступной большему количеству пользователей. 137 Там же

57 Адаптивность верстки новостной страницы. Теперь при переходе на страницу с материалом пользователь снова видит полноэкранную фотографию, поверх которой размещен заголовочный комплекс. Ранее фотография занимала лишь ширину текстового набора, и заголовочный комплекс располагался ниже. В новой версии, в случае если публикация выходила в печатном издании, ниже размещается информация о дате и номере выпуска с небольшой фотографией обложки, сопровождающийся кнопкой «читать номер». Далее располагаются дата и время публикации на сайте, автор, количество просмотров и кнопка «Обсудить». Ниже слева располагается текст, у левого края которого размещены закрепленные кнопки соцсетей, а справа – традиционные анонсы «Картина дня» и реклама. Завершают просмотр вполне привычные анонсы «Читайте также». По сравнению со старой версией, ширина набора текста увеличилась, изменился и шрифт: ранее текст набирался Arial кеглем 13 px, а теперь – Georgia 18 px; заголовок – Arial 18 px и Helvetica Neue Cyr 45 px соответственно. Такое решение можно назвать удачным, так как считается, что шрифт с засечками лучше подходит для основного текста, более того, две гарнитуры делают верстку более разнообразной и современной. В конце концов, использование гельветичных шрифтов является трендом. При уменьшении размера, как и в случае с «Российской газетой», исчезает содержание правой колонки с анонсом, а все содержание пропорционально сужается и распределяется по вертикали. Кнопка «Обсудить» заменяется иконкой, а затем дублируется кнопкой же «Обсудить» в конце материала, туда же переносятся иконки социальных сетей. Никаких ошибок при адаптировании не было найдено. Таким образом, новый сайт «Новой газеты» можно назвать значительно более современным, в каком-то смысле даже модным, что имеет и отрицательную сторону, – дизайн не связан с печатной версией, а также похож на дизайн некоторых других сетевых проектов, созданных по такому же типу.

58 Дизайнеры в этом случае использовали менее традиционные и более спорные решения, например, текст поверх фото. Сайт «Новой газеты» в большей степени соответствуют принципам «сначала мобильные» и «прогрессивное улучшение», так как в основном пользователи получают один и тот же контент на разных устройствах, а также поддержка сайта распространяется на большее количество гаджетов. § 4. Журнал и портал «Город 812» «Город 812» – петербургский общественно-политический цветной иллюстрированный журнал, выходит раз в две недели с 2008 года. С 2002 года по 2008 год выходил под названием «Город». Издается холдингом «Агентство журналистских расследований». Тематическое разнообразие журнала проявляется в публикации аналитических материалов, интервью и авторских колонок. Ввиду периодичности более оперативные материалы, например, репортажи, публикуются редко. Рубрикация. После редизайна в 2016 году редакция практически отказалась от рубрик. Однако были сохранены наиболее важные: • «Угол правды и социалистической» – колонка редактора; • «Еженедельный рейтинг упоминаемости в СМИ»; • «Крик души народа» – опрос общественного мнения по актуальной теме; • «Угол правды» (авторская колонка, обычно Глеба Сташко); • «Анатомия Петербурга» – инфографика о Петербурге. Основной фокус материалов – Петербург, затем – федеральная политика, которая так или иначе может коснуться жителей города.

59 Шрифтовое расписание. Myriad Pro для заголовков, подзаголовков, лида, а также подписей; Minion Pro – для основного текста. Верстка. Трехколоночная, часто ассиметричная (см. Приложение 4, рис. 2). Отличительные черты фирменного стиля журнала: • Характерное оформление обложки (см. Приложение 4, рис. 1); • Часть заголовка выделяется полужирным для подчеркивания игры слов; • Иногда подписи выделяются таким же образом; • Неформатные колонки с большим средником, куда ставятся подзаголовки; • Подзаголовки выделяются красным; • Линейки отсутствуют; • На усмотрение дизайнера у фотографии отрезается уголок, где размещается подзаголовок или комментарий; • Разноформатные фотографии; • Особое оформление инфографики «анатомия Петербурга». Аудитория журнала и сайта: • Возраст: 35 – 55 лет • Пол: любой • Место жительства: СПб • Доход: 30 тыс. руб. и выше • Образование: высшее • Область профессиональных интересов: занятые в научной гуманитарных сферах, органах госуправления, бизнесе • Профессиональный статус: важнее не статус, а область интересов и

60 • Интересы: политика, культура, наука, медицина • Политические предпочтения: относительно либеральные • Религиозные взгляды: любые • Дополнительные характеристики: читатель, способный прочитать больше 1000 знаков, который следит за событиями в городе и стране. Анализ достоинств и недостатков старой версии сайта. Сайт журнала «Город 812» является порталом, то есть «полноценным источником разносторонней информации, нацеленным на создание постоянной аудитории, на закрепление определенного круга читателей, необязательно совпадающего с аудиторией печатного издания»138. Верстка главной страницы (см. Приложение 4, рис. 3-5). Трехколоночная, по конфигурации – прямая, по расположению текстов относительно центра полосы – смешанная, по отношению к осям симметрии – стремится к симметрии139. Используется модульная сетка, однако заметно несоблюдение геометрической точности линий: ширина колонок все время меняется. Среди плюсов можно было бы назвать использование F-паттерна восприятия, однако, это больше не так актуально, как ранее считали исследователи140. Также упомянем, что контрастность между блоками информации не всегда достаточная, в особенности это касается анонсов в конце страницы. Несмотря на небольшое количество контента, страница создает ощущение хаоса, не в последнюю очередь из-за большого количества рекламы разной конфигурации. Контент, публикуемый на главной странице, объединяется в следующие подборки: «Самое важное» (текстовые анонсы), блоги, фото/видео, «Читают все» (текстовые анонсы), «Ваше мнение». Данные блоки не имеют единого Беляев А.А. Дизайн-модель интернет-версии как результат трансформации модели печатного издания (на материале российских СМИ) // Вестн. Моск. Ун-та. Сер. 10. Журналистика. 2008. № 2. С. 53-54 139 Якунин А.В. Веб-дизайн и оформление электронных СМИ. СПб: 2013. С. 67-70 140 Birkett A. F-patterns no more: how people view google & bing search results. 22.05.2017. URL: conversionxl.com/how-people-view-search-results. 138

61 оформления, и еще больше усугубляют ощущение отсутствия на сайте структуры. Верстка новостной страницы (см. Приложение 4, рис. 6-8). Материал на странице заверстан в одну колонку. Он иллюстрируется одним небольшим изображением. Длина строки в тексте – от 100 до 106 знаков, включая пробелы, что значительно превышает рекомендуемую длину в 60-80 символов. Кроме того, текст выравнен по ширине, что характерно для печатной верстки и не является нормой для веб-среды. Справа традиционно располагается блок с анонсами «Читают все» и реклама, под материалом – комментарии, анонсы материалов из той же рубрики и снова реклама. Также на странице присутствуют кнопки социальных сетей, «Версия для печати», «Версия для блога» (выдающая ссылку, которую можно вставить на внешнюю страницу) и «Добавить в избранное». Отсутствие личного кабинета сводит смысл последней к нулю. Шрифтовое расписание. На главной странице и страницах разделов для заголовков анонсов используется засечный шрифт Times New Roman, который не считается веб-шрифтом и даже в печатной верстке считается устарелым. Для остальных элементов, включая интерфейс, тексты анонсов и заголовки коротких анонсов, используется Tahoma начертаний Regular и Bold. Tahoma – достаточно распространенный шрифт, но также утративший современность. На новостной странице Tahoma используется для набора всех элементов, кроме заголовка. Ранее считалось, что для большого массива текста предпочтительнее шрифт с засечками, а для заголовков – без засечек, но, согласно итогам современных исследований, это больше не актуально141. Отметим, что все элементы, за исключением заголовка главного материала (в случае с главной страницей и страницами разделов) и основного материала (в случае с новостной страницей), на всех страницах набраны 141 Nielsen J. Serif vs. sans-serif fonts for HD screens. 02.07.2012. URL: nngroup.com/articles/serif-vs-sans-seriffonts-hd-screens.

62 слишком мелким кеглем. Так, основной текст имеет размер 12 пикселей, что, согласно правилу расчета кегля, при котором скорость чтения наиболее высока142, недостаточно для данного шрифта, что не только снижает удобочитаемость, но и в конечном итоге приводит к финансовым потерям143. В особенности нечитабельны анонсы на главной странице. Более того, вынуждены констатировать, что не всегда соблюдается достаточный тонально-цветовой контраст: например, короткие анонсы выделены серым цветом, а анонс главного материала располагается на серой плашке, при этом заголовок выделяется красно-оранжевым. Помимо всего прочего, интерлиньяж в заголовке не просто недостаточно больше кегля, он меньше: кегль 30 пикселей, интерлиньяж – 22 пикселя. Цветовая гамма. Основное пространство страницы, содержащее контент, окружено красной рамкой, что придает дизайну агрессивные черты и отвлекает от чтения. Помимо того, что такое решение ухудшает юзабилити, оно является далеко не современным. Красным же выделяют начало и конец текста на новостной странице, а также рубрику «Ранее по теме». Другой оттенок красного, как уже было сказано, используется для выделения заголовка основного материала на главной странице. На новостной странице он также используется для заголовка. На этой же странице для ссылок на анонсы и некоторых элементов интерфейса, например, кнопки «Комментировать», используется оттенок оранжевого. Также для анонсов используется серый цвет, как и для тематических рубрик и плашек. На главной странице цитата недели выделяется зеленым. Вместе с основным цветом текста – черным – и белым цветом негативного пространства на сайте используется семь цветов, что недопустимо много. Кроме того, такое разнообразие цветов не сочетается с 142 Legge G. E., Bigelow C. A. Does print size matter for reading: a review of findings from vision science and typography // Journal of Vision. 2011. Vol. 11.5. P. 8 143 Tennant D. B. 16 pixels font size: for body copy. anything less is a costly mistake. 07.10.2011. URL: smashingmagazine.com/2011/10/16-pixels-body-copy-anything-less-costly-mistake.

63 фирменным стилем журнала, для которого характерен чистый красный, черный и белый цвета, а также желтый для текстового анонса на обложке. Навигация. Меню сайта содержит 13 рубрик. Из них уже не актуальна рубрика PDA, при нажатии на которую пользователь переходит на якобы мобильную версию сайта, содержащую исключительно текст и практически нечитабельную с мобильных устройств. Также лишней нам представляется рубрика «Главная», так как на главную страницу традиционно можно перейти, кликнув на логотип. Над меню располагается шапка сайта, где размещен логотип, блок с датой и погодой, а также изображения трех номеров журнала, кликнув на которые, можно посмотреть один из них. Тем не менее, эта часть сайта давно не обновлялась. Говоря о логотипе, заметим, что, во-первых, он не соответствует бренду издания, а во-вторых устарел. Черно-белый градиент также не придает меню современности. Справа от меню располагается блок с поиском, который достаточно хорошо выделяется на странице. Контент. Все основные тексты из печатной версии попадают на сайт. Также для сайта пишутся отдельные тексты, в основном это реакция на последние политические события с использованием блогов, комментариев в соцсетях и т. д. Тем не менее, на сайте не публикуется инфографика «Анатомия Петербурга», еженедельный рейтинг упоминаемости в СМИ и опросы «Крик души народа», которые можно с уверенностью назвать частью бренда журнала. Опрос, публикуемый на сайте, никак не связан с «Криком души народа». Можно также констатировать, что для сайта характерна низкая мультимедийность: фотографий немного, они не больше ширины одной колонки, часто плохого качества, а блок с видео не привлекает внимания и его функция не сразу ясна.

64 § 5. Анализ конкурентной среды, предпочтений пользователей и пожеланий редакции Чтобы определить дальнейшую стратегию работы над проектом, необходимо выяснить задачи, которые с помощью дизайна хочет решить редакция, провести небольшой обзор конкурентной среды, а также выяснить, что на сайтах СМИ кажется важным потенциальной аудитории журнала, что их привлекает, а что отталкивает. Экспертный комментарий. Сергей Германович Балуев является главным редактором журнала «Город 812» с 2001 года, когда издание еще называлось «Городом». В экспертном комментарии он выразил свои пожелания по редизайну сайта. Эти рекомендации легли в основу разработки нового макета сайта. Среди основных пожеланий были названы следующие: 1. привлечь больше молодежи – расширить аудиторию до 25 лет; 2. увеличить время пользования сайтом, повысить активность пользователей; 3. повысить мультимедийность сайта; 4. изменить рубрикацию. Условно главные, которые могут становиться второстепенными в зависимости от конъюнктуры, – политика, люди, церковь, архитектура, споры. Условно второстепенные, размещаемые в выпадающем меню, – деньги, недвижимость, рейтинги, культура, медицина, спорт, личный опыт. Убрать рубрики «отзывы читателей» и «МК Питер». Предусмотреть то, что рубрики могут быть по случаю. Например, у журнала есть проект «песни Богорада», такая рубрика может появиться, чтобы выделить что-то важное и интересное. Кроме того, необходимо создать рубрики второго ряда, выделяющие важные темы, например, передачу Исаакиевского собора. Возможно, продумать

65 систему тэгов с выносом их на главную страницу сайта. Наконец, необходимо определить, каким образом будут выделяться материалы, написанные в журнале; 5. осовременить сайт; 6. показать связь сайта с журналом, использовав отличительные черты его бренда. Анализ конкурентной среды. При создании проекта редизайна мы не можем не учесть ситуацию на рынке СМИ, поэтому проведем краткий анализ конкурентов портала. В первую очередь хотелось бы отметить, что «Город 812» занимает уникальную нишу: он является единственным в Петербурге общественно-политическим журналом. Среди общественно-политических журналов всероссийского масштаба наиболее известными являются «Русский репортер», «Огонек» и «The New Times». Перед первыми двумя журнал «Город 812» имеет преимущество, так как только у него есть собственный сайт: после возрождения журнала «Русский репортер» материалы публикуются на сайте «Эксперта», а сайт самого издания не обновляется; материалы же из «Огонька» размещаются на общем для издательского дома «Коммерсантъ» портале. Все сайты являются адаптивными. Еще одно преимущество «Города 812» перед взятыми тремя: главный фокус издания – Петербург, и журналисты обладают большей информацией по поводу происходящего в городе. Обратная сторона этого – недостаточные ресурсы для освещения федеральной повестки дня. Наиболее опасным конкурентом в данной категории можно назвать «The New Times» потому, что это издание имеет свой отдельный сайт. Его можно назвать настоящим порталом, постоянно обновляющимся и содержащим большое количество материалов, написанных исключительно для электронной версии.

66 И для сайта «Эксперта», и для сайта The New Times характерно сочетание красного, черного и белого цветов, поэтому при создании проекта нам необходимо сделать сайт максимально непохожим на конкурентов, не потеряв связь с фирменным стилем издания. Из всего разнообразия журналов Петербурга (развлекательных, глянцевых, культурно-просветительских, спортивных и т. д.) главными конкурентами являются деловые издания. В целом, любое из перечисленных конкурирует с журналом, но по отдельным разделам. Наибольшее же количество общих тем у «Города 812» с журналом «Эксперт», а также с газетой «Деловой Петербург», которую мы решили отнести сюда же ввиду ее малое периодичности и схожей тематики. «Деловой Петербург» является более серьезным конкурентом, поскольку «Эксперт» – это более узконаправленное издание. Кроме того, в отличие от «Эксперта», газета имеет мобильный сайт. Также портал «Делового Петербурга» постоянно обновляется и содержит большее количество материалов, в том числе опубликованных только онлайн. Единственное преимущество «Города 812» – больший охват тем – номинально, так как де-факто «Деловой Петербург» освещает все основные события города, правда, под иным углом. Заметим, что газета в качестве фирменных цветов также использует белый, красный и черный, но уже с добавлением кремового и серого. Другие газеты городского и федерального масштабов подробно рассматривать не будем, лишь отметим, что для отличия от них новый сайт «Города 812» должен обеспечивать читателей большим количеством аналитики и мнений. Среди интернет-СМИ, по данным «Яндекс. Каталога», самыми цитируемыми в Петербурге (данные за февраль 2017 года) являются «Фонтанка» – ТИЦ 13000, Village – ТИЦ 5000, «Бумага» – 2200. Для сравнения

67 ТИЦ «Город 812» – ТИЦ 3400. Последние два онлайн-издания имеют совершенно другую аудиторию и иной подход к освещению тем, в особенности Village, поэтому рассматривать их подробно мы не будем. Что касается «Фонтанки», то ее аудитория схожа с аудиторией «Города 812» – это «социально активные жители города (руководители, специалисты и менеджеры высшего звена), в возрасте от 25 до 44 лет, с высшим образованием и доходом выше среднего»144. Тем не менее, оба издания принадлежат многопрофильной российской медиагруппе АЖУР, поэтому между изданиями если и существует какая-либо конкуренция, то она заключена внутри одного холдинга. Но мы все же отметим, что «Фонтанка» выигрывает у «Города 812» в разнообразии материалов (как расследованиях, так и новостях), оперативности, мультимедийности, цитируемости и удобстве использования. Таким образом, чтобы быть конкурентоспособным, журналу «Город 812» необходим сайт, способный отображаться на любых устройствах, отличающийся уникальным фирменным стилем, предоставляющий читателям глубокие аналитические или публицистические материалы на актуальные темы, в особенности, касающиеся местной повестки. Анализ предпочтений пользователей (см. Приложение 5, рис. 1-20). Чтобы лучше понять предпочтения потенциальной аудитории журнала, мы провели соответствующие исследования. Среди жителей Санкт-Петербурга в возрасте от 25 лет был проведен двухуровневый опрос. Порог в 25 лет был установлен с согласия редакции, считающей дальнейшее расширение аудитории необоснованным. Все респонденты были разделены на шесть возрастных групп – 25-29 лет, 30-34 года, 35-39 лет, 40-44 года, 45-49 лет, 5055 лет. 74% респондентов были младше 35 лет, потому как опрос проводился с помощью онлайн-инструмента «Google Формы» и большая часть Медиа-группа АЖУР и мультимедиа-холдинг Ragrad Video «расставили сети» // Реклама в онлайн-СМИ «Фонтанка». URL: fontanka.ru/_adv_network/?mobile=false. 144

68 ответивших пришла из социальных сетей, которые, ввиду ограничения в ресурсах, мы использовали для привлечения респондентов. Респондентам было предложено оценить четыре сайта – «Город 812», The New Times, «Деловой Петербург» и «Фонтанку» – по четырем критериям: удобству навигации, цветовому решению, шрифту и общему впечатлению. Оценка выставлялась по пятибалльной шкале. Выбор сайтов был обоснован тем, что The New Times и «Деловой Петербург» оказались среди основных конкурентов, а «Фонтанка» могла бы оказаться, если бы не принадлежала к той же медиагруппе. В случае если респондент выставлял единицу или двойку, то ему предлагалось попытаться обосновать, чем он был не доволен; если тройку – чего ему не хватило, чтобы поставить высшую оценку; если четверку или пятерку – что его привлекло. Чтобы оценить удобство навигации, респондентам было предложено выполнить по три задания на каждый сайт, направленных на поиск материалов и взаимодействие с системой навигации. Таким образом, первый уровень опроса – количественный, а второй качественный. На основе первого однозначных выводов сделать нельзя, так как, в опросе приняло участие 27 человек, что недостаточно для репрезентативной выборки в количественном исследовании, а также в некоторых случаях оценка противоречила высказанным респондентами замечаниям. Однако рейтинг сайтов по обоим показателям совпал. Кроме того, для качественного пилотного исследования 27 человек, как нам кажется, достаточно, а задача как раз состояла в исследовании качественных показателей. После получения результатов все реплики были проанализированы и собраны в группы критериев (см. полный список в Приложении). Необходимо упомянуть, что такой анализ предусматривает интерпретирование, а значит, имеет место субъективная оценка со стороны исследователя. Также отметим, что один ответ мог содержать несколько реплик. Например, отвечая на вопрос, что произвело на него положительное впечатление при навигации на сайте,

69 респондент написал: «Четкое разделение тем, удобный поиск, приятное оформление». Так мы выяснили, что при навигации на сайте для пользователей важнее всего удобство, релевантность и доступность поиска (34 реплики), четкая структура страницы, гармония, отсутствие перегруженности информацией (25 реплик), предсказуемая, легко доступная рубрикация и тематическое разделение (21 реплика) и т. д. При оценке цветового решения сайта респонденты на первое место поставили эстетическое впечатление от цвета (42 реплики), так как, в отличие от навигации, цвет не поддается однозначной объективной оценке. Почти так же важной для пользователей оказалась не агрессивность цвета (31), чуть менее важным – его количество на странице (24). При оценке шрифта респонденты особо выделили читабельность (39) и размер (22). Отвечая на вопросы об общем впечатлении от пользования сайтом, респонденты чаще всего писали об эстетическом впечатлении (40)145, структура и иерархии на странице (29), общем ощущении удобства (19), поиске (19). Наиболее положительно респонденты оценили сайт «Фонтанки». Он показался им самым удобным, с лучшим поиском и меню. Были обозначены вопросы к его структуре: несколько перегружена основная страница, а на новостной странице материала побочная информация отвлекает от основного текста, требуется чуть больше акцентов. У респондентов сложилось положительное общее эстетическое впечатление как о приятном глазу сайте, со спокойными и не раздражающими, гармонично сочетающимися цветами, в целом читабельными шрифтами, которые хотелось сделать крупнее в анонсах. На втором месте – «Деловой Петербург», который производит приятное впечатление делового сайта, имеющего, однако, неудобный поиск, непонятное меню с неочевидными рубриками, малопонятной, нестандартной структурой. Респонденты положительно оценили цветовое решение сайта и шрифтовое Заметим, что наличие стольких реплик об эстетическом впечатлении, не значит, что респонденты выделяли этот критерий среди других. Чаще всего, свою эмоциональную оценку они давали вместе с более объективной, например, «сайт несовременный и некрасивый, но есть удобный поиск и понятное меню». 145

70 расписание, однако, вопреки обыкновению, шрифт показался многим слишком крупным. Не оценили респонденты и идею размещения текста поверх фотографий. На третьем месте – «Город 812», который оценили как скучный, несовременный, устаревший сайт, с большим количеством рекламы, хаотичной структурой анонсов, отсутствием иерархии, малым количеством мультимедиа. При этом респондентам он показался в целом удобным, благодаря стандартному меню и релевантному поиску. Цветовое решение они расценили как агрессивное. На последнем месте – The New Times. По мнению респондентов, это стильный современный сайт, но впечатление было испорчено крупными фотографиями плохого качества, множеством отвлекающих элементов, непонятной хаотичной структурой, неудобным нерелевантным поиском, большим количеством непонятных рубрик. В качестве функциональность, заключения заметим, удобство предсказуемость и что для в пользователей очередной раз (большинство современных исследований это подтверждают) оказались важнее, чем внешний вид сайта, что отлично видно на примере сайта The New Times, который, несмотря на свой современный и яркий дизайн, уступил место устаревшему сайту «Города 812» и спокойному, но логично устроенному сайту «Фонтанки». §6. Создание нового дизайн-макета портала «Город 812» Теперь, когда мы узнали о последних исследованиях по темам адаптивного веб-дизайна и пользовательского опыта, а также о технических возможностях и ограничениях адаптивной верстки, проанализировали тенденции в дизайне СМИ и проследили их на нескольких примерах; когда мы оценили достоинства и недостатки старой версии сайта, знаем пожелания редакции, предпочтения пользователей и состояние конкурентной среды, –

71 можно приступить непосредственно к созданию макета (см. Приложение 6, рис. 1-15). Во-первых, следуя принципу «Сначала контент», определим цель, ради которой пользователи потенциально приходят на сайт «Города 812». Как уже отмечалось, одно из конкурентных преимуществ портала, а также его бренд состоит в аналитических материалах и мнениях. Кроме того, журнал делает ставку на конкретных авторов. Верстка. Переходим к проектированию модульной сетки. Поскольку мы условились, что делаем адаптивный дизайн, а не отдельные версии для персонального компьютера и мобильных устройств, то целесообразно выбрать традиционную для такого дизайна сетку из трех колонок, которая будет сужаться и перестраиваться с уменьшением экрана. Основываясь на принципе «сначала мобильные», начинаем создавать первый, пока еще не проработанный, макет для мобильных устройств. Поскольку мы разрабатываем проект, а не полноценный сайт, вариантов для трех устройств будет достаточно. За мобильный телефон мы приняли усредненный вариант с разрешением экрана 360х630. Учитывая уже описанное нами выше, на первом экране размещаем главный аналитический или публицистический материал, далее в соответствии с уменьшением значимости следуют блок с анонсами блогов, блоки с главными материалами из журнала, анонс последнего выпуска, сопровожденный кнопками «Скачать PDF» и «Оформить подписку» (в старой версии, как мы писали, ссылка на выпуски размещалась в неочевидном месте, а сами файлы не обновлялись), цитата недели, опрос «Ваше мнение», блок с самыми популярными материалами, «Наши блогеры», после редакторские подборки по темам, затем галерея фото и в самом конце – видео. Количество колонок увеличивается вместе с пропорционально увеличивающимися блоками при увеличении разрешения экрана сначала до 630х360 (ландшафтный режим просмотра того же устройства), затем до 768х1024 (книжный, или портретный, режим

72 просмотра с Apple iPad, который мы приняли за устройство среднего размера), далее до 1024х768 (ландшафтный режим просмотра Apple iPad) и наконец до 1920х1080 (персональный компьютер). Добавляем в наш макет меню. Слева, следуя описанным ранее рекомендациям, размещаем логотип, а справа – меню «гамбургер», иконки поиска и входа в личный кабинет. «Гамбургер» сопровождаем припиской и стрелкой «все темы», снова апеллируя к упомянутым нами исследованиям. Меню закрепляется, так как мобильное устройство подразумевает длинный скроллинг, и возвращаться наверх ради доступа к меню пользователи не будут. По мере увеличения экрана в меню добавляются рубрики. Теперь перейдем к макету новостной страницы. Под меню размещаем заголовочный комплекс, состоящий из рубрики, полноэкранной фотографии, заголовка, подзаголовка, имени автора и даты публикации (если материал вышел в печатной версии, то и номера выпуска). Далее следует лид, а затем основной текст, чей блок немного более узкий и сдвинут вправо. Внутри текста могут располагаться фотографии той же ширины, а также цитаты или блоки с текстами по теме или бэкграундом, которые выравниваются по левому краю с левым краем лида и фотографии, внедряясь в массив текста и сужая колонку набора. Такой подход почти не используется в российских СМИ, но давно взят на вооружение англоязычными. После текста размещаются тэги, блок с комментариями, анонс последнего выпуска, материалы по теме и самые популярные материалы. По мере увеличения экрана анонсы перемещаются в колонку справа. Мы приняли решение разработать два варианта верстки материалов – первый для тех, что были опубликованы в журнале, а второй – для размещенных только на сайте. На экране мобильного телефона кардинально отличаться они не будут, ввиду ограничения в размере, а на устройствах большего размера различия будут заметны не только на уровне оформления, о

73 котором мы поговорим позже, но и на уровне сетки. Так, «журнальный материал» отличается большой фотографией на все три колонки, в то время как текст, опубликованный только онлайн, будет содержать изображение на две колонки, третью же справа от него займут анонсы самых популярных материалов, которые в первом варианте верстки сдвигаются вниз. Заметим, что ввиду особенностей пользовательского опыта, некоторые элементы в мобильной версии мануально увеличены, например, кнопки. Элементы фирменного стиля. Теперь, когда у нас есть эскизы макетов для разных устройств, добавляем в них элементы фирменного стиля. Для начала обновляем шрифт, так как и Minion Pro, и Myriad Pro плохо смотрятся на экране и не являются веб-шрифтами. Первоначально для заголовков и элементов интерфейса был подобран широко распространенный Roboto, имеющий множество начертаний, и несколько схожий с Myriad Pro. Однако затем решение было принято в пользу Gotham Cyrillic, поскольку он имеет более выраженный эмоциональный характер, что вполне вписывается в концепцию общественно-политического СМИ. Также рассматривался Proxima Nova, родственный Gotham Cyrillic и несколько более изящный, но он является платным, что и стало решающим фактором. Для основного текста был выбран PT Sans – достаточно современный, удобочитаемый веб-шрифт. Что касается фирменных цветов, то для меню, линеек, кнопок используется красный, для текста – черный (на подложке – белый), для элементов меню (логотип, рубрики, поиск, вход в личный кабинет, «гамбургер») – белый. Чтобы подчеркнуть связь между первым экраном сайта и обложкой журнала, один из анонсов оформляем в виде уголка на желтой подложке. Главный материал снабжаем фотографией с отрезанным уголком, куда помещаем выделенный красным подзаголовок, а также рубрику. Под фотографией размещаем заголовок, частично набранный полужирным.

74 Чтобы усилить ассоциацию с печатной версией (вспомним про тенденцию «мимикрировать» под «бумагу»), в верстку материала из журнала добавляем следующие элементы: обрезаем правый угол фотографии (пока оставляя его пустым, так как, объективно, подзаголовок туда не поместится), подзаголовок снова выделяем красным, добавляем буквицу. В блок с цитатами добавляем значок «кавычек-лапок». Контент. На уровне контента произошли следующие изменения. Вопервых, в соответствии с пожеланиями редакции обновилась рубрикация. Вовторых, мы предусмотрели на главной странице место, где будет появляться еженедельный рейтинг цитируемости в СМИ. Поскольку верстка адаптивная и может легко перестраиваться, рейтинг в зависимости от желания редакции может размещаться в правой колонке по вертикали, либо на все три колонки по горизонтали. Также мы предложили перенести инфографику из журнала на сайт. В существующем сейчас виде это сделать возможно, но едва ли было бы правильным решением, так как принципы создания инфографики для вебсреды и печати отличаются. Поэтому мы предложили следующее решение: оформлять каждую инфографику в виде спецпроекта на отдельном сайте с помощью конструктора, например, такого, как Tilda. Такая практика является в настоящее время достаточно распространенной. Как уже было написано выше, блоки с фотографиями и видео отделились друг от друга, их размер значительно увеличился. Интерактивные функции. Среди задач, которые должен решать новый сайт, стояло вовлечение аудитории в жизнь портала. Держа в уме изученную нами информацию и кейсы, мы предложили следующие решения. Во-первых, увеличить размер иконок соцсетей на новостных страницах. На странице с материалом из журнала они теперь размещаются в отрезанном от фотографии уголке, а на странице с текстом, опубликованном только онлайн, – слева от текста сразу под лидом. Во-вторых, оставлять комментарии теперь может

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

76 ЗАКЛЮЧЕНИЕ Вследствие возросшего количества мобильных устройств, значительно отличающихся размерами и техническими характеристиками, у вебразработчиков и дизайнеров не осталось иного выбора, как придумать способ адаптировать макет под разные ширины экранов и разные браузеры. Возникший ввиду этого адаптивный веб-дизайн быстро завоевал популярность в веб-среде и породил множество споров. Главным камнем преткновения стало определение границ адаптивного веб-дизайна и «отзывчивого» веб-дизайна. Последний термин был впервые сформулирован Итаном Маркоттом, который включал в него три компонента: 1. гибкий макет на основе сетки (flexible, gridbased layout); 2. гибкие изображения (flexible images); 3. медиазапросы (media queries), модуль спецификации CSS3. Своим рождением понятие «адаптивный веб-дизайн» обязано Аарону Густафсону, который определял его как более общий концепт, включающий в себя в том числе «отзывчивый дизайн». В основе идеи Густафсона лежит принцип «прогрессивного улучшения», главный смысл которого выражается в доступности контента для любого пользователя, использующего любое устройство. Согласно этому принципу, сначала создаются макеты для устаревших и маломощных браузеров и устройств, которые постепенно улучшаются под более современные. В таком случае все пользователи получают необходимую им информацию. Выяснив, что адаптивный веб-дизайн как стратегия проектирования шире обеих вышеперечисленных концепций, мы определили его как подход, целью которого является создание веб-сайтов, одинаково доступных всем пользователям, использующим любые устройства, и адаптирующихся под эти устройства. Данный подход включает в себя идеи и «отзывчивого веб-

77 дизайна», и стратегию «прогрессивного улучшения», «ненавязчивый JavaScript», а также концепции «сначала мобильные», «сначала контент». Мы выяснили, что последняя концепция позволяет пользователям эффективнее взаимодействовать с сайтами (идея пользователя как «человека, который использует один глаз и один палец»), а владельцам – определить, что является ключевым для их бренда. Данная концепция особенно актуальна для СМИ, так как главный продукт медиа – это контент, и именно за ним пользователи приходят на сайт. Также мы пришли к выводу, что для СМИ сейчас особенно остро стоит проблема привлечения, удержания и вовлечения пользователей. В решении этой задачи может помочь дизайн, которые сейчас многими медиа ставится наравне с работой журналиста. Проанализировав примеры редизайна сайтов современных общественно-политических СМИ с переходом на адаптивные версии, мы выявили характерные тенденции, такие как игнорирование пользовательского опыта на устройствах среднего размера; перенос дизайн-решений, характерных для мобильных устройств, на версии для ПК; геймификация; обновление шрифтового расписания и т.д. Кроме того, мы провели исследование конкурентной среды и аудитории, что помогло нам при создании макетов нового дизайна сетевого портала «Город 812». При проектировании мы попытались учесть всю изученную информацию, перенести фирменный стиль журнала с учетом технических ограничений веб-среды, освежить и упорядочить верстку, сделать его более продуманным, повысить привлекательность вовлеченность. для мультимедийность молодежи, увеличить онлайн-издания глубину и прочтения его и

78 СПИСОК ИСПОЛЬЗУЕМОЙ ЛИТЕРАТУРЫ 1. Беляев А. А. Дизайн-модель интернет-версии как результат трансформации модели печатного издания // Вестн. Моск. ун-та. Сер. 10. Журналистика. 2008. № 2. С. 52-62. 2. Беляев А. А. Особенности графической модели интернет-версий периодических изданий (на материале итальянских СМИ): дис. ... канд. фил. наук: 10.01.10. – Журналистика. М, 2009. 3. Вартанова Е. Л. Медиаэкономика зарубежных стран: учебное пособие. М, 2003. 4. Волкова В. В. Специфика медиадизайна // Вестн. Моск. ун-та. Сер. 10 Журналистика. 2014. № 4. С. 5-21. 5. Вроблевски Л. Сначала мобильные! М, 2012. 6. Вырковский А. В., Грабарник А. В. Мобильные сайты как новая составляющая бизнес-моделирования СМИ // Вестн. Моск. ун-та. Сер. 10. Журналистика. 2014. № 3. С. 15-25. 7. Вырковский А. В. Любимцева М.А. Восприятие аудиторией различных видов текста в российских деловых Интернет-СМИ // Вестн. Моск. ун-та. Сер. 10. Журналистика. 2015. № 2. С. 143-167. 8. Долгих М. Н. Дизайн и виртуальная среда: дигитальные ландшафты в аспекте гибридных медиа // Вестн. Том. гос. ун-та. 2014. №379. С.86-91. 9. Землянова Л. М. Коммуникативистика и средства информации: англорусский словарь концепций и терминов. М, 2004. 10. Издание Slon.ru перезапустилось с адаптивной версткой и новым названием Slon Magazine // Интернет-СМИ vc.ru. 18.04.2016. 11. Интернет-СМИ: Теория и практика: учеб. пособие для студентов вузов / под ред. М. М. Лукиной. М, 2010. 12. Как новые медиа изменили журналистику / под науч. ред. С. Балмаевой, М. Лукиной. Екатеринбург, 2016. 13. Кричевский В. Типографика в терминах и образах / Т. 1. М, 2000.

79 14. Круглова Л. А. Российские печатные СМИ: специфика онлайн-версий // Медиаскоп. 2016. Вып. 4. 15. Мобильный трафик на сайты СМИ растет на десятки процентов в год // Сайт газеты «Ведомости». 24.08.2015. 16. Медиасистема России: учеб. пособие / под ред. Е.Л. Вартановой. М, 2015. 17. Полевое исследование медиацеха: интервью с Натальей Лосевой. 18. Полевое исследование медиацеха: интервью с Сергеем Паранько и Ольгой Сидоровой. 19. Россия: новостные сайты формируют мобильное потребление // Сайт занимающейся исследованием аудитории транснациональной аналитической компании Comscore. 13.07.2016. 20. Словарь терминов по фронтенду / под ред. В. Макеева, О. Алексашенко. 21. Тимченко Г. Запись в Facebook: 19.07.2016 в 15:33. 22. Чихольд Я. Облик книги: избранные статьи о книжном оформлении. М, 1980. 23. Чичерина Н. В. Концепция формирования медиаграмотности у студентов языковых факультетов на основе иноязычных медиатекстов: дис. ... д-р. пед. наук: 13.00.02 – Теория и методика обучения и воспитания (иностранный язык, уровень профессионального образования). СПб, 2008. 24. Экспертная комиссия Роскомнадзора определила формулировку понятия «издание, специализирующиеся общественно-политического на распространении характера» // информации Официальный сайт Роскомнадзора. 15.11.2012. 25. Якунин А. В. Веб-дизайн и оформление электронных СМИ. СПб, 2013. 26. Aaron Gustafson on creating an accessible mobile web // Интервью с Аароном Густафсоном. 19.08.2014. 27. Aagesen P. T., Heyer C. Personality of interaction / Proceedings of the 2016 CHI Conference on human factors in computing systems. 2016.

80 28. Android fragmentation // Доклад британской компании OpenSignal, выпускающей программу для улучшения сигнала сотовой и WiFi сетей. 08.2015. 29. Bandito, a multi-armed bandit tool for content testing // Блог разработчиков Washington Post. 08.02.2016. 30. BBC to roll out redesigned news website // Журнал Design Week. 15.01.2015. 31. Birkett A. F-patterns no more: how people view google & bing search results. 22.05.2017. 32. Boulton M. A practical guide to designing for the web. Penarth, 2009. 33. Budiu R. Mobile user experience: limitations and strengths. 34. Budiu R. Interaction cost. 31.08.2013. 35. Budiu R. Pernice K. Mobile first is not mobile only. 24.07.2016. 36. Building for the next moment // Официальный блог Google Inside AdWords. 05.05.2015. 37. Champeon S., Finck N. Inclusive web design for the future with progressive enhancement. 11.03.2009. 38. Chaplin H. Guide to Journalism and Design. NY: 2016. 39. Cisco visual networking index: global mobile data traffic forecast update, 2016– 2021 white paper // Сайт разрабатывающей и продающей сетевое оборудование американской компании Cisco. 28.03.2017. 40. Cutting the mustard // Блог разработчиков адаптивного сайта BBC News. 2015. 41. Design in tech report 2017. // Сайт специалиста в области компьютерных технологий и профессора дизайна Массачусетского технологического института Джона Маэды. 42. Doyle M. Responsive web design demystified. 30.09.2011. 43. Engineers are from Mars, designers are from Venus: how to communicate & work together in harmony // Конференция для дизайнеров Warm gun. 2011. 44. Feldmann V. Competitive strategy for media companies in the mobile internet // Schmalenbach Business Review. 2002. Vol. 54. P. 357

81 45. Full highlights of World press trends 2016 survey // Сайт Всемирной газетной ассоциации. 06.12.2016. 46. Google's new search algorithm stokes fears of 'mobilegeddon' // Американское мультимедийное СМИ NPR. 21.04.2015. 47. Global digital future in focus 2016// Доклад Comscore. 26.10.2016. 48. Gustafson A. Adaptive web design. Crafting Rich Experiences with Progressive Enhancement. Chattanooga, 2011. 49. Harley A. Ensure high contrast for text over images. 18.10.2015. 50. Innovation in news media: world report 2016 // Доклад консалтинговой компании Innovation. 2016. 51. Jehl S. Responsible responsive design. NY, 2014. 52. Kalbach J. The first responsive design website: Audi (circa 2002). 22.07.2012. 53. Kramer M. Radically rethinking design. 2017. 54. Legge G. E., Bigelow C. A. Does print size matter for reading: a review of findings from vision science and typography // Journal of Vision. 2011. Vol. 11.5. P. 8 55. Lionel Barber memo to staff on reshaping the newspaper for the digital age // Сайт газеты Financial Times. 09.10.2013. 56. Marcotte E. Responsive web design. 25.03.2010. 57. Marcotte E. Responsive Web Design. NY, 2011. 58. McGrane K. Rolling out responsive. 24.11.2015. 59. Media Queries: W3C recommendation // Сайт Консорциума Всемирной паутины. 19.06.2012. 60. Mobile’s hierarchy of needs // Доклад Comscore. 05.04.2017. 61. Mobile marketing statistics compilation // Сайт транснациональной маркетинговой компании Smart insights. 01.03.2017. 62. Mobile search: topics and themes // Доклад американской аналитической компании Hitwise. 10.04.2016 – 07.05.2016. 63. Mobile web best practices 1.0 // Сайт Консорциума Всемирной паутины. 29.07.2008.

82 64. Morell R. Design as a driving force for audience engagement. 9.12.2016. 65. Mobile menu AB tested: hamburger not the best choice? // Исследование в блоге о разработке сайтов Sitesforprofit. 27.09.2016. 66. Myers A. Defining and understanding adaptive content. 12.12.2013. 67. Nielsen J. Banner blindness: old and new findings. 20.08.2007. 68.Nielsen J. Mental models. 18.10.2010. 69. Nielsen J. The most hated advertising techniques. 06.12.2004. 70. Nielsen J. Serif vs. sans-serif fonts for HD screens. 02.07.2012. 71. Nielsen J. Tablet usability. 05.08.2013 72. Nielsen J. 10 Usability heuristics for user interface design. 01.01.1995. 73. NYT Innovation Report 2014 // Доклад газеты New York Times. 2014. 74. Rachel H., Flood D., Duce D. Usability of mobile applications: literature review and rationale for a new usability model // Journal of Interaction Science. 2013. Vol. 1.1. 75. Responsive design overtakes dynamic serving as migration from dedicated mdot sites continues among internet retailer mobile 500 // Доклад специализирующейся на исследованиях в области мобильных технологий американской компании Pure Oxygen Labs. 21.07.2015. 76. Reuters institute digital news report 2016 // Доклад Reuters institute. 2016. 77. Rossback A. The year of the user // NiemanLab predictions for journalism 2017. 2017. 78. Rutte R. Images in liquid columns. 17.12.2003. 79. Scope of mobile web best practices // Сайт Консорциума Всемирной паутины. 20.12.2005. 80. Smartphone owners: a ready and willing audience // Платформа для аналитики рынка акций Seeking alpha. 12.03.2010. 81. State of the American consumer: insights for business leaders report // Доклад Аналитической компании Gallup. 2008-2014. 82. Stimac S., Gustafson A. Building in 10k: Designing for Optimization and Performance. 06.09.2016.

83 83. Sherwin K. The magnifying-glass icon in search design: pros and cons. 23.02.2014. 84. Tennant D. B. 16 pixels font size: for body copy. anything less is a costly mistake. 07.10.2011. 85. The future of design in start-ups // Доклад американской венчурной компании NEA. 2016. 86. The state of mobile news audiences in 3 charts // Сайт Comscore. 8.07.2016. 87. Traditional news publishers take non-traditional path to digital growth // Сайт Comscore. 31.03.2016. 88. UN is failing: illustration for the New York Times // Behance. 17.06.2016. 89. Vinh H. Ordering disorder: grid principles for web design. Berkeley, 2011. 90. Virdee K. Moving deeper than the machine of clicks. 2017. 91. Whitenton K. Centered logos hurt website navigation. 10.07.2016. 92. Why people block ads (and what it means for marketers and advertisers) // Доклад аналитического центра HubSpot Research. 2016.07.13. 93. Wroblewski L. Mobile first! at Adobe. 27.10.2010. 94. Wroblewski L. Mobile first. 3.11.2009. 95. Wroblewski L. Mobile First. NY, 2011. 96. Zeldman L. J. Responsive design: I don’t think that word means what you think it means. 06.07.2011. Электронные источники: 1. Блог разработчиков адаптивного сайта BBC News Responsive News. URL: responsivenews.co.uk. 2. Презентация редизайна «Российской газеты». URL: agima.ru/projects/rg. 3. Презентация редизайна «Новой газеты». URL: web.archive.org/web/20160719131653/https:/next.novayagazeta.ru/why. 4. Сайт Интернет-СМИ Slon Magazine. web.archive.org/web/20150401000000*/www.slon.ru. 2015. URL:

84 5. Сайт Интернет-СМИ Slon.ru. 2014. URL: web.archive.org/web/20140515000000*/www.slon.ru. 6. Сайт телерадиокомпании BBC News. URL: bbc.com/news. 7. Сайт BBC до News редизайна. 2014. URL: web.archive.org/web/20140801000000*/http://www.bbc.com/news. 8. Сайт «Российской газеты». URL: rg.ru. 9. Сайт «Российской газеты» до редизайна. 2015. URL: web.archive.org/web/20151001000000*/rg.ru. 10. Сайт газеты «Новая газета». URL: novayagazeta.ru. 11. Сайт «Новой газеты» до редизайна. 2015. URL: web.archive.org/web/20150701000000*/www.novayagazeta.ru. 12. Медиа-группа АЖУР и мультимедиа-холдинг Ragrad «расставили сети» // Реклама в онлайн-СМИ «Фонтанка». Другие источники: Журнал «Город 812» №17 (348) от 12.09.2016 – №4 (359) от 27.02.2017. Video

85 ПРИЛОЖЕНИЯ Приложение 1. Статистические данные Рис. 1. Фрагментация мобильных устройств Рис. 2. Разница в размере дисплеев устройств, работающих на платформе Android

86 Рис. 3. Разница в размере дисплеев устройств, работающих на платформе iOS

87 Приложение 2. Вероятно, первый адаптивный сайт Рис. 1. Страница Audi.de. 640х480 пикселей. Рис. 2. Страница Audi.de. 800×600 пикселей

88 Рис. 3. Страница Audi.de. 1024×768 пикселей

89 Приложение 3. Примеры редизайна сайтов общественно-политических СМИ с переходом на адаптивные версии Рис. 1-2. Slon.ru до редизайна. 2013 год.

90 Рис. 3-4. Slon.ru (Slon Magazine) после редизайна. 2015 год.

91 Рис. 5-6. BBC News до редизайна. 2014 год.

92 Рис. 7-8. BBC News после редизайна. 2017 год.

93 Рис. 9-10. Главная страница сайта «Российской газеты» до редизайна. 2015 год.

94 Рис. 11-12. Главная страница сайта «Российской газеты» после редизайна. 2017 год.

95 Рис. 13-14. Новостная страница сайта «Российской газеты» до редизайна. 2015 год.

96 Рис. 15-16. Новостная страница сайта «Российской газеты» после редизайна. 2017 год.

97 Рис. 17-18. Главная страница сайта «Новой газеты» до редизайна. 2015 год.

98 Рис. 19-20. Главная страница сайта «Новой газеты» после редизайна. 2017 год.

99 Рис. 21-22. Новостная страница сайта «Новой газеты» до редизайна. 2015 год.

100 Рис. 23-24. Новостная страница сайта «Новой газеты» после редизайна. 2017 год.

101 Приложение 4. Журнал и портал «Город 812» Рис. 1. Обложка журнала. №23 (354). 05.12.2016.

102 Рис. 2. Верстка материала№23 (354). 05.12.2016.

103 Рис. 3-4. Главная страница портала (ПК)

104 Рис. 5. Главная страница портала (мобильный телефон)

105 Рис. 6-7. Новостная страница портала (ПК)

106 Рис. 8. Новостная страница портала (мобильный телефон)

107 Приложение 5. Результаты исследования предпочтений пользователей Рис. 1. Пол респондентов 9; 33% 18; 67% Мужчины Женщины Рис. 2. Возраст респондентов 2; 7% 2; 7% 2; 7% 14; 48% 3; 10% 6; 21% 25-29 30-34 35-39 40-44 45-49 50-55

108 Рис. 3. «Город 812». Навигация 1; 4% 2; 7% 10; 37% 6; 22% 8; 30% оценка 5 оценка 4 оценка 3 оценка 2 оценка 1 Рис. 4. «Город 812». Цветовое решение 1; 4% 4; 15% 7; 26% 1; 3% 14; 52% оценка 5 оценка 4 оценка 3 оценка 2 оценка 1

109 Рис. 5. «Город 812». Шрифт 5; 18% 10; 37% 4; 15% 8; 30% оценка 5 оценка 4 оценка 3 оценка 2 Рис. 6. «Город 812». Общее впечатление 3; 11% 5; 19% 9; 33% 10; 37% оценка 5 оценка 4 оценка 3 оценка 2

110 Рис. 7. The New Times. Навигация 5; 19% 5; 18% 5; 19% 5; 18% 7; 26% оценка 5 оценка 4 оценка 3 оценка 2 оценка 1 Рис. 8. The New Times. Цветовое решение 2; 8% 9; 33% 6; 22% 10; 37% оценка 5 оценка 4 оценка 3 оценка 2

111 Рис. 9. The New Times. Шрифт 1; 4% 5; 19% 12; 44% 9; 33% оценка 5 оценка 4 оценка 3 оценка 2 Рис 10. The New Times. Общее впечатление 4; 15% 6; 22% 10; 37% оценка 5 7; 26% оценка 4 оценка 3 оценка 2

112 Рис. 11. «Деловой Петербург». Навигация 2; 7% 1; 4% 11; 41% 10; 37% 3; 11% оценка 5 оценка 4 оценка 3 оценка 2 оценка 1 Рис. 12. «Деловой Петербург». Цветовое решение 2; 7% 5; 19% 10; 37% 10; 37% оценка 5 оценка 4 оценка 3 оценка 2

113 Рис. 13. «Деловой Петербург». Шрифт 6; 24% 12; 48% 7; 28% оценка 5 оценка 4 оценка 3 Рис. 14. «Деловой Петербург». Общее впечатление 1; 4% 1; 4% 6; 22% 10; 37% 9; 33% оценка 5 оценка 4 оценка 3 оценка 2 оценка 1

114 Рис. 15. «Фонтанка». Навигация 2; 8% 3; 11% 13; 48% 9; 33% оценка 5 оценка 4 оценка 3 оценка 2 Рис. 16. «Фонтанка». Цветовое решение 2; 7% 2; 7% 12; 45% 11; 41% оценка 5 оценка 4 оценка 3 оценка 2

115 Рис. 17. «Фонтанка». Шрифт 4; 15% 11; 41% 12; 44% оценка 5 оценка 4 оценка 3 Рис. 18. «Фонтанка». Общее впечатление 1; 4% 4; 15% 13; 48% 9; 33% оценка 5 оценка 4 оценка 3 оценка 2

116 Рис. 19. Рейтинг по критериям оценки Сайт Навигация Цветовое Шрифт решение Общее впечатление «Город 812» 3 4 3 3 The New 4 3 2 4 2 2 1 2 1 1 4 1 Times «Деловой Петербург» «Фонтанка» Рис. 20. Упоминание критериев Группа критериев Критерий Количество упоминаний Удобство и релевантность поиска, его доступность 34 Четкая структура, гармония Четкая, легко доступная 25 рубрикация и тематическое 21 разделение Навигация Общее ощущение удобства от пользования сайтом Дизайн 19 Скорость навигации 12 15 Общее положительное впечатление от пользования 9 сайтом Тематические подборки и ленты новостей Контент 8 4

117 Цветовое решение Шрифт Общее впечатление Удобство и предсказуемость меню Реклама Эстетическое впечатление Агрессивность цвета Количество цвета на странице Сочетание цветов и цветовая гармония Цвет шрифта и элементов интерфейса Читабельность Эстетическое впечатление Размер Стиль Агрессивность гарнитуры Количество шрифтов и начертаний Общее эстетическое впечатление Структура иерархия Общее впечатление удобства Поиск Дизайн Навигация и меню Цвет Шрифт Реклама Подборки и ленты новостей Контент 3 2 42 31 24 14 13 39 27 22 20 11 6 40 29 19 19 17 15 8 6 5 5 5

118 Приложение 6. Макеты нового сайта журнала «Город 812» Рис. 1-3. Главная страница. Версия для ПК

119

120 Рис. 4. Главная страница. Версия для планшета Рис. 5-9. Главная страница. Версия для мобильного телефона

121

122 Рис. 10-11. Страница с материалом из журнала. Версия для ПК

123

124 Рис. 12-13. Страница с материалом из журнала. Версия для планшета

125 Рис. 14. Страница с материалом из журнала. Версия для мобильного телефона

126 Рис. 15-16. Страница с материалом, написанным для сайта. Версия для ПК

Рецензии:

Авторизуйтесь, чтобы добавить рецензию

- у работы пока нет рецензий -

Отзывы:

Авторизуйтесь, чтобы оставить отзыв