Всё для технического документирования
+7 (495) 001-40-42
Разработка технической документации
Курсы для технических писателей
Программное обеспечение

Оптимизация просмотра веб-страниц для мобильных устройств посредством отзывчивого дизайна

07.08.2015

01Если вы ещё сомневаетесь, стоит ли менять дизайн своего сайта на отзывчивый, то определиться вам поможет данный аналитический обзор. Из него вы узнаете, какие именно преимущества получают компании, имеющие «отзывчивые» сайты, для кого в первую очередь нужен отзывчивый дизайн и какими способами добиться того, чтобы дизайн вашего сайта был как эстетически приятен, так и удобен пользователям любым устройств. Автор обзора – Джефф Харт (Geoff Hart) – в прошлом сотрудник компаний IBM, Канадской лесной службы и Канадского лесотехнического научно-исследовательского института, а с 2004 года он работает как фрилансер-научный редактор, технический писатель и переводчик, и иногда входит в различные управляющие группы.

Этой публикацией мы заканчиваем цикл статей о дизайне. Предыдущие публикации цикла:

Советы по графическому дизайну для начинающих

21 совет по веб-дизайну для начинающих


На «фаблетах» (англ. phablet) (смешанная комбинация телефона и планшетного компьютера – англ. phone и tablet computer) можно просматривать веб-страницы – и это даже приятно – в дороге без использования ноутбука или полноразмерного планшета. Но всё ещё существует поразительно большое количество разработанных без учёта нужд мобильных посетителей сайтов, пользоваться которыми на таких устройствах неудобно. Эта проблема сохраняется несмотря на то, что ошеломительный рост количества сотовых телефонов, фаблетов и планшетов должен сделать необходимость в дружественных к мобильному использованию сайтов очевидной для веб-дизайнеров. (Ноутбуки с большими экранами тоже являются мобильными устройствами, но я в этой статье сконцентрируюсь на телефонах и планшетах).

Одно из решений — создать отдельные сайты для мобильных и десктопных пользователей, этот подход рекомендует гуру по удобству использования Якоб Нилсен (Jakob Nielsen). Оптимизация дизайна сайта для каждого устройства обеспечит оптимальное решение с позиции удобства для пользователя, но у этого нет в большинстве случаев практического подтверждения. К счастью, имеющиеся сегодня инструменты не диктуют нам необходимость создания полностью отдельных сайтов для устройств с большими и малыми экранами: в основном мы можем удовлетворить большинство посетителей с помощью того, что называется в разных случаях «отзывчивым», «подвижным», «гибким», «адаптивным», «бесстраничным» или «приспосабливаемым» дизайном. Несмотря на незначительные различия среди них, все эти термины имеют общую черту: осознание того, что мобильные устройства налагают особые ограничения на пользователей сайта из-за природы мобильного аппаратного обеспечения. Из этих терминов я бы принял в качестве стандартного «отзывчивый» дизайн, потому что он придаёт особое значение обязанности дизайнера отвечать потребностям пользователей – тому, о чём так много дизайнеров забывают.

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

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

Чтобы проще понять, как это теоретическое различие работает на практике, сравните, как ведут себя PDF-файлы и EPUB-файлы. У PDF-документа фиксированный дизайн, который отображается одинаково (даже если нечитаемо мал) на каждом устройстве, тогда как EPUB-документ автоматически переформатирует свой контент (чаще всего отталкиваясь сугубо от текста), чтобы вместиться в доступное пространство экрана. Отображающие информацию программы часто позволяют читателям настроить гарнитуру и размер шрифта, а также другие характеристики (например, цвет), чтобы удовлетворить их визуальным предпочтениям, что часто бывает полезно читателям с визуальными или другими ограничениями. «Отзывчивый» — характеристика, отвечающая потребностям аудитории, а аппаратное обеспечение, которое она используют для доступа к вашему сайту, определяет лишь небольшое подмножество её потребностей.

Как мы можем достигнуть максимального удобства просмотра страниц сайта пользователем, применяя отзывчивый дизайн в контексте того, что Сеть всё чаще посещают, используя мобильные устройства с маленькими экранами? Мы должны увидеть различия и сходства между аудиториями и способом мобильного и десктопного просмотра страниц. Чтобы не раздувать данную статью до неприличия и при этом блеснуть моими сильными сторонами (информационный дизайн, не усложнённый программированием на HTML и CSS), я сконцентрируюсь на принципах дизайна. Чтобы узнать больше о текущем состоянии технологий, делающих отзывчивый дизайн возможным, посмотрите любые из множества «основ» дизайна, в которых предлагаются сниппеты кода или даже целые архитектуры, которые вы можете адаптировать под собственные нужды.

