Московский государственный университет имени М. В. Ломоносова
_____________________________________
Факультет журналистики
Кафедра фотожурналистики и технологий СМИ
ОТЗЫВЧИВЫЙ И АДАПТИВНЫЙ ДИЗАЙН: ОПЫТ
ИСПОЛЬЗОВАНИЯ ИНТЕРНЕТ-СМИ
Курсовая работа
студента 2 курса
310 группы дневного отделения
В.В. Матвеевой
Научный руководитель:
преподаватель, кандидат филологических наук
А.А. Беляев
Москва, 2014 г.
Содержание курсовой работы
Введение ...............................................................................................3
Глава I. Отзывчивый дизайн …………………...…………............6
§1. Как всё начиналось…………………...………...…………………6
§2. Механизм Media Queries. Принцип Mobile First..........................7
§3. Отличия от «резинового» дизайна................................................8
§4. Особенности дизайна макета. Визуальная иерархия………......9
§5. Плюсы и минусы отзывчивого дизайна…………………….....10
Глава II. Анализ отзывчивого дизайна интернет-СМИ
на примере онлайн-версии американского еженедельникаTIME
(«Тайм») и российского издания «Коммерсант.ru»……………..12
§1. Отзывчивый дизайн TIME………………………………………12
§2. Отзывчивый дизайн Коммерсант.ru
Заключение ..................................................................................
Библиографический комментарий...........................................
Приложения ..............................................................
2
Введение
С развитием новых технологий мы имеем всё больше и больше возможностей получать свежую информацию быстро и удобно. А с распространением
мобильных девайсов и технологий высокоскоростного доступа в Интернет
типа Wi-Fi1 или 3G2 / 4G3 быстрый и удобный поиск новостей становится всё
более доступным. Компания Gather, специализирующаяся на исследованиях
сферы информационных технологий, объявила, что смартфоны впервые превысили число продаж простых телефонов и составляют 57,6%4 от мировых
продаж5. Тем временем, в октябре 2013 года стало известно, что общемировые поставки ПК упали уже в шестой раз, снизившись до 80 млн.шт. 6
Сейчас объемы продаж смартфонов стали превосходить продажи ноутбуков
и стационарных ПК, что показано на графике, приведенном Люком Вроблевски в книге «Сначала мобильные» («Mobile First»)7.
Это означает, что всё меньше пользователей Интернета будут выходить в
сеть с компьютеров и ноутбуков и всё больше — с мобильных устройств.
Соответственно, увеличивается объём мобильного трафика, что является для
средств массовой информации, живущих «онлайн», одним из определяющих
факторов существования. По данным Google 8 , 90% людей перемещаются
между устройствами во время использования интернета. При этом они могут
просматривать одни и те же сайты с разных устройств. Но существует небольшое препятствие: не все сайты разрабатываются с адаптацией под разрешение мобильных устройств, что, в свою очередь, создает определенные
неудобства при просмотре контента сайта и, соответственно, уменьшение количества потенциальных читателей, а заодно и трафика. Количество варианWireless Fidelity («беспроводное качество»)
От англ. third generation — третье поколение
3
От англ. fourth generation — четвертое поколение
4
На IV квартал 2013 года
5
http://4pda.ru/2014/02/13/141110/
6
http://techno.bigmir.net/technology/1541559-Plansheti-i-smartfoni-vitesnyaut-PK-sbiv-ih-prodaji-v-mire-dopyatiletnego-minimyma
7
Люк Вроблевски. Сначала мобильные
8
http://googlemobileads.blogspot.co.uk/2012/08/navigating-new-multi-screen-world.html
1
2
3
тов разрешения экранов устройств, с которых производится выход в Интернет, растёт с каждым годом. Именно поэтому одним из ключевых моментов в
разработке сайта сейчас становится отзывчивый веб-дизайн (англ. responsive
web-design). Важнейшим становится принцип «сначала мобильные» (агл.
«Mobile first», принадлежащий всё тому же Люку Вроблевски.
Актуальность темы:
Конечно, многие информационные издания стремятся разработать отдельные новостные приложения для мобильных устройств на iOS, Android, a теперь ещё и на Windows Phone 8. Но, к сожалению, всё это оказывается «мартышкиным трудом»: согласно исследованию Pew Research Center9, проведенному в 2012 году, практически 60% пользователей смартфонов и планшетов
предпочитают читать новости через браузер устройства. И только 16% пользователей смартфонов и 11% пользователей планшетов предпочитают загружать новостные приложения себе на устройство. Так что отзывчивый (или
адаптивный) дизайн становится в данном контексте приоритетным направлением развития веб-разработки и дизайна информационных изданий. Тем более что читаемость сайта и его популярность напрямую зависят от удобства
чтения с устройства: если пользователю некомфортно получать информацию
с данного сайта, он, вероятнее всего, будет искать альтернативные источники, в которых, помимо информационной начинки, присутствует и комфортабельный дизайн. В связи с этим актуальность данной темы на момент написания курсовой работы является очевидной.
Объект и предмет исследования:
Объектом данного исследования стали сайты российских и зарубежных
интернет-СМИ и онлайн-версии печатных изданий. Предмет исследования —
опыт использования отзывчивого дизайна сайтами интернет-СМИ. Издания,
Информация взята с сайта http://www.hopesandfears.com/hopesandfears/experience/management/117467vladeltsy-planshetov-i-smartfonov-ne-lyubyat-novostnye-prilozheniya
9
4
ставшие источником примеров и предметом анализа — Time, КоммерсантЪ,
TJournal, Slon.ru, Liberation, РИА Новости, Аргументы и Факты.
Цели и задачи исследования:
Основной целью исследования является то, насколько удачным является
опыт различных интернет-СМИ в разработке отзывчивого дизайна своих
сайтов. Также нужно отметить удачное применение тех или иных элементов
отзывчивого дизайна, указать на их достоинства. Итоговая задача — выяснить, насколько комфортным является отзывчивый дизайн интернет-СМИ
для пользователей мобильных устройств (смартфонов и планшетов).
Метод исследования:
Методом данного исследования будет являться выборочный анализ определенных сайтов СМИ, использующих в разработке технологию отзывчивого
дизайна. Для того, чтобы сделать общий вывод, необходимо будет обратиться к методу индуктивного умозаключения: на основе конкретных примеров
сделать вывод об опыте использования отзывчивого дизайна.
Эмпирическая основа исследования
Эмпирической основой данного исследования являются различные медиаресурсы, основной тематикой которых является дизайн и веб-разработка.
Также данная работа будет опираться на специализированные публикации
различных средств массовой информации, результаты исследований, проведенных социологическими службами, и, наконец, пособия по веб-разработке
и отзывчивому веб-дизайну.
5
Глава I. Отзывчивый дизайн
§1. Как всё начиналось
В наше время разрешение экранов
устройств колеблется от 320px до
2560px. Разрешение 320px — смартфоны iPhone — стало нижней планкой в
иерархии разрешений экранов, а 2560px принадлежит большим мониторам.
Но и это уже не предел. Основатель Rift Labs («Рифт Лэбс») Мортен Хъерде
(Morten Hjerde) вместе с несколькими своими коллегами выявил статистику
среди 400 устройств, проданных в период с 2005 по 2008 годы. В большинстве случаев их разрешение определялось цифрами, приведенными на графике10.
В связи с этим уже тогда дизайн с фиксированной шириной перестал быть
актуальным: развитие технологий требует от сайтов начать «подстраиваться»
под разные варианты. Структура сайта должна была адаптироваться под
устройство с учётом всех существующих разрешений.
Первым об этом задумался веб-дизайнер и разработчик Итан Маркотт. В
его статье, вышедшей
25 мая 2010 года в специализированном онлайн-
издании A List Apart (www.alistapart.com) под заголовком «Responsive web
design»11, был впервые упомянут (считайте — введён в употребление) термин
«отзывчивый веб-дизайн»12 . Впоследствии Маркотт выпустил собственную
книгу «Responsive Web Design», которую полностью посвятил этой технологии.
В статье «Responsive Web Design» говорится об основных технологиях
разработки отзывчивого дизайна. Также были выделены 3 ключевых принципа:
Smashing Magazine. Responsive Design, стр.9. Ссылка на исследование —
http://sender11.typepad.com/sender11/2008/04/mobile-screen-s.html. График приведен в приложении.
11
http://alistapart.com/article/responsive-web-design
10
12
We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not
only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design.
6
Обязательной является работа с медиа-запросами (от англ. media
queries)
Сайт должен быть построен с применением гибкого макета на
основе сетки (grind-based layout; flexible)
Также нужно примененять механизм гибких изображений (flexi-
ble images)
Маркотт заостряет внимание на технологии Media Queries — технологии
медиа-запросов.
§2. Механизм Media Queries. Принцип Mobile first
Механизм медиа-запросов (англ. media queries) позволяет разработчикам
не только ориентироваться на определенный тип устройств, но и суметь проанализировать физические характеристики устройства, которое используется
для отображения страницы. Иными словами, технология media queries позволяет проверить браузер устройства и, исходя из его характеристик, отобразить нужный формат сайта. В свойствах min-width (минимальная ширина) и
max-width (максимальная ширина) устанавливаются минимальные и максимальные характеристики ширины экрана или браузера. Min-width устанавливает минимальную характеристику, к которой будут применяться определенные наборы стилей или же таблицы стилей. Если окажется, что фактическая
характеристика будет ниже минимальной, то соответствующие нижней характеристике наборы и таблицы стилей будут просто проигнорированы. Maxwidth действует с точностью наоборот: всё, что больше максимальной ширины браузера или же заданной ширины экрана, не будет применяться к соответствующим медиа-запросам. Выглядеть это может примерно так:
@media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
7
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
Для того, чтобы сделать изображения адаптивными, можно использовать
код в CSS:
img {
max-width: 100%;
height: auto;
width: auto;
}
Не стоит забывать про принцип Mobile first: именно он сейчас является
точкой отправления в начале любой проектировки веб-дизайна. Суть этого
принципа, предложенного вышеупомянутым Вроблевски 13 , состоит в том,
что мобильные версии сайтов (адаптированные под браузеры смартфонов) не
должны ограничиваться второстепенной ролью ввиду подавляющей распространенности смартфонов. Веб-дизайнеру теперь стоит создавать прежде
всего мобильное представление сайта, а затем, с помощью механизма media
queries адаптировать дизайн для устройств с экранами более высокого разрешения. Не забывать нужно и о тестировании своего сайта на различных
устройствах: разрешение у каждого из них будет хоть немного, но отличаться
от предыдущего. Поэтому тестирование отзывчивого дизайна на разных
устройствах дает возможность определить усредненные значения, которые
более-менее будут подходить по ширине каждому гаджету.
13
Люк Вроблевски. Сначала мобильные
8
§3. Отличия от «резинового» дизайна
В настоящее время существует три типа веб-дизайна:
фиксированный дизайн;
«резиновый» дизайн;
адаптивный и отзывчивый дизайн.
Фиксированный тип сайтов с развитием мобильных устройств остаётся далеко позади: он статичен, поэтому не подстраивается под устройства, с которых совершается выход в Интернет. Соответственно, такой тип сайтов становится неудобен для современной интернет-аудитории. Но в чём состоит существенное
различие
«резинового»
дизайна
и
отзывчивого?
«Резиновой» (англ. «liquid» - жидкий, тянущийся) считают ту структуру вебстраницы, которая автоматически подстраивается под ширину окна браузера.
Происходит это за счёт использования чаще всего процентных показателей
вместо пиксельных. К сожалению, этот тип, также, как и фиксированный, является устаревшим: он учитывает только один определенный вид устройств и
не может адаптироваться под устройства со слишком маленькой или слишком большой шириной. В качестве примера можно привести сайт интернетиздания Слон.ру 14 : тип верстки сайта этого издания принадлежит к типу
обычных "резиновых" трехблочных макетов.
Отзывчивый тип макетов страниц основан на «резиновом» принципе. Но,
так как при разработке используется механизм media queries, контент приспосабливается под разрешение экрана устройства, а детали плавно перемещаются по контрольным точкам их расположения. Плюс ко всему изменяется
расположение блоков меню и подменю, контент чаще всего укладывается в
одну колонку, подогнанную под ширину экрана или браузера устройства. В
14
http://slon.ru/
9
качестве самого простого примера отзывчивого дизайна можно привести
сайт французской газеты «Liberation» («Либерасьон»)15
§4. Особенности дизайна макета. Визуальная иерархия
Незаменимым принципом в проектировке отзывчивого дизайна интернетСМИ становится метод визуальной иерархии 16 . Он состоит из нескольких
простых типов:
1. Контраст
Контраст стал одним из простейших способов создания визуальной иерархии на небольших дисплеях мобильных устройств. Строится он по-разному,
однако основными элементами стали цвет, форма, размер и соотношение
объектов.
Цвет объектов — самый быстрый способ создания контраста в концепте
отзывчивого дизайна для мобильных гаджетов. Контрасты не должны быть
слишком резкими: это будет очень неприятно для глаз читателя и несёт в себе ненужный дискомфорт, затрудняющий чтение. Но если расположить контрастные элементы правильно, можно добиться привлечения внимания пользователя к приоритетному для издателя контенту. Хорошее решение контраста с помощью цветового решения вышло у издания Аргументы и Факты17:
Следующий способ создания контраста — сочетание форм. Треугольники,
круги, квадраты и прочие фигуры имеют свой визуальный вес, а их
грамотное расположение также может повлиять на последовательность
просмотра контента пользователем. Так, на сайте газеты «Los Angeles Times»
мы можем увидеть функцию «Feedback», контрастирующую по форме с
15
http://www.liberation.fr/
Patric Cox. Visual Hierarchy In Mobile design.
http://tympanus.net/codrops/2012/06/11/visual-hierarchy-in-mobile-design/
17
http://www.aif.ru/
16
10
остальным оформлением сайта: кнопка расположена перпендикулярно,
вертикально, в то время как весь дизайн состоит в основном из
горизонтальных линий и фигур.
Третьим и последним элементом создания контраста является соотношение размеров объектов. Более крупные объекты, естественно, будут привлекать больше внимания, нежели мелкие. При грамотном сочетании размеров
деталей навигации можно привлечь внимание пользователя к определенным
объектам. Главное — сочетать их гармонично; в ином случае в глазах пользователя может возникнуть путаница. На сайте информационного агентства
РИА Новости можно заметить, что основные новости, объединённые в рубрику «Картина дня», выделены крупным жирным шрифтом, расположены на
крупной плитке и имеют большие иллюстрации.
2. Продолжительность
Продолжительность (длительность) в дизайне — это, по существу, то расстояние, которое глаз пользователя плавно проходит от одного элемента к другому, к третьему и так далее. В отношении типичных размеров дисплея это
кажется совсем простым. С мобильным размером всё обстоит гораздо сложнее. При создании мобильного размера сайта разработчику просто может "не
хватить места", чтобы привлечь внимание пользователя, а затем аккуратно
показать ему всю страницу, шаг за шагом. Весь экран мобильного не нуждается в длительном разглядывании — достаточно окинуть мобильную страницу одним взглядом, сделать свайп, и всё сразу же попадает в поле зрения.
Поэтому расчёт алгоритма движения взгляда пользователя на мобильных
устройствах — куда более тонкая работа, нежели разработка десктопных
версий.
При разработке мобильных разрешений разработчику стоит учитывать, куда
и в какой момент может бросить взгляд пользователь. Зачастую разработчи11
ки используют технологии айтрекинга18 для того, чтобы лучше расположить
компоненты дизайна сайта. Мобильные сайты, как правило, не могут вместить такое количество контента, которое будет в достаточном количестве, и
в то же время его можно охватить одним взглядом, поэтому в их разработке
так важна навигация: необходимо продумать, куда и зачем пойдет пользователь в поисках необходимой ему информации . Для этого обычно используют
три самых популярных метода: линии, схожесть и пространство.
Самый простой способ — это линии. Самый лучший пример использования
этого метода — меню навигации. Мало того, что список, огороженный линиями, обеспечивает простой и удобный способ создания навигации, сам элемент списка является отличным примером использования линий как создание
продолжения. Каждый элемент списка как правило, имеет верхнюю и нижнюю горизонтальную линию или тень, которая направляет внимание пользователя. Можно использовать название элемента списка вместо традиционных "стрелок".
Можно использовать и другие виды линий. "Подразумеваемые" и "психологические" линии могут прекрасно заменить обычные. "Подразумеваемые"
линии — это, как правило, элементы (к примеру, точки), выстроенные в ряд и
создающие визуализацию линии, а также направление человеческого взгляда.
"Психологические" линии похожи на "подразумеваемые" с той лишь разницей, что используемые элементы будут отличаться по размеру, форме и цвету, в то время как элементы подразумеваемых линий, как правило, повторяют
один и тот же элемент. В сочетании с контрастными элементами психологические линии между элементами могут действительно создать «карту» или
направление для глаз пользователя.
18
Айтрекинг (eye-tracking) — технология, которая позволяет отслеживать движение взгляда человека.
12
Схожесть похожа на линии. Как и "подразумеваемые", подобные элементы
«связаны» вместе и могут создать линию для того, чтобы сместить взгляд
пользователя. Совместная группировка подобных деталей стремится создать
акцент на том, что требует внимания. Кроме того, подобные элементы не выстроены в линию, а группируются, и поэтому из содержащихся элементов
можно создать "продолжительность". К примеру, окно с иконками навигации
над полем с отдельными параграфами будет двигать глаз пользователя от
иконок вниз до поля с параграфами.
Пространство
Не стоит помещать весь существующий контент в один маленький экран мобильного девайса. Такой дизайн будет выглядеть нагромождённым и засоренным. Пространство между объектами и внутри них не только позволит
дизайну стать более свободным, но и может быть использовано для создания
"продолжения". Так же, как и контурная линия, границы или тени, пробел
может быть использован для создания необходимого движения глаз пользователя.
Необходимо соблюдать баланс в пространстве между элементами. Пространство действительно играет важную роль в создании и связывании элементов.
Слишком много места — и элементы дизайна будут разрознены, и связать их
будет весьма проблематично. Если места слишком мало, внимание фокусируется именно на свободном пространстве, но не на нагромождённых друг на
друга элементах.
13
§5. Плюсы и минусы отзывчивого дизайна
Преимущества отзывчивого дизайна:
лучшая индексируемость;
меньше общие затраты на разработку (не нужно создавать несколько от-
дельных версий);
повышенное удобство пользования на каждой платформе (подстраивает-
ся под каждую из них);
легко сохранить единообразный стиль (дизайн, в отличие от десктопных
версий, служит прежде всего контенту — акцент делается именно на него).
Недостатки отзывчивого дизайна:
скачивается лишний для платформы код/ресурсы;
неполная совместимость с браузерами;
проблемы с фиксированными рекламными форматами;
более длительный срок разработки сайта и создания макетов дизайна.
Часто случается так, что отзывчивый дизайн сайта имеет очень большой вес.
В марте 2012 года Гай Подъярны (Guy Podjarny) провел тест, в ходе которого
сравнивалась продуктивность работы множества новых адаптивных сайтов
на устройствах с четырьмя различными разрешениями экранов. Получившиеся результаты были весьма удручающими: почти все адаптивные сайты
имели избыточный вес. Таким образом, Гай Подъярны выделил три основные причины существования огромного количества тяжелых адаптивных
сайтов:
Загрузка и сокрытие: большое количество элементов загружается, но
не показывается пользователю;
Загрузка и урезание: изображения в высоком разрешении загружаются, а затем урезаются для соответствия пользовательскому экрану;
14
Избыточный DOM19: не существует способа избежать парсинга20 и
обработки браузером всех зон DOM, включая скрытые.
86% отзывчивых сайтов имеют одинаковый вес как на больших экранах,
так и на маленьких. У многих вес сайта в 4, а то и 15 мегабайт вызывает откровенный смех: для мобильных устройств такие размеры никак не подходят
ввиду слабой мощности процессора и меньшего объема оперативной памяти.
Это очень сильно затрудняет его использование: страницы долго грузятся,
интерактивные элементы становятся просто невыносимыми, хотя должны,
наоборот, упрощать навигацию по сайту. Необходимо учитывать и скорость
выхода в Интернет: у всех пользователей она разная. Кто-то может поймать
Wi-Fi в городском парке, кто-то сидит через домашний со скоростью до 30
мб\с, а кто-то пользуется технологиями 3\4G. Если получится так, что пользователь подключится к соединению с небольшой скоростью передачи данных, он попросту не сможет загрузить страницы «тяжелого» сайта.
Среди многих дизайнеров сложилось ошибочное мнение, дескать, работать
с производительностью сайта нужно в последнюю очередь. Но в настоящее
время эти приоритеты начинают меняться, и теперь производительность сайта ничуть не уступает дизайну по важности разработки.
DOM (от англ. Document Object Model — «объектная модель документа») — это не зависящий от платформы и языка программный интерфейс, позволяющий программам и скриптам получить доступ к содержимому HTML, XHTML и XML-документов, а также изменять содержимое, структуру и оформление таких
документов.
19
Синтаксический анализ (жарг. па́рсинг) в лингвистике и информатике — процесс сопоставления линейной последовательности лексем (слов, токенов) естественного или формального языка с его формальной грамматикой. Результатом
обычно является дерево разбора (синтаксическое дерево). Обычно применяется совместно с лексическим анализом.
20
15
Глава II. Анализ отзывчивого дизайна интернет-СМИ на примере онлайн-версии американского еженедельника TIME
(«Тайм») и российского издания «Коммерсант.ru»
§1. Отзывчивый дизайн TIME
Отзывчивый дизайн сайта еженедельника TIME максимально приближен к
своему «старшему брату»: дизайнеры и разработчики сумели сохранить общий стиль оформления и большинство функций. Это нельзя не отметить как
положительный аспект: если дизайны отзывчивого и десктопного макета будут сильно разниться, пользователь может просто потеряться на данном сайте. А это — минус один балл комфортабельности дизайна для читателя.
Верхняя интерактивная панель при смене версии дизайна меняет свой вид и
функционал. Вместо красного цвета панель становится тёмно-серой. От полной версии остаётся подменю с рубриками новостей и функция «subscribe»
(«подписаться»). Исчезают рекламные баннеры. Если есть срочные новости,
появляется ссылка с подзаголовком «breaking». Рубрики Latest («последние
новости»), Popular («популярное») и Videos («видео») уходят в подменю, которое плавно выдвигается слева при нажатии на интерактивный элемент сбоку — «tap». Кстати, за этим интерактивным элементом кроется целый раздел,
присутствующий в полной версии слева и имеющий отдельную полосу прокрутки. Там же расположены курс валюты, свежие новости («just posted»),
новостная лента («newsfeed») и рекомендации редакции издания («we recommend»). Он растягивается на весь экран мобильного устройства, что весьма удобно: не нужно пытаться тыкнуть в маленькую кнопку, пытаться прицелиться. Сразу после верхней интерактивной панели появляется раздел
«brief» («новости кратко»).
16
Меняются и изображения: при максимальной ширине браузера размер изображения составляет 650х487 px:
img[Attributes Style] {
width: 650px;
height: 487px;
}
При минимальной ширине браузера отзывчивое изображение уменьшается, и его размер теперь равен 562х422 px:
img[Attributes Style] {
width: 562px;
height: 422px;
}
Стоит также указать элементы, используемые для создания визуальной
иерархии сайта TIME.
Линии в выплывающем меню навигации способствуют созданию визуальной
иерархии и, тем самым, четкому и понятному делению на рубрики. Вертикальная полоса “tap” контрастирует с преобладанием горизонтальных линий
в дизайне. Главные новости иллюстрируются большими изображениями, что
позволяет выделить основную информацию на фоне второстепенной, а также
то, что, по мнению TIME, является более значимым для пользователя/читателя, и на что ему следует обратить внимание. Этому также способствуют более крупные и жирные шрифты и контрастные элементы (белыйсерый-красный).
17
§2. Отзывчивый дизайн Коммерсант.ru
Так же, как и в случае с TIME, адаптивный дизайн сайта издания КоммерсантЪ максимально приближен к десктопной версии. В этом, конечно же,
есть свои плюсы: при переходе с полной версии на мобильную пользователь
не запутается в навигации, потому что большинство элементов будут ему
уже знакомы, да и общий внешний вид версий не вызовет отрицательных
эмоций.
В отличие от адаптивной версии TIME, разработчики КоммерсантЪ-а не изменили цвет верхнего меню навигации — и там, и там мы видим светлосерый фон с белыми надписями. Количество элементов меню сокращается,
вместо 12-ти мы видим только 2, которые, в свою очередь, объединили в себе
две панели навигации, располагавшиеся выше и ниже логотипа издания:
навигацию по изданиям издательского дома и по рубрикам.
Объединенные панели навигации представляют собой одну панель с двумя
меню — "Издания" и "Рубрики" — плюс окно поиска. Первое меню ("Издания") включает в себя перечень изданий и проектов, которые выпускает издательский дом — они же были перечислены в верхней панели навигации в
десктопной версии: "Приложения", "Власть", "Деньги", "Огонёк", "Weekend",
"Автопилот", "Каталог", "Секрет фирмы", "FM 93.6" и "АК". Нижняя панель
навигации, включавшая в себя 9 рубрик ("Страна", "Мир", "Бизнес", "Экономика", "Культура", "Спорт", "Авто", "Недвижимость" и "Финансы"), теперь
выглядит как подменю в меню "Рубрики". Элемент поиска, находившийся
ниже верхней панели навигации, сдвигается выше и оказывается на самой
панели меню. Окно для ввода поискового запроса теперь скрыто и обозначено привычным всем значком "лупа" — пользователю не придется долго думать, как воспользоваться поиском по сайту. "Поиск" выплывает теперь
только в том случае, если тапнуть по "лупе".
18
Отдельно хочется отметить хорошо проработанный функционал поиска в
адаптивной версии. Выплывающая снизу клавиатура не подвисает, как, впрочем, и окно поиска, а это одна из наиболее частых нестабильностей в адаптивных версиях сайтов. Меню поиска предлагает два варианта поиска необходимых материалов: по дате и по релевантности. При выборе поиска по дате
выезжает весьма удобный календарь, с помощью которого, указав период
выхода материала, можно найти интересующую тебя статью гораздо быстрее. Появляющиеся "опросы" визуально не перегружают страницу, что создаёт эффект "ненавязчивости" и, скорее, "развлекательности". Также поиск
на сайте Коммерсанта предлагает уточнить источники информации, которые,
в свою очередь, делятся на "издания" и "регионы". Результаты поиска выделены серым, в тон остальному цветовому разрешению дизайна сайта, фоном,
а каждый материал отделен цветом от других (заключен в серый прямоугольник).
На адаптивном варианте сайта Коммерсант.ру используются различные виды
визуальной иерархии. Так, можно заметить, что, как и у большинства изданий, главные новости выделяются среди новостей второстепенных. Используются по большей части увеличенный или жирный шрифт и бόльшие по
размеру иллюстрации. Ленты новостей под заголовком "Коротко" отображаются мелким шрифтом, кратко и без иллюстраций. Не остаются незамеченными и линии разной толщины, которые разделяют блоки с информацией.
Чем толще линия, разделяющая материалы, тем больше вероятность, что мы
эти материалы заметим. Фото- и видеорубрики наглядно отображены в адаптивной версии. Изображения и видеоплеер крупные, на них легко нажимать.
19
Заключение
В практической части курсовой работы я рассмотрела адаптивный дизайн
сайтов американского издания TIME и российского издания КоммерсантЪ.
Проведя анализ дизайна, могу с уверенностью сказать, что среди просмотренных мною сайтов различных СМИ дизайн TIME и Коммерсанта является
наиболее функциональным, продуманным и визуально воспринимаемым.
К сожалению, среди интернет-СМИ оказалось не так уж и много сайтов, которые были разработаны с использованием отзывчивого дизайна. Из 50 просмотренных сайтов разработанных с использованием технологии отзывчивого дизайна оказалось всего 11. Конечно, проверить все сайты интернет-СМИ
на свете не удалось, но тенденция на данный момент такова, что разработчики предпочитают делать «резиновые» сайты» или же держать помимо десктопной версии ещё и мобильную. Это прослеживается как среди зарубежных
изданий, так и среди российских. Однако те издания, которые перешли к технологии отзывчивого дизайна, показывают неплохие результаты, хотя им
стоит поработать над производительностью: некоторые элементы подвисают
и тормозят при загрузке, некоторые меню и подменю неудобны для нажима
(слишком маленькие). В принципе, всё это поправимо, просто дизайнерам
следует правильно расставить приоритеты, как уже было сказано ранее.
Не стоит забывать и о принципах визуальной иерархии просто потому, что
физический экран мобильных устройств имеет малые размеры. Мобильные
устройства, конечно, меньше, но их дисплеи имеют очень высокую плотность пикселей, что означает, что изображения получатся более четкими, линии более гладкими, а шрифты будут выглядеть более четкими и острым, чем
на стандартном дисплее.
20
Приложение:
1. Приложением к данной курсовой работе является презентация, содержащая скриншоты и пометки, необходимые для анализа дизайна сайтов и
их функционала. Также презентация содержит схемы, таблицы и графики,
иллюстрирующие само понятие адаптивного дизайна и различные исследования, упомянутые в данной курсовой работе.
Содержание презентации:
Слайд 1. Титульный слайд
Слайд 2. Описание вспомогательных средств, используемых для создания
графических иллюстраций данной курсовой
Слайд 3. График объема продаж смартфонов с 2005 по 2013 годы, приведенный в книге Люка Вроблевски "Сначала мобильные"
Слайд 4. Глава I. Отзывчивый дизайн
Слайд 5. Статистика разрешений, выявленная среди 400 устройств, проданных в период с 2005 по 2008 годы
Слайд 6. Пример "резинового" дизайна (Slon.ru)
Слайд 7. Отзывчивый дизайн на примере издания Liberation
Слайд 8. Визуальная иерархия. Создание контраста с помощью цветового
решения у «Аргументы и Факты»
Слайд 9. Визуальная иерархия. Создание контраста с помощью сочетания
форм. Los Angeles Times
Слайд 10. Решение контраста с помощью соотношения размеров объектов.
РИА Новости
Слайд 11. Анализ движения взгляда пользователя с помощью технологии
айтрекинга
Слайд 12. Глава II. Анализ отзывчивого дизайна интернет-СМИ на примере
онлайн-версии американского еженедельника TIME («Тайм») и российского
издания «Коммерсант.ru»
Слайд 13 — 18. Отзывчивый дизайн TIME
Слайд 19 — 23 . Отзывчивый дизайн Коммерсант.ru
Слайд 24. Типы дизайнов сайтов Интернет-СМИ в процентном соотношении
Слайд 25 — 26. Просмотренные сайты интернет-СМИ
Библиографический комментарий:
Электронные издания книг:
— Итан Маркотт. Отзывчивый веб-дизайн.
— Люк Вроблевски. Сначала мобильные.
— Smashing Magazine. Responsive design.
Электронные ресурсы:
— www.habrahabr.ru
— www.alistapart.com
— www.uxdesign.smashingmagazine.com
— www.webdesignerdepot.com
— www.sixrevisions.com
22
— www.googlemobileads.blogspot.co.uk
— www.readlists.com
— www.tympanus.net
— www.hopesandfears.ru
— www.sender11.typepad.com
— www.ru.wikipedia.org
Сайты изданий:
— TIME, Коммерсант.ру. Аргументы и факты, РИА Новости, ИТАР
ТАСС, Russia Today, Los Angeles Times, Le Figaro, L`Humanite, La
Tribune, Liberation
— TJournal, Hopes and Fears, Look At Me, The Village, Интерфакс,
New York Times, Известия, Ведомости, Московский Комсомолец,
РБК, Pravda.ru, Газета.ру., Русский Репортер, Эксперт, Комсомольская Правда, Chicago Tribune, New York Post, AFP, Reuters, Associated Press, L`Express, USA Today, Voice of America, Независимая
Газета, Новая Газета, The Times, The Telegraph, Al Jazeera, Der Spiegel, Die Welt, Die Presse, Basler Zeitung, Express.de, Афиша, Эхо
Москвы, Colta.ru, Actuell24, Golem.de, Большой Город.
23
Отзывы:
Авторизуйтесь, чтобы оставить отзыв