САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ
Институт «Высшая школа журналистики и массовых коммуникаций»
На правах рукописи
ПИСАРЕВА Екатерина Дмитриевна
Разработка адаптивной версии веб-портала «Первая Линия»
ВЫПУСКНАЯ КВАЛИФИКАЦИОННАЯ РАБОТА
по направлению «журналистика»
(проект)
Научный руководитель –
старший преподаватель Н. Н. Подшивалова
Кафедра медиадизайна и информационных технологий
Очная форма обучения
Вх. №______от__________________
Секретарь ГАК_____________________
2
Санкт-Петербург
2017
ОГЛАВЛЕНИЕ
Введение……………………………………………………………………
3
…...
Глава 1. Характерные особенности функционала и дизайна адаптивных
версий
веб-
9
Информационный веб-портал - определение и
9
портала……………………………………………………………..
1.
сущность…………...
2.
Решение функциональных задач веб-портала в адаптивном 14
дизайне..
1.3.
Принципы оформления при дизайн-проектировании адаптивных
версий
в е б - 19
порталов……………………………………………........................
Глава 2. Дизайн-проектирование макета адаптивной версии 28
информационного портала «Первая линия» на основе анализа
существующих
тенденций
в
веб-среде.
…………………………………………………………….
2.1. Анализ профильного сегмента среды: зарубежные и отечественные 28
студенче ские
веб-порталы
……………………………………………………
2.2. Основные принципы, используемые при макетировании адаптивной 32
версии…………………………………………………………………………
...
2.3. Визуальная концепция и информационная архитектура адаптивной
версии информационного портала «Первая
линия»………………………….
34
3
Заключение…………………………………………………………………
42
……
45
Список использованной
литературы…………………………………………..
Приложение………………………………………………………………….. 50
....
Введение
В век информационных технологий в повседневной жизни человека
постепенно появляется все больше возможностей, являвшиеся еще несколько
десятков лет труднодостижимыми или недоступными вообще. С развитием
интернета, а также различных электронных СМИ, информационное пространство стало находиться в режиме обновления нон-стоп.
В настоящее время для получения доступ к актуальным новостям, достаточно открытия браузера и нескольких нажатий мышкой. С увеличением
интенсивности ритма жизни человек привыкает к потреблению информации
«на ходу». С появлением смартфонов и планшетов ПК и ноутбуки хоть и не
исчезают из пользовательского обихода, но требуют больших энерго- и временных затрат для применения. Значительно более простым и быстрым решением становится использование смартфонов с приложениями социальных
сетей или мобильными браузерами, обеспечивающими оперативный и практически бесперебойный доступ к новостным порталам и иным информаци-
4
онным ресурсам, нежели стационарные устройства. К тому же, даже при
условии существования легких и тонких ноутбуков, они не так удобны в эксплуатации на улице или в общественном транспорте, в отличие от портативных мобильных гаджетов.
Согласно мировой статистике за 2015 год от компании Internet retailer,
примерно 60% пользователей используют для выхода в интернет именно
смартфоны.1 По данным Statista Inc на январь 2017 года, более половины
всего трафика (50,3%) приходится на использование мобильными
устройствами2. Как показывает их исследование, по состоянию на апрель
2017 года, в мире насчитывается около 3394 миллионов уникальных
пользователей мобильного интернета.3 Данные цифры показывают
чрезвычайную актуальность обращения к сфере развития портативных
электронных устройств с учетом прогнозируемого аналитиками
перманентного роста числа их пользователей: «Предполагается, что к 2018
году более 36% мирового населения будет пользоваться смартфонами, в
сравнении с 10 процентами в 2011 году».4 Также, по результатам мировой
1
Jake Jeffries.10 Incredible Mobile Marketing Stats 2015. // [Электронный ресурс] Statista
Inc. / URL: http://www.socialmediatoday.com/content/10-incredible-mobile-marketingstats-2015-infographic (Дата обращения 14.04.2017)
2
Percentage of all global web pages served to mobile phones from 2009 to 2017 //
[Электронный ресурс] Statista Inc. / URL: https://www.statista.com/statistics/241462/globalmobile-phone-website-traffic-share (Дата обращения 14.04.2017)
3
Global digital population as of April 2017 // [Электронный ресурс] Statista Inc./ URL:
https://www.statista.com/statistics/617136/digital-population-worldwide (Дата обращения
14.04.2017)
4
Number of smartphone users worldwide from 2014 to 2020 (in billions) // [Электронный
ресурс] Statista Inc./ URL: https://www.statista.com/statistics/330695/number-of-smartphoneusers-worldwide (Дата обращения 14.04.2017)
5
статистики за 2015 год от компании Internet retailer, примерно 60%
пользователей используют для выхода в интернет именно смартфоны.5
Расширение аудитории пользователей мобильных устройств стимулирует развитие дизайна как средство визуальной подачи информации, существующее неотделимо от развития девайсов. Веб-дизайн становится одним из
самых популярных направлений, имеющих свои особенности и требования.
Внимание обращается не только на внешний вид сайта, но и на удобство его
эксплуатации. Пользователь сайта должен получать доступ к информации, не
затрудняясь в ориентировании в источнике. Основной целью веб-дизайна, касаемо интерфейса и удобства, является эффективность работы с сайтом, удовлетворение от данной работы и максимально высокая скорость достижения
поставленной цели.6
Возвращаясь к тому, что большинство пользователей сейчас используют портативные гаджеты для выхода в интернет, перед веб-дизайном становится еще одна задача – умение адаптироваться под разные разрешения, ширины и диагонали экрана. Ведь то, что красиво и понятно на широкомасштабном экране компьютера, уже не так уместно выглядит на экране смартфона. Для этого отдельно разрабатываются специальные «гибкие» сетки макетов и шрифты.7
К сожалению, адаптивный дизайн существует далеко не на всех сайтах,
особенно в рунете. Его наличие часто говорит о том, что сайт имеет обширную аудиторию, которая использует современную технику. Это отдельно
важно для интернет-магазинов, интернет-СМИ и информационных порталов,
5
10 Incredible Mobile Marketing Stats 2015 // [Электронный ресурс] Social media today./
URL: http://www.socialmediatoday.com/content/10-incredible-mobile-marketing-stats-2015-infographic (дата обращения 14.04.2017)
6
Калиновский А.И. Юзабилити - как сделать сайт удобным. М: Новое знание, 2005. - С.
121-122.
7Маркотт
И. Отзывчивый веб-дизайн. СПб.: Питер, 2012. С. 27-28.
6
так как их аудитория захватывает обширные возрастные группы. Важно сделать сайт удобным для чтения с любого носителя, включая современные гаджеты, которые в большей степени используются молодежью. К сожалению,
существующая статистика формирует картину лишь зарубежной аудитории
пользователей смартфонов, однако по ней также можно формировать примерную картину и для российского поля. Так, в 2016 году 92% молодых людей в возрасте от 18 до 29 лет в США являются обладателями смартфонов8,
кроме того, свыше 50% всего населения владеют планшетными компьютерами. 9 Таким образом, можно говорить о том, что для студенческого информационного портала адаптивная версия сайта является необходимой.
Цель данной работы - разработка визуальной концепции адаптивной
версии современного информационно-образовательного веб-портала.
В работе мы будем рассматривать особенности адаптивных версий вебпорталов на примере информационно-образовательного портала «Первая Линия», который является студенческим СМИ Санкт-Петербургского государственного университета. Портал функционирует более пяти лет и является
частью медиахолдинга «Первая Линия», в который входят также ежемесячная
газета «Первая Линия» и международный образовательный студенческий телеканал «МОСТ». Аудитория портала – около двух тысяч пользователей в
месяц.
Объектом работы выступает адаптивная версия веб-портала, предметом – особенности дизайна адаптивной версии студенческого веб-портала
«Первая линия».
В процессе разработки адаптивной версии нами будет обращено внимание на современные подходы веб-дизайна для различных диагоналей экра8Share
of adults in the United States who owned a smartphone in 2015 and 2016, by age group //
[Электронный ресурс] Statista Inc. / URL: https://www.statista.com/statistics/489255/percentage-of-us-smartphone-owners-by-age-group (Дата обращения 14.04.2017)
9Mobile
Fact Sheet // [Электронный ресурс] Pew Research Center / http://www.pewinternet.org/fact-sheet/mobile/ (Дата обращения 14.04.2017)
7
нов, выявлены основные подходы и проанализированы профильные сегменты российской и зарубежной медиасреды.
Таким образом, задачами работы представляются:
•
выявить основные факторы адаптации дизайна веб-порта-
лов к представлению на мобильных носителях;
•
охарактеризовать современные подходы к дизайну адап-
тивных версий сетевых медиапроектов;
•
изучить особенности дизайна современных версий инфор-
мационно-образовательных порталов и выявить ключевые решения в
их визуальной организации;
•
разработать визуальную концепцию и
информационную архитектуру адаптивной версии информационно-образовательного портала «Первая Линия».
Практическая значимость исследования состоит в том, что собранная и
систематизированная информация позволит нам вывести основные особенности адаптивных версий, а также применить полученные данные в собственном проекте, который может быть внедрен в использование.
Актуальность обусловлена активным ростом использования смартфонов и планшетов для поиска информации и просмотра новостей. Отдельным
фактором является рост числа людей, использующих несколько устройств,
соответственно им в первую очередь необходимо пользование адаптивной
версией для доступности ее на любой диагонали экрана.
В процессе работы для достижения результата нами будут использоваться следующие методы:
•
количественный метод;
•
метод конструирования;
•
метод визуального анализа.
Научно-теоретической базой работы послужили работы: исследования,
статьи и книги Я. Нельсона, труды о дизайне в веб-среде известных мировых
8
авторов, таких как Л. Вроблевски, К. Ньюарк, а также российских исследователей Ю. Я. Герчука, О.В. Пикулевского, А.В. Якунина.
В качестве эмпирической базы для анализа профильного сегмента
рынка были отобраны российские и зарубежные студенческие веб-порталы,
такие как: Политех (новостной веб-портал Санкт-Петербургского
политехнического университета Петра Великого), Cherwell (портал
Оксвордовского университета), Stanford News (новостной портал
Станфордского университета).
Данная работа состоит из введения, двух глав, заключения, списка использованной литературы и приложений. Первая глава – теоретическая. В
главе рассматривается веб-портал как сегмент медиасреды, сущность, процесс, функциональность проектирования адаптивных версий веб-сайтов, а
также их особенности визуального оформления. Вторая глава – практическая,
представляющая анализ определенных студенческих порталов с целью выявить основные ошибки и ориентиры, а также собственные решения по адаптивному дизайну портала «Первая линия» и подкрепляемая изображениями
итоговых разработок. В заключении подводятся выводы, сделанные в ходе
исследования и проектирования. В список литературы включены все книги,
статьи и интернет-источники, использовавшиеся в ходе исследования. В приложении представлены дополнительные материалы, к которым делается отсылка в тексте работы, позволяющие более глубоко раскрыть выбранную
тему, а также скриншоты разработанного адаптивного сайта.
9
Глава 1. Характерные особенности функционала и дизайна
адаптивных версий веб-портала
1.
Информационный веб-портал – определение и сущность
Специфика формата журналистики определяется в основном особенностями площадки, на которой происходит журналистская деятельность.
Так, например, в периодической печати большое значение играет фиксированный объем полос, которые издание предоставляет под тексты и иллюстрации. Именно он зачастую определяет возможности журналиста, фотографа, верстальщика и других специалистов, работающих над изданием.
Также для газет и журналов свойственно иметь стабильную аудиторию, которая воспринимает информацию в издании особенным образом – переходя с
одного печатного блока к другому. Вероятность того, что, приобретая печатное издание, читатель остановится после прочтения одного единственного
материала, крайне мала. Более того, анонсы материалов на обложке издания
или в содержании журнала зачастую не являются главным и единственным
способом привлечь читателя к материалу.
В электронных средствах массовой информации такие важные и типичные для печатной журналистики особенности абсолютно нивелируются.
В электронных изданиях возникает совершенно иная система представления
информации, ее подачи, работы с аудиторией и редакционная система.
Так, площадкой для интернет медиа является информационный вебпортал.
Рассмотрим определения понятия веб-портал.
10
Понятие портал (нем. Portal, от латинского porta – вход, ворота), «архитектурно оформленный проем, чаще всего являющийся входом в здание.
Портал сцены, архитектурное оформление сцены, отделяющее ее от зрительного зала»10. Веб, в свою очередь, обозначает сеть Интернет. Так, можно интерпретировать понятие веб-портала как некоторого «входа в Интернет». Этого подхода придерживается Артур Татналл, исследователь из университета
Виктория, Австралия (пер. с англ.): «Таким образом, веб-портал представляется входом в Веб к информации и услугам»11
Впрочем, наиболее точное определение данного понятия можно дать
так: веб-портал представляет собой сайт в системе интернет, имеющий своей
целью побудить пользователя пройти по большему количеству ссылок для
решения разного рода задач. «Если Web-сайт – это набор логически взаимосвязанных страниц, доступных через Web-браузер по протоколу HTTP, то
портал – это Web-сайт, который имеет широкий набор функций».12
Как поясняет интернет–энциклопедия «Corpcit.ru»: «информационным
хранилищем могут служить и отдельные крупные информационные сайты.
Их именуют или просто Порталами, или Информационными порталами.
Таким образом, исторически Интернет-портал отличается от Интернет-сайта
и Информационного портала только наличием большого числа ссылок на
другие сайты Интернета, а вовсе не числом страниц, обилием сервисов и т.д.
Но практически все Интернет-сайты, а тем более Информационные
порталы, имеют ссылки на другие сайты Интернет, так что граница между
Интернет-порталами и Информационными порталами размывается, и боль-
10Большая
советская энциклопедия : [в 30 т.] / гл. ред. А. М. Прохоров. — 3-е изд. — М. :
Советская энциклопедия, 1969—1978.
11 Tatnall, Arthur.
Encyclopedia of Portal Technologies and Applications. Hershey, New York,
London: Idea Group Inc (IGI), 2007. P. 19.
12
Васильев И. А. Методы и инструментальные средства построения семантических WEBпорталов: диссертация кандидата технических наук: 05.13.11. – Томск, 2005. С. 14.
11
шинство крупных сайтов именуют себя просто Порталами»13. А. Татналл поясняет, что «портал предполагает, что информация, собранная с различных
источников, делается доступным широкому количеству пользователей».14
Специфика дифференциации веб-порталов заключается в их тематике.
Так веб порталы бывают четырех видов:
1. Горизонтальный портал (General portal)
Информация на портале ориентирована на охват максимального
количества сфер общественной жизни. Так, портал будет разбит на
сегменты по интересам, сфере деятельности и текущим потребностям аудитории. 15
Пример такого портала представляет компания Mail.ru, где из
одного сервиса компании (например, поискового окна или
электронной почты) пользователь может получить доступ к
другому разделу (например, lady.mail.ru).
2. Вертикальный портал (Vertical portal), Портал-ниша (Niche portal)
Так принято называть сервис узкой тематической направленности,
охватывающий целиком одну сферу жизни общества.
Зачастую, именно на таких сервисах образуются локальные сетевые сообщества (community), которые обсуждают свои проблемы
на формуме портала.
Примером таких сервисов можно назвать портал women.ru,
затрагивающий темы домашнего хозяйства, женского здоровья,
13
Интернет – энциклопедия «Corpcit.ru» // [Электронный источник] URL: http://corpsite.ru/
Encyclopedia/Public/Portal.aspx (дата обращения 14.03.2017).
14
Tatnall, Arthur. Encyclopedia of Portal Technologies and Applications. Hershey, New
York, London: Idea Group Inc (IGI), 2007. P. 19.
15
Елманова Н. Web-порталы: классификация и назначение. // [Электронный ресурс]
КомпьютерПресс. №6, 2001. / URL: http://compress.ru/article.aspx?id=10932 (Дата
обращения 16.04.2017)
12
деторождения и близкие к ним. Комьюнити очень развито на этом
портале.
Другим примером вертикального портала могут служить, например, «туристические агентства, предоставляющие услуги по бронированию мест в гостиницах, заказу и доставке билетов, доступу
к картам и сведениям об автомобильных маршрутах и т.д., либо
порталы типа B2B (business-to-business), позволяющие своим клиентам реализовывать совместные бизнес-операции (например, выбирать поставщиков и осуществлять закупку товаров, проводить
аукционы и т.д.)»16
3. Смешанный портал (Blended portal)
Такой тип сервисов представляет собой сборник справочной информации, совмещенный с каким-то целевым сайтом. Например,
это может быть интернет магазин, который подробно утраивает обзор новинок и дополнительно публикует информацию, полезную
клиенту. Примером такого портала может быть сайт компании Пудра.ру, рекламные специалисты которого рассказывают о положительных чертах своей продукции и способах ее применения.
4. Корпоративный портал (Corporate portal, Enterprise portal)
Такой тип портала используется компаниями для реализации внутренних задач и предполагает персонифицированный вход для редактирования информации, разделение прав доступа, и единую
тему.
Пример корпоративного портала – сайт Санкт-Петербургского государственного университета, где пользователи после авторизации
16
Елманова Н. Web-порталы: классификация и назначение. // [Электронный ресурс]
КомпьютерПресс. №6, 2001. / URL: http://compress.ru/article.aspx?id=10932 (Дата обращения 16.04.2017)
13
могут осуществлять необходимые им действия в корпорации (заполнять бланки, выписывать квитанции и другое).
Классификация А. Татналла, который упоминает, что на ранних этапах
действительно было широко распространено деление веб-порталов на горизонтальные и вертикальные, расширяется (пер. с англ.): «общие порталы,
корпоративные порталы, вертикальные производственные порталы, горизонтальные производственные порталы, информационные порталы, порталы
электронной коммерции, нишевые порталы, предпринимательские порталы и
личные порталы».17 Основная проблема, подчеркивает он, состоит в том, что
«постоянно появляются новые типы и категории порталов, они реклассифицируются и многие классификационные структуры включают в себя накладывающиеся друг на друга категории».18
Информационным веб-порталом принято называть сайты интернет
СМИ. Такой информационный веб-портал в свою очередь зацикливает пользователя среди собственных веб-страниц путем гиперссылок со стартовой
(главной) страницы на страницы с необходимой пользователю информацией.
Информация на информационном портале, когда мы говорим о нем
как об интернет-СМИ может быть систематизирована по тематическим группам. Такой ресурс может быть как узко-тематическим средством массовой
информации (например, о косметике, рыбалке), так и ориентированным на
массовую аудиторию (новостные порталы, общественно-политические издания).
Зачастую информационные веб-порталы являются аналогом и дополнением к печатному изданию. Так можно говорить о сайтах газет «Коммерсантъ», «Российская газета», «Комсомольская правда».
17
Tatnall, Arthur. Encyclopedia of Portal Technologies and Applications. Hershey, New
York, London: Idea Group Inc (IGI), 2007. P. 19.
18
Там же. P. 19.
14
Впрочем, существуют и самостоятельные порталы, которые принадлежат информационным агентствам ТАСС и «РИА Новости», а также газетам
«Знак.ком», «Газета.ру» и не имеют аналогов в печати. Стоит отметить, что
для информационных веб-порталов такого типа очень важно соблюдение
норм российского законодательства в сфере рекламы и массовой информации, и они так же, как и все СМИ, имеющие материальный носитель, проходят процедуру регистрации.
Для эффективной реализации деятельности информационного вебпортала он должен обладать рядом специфических свойств:
1. Систему размещения контента;
2. Стабильное обновление контента;
3. Возможность доступа сторонних пользователей;
4. Систему администрирования;
5. Систему обратной связи;
6. Удобный пользовательский интерфейс;
7. Возможность цитирования публикаций;
8. Возможность отслеживать эффективность публикуемого контента.
Таким образом, информационный веб-портал может являться удобным
инструментом для реализации задач средства массовой информации. При
этом для комфортного и эффективного использования портала как сторонними пользователями, так и работниками портала необходимо правильное построение архитектуры сайта с учетом стоящих перед средством массовой информации задач.
2.
Решение функциональных задач веб-портала
в адаптивном дизайне
15
Один из самых важных критериев для успеха информационного вебпортала – доступность пользователям. При создании сайта онлайн-медиа необходимо учитывать технические возможности аудитории.
Так, пользователи могут использовать как различное программное
обеспечение, которое может влиять на отображение сайта, так и различные
технические устройства, для выхода в Интернет. Важно понимать, что спектр
используемых для выхода в интернет устройств крайне широк. Кроме того,
немецкие исследователи пишут, что «потребление мобильных сервисов
отличается от потребления непортативных IT-устройств. <…> Использование
мобильных ресурсов быстрое, в режиме «одного касания».19 И таким
образом, «мобильные сервисы формируют особые требования к своим
создателям. Обязательно то, что необходимо представлять возможные
сценарии поведения пользователей и соотносить их с имеющимися
прецедентами. В итоге это означает изменение парадигмы дизайна». Более
того, по утверждению немецких ученых, «важность и влияние пользователей
мобильных сервисов значительно выше, нежели классических».20
Конкуренция на рынке современных онлайн-медиа крайне велика.
Зачастую, имея схожий контент (особенно если это новостные
информационные порталы), интернет изданиям приходится бороться за
пользовательский трафик другими способами: привлекать визуальные
средства, встраивать интерактивные возможности, использовать SMMтехнологии. Поэтому важно создавать информационный веб-портал таким
образом, чтобы пользователь не просто имел доступ к контенту,
загруженному на сайт, с любого типа устройств, но и этот доступ был
19
Chapko A., Emprich A., Werth D. Prosumerization of mobile service provision: A conceptual approach // Web Portal Design, Implementation, Integration, and Optimization / edited
by Jana Polgar and Greg Adamson / Herhey: IGI Global, 2013. P. 218.
20
Там же.
16
достаточно комфортным и красивым, чтобы аудитория предпочитала данный
ресурс, а не другие аналогичные веб-порталы.
Сейчас при построении мобильных версий сайтов существуют три традиционных способа их построения:
1. Адаптивный дизайн;
2. Отдельная мобильная версия сайта;
3. RESS (Responsive Design + Server Side).
Из них мы рассмотрим адаптивные версии сайтов, поскольку они
являются наиболее распространенными для использования в медиасреде, а
именно для информационных веб-порталов, ведь это позволяет давать
пользователю на мобильном устройстве не отдельный мобильный ресурс,
похожий на «родительский», к навигации которого он привык, а версию,
которая выстраивается под характеристики любого используемого ими
девайса, не вызывая дискомфорта при просмотре. Более того, корпорация
Google, один из флагманов современных тенденций в сфере IT, является
сторонником использования адаптивного дизайна21.
По версии Google, «адаптивный дизайн – это конфигурация, в которой
сервер отправляет одинаковый HTML-код на любые устройства, а размеры
элементов страницы корректируются с помощью CSS»22. Проще говоря, в
адаптивном дизайне происходит корректировка сайта по размеру экрана,
притом, что начальный код не изменяется.
Таким образом, перед веб-дизайнером стоит задача создать такой интерфейс интернет ресурса, который будет удобен для использования на любом устройстве.
21
Адаптивный дизайн. Пособие для разработчиков// [Электронный источник] URL:
https://developers.google.com/webmasters/mobile-sites/mobile-seo/responsive-design?hl=ru
(дата обращения 14.03.2017).
22
Там же.
17
Реализация адаптивного дизайна осуществляется обычно при помощи
CSS3 Media Queries – инструмент, ставший рекомендованным стандартом
относительно недавно, в 2012 году.23 Media Queries – это улучшение для
технологии CSS и атрибутов HTML, добавляющее такие параметры, как
размер дисплея, глубина цвета и соотношение сторон. 24 Это добавление в
CSS3 позволяет контенту адаптироваться к характеристикам девайсов без
необходимости изменять сам контент. 25
Таким образом, пользователь будет видеть различное изображение в зависимости от размера экрана своего устройства.
У адаптивного дизайна есть ряд преимуществ и недостатков26 , что
определяет выбор использования его или других технологий для решения
этой задачи.
Так, к преимуществам адаптивного дизайна принято относить:
1.Удобство разработки.
Структура сайта при адаптивной верстке самостоятельно подстраивается под ширину экрана. Главное преимущество заключается в том, что нет
необходимости адаптировать или переписывать код сайта, достаточно просто
дополнить его.
Поддержка такого продукта тоже не требует больших трудозатрат, что
говорит об экономичности такого способа реализации.
23
Media queries publication history // [Электронный ресурс] The World Wide Web Consor tium / URL: https://www.w3.org/standards/history/css3-mediaqueries (Дата обращения
01.05.2017)
24
Descriptions of all CSS specifications // [Электронный ресурс] The World Wide Web Consortium / URL: https://www.w3.org/Style/CSS/specs#mediaqueries (Дата обращения
01.05.2017)
25
Rivoal F. Media Queries // [Электронный ресурс] The World Wide Web Consortium / URL:
https://www.w3.org/TR/css3-mediaqueries/ (Дата обращения 01.05.2017)
26 Мобильная
версия сайта или адаптивный дизайн? Пособие для разработчиков//
[Электронный источник] URL: https://habrahabr.ru/post/239441/ (дата обращения
14.03.2017).
18
2.Единый URL.
Это избавляет пользователей от редиректов, упрощает доступ к сайту
и позитивно сказывается на продвижении сайта в поисковых сетях.
К недостаткам адаптивного дизайна принято относить:
1. Различие задач.
Типовые действия пользователей мобильных устройств отличаются от
активности пользователей стационарных компьютеров. Поэтому адаптированная точная копия сайта не будет в полной мере удовлетворять потребности
всех пользователей.
2. Медленная загрузка.
Скорость мобильного интернета порой не позволяет загрузить такие
элементы как: embedded-карты, ролики, кредитные калькуляторы и меню с
анимацией. Поэтому необходима реализация облегченной версии сайта при
использовании адаптивного дизайна. При этом важно отметить, что сжатие
кода не будет решением данной проблемы, поскольку условно лишние запросу к серверу будут поступать.
3. Отсутствие пользовательского выбора.
Если в адаптированной версии сайта существует проблема в интерфейсе, пользователь не может воспользоваться альтернативным вариантом
(как мог бы переключиться с мобильной версии на стандартную), и часть потенциала ресурса теряется.
На основании данных преимуществ и недостатков использования технологии мы можем сказать, что особенности верстки медиа при использовании адаптивного дизайна заключаются в следующем:
- необходимо четко понимать активность пользователя на сайте. Если с
мобильного устройства люди чаще читают новости и длинные тексты, то их
нужно сделать более доступными, чем интерактивные проекты и фотогалереи, на которые пользователи предпочитают заходить с персональных компьютеров;
19
- все элементы сайта должны работать в адаптивной версии, что необходимо проверить тщательными тестами и не заявлять релиз, если какойлибо из элементов недоступен;
- необходимо тестировать загрузку элементов сайта при различной скорости и не допускать критических значений времени загрузки.
Важно помнить, что единый URL означает также, что если адаптивная
версия не понравится пользователям, то скорее всего, этот сегмент аудитории
отпадет и от основной версии сайта.
3.
Принципы оформления при дизайн-проектировании
адаптивных версий веб-порталов
«Основное правило разработки мобильных интерфейсов - чем проще,
тем лучше».27 При этом тенденция такова, отмечают канадские исследователи, что «качество портативных дисплеев, способствующих развитию информационного и визуального дизайна, постоянно растет»28, из чего следует, что
и вслед за этим дизайн будет требовать все новых решений для соответствия
качественному отображению на дисплеях.
Выделяют три основных вида дизайна, которые необходимо сочетать
при разработке макета сайта:
1. Информационный дизайн – категория, обозначающая, насколько
«элементы сайта точно или не точно передают информацию
пользователю, т.е. понятная и логичная презентация»
27
Вроблевски Л. Сначала мобильные! М.: Манн, Иванов и Фербер, 2012. С. 59
28 Cyr
D., Head M. , Ivanov A. Perceptions of Mobile Device Website Design: Culture, Gender
and Age Comparisons // Web Technologies: Concepts, Methodologies, Tools, and Applications:
Concepts, Methodologies, Tools, and Applications / edited by A. Tatnall / Hershey, New York,
London: Idea Group Inc (IGI), 2009. P. 247.
20
2. Навигационный дизайн – категория, обозначающая, помогает или
мешает навигационная схема пользователю – расположение и
формат навигационных средств.
3.
Визуальный дизайн – категория, отвечающая за то, как элементы
сайта формируют баланс, эмоциональную привлекательность, эстетику и единообразие всего графического образа сайта. Это
включает цвета, фотографии, различные формы и тип шрифта. 29
Важно помнить и об информационной архитектуре сайта, обязанность
которой систематизировать контент. Она, так же, как и элементы навигации,
помогает пользователям находить и обрабатывать нужную им информацию с
большей скоростью и меньшей затратой сил.30
Традиционно выделяют три вида структуры сайта:
•
линейная структура (сайт листается как книга, страницы находятся
в строгом порядке);
•
иерархия (размещение информации происходит в несколько
уровней, где страницы нижнего уровня, являются разделами
верхнего);
•
паутина (структура типа WWW (World Wide Web), но имеющая
границы в пределах сайта, имеются быстрые переходы на любую
страницу, но имеется большая вероятность запутаться).
29 Cyr
D., Head M. , Ivanov A. Perceptions of Mobile Device Website Design: Culture, Gender
and Age Comparisons // Web Technologies: Concepts, Methodologies, Tools, and Applications:
Concepts, Methodologies, Tools, and Applications / edited by A. Tatnall / Hershey, New York,
London: Idea Group Inc (IGI), 2009. P. 247.
Rosenfeld, Louis, Morville, Peter. Information architecture for the World Wide Web. —
O'Reilly & Associates, 2006. — 528 p.
30
21
Сейчас почти не используется ни одна из структур в «чистом» виде. В
основном, сайты имеют комбинированную структуру, которая подразумевает
под собой наличие «сквозной ссылки» (возможность с любой из страниц
вернуться на стартовую), а также возможность перехода с главной страницы
на страницу любого уровня и двухсторонние связи между страницами
различных уровней.
Современный подход в дизайне тяготеет к функциональности. Одним
из первых, кто встал на сторону функционального подхода в области дизайнпроектирования, стал американский дизайнер Уильям Эддисон Двиггинс. Он
придерживался мнения, что дизайнер должен опираться «на здравый смысл и
анализ, не стремясь к удовлетворению своего творческого потенциала». 31
Данный подход определяет дизайн как ремесло, в котором главное ориентироваться на заказчика (аудиторию), а творческое самовыражение в нем
излишне. Эстетический стиль, по Двиггинсу, в первую очередь, должен отве-
31
Ньюарк К. Что такое графический дизайн? М.: Астрель, 2005 — С. 10
22
чать поставленной цели и потребностям аудитории. Отсюда прослеживается
столкновение в графическом дизайне эстетики и функционализма.
Функциональный подход особенно важен в веб-дизайне. Ведь одна из
главных задач такого дизайна, сделать интерфейс сайта понятным, удобным
и комфортным для пользователя.
Основоположником функционального подхода к дизайн-проектированию веб-ресурсов является Якоб Нильсен. По его словам, «удобство и простота управляют Сетью».32 Нильсен считает, что в Интернете главным является сам пользователь, на которого и стоит ориентироваться в первую очередь, таким образом, главная цель любого интернет-ресурса: «обеспечение
пользователей простым механизмом для реализации их задач». 33
С функциональным дизайном тесно связано понятие «юзабилити».
Одно из самых часто используемых определений данному термину дается в
международном стандарте юзабилити, ISO 9242-11.34
«Юзабилити — степень эффективности, трудоемкости и удовлетворенности, с которыми продукт может быть использован определенными
пользователями при определенном контексте использования для достижения
определенных целей/мотивов».35
32
Нильсен Я. Веб-дизайн: книга Якоба Нильсена. СПб.: Символ-Плюс. 2003. — С. 18
33
Нильсен Я. Веб-дизайн: книга Якоба Нильсена. СПб.: Символ-Плюс. 2003. — С. 19
34
Usability of consumer products and products for public use — Part 2: Summative test
method. // [Электронный ресурс] On line Browsing Platform./ URL: https://www.iso.org/obp/
ui/#iso:std:iso:ts:20282:-2:ed-2:v1:en
35
Usability — the extent to which a product can be used by specified users to achieve specified
goals with efficiency, effectiveness and satisfaction in a specified context of use.
23
Якоб Нильсен выделяет пять основных компонентов, определяющих
юзабилити сайта:36
• Обучаемость. Как быстро пользователь осваивает новый для себя
интерфейс и достигает своих задач в работе с ним.
• Эффективность. Скорость тех же задач после того, как
пользователь пользуется ресурсом в следующие разы.
• Запоминаемо сть. Скоро сть и легко сть взаимодействия
пользователя с сайтом после продолжительного перерыва.
• Ошибки. Количество ошибок и простота их исправления при
работе пользователя с сайтом.
• Удовлетворенность. Привлекательность сайта, его дизайна и
комфорта работы с ним.
Основная цель дизайна, который опирается на принцип юзабилити быть незаметным.37 Приоритет в первую очередь отдается контенту, а сам
дизайн приближен к минималистичному.
Таким образом, можно сказать, что такое художественное направление
как минимализм в веб-дизайне выходит на передовые позиции. Характерными признаками минимализма считается «стремление к минимальной трансформации используемых для творчества материалов, простоту и единообразие форм, а также творческое самоограничение художника».38 Одной из самых известных концепций, объединившей в себе функционализм и эстетиче-
36 Nielsen
J. Usability 101: Introduction to Usability. 2012. // [Электронный ресурс] Nielsen
Norman Group / URL: https://www.nngroup.com/articles/usability-101-introduction-to-usability/
(дата обращения: 18.04.2017)
37 Bishop
S., Hartman A. Interactive Media Design and Development with Adobe CS6. Delmar
Cangage Learning., 2013. P. 13
38
Левит С.Я., Гордон А.В., Зверева Г.И. Культурология. Энциклопедия. М.: Росспэн, 2007.
Том 1. С. 370
24
ский минимализм в графическом дизайне, стал «международный швейцарский стиль».39
Канадские исследователи D. Cyr, M. Head, и A. Ivanov подчеркивают
такой важный момент, что пользовательские предпочтения в отношении дизайна веб-сайтов варьируются в различных культурах. По их анализу элементов дизайна в Германии, Японии и США, были обнаружены значительные
различия в использовании графических символов, цветовых предпочтений,
деталей. Огромное количество различий было выявлено между сообществом
китайско-японских пользователей и британских. Выявленные данные использовались для адаптации мобильных приложений в Гонконге, Японии и Корее,
так как была обнаружена значимая дифференциация ценностных структур
мобильного Интернета и их влияния на пользовательскую удовлетворенность.40 Исследователи приводят пример, что «канадские пользователи предпочитают утилитарность в информационном дизайне, в то время как китайцам импонирует глубина и детализированность информации, представленной
в мобильной среде». 41
Возвращаясь к адаптивному дизайну, стоит отметить, что именно в нем
функционализм и минимализм дизайна особенно важны, так как интерфейс
должен быть комфортным и привлекательным как на большой диагонали, так
и удобным и не громоздким на экране планшета или телефона.
«Тач-зоны должны быть достаточно крупными, чтобы мы могли управлять ими при помощи своих не всегда точных пальцев. Отзывчивый дизайн
39 Герчук
Ю.Я. Функциональная графика XX века. М.: Аспект-Пресс, 2000. С. 320
40 Cyr
D., Head M. , Ivanov A. Perceptions of Mobile Device Website Design: Culture, Gender
and Age Comparisons // Web Technologies: Concepts, Methodologies, Tools, and Applications:
Concepts, Methodologies, Tools, and Applications / edited by A. Tatnall / Hershey, New York,
London: Idea Group Inc (IGI), 2009. P. 248.
41 Там
же.
25
должен помогать сайтам адаптироваться к изменениям разрешения экрана и
размеров области просмотра». 42
Опираясь на исследования О.В.Пикулевского43 , Ю.Я.Герчука44, А.В.
Якунина45, Ф.Колпитта46, Д.Мейера47 , Д.Марзона48 для анализа профильного
сегмента среды и выявления основных ориентиров в контексте задач юзабилити и эстетики минимализма, в своей работе мы выбрали следующие критерии:
1. Область экрана («F-паттерн визуального восприятия») (полное
соотвествие расположению контента F-шаблону - 3 балла; частичное
расположению контента F-шаблону - 2 балла; минимальное соотвествие
расположению контента F-шаблону - 1 балл)
2. Зонирование страницы (область экрана имеет очевидные модули,
использование модульной сетки – 3 балла; есть нарушения в использовании
модульной сетки – 2 балл; модульная сетка не используется – 1 балл)
42 Вроблевски
43
Л. Сначала мобильные! М.: Манн, Иванов и Фербер, 2012. С. 59
Пикулевский О.В.Дизайн и культура. Харьков: Гуманитарный центр, 2014
44 Герчук
Ю.Я. Функциональная графика XX века // История графики и искусства книги.
2000
45
Якунин А.В. Композиционно-графическая модель веб-сайта как системообразующий
фактор формирования «опыта взаимодействия». // Инновационное развитие: ключевые
проблемы и решения. Сборник статей Международной научно-практической конференции. 2015
46
Colpitt F. Minimal Art: The Critical Perspective. Washington: University of Washington Press,
1993
47
Meyer J. Minimalism: Art and Polemics in the Sixties, 2000
48
Marzona D. Minimal Art. Berlin: Tashen, 2004
26
3. Негативное пространство страницы (умеренное количество «воздуха» - пространства между модулей - 3 балла; много воздуха - 2 балла; мало
воздуха - 1 балл)
4. Интерлиньяж (на 2-4 px больше кегля – 3 балла;
на 5-6 px больше кегля – 2 балла; остальные значения - 1 балл)
5. Гарнитура (используется 2 гарнитуры — 3 балла, используется 1
гарнитура — 2 балла, используется больше 2-х гарнитур — 1 балл).
6. Функциональность навигации (элементы навигации и поиск находятся в одном месте — 3 балла; элементы навигации и поиск находятся достаточно близко, но не рядом — 2 балла; элементы навигации и поиск находятся в разных областях экрана — 1 балл)
7. Тонально-цветовой контраст (высокая контрастность текста и фона
– 3 балла; средняя контрастность – 2 балла; низкая контрастность текста и
фона – 1 балл)
8. Адаптивность шрифта (текст пропорционально изменяет интерлиньяж при изменении масштаба отображения — 3 балла; текст пропорционально изменяет интерлиньяж при изменении масштаба отображения — 1
балл)
9. Длина строки (по мобильной версии) (35/40-60 символов — 3
балла; 60-80 — 2 балла; остальные значения - 1 балл)
10. Использование цвета (монохромность или 1 контрастный цвет —
3 балла; кроме черного используется 2-3 цвета – 2 балла; кроме черного
используется больше 3 цветов – 1 балл).
Еще одной важной особенностью адаптивного дизайна является «гибкий» макет, он же «живой» или адаптивный. Его главное отличительное
свойство заключается в том, что контент сайта должен располагаться так,
чтобы при уменьшении диагонали экрана, модули с наполнением переноси-
27
лись, а не выпадали из зоны просмотра, вынуждая пользователя передвигать
зону просмотра в бок. То есть при использовании такого макета контент напоминает своеобразную гармошку – боковые элементы, которые на широком
экране находятся справа, перестраиваются в соседний блок, вниз, и становятся видны при скроллинге.
Важно помнить, что такое построение сайта подразумевает наличие
полей и четкой структуры, а не рандомное расположение элементов и модулей. Схематично макет сайта выглядит таким образом.
^
Подводя итог, необходимо заметить, что почти любой графический
элемент в веб-дизайне, отвечает за функциональность, таким образом, функционал и графика постоянно коррелируют между собой. Проектируя адап-
28
тивный сайт, важно совместить в себе оба этих пункта в равных условиях, без
перевесов в ту или другую сторону.
Глава 2. Дизайн-проектирование макета адаптивной версии
информационного портала «Первая линия» на основе анализа
существующих тенденций в веб-среде
2.1 Анализ профильного сегмента среды: зарубежные и отечественные студенческие веб-порталы
Для того, чтобы определить основные ориентиры, мы проаназировали
выбранные нами веб-порталы, используя за основу критерии приведенные в
теоретической части работы. Для анализа мы просмотрели большое количество порталов, как общего направления, так и студенческих, одна большая их
часть не имела адаптивной версии. В итоге, мы отобрали десять веб-порталов, у которых адаптивные версии присутствовали, а также решили остановиться на студенческой направленности, так как они больше соответствуют
29
заявленной нами цели. В работе мы решили не останавливаться на российской медиасреде и включили в список порталов также и зарубежные сайты:
•
Политех - новостной веб-портал Санкт-Петербургского по-
литехнического университета Петра Великого
•
Мегабайт - электронный портал Санкт-Петербургского на-
ционального исследовательского университета информационных технологий, механики и оптики
•
Всероссийский студенческий медиапортал - ВСМ
•
Журналист online - веб-портал факультета журналистики
•
Морошка - молодежный веб-портал Петрозаводского госу-
МГУ
дарственного университета
•
The Heights - портал Бостонского университета
•
Cherwell - портал Оксвордовского университета
•
Stanford News - новостной портал Станфордского
университета
•
The Harvard Crimson - портал Гарвардского университета
•
Spectator - портал Колумбийского университета49
Рассматривая данные порталы, мы особое внимание уделяли
особенностям расположения материалов, отображаемой на экране смартфона,
так как она обычно вызывает большее затруднение. Также было решено
разделить анализ российских и зарубежных веб-порталов, чтобы в итоге
сравнить разницу подходов в дизайне.
Среди российских изданий, самый большой рейтинговый показатель по
соответствию критериям функциональности и эстетического минимализма
получил веб-портал «Политех».50
49
См. приложение 1
50
См. приложение 1. Рис. 2
30
Политех Мегаба Журналис ВСМ
йт
т online
Морошк
а
F-паттерн
2
2
3
1
2
Зонирование
страницы
3
3
3
3
3
Негативное
пространство
2
2
2
1
2
Интерлиньяж
3
3
1
1
1
Гарнитура
3
1
2
2
1
Функциональность
навигации
2
2
3
3
2
Тонально-цветовой
контраст
3
3
2
2
3
3
3
1
2
3
Длина строки
3
2
2
1
2
Использование цвета
2
2
2
2
1
Рейтинг
26
23
22
18
20
Адаптивность
шрифта
Стоит отметить, что остальные порталы в основном имели схожие
проблемы. Так, например ВСМ51 и Морошка52 используют на сайтах большое
количество цветов, что не позволяет привыкнуть к цветовой гамме,
вследствие чего внимание читателя рассеивается. В свою очередь,
Мегабайт53, Журналист Online54 и Политех полностью соответствуют
требованию минимализма – цветовая палитра либо монохромна, либо
51
См. приложение 1. Рис. 4
52
См. приложение 1. Рис. 1
53
См. приложение 1. Рис. 3
54
См. приложение 1. Рис. 5
31
содержит в себе 1-2 дополнительных цвета, которые задают корпоративный
стиль и служат для выделения рубрик, заголовков или различных ссылок.
Стоит отметить, что кроме черного базового цвета, в большинстве случаев
используется серый, который воспринимается как второй базовый. Политех и
Мегабайт также пользуются яркими (Политех – зеленый; Мегабайт –
розовый) цветами, которые привлекают внимание и подчеркивают
собственный корпоративный стиль. Журналист Online и ВСМ использовали
серый шрифт для основного шрифта, что заметно затрудняет чтение. Также,
интересно, что из всех пяти изданий только Политех имеет две гарнитуры,
пользуясь их различными начертаниями, остальные же сайты не отвечают
этому требованию: гарнитур либо слишком много, либо, как в случае с
Мегабайтом и Морошкой, она одна.
Пользуясь теми же критериями, мы рассмотрели и зарубежные сайты.
Интересно отметить, что общий рейтинговый показатель оказался выше, чем
у российских студенческих порталов. Каждый из рассматривающихся нами
порталов можно считать отвечающим требованиям, хотя не один из них также не набрал максимальное количество баллов.
The
Cherwell Stanford
The
Heights
News
Harvard
Crimson
Spectator
F-паттерн
2
3
3
2
2
Зонирование страницы
3
3
3
3
3
Негативное
пространство
3
3
3
3
1
Интерлиньяж
2
2
2
2
3
Гарнитура
2
3
2
2
3
Функциональность
навигации
2
2
3
2
3
32
Тонально-цветовой
контраст
3
3
3
3
2
Адаптивность шрифта
1
3
3
3
3
Длина строки
3
3
3
3
3
Использование цвета
3
3
3
3
3
Рейтинг
24
28
28
26
26
Высокие баллы получили сразу два портала – Cherwell55 и Stanford
News56. Стоит отметить, что только у них макеты сайтов полностью
соответствовали расположению контенту по правилам F-паттерна,
подразумевающей под собой построение, которое считается оптимально
комфортным для пользователя и выгодным для самого ресурса.57 Контент на
портале распределяется своеобразной буквой F – самая главная информация
должна располагаться в левом верхнем углу, так как по мере передвижения
человеческого глаза по странице экрана, внимание и интерес заметно падает,
некоторые зоны, как, например, нижний правый угол, вообще считаются
слепыми.
Также, у этих порталов нет разнообразных цветов для обозначения
корпоративного стиля, основная часть использует либо черный, либо красный цвет, что хоть и немного затрудняет их отличие друг от друга, но и не
мешает пользователю воспринимать информацию.
Еще один момент, на который стоит обратить внимание, из-за наличия
большого количества интерактивных вставок и рекламных блоков, у The
55См.
56
57
приложение 1. Рис. 7
См. приложение 1. Рис. 8
Pernice K.; Whitenton K; Nielsen J. Nielsen Norman Group, How people read on the
web : the eyetracking evidence. Fremont, CA : Nielsen Norman Group, 2014
33
Heights 58 и Spectator59 загрузка длится достаточно долго даже при хорошем
соединении со связью. Нельзя забывать о том, что при адаптации на некоторые устройства, стоит избегать «тяжелого» медиа-контента, заменяя его
ссылками на медиапроект, расположенным на другой странице (не стартовой)
или веб-адресе.
Подводя общий итог, можно говорить о том, что дизайн студенческих
порталов зарубежных университетов все же более отвечает современным
тенденциям веб-дизайна.
2.2. Основные принципы, используемые при макетировании
адаптивной версии
Отдельное внимание стоит уделить навигации, как у российских, так и
у зарубежных порталов. Важно помнить о том, что кнопка меню и строка поиска, являющиеся основными элементами на любом портале60, не должны
иметь проблем с доступом к ним, даже если пользователь зашел на сайт
впервые. Существуют три основных вида навигации:
• скрытая навигация (основные навигационный ссылки скрыты под знаком (например, «гамбургер») или кнопкой, требует дополнительного
действия от пользователя);
• видимая навигация (основные ссылки видны в панели навигации, нет
необходимости для дополнительных действий, пользователь видит их
сразу);
• комбинированная навигация (некоторые ссылки скрыты под кнопкой,
некоторые видны сразу)
58
См. приложение 1. Рис. 6
59
См. приложение 1. Рис. 10
60Nielsen
J. Hamburger Menus and Hidden Navigation Hurt UX Metrics [Электронный
ресурс] URL: https://www.nngroup.com/articles/hamburger-menus/ (дата обращения 17.04.17)
34
Обычно данные элементы находятся наверху, в шапке портала. Если касаться эргономики дизайна сайтов, это самое оптимальное место.61 Данный
критерий был соблюден у всех рассмотренных нами порталов, однако не на
всех эти два элемента находились в одном месте.
Этот нюанс особенно важен для разработки адаптивных версий, так как
большинство девайсов, которые используются для выхода в интернет, имеют
сенсорные экраны. Также, большинство людей в мире – правши (около 80%)
и работают с мобильным устройством с помощью большого пальца. Соответственно, в большинстве случаев, версии для малой диагонали экрана оптимизируются под управление большим пальцем правой руки.62 Таким образом,
заметно выпадает левая верхняя часть экрана. Удобнее всего в ней располагать логотип сайта.
Важный момент любого дизайна, подразумевающего в себе большие
количества текста – подбор типографики. Основной текст должен читаться
легко и не создавать дискомфорта для глаз. В веб-дизайне есть свои особенности, которым должен отвечать выбранный дизайнером шрифт, так, он должен отображаться в любом браузере. Мы уже говорили об адаптивности
61
Нильсон Я., Тахир М. Дизайн Web-страниц. Анализ удобства и простоты использования 50 узлов. Вильямс, 2002.
62
Вроблевски Л. Сначала мобильные! М.: Манн, Иванов и Фербер, 2012. С. 35
35
шрифта: для веб-дизайна, тем более для его адаптивной версии, шрифт должен быть «гибким» и «свободным». Самые популярные группы шрифтов, отвечающие этим требованиям – сериф и санс-сериф.63 Почти на всех рассматриваемых нами сайтах были использованы именно эти группы шрифтов. Касаемо рунета, в большинстве случаев текст представлен с помощью Свободных шрифтов ПТ:
• ПТ Санс,
• ПТ Сериф,
• ПТ Моно,
Которые, в свою очередь, имеют различные начертания, а также свободный доступ и кириллический алфавит.
2.3. Визуальная концепция и информационная архитектура адаптивной
версии информационного портала «Первая линия»
«Первая линия» – информационно-образовательный портал, созданный на базе Санкт-Петербургского государственного университета. Его наполнение и функционирование обеспечивается, в основном, сотрудниками и
студентами Высшей школы журналистики и массовых коммуникаций. Портал позиционирует себя как информационно-образовательный, его основной
контент - информационные материалы различных жанров. Имеются как короткие новостные заметки, так и интервью, репортажи и аналитика (лонгриды). Всего на сайте существует шесть рубрик:
63 Сырых
•
События (новостные заметки, отчеты)
•
Люди (интервью и очерки)
•
Город (события и места в Санкт-Петербурге)
Ю. А. Современный веб-дизайн. Эпоха Веб 3.0. 2-е изд. – М.: Вильямс; Диалектика, 2013. С. 136
36
•
Таймкиллер (репортажи, обзоры кино, фестивалей и т.д.)
•
Мнение (авторские колонки, аналитика)
•
Хай-тек (обзоры новых технологий, игр и т.д.)
К каждому материалу на портале можно оставлять комментарии и
выставлять оценку. У портала имеется собственный логотип и слоган.
Структура портала имеет комбинированный вид. Логотип выполняет не
только эстетическую функцию, но и отвечает за функционал, выступая в
роли сквозной «ссылки». С главной страницы пользователь может перейти
либо сразу на сам информационный материал, либо открыть рубрику, в
которой он находится.
Специфика портала заключается в возможности студентов опробовать
свои навыки в настоящем СМИ, таким образом, помимо осуществления своих информационных функций, он выступает своего рода образовательной
платформой или площадкой. Контент портала рассчитан на широкую возрастную группу, однако основная часть пользователей – студенты различных
факультетов. Макет сайта на данный момент не предусматривает адаптивности – он достаточно широк и рассчитан на горизонтальный экран стационарного компьютера или ноутбука. При открытии на мобильном устройстве на
экране с малой диагональю изображение портала выводится полностью64,
вследствие чего элементы навигации, изображения и текст крайне измельчаются. При масштабировании, соответственно, важные части сайта оказываются за пределами экрана. Отметим, что мобильной версией, не говоря об
адаптивной, портал не обладает.
Среди аудитории портала был проведен опрос, который подтвердил
тот факт, что пользователи предпочитают почти не использовать для просмотра портала широкомасштабные экраны, около 67% пользователей ис64
См. приложение 2
37
пользуют смартфоны, то есть практически 2\3 опрошенных.65 Подробнее результаты опроса можно посмотреть на представленной диаграмме.
Таким образом, на данном ресурсе целесообразна адаптация под вертикаль. В наши задачи входит не только создание адаптивной версии портала,
но и сохранение корпоративного стиля, а также избежание кардинальных изменений в дизайне.
Для создания макета была задействована вертикальная колоночная сетка, которая используется в большинстве сайтов, так как количество мелких
элементов в веб-дизайне значительно ниже, чем в полиграфии, где необходимо построение модульной сетки. На сегодняшний день существуют различные системы построения сеток для веб-сайтов, однако одной из самых удобных и распространенных считается сетка 960 Grid System.66 Преимущество
65
66
См. приложение 3
Web Designer Depot. Fight Div-Itis and Class-Itis With the 960 Grid System
[Электронный ресурс] https://www.webdesignerdepot.com/2010/03/fight-div-itis-and-classitis-with-the-960-grid-system/ (дата обращения 15.03.17)
38
данной сетки состоит в ее возможности адаптироваться к большому количеству используемых сейчас расширений, таких как:
• 1170px – под обычный формат, под широкие мониторы;
• 970px – под ноутбуки и старые мониторы;
• 750px – под планшеты;
• 480px и 320px – под мобильные телефоны и смартфоны.
Построение колонок для этой сетки всегда кратно 2, самое удобное для
такой базовой сетки деление колонок на 12 или 14 штук. Для нашей работы
мы выбрали сетку, делящуюся на 12 колонок в 64 пикселя с отступом в 16
пикселей.67
Также различают несколько типов верстки 68:
• табличная;
• фреймовая;
• блочная.
На портале используется блочная верстка – контент имеет четкие границы и расположен отдельными сегментами (блоками), в которых имеется по
несколько элементов. Так, главная страница содержит блоки картинок с заголовками и началом материалов, которые открываются полностью при нажатии на них. На внутренних страницах сбоку расположены блоки со ссылками
на последние актуальные материалы. В разработке адаптивной версии сайта
мы также будем использовать блочную верстку, так как с ее помощью удобно
переносить блоки в зависимости от границ экрана.
В качестве шрифтов нами были выбраны шрифты группы санс,
которые мы уже упоминали ранее, а именно Open Sans и MS reference Sans
Serif. Данные шрифты были выбраны для общего создания легкости сайта,
так как являются гротескными (рублеными), а также имеют большое
67
68
См. приложение 4
Мержевич В. Верстка веб страниц. Htmlbook.ru. 2011
39
количество начертаний. MS reference Sans Serif используется в рубриках,
которые на всем портале являются «кликабельными» ссылками, чтобы
пользователь мог заметить их отличие от основного текста.
Остальной
текстовый контент представлен с помощью различных начертаний Open Sans.
Основной текст имеет начертание light, которое не только не перегружает
страницу, но и удобно для восприятия большого количества текста за счет
отсутствия в литерах мелких деталей и наличия крупных внутрибуквенных
просветов; заголовки и подзаголовки выделяются с помощью начертания
semibold.
Шрифт
Назначение
MS reference Sans Serif
- рубрикация
Open Sans light
- основной текст, элементы архитектуры
Open Sans semibold
- заголовки, подзаголовки
В «шапку»69 сайта мы поместили логотип70 и полное название портала,
а также добавили элементы навигации, расположив их в верхнем правом
углу, чтобы пользователю было удобнее на них нажимать, при этом они не
мешают скроллингу сайта вниз. Для экранов с малой диагональю (смартфонов и планщетов в вертикальном положении) основная рубрикация спрятана
и открывается при нажатии на интерактивную кнопку меню71. Ее иконка –
«гамбургер»72 – достаточно распространена и узнаваема. Для экранов с широкой диагональю (компьютеры, ноутбуки и планшеты в горизонтальном положении) рубрикация видна сразу. При создании интерактивного меню мы
ориентировались на примеры порталов, набравших высокий рейтинг (таких,
69
См. приложение 6
70
См. приложение 5. Рис. 1
71
См. приложение 6. Рис. 7
72
См. приложение 5. Рис. 2
40
как Cherwell и Политех). Оно занимает большую часть экрана, имеет темную
подложку с непрозрачностью в 80% и достаточно крупный кегль (50), что создает удобство при его использовании с помощью сенсорных экранов.
Также в шапке находится строка поиска, которая обозначается с помощью иконки «лупа» 73 - семантика данного символа также узнаваема и легко
читаема пользователями.
Корпоративный стиль портала «Первая линия», помимо базового черного цвета, включает в себя серый и красный цвета. Стоит вспомнить о том,
что красный цвет действительно часто встречается как в оформлении известных СМИ, так и, например, в студенческих порталах, которые мы рассматривали, особенно зарубежных. Он привлекает внимание и достаточно выделяется в связке черного, серого и белого фона, выполняя роль контрастного цвета.
В нашей работе акцент красным цветом мы будем использовать в заголовочных комплексах, а также для ограждения контента от блока с логотипом и навигационными элементами. Основной текст имеет базовый черный цвет, расположенный на белом фоне, для удобства чтения и создания тонально-цветового контраста.
Ширина строки колонки текста имеет значение в 50 символов, кегль
для заголовков – 48, основного текста – 24, интерлиньяж на 2 пикселя больше
кегля. Отступы и поля – 10-30 пикселей.
На главной странице в версии для смартфонов мы сохранили блоки с
фотографиями в один ряд, а также вынесли вниз список последних материалов, которые обычно видны справа при открытии внутренней страницы сайта 74, вертикальное положение экрана планшета также сохраняет макет в одну
73
См. приложение 5. Рис. 3
74
См. приложение 6. Рис. 2
41
колонку75, а вот в горизонтальной версии портала уже в две76. Версия для
широкомасштабных экранов дает возможность расположить элементы в три
колонки.77
С главной страницы любого разрешения мы можем перейти как на информационный материал сразу, так и открыть список материалов в определенной рубрике, выбрав соответственную ссылку. Для всех девайсов, имеющих меньшее разрешение экрана, чем компьютер и ноутбук, рубрики скрыты
под кнопкой.
Список материалов в рубрике на всех диагоналях располагается одинаково - блочной системой, в котором находятся: дата, заголовок, первые строки текста, превью фотографии. Для заголовков и текста имеются ограничения
по знакам. Так, заголовок не должен быть больше 50 символов, а вступительный текст имеет границу в 180 символов.
Также в рубриках имеются такие элементы навигации как строка, указывающая путь, по которому мы попали на данную страницу, а также нумерация страниц рубрики. На одной странице располагается 10 блоков с превью
для материалов.78
При переходе на внутреннюю страницу с текстом мы можем видеть
схожие элементы навигации: путь пользователя, а также ссылки для возможности перейти на предыдущий или следующий материал.
Материал с текстом открывается картинкой, внизу которой расположен заголовок, рубрика и дата публикации. Текст, согласно правилам оформления вебстраниц, имеет выравнивание по левому краю и не предполагает абзацного
отступа, кроме пробельного, равного ширине одной наборной строки.
75
См. приложение 6. Рис. 10
76
См. приложение 6. Рис. 11
77
См. приложение 6. Рис. 13
78
См. приложение 6. Рис. 3
42
Оформление также имеет возможность врезок с большим количеством «воздуха» – незанятого контентом пространства – и подзаголовоков, отличающихся начертанием от основного наборного текста.
Для узких диагоналей
мы
расположили текст в одну широкую
колонку, а блоки с превью актуальных материалов перенесены вниз. В свою
очередь, при широкой диагонали, расположение текста также остается в одну
колонку, но блоки с превью материалов перемещаются в правую сторону
экрана, согласно теории F-паттерна и зонированию страницы в целом. 79
Подводя итог, хочется отметить, что мы сохранили не только внешнее
стилевое оформление, но и функционал сайта: двухуровневую архитектуру
сайта, поддерживая ее различными элементами навигации, благодаря которым и создается первоначально комбинированный вид структуры, также мы
сохранили наличие «сквозной ссылки», которая является логотипом портала.
79
См. приложение 6. Рис. 12 и рис. 13
43
Заключение
Мировая статистика показывает возрастающую конкуренцию стационарых и мобильных электронных устройств, обеспечивающих использование
Интернета. По данным исследовательских компаний, уже на апрель 2017 года
мобильным интернетом пользуется более 3,3 миллиардов человек (с учетом
населения Земли, составляющего примерно 7,3 миллиарда). Конечно, эта
цифра включает обладателей не только смартфонов, но и обычных телефонов
с возможностью выхода в интернет, но компания Statista Inc прогнозирует,
что к началу будущего года более 36% населения мира будет пользоваться
смартфонами. Это определяет актуальность проектирования веб-страниц таким образом, чтобы они были удобны для просмотра как на устройствах с
большими диагоналями экранов, так и с маленькими.
Анализ теоретических положений, раскрывающих понятие и задач
информационного портала, показал, что в сфере средств массовой информации этот веб-формат может являться удобным инструментом для сосредоточения большого количества разнотематической информации на одном ресурсе без эффекта перегрузки и с логичной информационной архитектурой для
легкого доступа к разделам. Объединяя этот тезис с вышесказанным, делаем
вывод о важности комфортного отображения информационного портала на
портативном устройстве с целью сохранения аудитории, заходящей на него со
смартфонов или планшетов.
Среди существующих моделей проектирования мобильного
представления сайта (адаптивный дизайн, отдельная мобильная версия сайта;
RESS (Responsive Design + Server Side)) нами был сделан выбор с пользу
адаптивной версии, являющейся не только наиболее распространенным
решением в медиасреде, но и обладающей рядом преимуществ для
пользователя: сохранение индвидуального стиля «родительского» сайта,
44
единый URL, соответствие характеристикам экрана используемого в данный
конкретный момент устройства.
Взяв за основу в нашей работе функциональный подход и минимализм
в веб-дизайне, мы сформировали ряд критериев, по которым проанализировали конкурирующие порталы в профильной среде (студенческие информационно-образовательные порталы), определив основные тенденции и требования, согласно которым нам следует проектировать макет информационнообразовательного портала «Первая линия». Целесообразность создания для
него адаптивной версии определена не только следованием развитию трендов
в профильной среде, но и результатами опроса, согласно которому более 2\3
аудитории сайта пользуется им посредством портативных устройств.
При разработке макета мы обратились к 12-колоночной вертикальной
сетке как наиболее эффективному и распространенному методу в веб-дизайне
и задействовали блочную вёрстку, сохраняя традиции исходного ресурса и
принимая во внимание удобство перемещения блоков в зависимости от границ экрана. Формируя расположение рубрикации сайта, мы опирались на
различие в диагоналях используемых устройств (как минимум разницу ширины экрана смартфона и планшета), скрывая ее под кнопкой-символом либо
наоборот оставляя отображаемой.
В отношении цветого оформления мы стремились к сохранению корпоративного стиля, вследствие чего остановились на трёх цветах (черный, серый и красный), которые, в свою очередь, обеспечивают хорошее зрительное
восприятие, сочетая в своей комбинации и контрастность, и отсутствие резко
бросающейся в глаза яркости, которая нередко отвлекает от основного текста
на иных порталах.
Для того, чтобы версия действительно являлась адаптивной, мы полностью сохрании двухуровневую архитектуру сайта, поддерживаемую различными элементами навигации, графическое изображение которых является
максимально семантически узнаваемым (кнопки «Меню» и «Поиска»). Кроме
45
того, имеется также фиксированная по функционалу и расположению
«сквозная ссылка» в виде логотипа портала, позволяющая из любой глубины
просмотра вернуться на главную страницу.
В итоге, мы предполагаем возможность дальнейшего развития и апробации проекта адаптивной версии информационно-образовательного портала
«Первая линия» с внедрением предложенных дизайн-разработок.
Список использованной литературы
46
1. Bishop S., Hartman A. Interactive Media Design and Development with Adobe
CS6. Delmar Cangage Learning., 2013. — P. 352.
2. Chapko A., Emprich A., Werth D. Prosumerization of mobile service provision:
A conceptual approach // Web Portal Design, Implementation, Integration, and
Optimization / edited by Jana Polgar and Greg Adamson / Herhey: IGI Global,
2013. — P. 216-229
3. Colpitt F. Minimal Art: The Critical Perspective. Washington: University of
Washington Press, 1993. — 284 p.
4. Cyr D., Head M. , Ivanov A. Perceptions of Mobile Device Website Design:
Culture, Gender and Age Comparisons // Web Technologies: Concepts,
Methodologies, Tools, and Applications: Concepts, Methodologies, Tools, and
Applications / edited by A. Tatnall / Hershey, New York, London: Idea Group
Inc (IGI), 2009. — P. 245-277.
5. Marzona D. Minimal Art. Berlin: Tashen, 2004. — 96 p.
6. Meyer J. Minimalism: Art and Polemics in the Sixties. Yale University Press
2004. — 340 p.
7. Pernice K.; Whitenton K; Nielsen J. Nielsen Norman Group, How people read
on the web : the eyetracking evidence. Fremont, CA : Nielsen Norman Group,
2014. — 355 p.
8. Rosenfeld, Louis, Morville, Peter. Information architecture for the World Wide
Web. — O'Reilly & Associates, 2006. — 528 p.
9. Tatnall, Arthur. Encyclopedia of Portal Technologies and Applications. Hershey, New York, London: Idea Group Inc (IGI), 2007. 1223 p.
10.Большая советская энциклопедия : [в 30 т.] / гл. ред. А. М. Прохоров. — 3е изд. — М. : Советская энциклопедия, 1969—1978.
11.Васильев И. А. Методы и инструментальные средства построения
семантических WEB-порталов: диссертация кандидата технических наук:
05.13.11. Томск, 2005. — 190 c.
47
12.Вроблевски Л. Сначала мобильные! М.: Манн, Иванов и Фербер, 2012. —
176 c.
13.Герчук Ю.Я. История графики и искусства книги. М.: Аспект-Пресс, 2000.
— 320 с.
14.Интернет – энциклопедия «Corpcit.ru» // [Электронный источник] URL:
http://corpsite.ru/Encyclopedia/Public/Portal.aspx (дата обращения
14.03.2017).
15.Калиновский А.И. Юзабилити - как сделать сайт удобным. М: Новое знание, 2005. — 220 с.
16.Левит С.Я., Гордон А.В., Зверева Г.И. Культурология. Энциклопедия. М.:
Росспэн, 2007. Том 1. 1390 с.
17. Маркотт И. Отзывчивый веб-дизайн. СПб.: Питер, 2012. 176 с.
18. Мержевич В. Верстка веб страниц. «Htmlbook.ru», 2011. 378 с.
19.Нильсен Я. Веб-дизайн: книга Якоба Нильсена. СПб.: Символ-Плюс.
2003. — С. 18
20.Нильсон Я., Тахир М. Дизайн Web-страниц. Анализ удобства и простоты
использования 50 узлов. Вильямс, 2002. — 496 с.
21.Ньюарк К. Что такое графический дизайн? М.: Астрель, 2005 — 256 с.
22. Пикулевский О.В.Дизайн и культура. Харьков: Гуманитарный центр,
2014 — 316 с.
23.Сырых Ю. А. Современный веб-дизайн. Эпоха Веб 3.0. 2-е изд. – М.: Вильямс; Диалектика, 2013. — 274 с.
24.Якунин А.В. Композиционно-графическая модель веб-сайта как системообразующий фактор формирования «опыта взаимодействия». // Инновационное развитие: ключевые проблемы и решения. Сборник статей Международной научно-практической конференции. Том 2. Казань, 2015. С.
174-178.
Электронные источники
48
1. Всероссийский студенческий медиапортал // [Электронный ресурс]
URL: http://медиапортал.рф/ (Дата обращения 01.05.2017)
2. Журналист online - веб-портал факультета журналистики МГУ //
[Электронный ресурс] URL: http://journonline.msu.ru/
(Дата обращения 01.05.2017)
3. Мегабайт - электронный портал Санкт-Петербургского национального
исследовательского университета информационных технологий,
механики и оптики // [Электронный ресурс] URL: http://mbradio.ru/
(Дата обращения 01.05.2017)
4. Морошка - молодежный веб-портал Петрозаводского государственного
университета // [Электронный ресурс] URL:
http://cloudberry10.ru/
(Дата обращения 01.05.2017)
5. П ол и т ех - н о в о с т н о й в е б - п о рт а л С а н кт - П е т е р бу р г с ко го
политехнического университета Петра Великого // [Электронный
ресурс] URL: http://www.spbstu.ru/ (Дата обращения 01.05.2017)
6. Cherwell - портал Оксвордовского университета // [Электронный
ресурс] URL: http://www.cherwell.org/ (Дата обращения 01.05.2017)
7. Descriptions of all CSS specifications // [Электронный ресурс] The World
Wide Web Consortium / URL: https://www.w3.org/Style/CSS/specs#mediaqueries (Дата обращения 01.05.2017)
8. Global digital population as of April 2017 // [Электронный ресурс] Statista
Inc./ URL: https://www.statista.com/statistics/617136/digital-populationworldwide (Дата обращения 14.04.2017)
9. Jake Jeffries.10 Incredible Mobile Marketing Stats 2015. // [Электронный
ресурс] Statista Inc. / URL: http://www.socialmediatoday.com/content/10incredible-mobile-marketing-stats-2015-infographic (Дата обращения
14.04.2017)
49
10.Media queries publication history // [Электронный ресурс] The World
Wide Web Consortium / URL: https://www.w3.org/standards/history/css3mediaqueries (Дата обращения 01.05.2017)
11.Mobile Fact Sheet // [Электронный ресурс] Pew Research Center / http://
www.pewinternet.org/fact-sheet/mobile/ (Дата обращения 14.04.2017)
12.Nielsen J. Hamburger Menus and Hidden Navigation Hurt UX Metrics
[Электронный ресурс] URL: https://www.nngroup.com/articles/hamburger-menus/ (дата обращения 17.04.17)
13.Nielsen J. Usability 101: Introduction to Usability. 2012. // [Электронный
ресурс] Nielsen Norman Group / URL: https://www.nngroup.com/articles/
usability-101-introduction-to-usability/ (дата обращения: 18.04.2017)
14.Number of smartphone users worldwide from 2014 to 2020 (in billions) //
[Электронный ресурс] Statista Inc./ URL: https://www.statista.com/statistics/330695/number-of-smartphone-users-worldwide (Дата обращения
14.04.2017)
15.On line Browsing Platform. Usability of consumer products and products
for public use — Part 2: Summative test method. URL: https://www.iso.org/
obp/ui/#iso:std:iso:ts:20282:-2:ed-2:v1:en
16.Percentage of all global web pages served to mobile phones from 2009 to
2017 // [Электронный ресурс] Statista Inc. / URL: https://www.statista.com/statistics/241462/global-mobile-phone-website-traffic-share (Дата
обращения 14.04.2017)
17.Rivoal F. Media Queries // [Электронный ресурс] The World Wide Web
Consortium / URL: https://www.w3.org/TR/css3-mediaqueries/ (Дата
обращения 01.05.2017)
18.Share of adults in the United States who owned a smartphone in 2015 and
2016, by age group // [Электронный ресурс] Statista Inc. / URL: https://
www.statista.com/statistics/489255/percentage-of-us-smartphone-ownersby-age-group (Дата обращения 14.04.2017)
50
19.Spectator - портал Колумбийского университета // [Электронный
ресурс] URL: http://columbiaspectator.com/ (Дата обращения
01.05.2017)
20.Stanford News - новостной портал Станфордского университета //
[Электронный ресурс] URL: http://news.stanford.edu/ (Дата обращения
01.05.2017)
21.
22.The Harvard Crimson - портал Гарвардского университета //
[Электронный ресурс] URL: http://www.thecrimson.com/ (Дата
обращения 01.05.2017)
23.The Heights - портал Бостонского университета // [Электронный
ресурс] URL: http://bcheights.com/ (Дата обращения 01.05.2017)
24.Web Designer Depot. Fight Div-Itis and Class-Itis With the 960 Grid System [Электронный ресурс] https://www.webdesignerdepot.com/2010/03/
fight-div-itis-and-class-itis-with-the-960-grid-system/ (дата обращения
15.03.17)
25.Адаптивный дизайн.
Пособие для разработчиков// [Электронный
источник] URL: https://developers.google.com/webmasters/mobile-sites/
mobile-seo/responsive-design?hl=ru (дата обращения 14.03.2017).
26.Елманова Н. Web-порталы: классификация и назначение. //
[Электронный ресурс] КомпьютерПресс. №6, 2001. / URL: http://compress.ru/article.aspx?id=10932 (Дата обращения 16.04.2017)
27.Мобильная версия сайта или адаптивный дизайн? Пособие для
разработчиков// [Электронный источник] URL: https://habrahabr.ru/post/
239441/ (дата обращения 14.03.2017).
51
Приложения
Приложение 1. Интерфейсы различных студенческих веб-порталов
52
Рис. 1. Морошка - молодежный вебп о р-
тал Петрозаводского государственного
универтета
с и-
53
Рис. 2. Политех - новостной веб-портал СанктП е т е р бу р гского политехнического
университета Петра Великого
54
Рис. 3. Мегабайт - электронный портал Санкт-Петербургского национального исследовательского университета информационных
технологий, механики и
оптики
55
Рис. 4. Всероссийский студенческий медиапортал
56
Рис. 5. Журналист online - вебпортал
факультета
журналистики Московского
государственного университета
57
Рис. 6.
T
h
e
Heights портал
Б о с т о нс ко г о
у н и в е рситета
58
Рис. 7. Cherwell - портал Оксвордовского университета
59
Рис. 8. Stanford News - новостной портал Станфордского университета
60
Рис. 9. The Harvard Crimson - портал Гарвардского университета
62
Рис. 10. Spectator - портал Колумбийского университета
Приложение 2. Портал «Первая линия», отображение через смартфон с
вертикальной ориентацией
63
Приложение 3. Скриншот результатов опроса пользователей сайта
«Первая линия»
Приложение 4. 12 колоночная сетка макета
64
Приложение
5 .
Базовые
элементы
65
Рис 1. Логотип портала «Первая линия»
Рис 2. Кнопка меню «гамбургер»
Рис. 3. Иконка поиска «лупа»
Приложение 6. Визуальная концепция адаптивной версии веб-портала
«Первая Линия»
66
Рис. 1. Логотип и навигация в шапке портала
67
Рис.2. Главная стра-
ница на всю длину маке-
68
та
Рис.3. Страница с рубриками на всю длину макета
69
Рис.4. Страница с текстом
на всю длину макета
70
5.
ная
ница под вертикальную диагональ смартфона
Рис.
Главстра-
73
Рис 7. Главная страница
под вертикальную диагональ
смартфона,
74
интерактивное меню
Рис 8. Страница с рубриками под вертикальную диагональ смартфона
76
Рис 9.
Страница
с текстом
под вертикальную диагональ смартфона
80
Рис
10. Главная страница под вертикальную диагональ планшета
81
Рис 11. Главная страница под горизонтальную диагональ планшета
82
Рис 12. Страница с текстом под горизонтальную диагональ планшета
Отзывы:
Авторизуйтесь, чтобы оставить отзыв