Разрабатывайте для своей аудитории

Любой хороший дизайн начинается с анализа потребностей аудитории. Аудитории сложны по устройству и не могут быть упрощены до стереотипов: «случаи использования» типа «один размер вмещает всё» чаще всего оказываются мифом, однако упрощение иногда может быть необходимо на ранних стадиях процесса разработки. Например, одно важное различие можно увидеть между моим поколением (которое использует телефоны для голосовой связи) и поколением моих детей, которые используют телефон в основном для набора текстов. Последних иногда относят к поколению «TLDR» (too long, didn’t read — слишком длинное, не читал), что показывает то, с каким удовольствием они создают такие сокращения как TLDR, что упрощает процесс набора текста.

Чтобы создать эффективный дизайн, анализ аудитории должен концентрироваться на следующих пунктах:

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

В книге Кима Гудвина (Kim Goodwin) по дизайну, сфокусированному на пользователе, приведён отличный и всеобъемлющий совет по проведению такого анализа.

Дизайнеры должны принимать во внимание две основные категории целей пользователей: получить эстетические впечатления, когда визуальные и другие сенсорные характеристики более важны, чем информационный контент, и чисто функциональная польза, такая как быстрый поиск и восприятие информации. Эстетические впечатления иногда требуют фиксированный дизайн, хотя, вероятно, не так часто, как вы можете ожидать. Отзывчивый дизайн более важен для успешного функционального использования. Конечно, лучшие дизайнеры комбинируют эстетические характеристики с функциональной эффективностью, так что пользователям не придётся жертвовать любой из этих целей. Как и в любом применении информационного дизайна, главное — выделить наиболее важные факторы для каждой аудитории (в данном случае, между эстетикой и функциональностью), и поставить этот фактор в приоритет для вашего дизайна. Скорее всего, вы сможете создать очень удобный в использовании, и при этом эстетически привлекательный дизайн, если поймёте потребности вашей аудитории и сконцентрируетесь на её нуждах.

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

Если необходимо контролировать, что видит ваша аудитория и как она получает информацию, разработка отдельного приложения для каждого устройства или операционной системы может быть лучшим решением, чем отзывчивый дизайн. Это особенно верно, если приложение разрабатывается в тесной привязке к вашей CMS для уверенности, что они работают хорошо вместе. С другой стороны, если вы не веб-разработчик или не работаете с такими разработчиками, то, возможно, будете склонны к мнению, что вариант «один размер вмещает всё» более эффективен. Например, формат EPUB более-менее стандартизован на всех платформах, но читатели EPUB-документов имеют доступ к множеству приложений для чтения на каждой платформе. (В наше время заставлять пользователей использовать определённое приложение для чтения – редко допустимое решение, хотя вы, конечно, можете рекомендовать приложения, которые по вашим ощущениям лучше всего работают с вашей информацией). Как и в случае применения единого источника это позволяет поддерживать единое унифицированное тело информации для всех устройств, в то же время давая возможность пользователю устройства контролировать отображение информации. Могут встречаться специфические ситуации, в которых природа информации требует использования специальной однозадачной – или одноконтекстной – программы. В этом случае остерегайтесь, пожалуй, единственного самого большого изъяна в большинстве приложений, которые я использовал: недостаток удобной (или вообще какой-либо) онлайн-помощи. В книге Джо Велински (Joe Welinske) о поддержке мобильных пользователей обсуждается, как вы можете организовать такую помощь.

 

02

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

 

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

Решения информационного дизайна

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

  • Минимизируйте количество слов. Даже для поколений, предшествующих поколению TLDR, большинство людей испытывает недостаток времени на чтение всего, что хотят прочитать. Так что краткость необходима. Как отмечает Джинни Редиш (Ginny Redish) в «Отпускании слов/Letting Go of the Words», чтобы хорошо писать, необходимо не только выбирать правильные слова, и это утверждение особенно верно для мобильных устройств.
  • Необязательно минимизировать сложность вашей информации. Минимизируйте её воспринимаемый информационный дизайн, и принципы информационной архитектуры позволят вам представить сложный контент таким образом, чтобы информация стала восприниматься легче, чем она есть на самом деле. Никогда не наказывайте пользователей за использование мобильных устройств «дебилизацией» своего контента.
  • Отделяйте контент от его представления. Решения контент-менеджмента позволяют структурировать информацию в повторно используемые отрывки, так что вы можете выразить ту же информацию по-разному в разных контекстах.
  • Минимизируйте размер файлов. Хотя ширина канала, доступного для получения информации на мобильные устройства, увеличивается с каждым годом, в настоящий момент вы не можете сравнивать нормы для пользователей, у которых Wi-Fi или мобильный Интернет, и для пользователей, имеющих проводной доступ. Вы также не можете рассчитывать на то, что у них такой же большой размер ОЗУ и дисковое пространство, как на ноутбуках или компьютерах. Поэтому необходимо придерживаться небольших размеров изображений и самих страниц.
  • Разрабатывайте информацию с самого начала таким образом, чтобы её можно было адаптировать для различных вместилищ. Например, определяйте размер изображений в процентах от ширины экрана вместо того, чтобы выставлять фиксированные размеры в пикселях, и выбирайте форматы изображений, качество которых снижается на устройствах с низким разрешением не сильно (например, используйте масштабируемую векторную графику вместо точечных рисунков). Также показывайте изображения таким образом, чтобы читатели могли легко изменять масштаб; я часто сталкиваюсь с дизайнами фиксированных размеров, что препятствует увеличению масштаба изображений, которые по-моему слишком малы для просмотра.
  • Ищите способы избежать табличной информации, если ожидаете, что информация будет использоваться на телефонах: большие таблицы вызывают особые проблемы. Возможно, придётся переделать дизайн таблиц в использование других форматов, например, в комбинации заголовков плюс маркированные списки или серию упрощённых сравнений, позволяющих сравнить информацию, представленную только в одной или двух строках или колонках таблицы за один раз.
  • Разбивайте информацию на «куски», создавая коллекции близкородственной информации, которая работает как единый элемент. Например, имя человека и почтовый адрес вместе составляют законченный кусок адреса.
  • Используйте минимализм, как с точки зрения упрощения интерфейса, так и с точки зрения философии дизайна Джона Кэрролла (John Carroll), это поощряет просмотр.
  • Минимизируйте количество нажатий для достижения цели. Читатели будут продолжать следовать по ссылкам до тех пор, пока их поведение поощряется. Где это применимо и возможно, используйте «глубокое линкование» — ссылки, которые отправляют пользователя непосредственно на страницу на несколько уровней ниже в иерархии: так им не приходится прокладывать путь через все промежуточные страницы. Целью должно быть получение должного баланса между широтой и глубиной информационной иерархии.
  • Помните, что «отпечаток» пальца намного больше, чем курсор мыши, так что цели для нажатия должны быть для мобильных сайтов больше, чем для клика мышкой на большом мониторе. Это отнимает приличный участок экрана, но может не быть другой альтернативы, если вы хотите выпускать функционально отзывчивый дизайн; если вы будете заставлять аудиторию заниматься постоянным изменением масштаба, они просто могут и не суметь проследовать по ссылке.

Принципы графического дизайна также могут оживить ваши отзывчивые дизайны:

  • Используйте контрасты в расположении, размере и цвете, чтобы явно группировать похожие элементы и отделять их от непохожих.
  • Используйте скевоморфизм, где он служит полезным целям — или там, где он не навредит, а улучшит эстетическую сторону.
  • Повторяйте информацию, уменьшающую когнитивную нагрузку навигации, например, визуальные якоря, навигационные ссылки, подвижные заголовки и «хлебные крошки» (информация, показывающая путь, который вы проделали, чтобы достигнуть текущей страницы).
  • Выравнивайте отрывки информации, чтобы указать визуальный путь читателя по страницам. Например, используйте выровненные границы и отступы абзацев, чтобы подчеркнуть иерархию и направить взгляд. Симметрия и асимметрия также могут выполнять эту функцию.
  • Уравновешивайте использование текста и графики; используйте правильную середину для каждой коммуникационной цели.
  • Адаптируйте все эти принципы в связи с контекстом. Например, яркий свет, обычный для улицы, требует высококонтрастный дизайн, тогда как шумная среда или среда вроде кинотеатра, требующая тишины, могут сделать такие голосовые интерфейсы, как Apple Siri или Microsoft Cortana невозможными для использования.

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

Технологические решения

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

  • Если только вы не предлагаете специфическое приложение для вашей аудитории, не пытайтесь разрабатывать веб-сайт для специфических особенностей браузера. Слишком много браузеров существует, и определить, какой именно будет использовать аудитория, уже невозможно. Вместо этого выберите более простой подход, который будет работать для большинства правильно разработанных браузеров и который будет незначительно уступать в качестве для неправильно разработанных.
  • Если возможно определить какие-либо характеристики браузера, такие как тип устройства или размер экрана, автоматически (с помощью медиа-запросов CSS, например), вы можете использовать эту информацию для загрузки подходящей таблицы стилей под этот контекст.
  • Избегайте использования Flash. Как я где-то написал, основанные на Flash сайты быстро становятся «сказом, рассказанным идиотом, полным звуков и неистовства, не означающего ровным счётом ничего». Flash лучше всего подходит для анимации и может быть неуправляемым на устройстве с ограниченной памятью, относительно медленным процессором или медленным интернет-соединением. (Также его выполнение на вашем сайте не подходит для устройств Apple). Так же, как и в случае, когда вы выбираете PDF вместо HTML или EPUB, выбор Flash также сокращает лояльность пользователей, потому что они теряют контроль над изображением. Если вам необходимо использовать Flash, предлагайте небольшие, быстро загружаемые версии; для простой анимации вместо этого рассмотрите использование анимированных GIF-файлов или серийную анимацию.
  • Избегайте окон, всплывающих поверх, снизу, сбоку, и других навязчивых второстепенных окон. Они практически всегда имеют значение для нужд дизайнера, а не пользователя. Конечно, если ваш сайт финансируется в первую очередь от входящей рекламы, может быть необходимо найти другое решение, например, баннерную рекламу, спонсорские ссылки или «адверториалы».
  • Минимизируйте количество скриптов. Где это возможно, запускайте код на своём веб-сервере вместо необходимости запускать его на мобильных устройствах пользователей. (Это также даёт намного более сильный контроль над безопасностью, что является всё более важной частью опыта пользователя).
  • Избегайте «текста поверх» и «подсказок». С применением подобной информации для использования на мобильных устройствах могут возникнут трудности, потому что пользователям сложно узнать, что эта информация существует, и задержать палец достаточно долго до появления скрытого текста, отображающегося без включения функции, которая описана в тексте. Это неочевидная функция дизайна; поэтому многие пользователи никогда не узнают, что там за информация, а небрежное нажатие может увести их с вашего основного сайта.
  • Несмотря на то, что набирать текст на планшетах становится проще, это всё ещё не так легко, как на настоящей клавиатуре, и по-прежнему остаётся сложным на телефонах и фаблетах. Поэтому поищите способы ввести такие упрощения, как предугадывающийся текст (например, некоторые интернет-магазины начинают показ ключевых слов категорий, как только вы введёте несколько букв в поле поиска) или списки для выбора (например, выпадающие меню, умные меню в виде вращающегося колеса на iPhone и iPad). Это также подходит для отображения навигационных ссылок.
  • В формах создавайте достаточно большие поля, чтобы даже пользователи с большими пальцами могли выбрать правильное поле.

Рассмотрите использование «прогрессивного раскрытия», при котором вы акцентируетесь на ключевом контенте для отдельно взятой страницы и отображайте неключевой контент только тогда, когда пользователь его запрашивает. Это даёт пользователям возможность решить, какое подмножество большего набора информации необходимо отображать в каждый конкретный момент. Использование скрывающегося и раскрывающегося иерархического меню, которое отображает различные уровни контента — хороший пример прогрессивного раскрытия. Однако имейте в виду, что необязательный текст хранится в базе данных и не пригоден для поисковиков, это может неблагоприятно сказаться на поисковой оптимизации. Недавно произошла показательная проблема, когда Google модифицировал свои поисковые алгоритмы в сторону понижения рейтинга сайтов, которые не оптимизированы для мобильных устройств. С положительной стороны, они предлагают некоторые удобные инструменты для стимулирования использования их нового подхода:

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

 

TechWhirl.com оптимизирован для мобильных устройств, у него минимальный дизайн, который объединён с прогрессивным раскрытием (это изображение получено на Samsung Galaxy 6).

TechWhirl.com оптимизирован для мобильных устройств, у него минимальный дизайн, который объединён с прогрессивным раскрытием (это изображение получено на Samsung Galaxy 6).

 

Решения, сфокусированные на человеке

Я начал эту статью, сделав акцент на важность дизайна, сфокусированного на человеке. Ниже указано несколько простых стратегий, которые вы можете использовать, чтобы учесть человеческие аспекты отзывчивого дизайна:

  • Периодически изучайте аналитические данные на вашем веб-сервере, чтобы увидеть, что нового вы можете узнать о свойствах ваших посетителей.
  • Предлагайте явные, легко доступные ссылки, позволяющие посетителям предоставить обратную связь. Вы не можете учиться у вашей аудитории, если не позволяете им быть услышанными. Предоставьте хорошо видимую ссылку на контактную информацию в верхней части каждой странице, не скрывайте её внизу. Ещё лучше — расположите эту ссылку вверху и внизу каждой страницы.
  • Уделите внимание собственному опыту: если вас что-то раздражает, не перекладывайте это на свою аудиторию. («Золотое правило» применимо в любых областях человеческого взаимодействия, включая Сеть). Если вы новичок в дизайнерской профессии, поищите вдохновение в других разработках и поиграйте ими, пока не поймёте, почему они работают — или не работают.
  • Продумайте использование ваших отношений с аудиторией. Защитное программное обеспечение для мобильных устройств пока не такое серьёзное (особенно на Android-устройствах), как на компьютерах, так что примените дополнительные усилия для того, чтобы сохранить ваш сайт защищённым. В частности, поищите решения, которые контролируете вы (например, особенное внимание обратите на HTTPS-подключения вместо разрешения незащищённых HTTP-подключений), вместо возложения ноши обеспечения безопасности на пользователя.

Наконец, не забывайте одно из мучительно добытых открытий, полученных из дизайна сфокусированных на пользователе программ: не попадайте в капкан акцентирования на функциях программного обеспечения, вместо этого фокусируйтесь на нуждах пользователя. Функции определяются этими нуждами, и никак иначе.

Заключение

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

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

Хотя отзывчивый дизайн имеет заслуживающие доверие перспективы, это не панацея. Этот подход может исключить необходимость в создании и поддержке полностью различных веб-сайтов для десктопных и мобильных пользователей, но он не исключит необходимости в тестировании. Грубый и предварительный — но при этом удивительно эффективный — тест заключается в том, чтобы открыть сайт в веб-браузере на десктопном компьютере, а затем постепенно изменять размер окна, пока он не достигнет размера большого планшета, маленького планшета, фаблета и смартфона, так вы сможете увидеть, насколько сильно ухудшается удобство использования. Для более серьёзного тестирования производительности вашего сайта вам потребуются настоящие телефоны и планшеты с операционными системами Apple iOS и Google Android, чтобы убедиться, что сайт работает достаточно хорошо на всех платформах. Вы можете использовать эмуляторы и программы для тестирования для выявления явных проблем. Однако эмуляторы не идеальны, так что, когда исправите наиболее очевидные проблемы, вам необходимо будет протестировать сайт снова, используя актуальные устройства. Мудрым подходом будет проведение небольших тестов на определённых ключевых разделах сайта, пока вы не поймёте проблемы дизайна, а также использование знаний, которые вы подчерпнули, для распространения отзывчивого дизайна на другие области вашего сайта.

Когда я читаю статьи с советами, такие, как эта, то всегда спрашиваю себя, следует ли автор своим собственным советам. В этом смысле я признаю, что всё ещё нахожусь в пути. Основной способ навигации на моём сайте – горизонтальная навигационная панель фиксированной ширины, расположенная по верху каждой страницы; хотя она не изменяет размеры в зависимости от различных экранов, она сносно работает на экранах с большим разрешением, какие используются на самых актуальных моделях смартфонов. Что более важно, ключевые по значимости элементы на моём сайте — текстовые, и текст на большинстве страниц отзывчивый: он изменяется для заполнения окна любого размера, и вы можете переопределить мной выбранный шрифт, изменяя настройки своего браузера.

Библиография

Goodwin, K. 2009. Designing for the digital age: how to create human-centered products and services. Wiley Publishing, Inc., 739 p., including index.

Redish, G. 2012. Letting go of the words: writing Web content that works. 2nd ed. Morgan Kaufmann, 368 p.

Welinske, J. 2014. Developing user assistance for mobile apps. 400 p.


 

Источник: Optimizing the Mobile Web-browsing Experience through Responsive Design

Тэги: , , ,

< Вернуться к списку публикаций

Облако тегов