Сначала мобильные! - Люк Вроблевски

• Объединили и максимально уменьшили размер файлов CSS и JavaScript.

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

• Ограничили использование CSS-сеток.

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

• По возможности использовали такие HTML5-функ: ции современных браузеров, как Canvas (http://bkaprt.com/ mf/29) и AppCache (http://bkaprt.com/mf/30).

И моя любимая рекомендация: используйте CSS3 для скругленных углов, градиентов, теней текста и HTML-объектов.

Это позволит вам избавиться от необходимости публиковать картинки по всему сайту — в современных мобильных браузерах сайт будет выглядеть прекрасно; кроме того, он будет смотреться вполне достойно даже в браузерах, не обеспечивающих полную поддержку CSS3.

Однако не стоит перегружать сайт тяжелыми CSS3-эффектами, так как это может снизить результативность работы браузера.

Скорость важна не только для мобильных сайтов. Как показывают результаты тестов, проведенных Amazon, Yahoo! Microsoft и многими другими компаниями, даже небольшая задержка (100 миллисекунд) при работе в Сети может заставить пользователя покинуть сайт. Многолетние исследования компании Google показали, что низкая эффективность имеет отсроченный эффект: даже после того, как проблема задержки была решена, посетители в течение пяти недель менее активно заходили на такие сайты (http://bkaprt.com/mf/31). Так что эффективность имеет значение и для стационарных компьютеров.

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

Время и место

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

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

Место.

Разработчики мобильных приложений зачастую представляют пользователя как спешащего куда-то по оживленной улице бизнесмена. Конечно, бывает и так, но на самом деле список мест, где люди постоянно прибегают к помощи мобильных устройств, гораздо более разнообразен. Вот результаты опроса (http://bkaprt.com/mf/32), целью которого было выяснить, где люди обычно используют смартфоны. Оказалось, что они делают это:

• дома (84 % опрошенных);

• в различных ситуациях в течение дня (80 %);

• ожидая кого-либо или стоя в очередях (74 %);

• в магазинах (69 %);

• на работе (64 %);

• во время просмотра телепередач (62 %; другое исследование называет цифру 84 %);

• во время поездок на общественном транспорте (47 %).

Тот факт, что 84 % опрошенных пользуются мобильными устройствами дома, говорит о многом. Оказывается, типичный пользователь мобильного приложения — это не спешащий бизнесмен, а человек, который находится у себя дома.

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

Размышляя о тех, кто обращается к мобильным приложениям, я представил себе человека, который использует один глаз и один палец. «Один палец» — потому что именно так мы обычно управляем мобильным устройством, а «один глаз» — поскольку в большинстве случаев нас непременно что-то отвлекает.

Кто-то, стоя в очереди, решил узнать счет футбольного матча; кто-то держит в одной руке мобильное устройство, а в другой — руку ребенка; кто-то едет в переполненном вагоне метро на работу, а кто-то удобно устроился на диване перед телевизором. Ясно представив себе этот образ — «один глаз и один палец», вы поймете, почему дизайн для мобильных устройств должен быть максимально простым. Только тогда потребители смогут эффективно использовать их в самых разных ситуациях.

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

Время.

Несмотря на то что компьютеры доступны нам в любое время суток, все же в течение дня одни устройства мы используем чаще, чем другие. Рис. 2.5 показывает, сколько статей прочитывают каждый час пользователи сервиса Read It Later со стационарных ПК и ноутбуков. Число материалов стабильно растет до полудня, а затем падает и остается низким вплоть до окончания рабочего дня (до 6–9 часов вечера).

Второй график (рис. 2.6) отображает количество статьей, ежечасно прочитываемых пользователями iPhone. Здесь можно выделить четыре основных пика: 6 часов утра (завтрак); 9 часов утра (дорога на работу и начало рабочего дня); 5–6 часов вечера (окончание рабочего дня и дорога домой); 8-10 часов вечера (отдых, свободное время, чтение в постели).

На графиках хорошо видно, что периоды использования компьютеров и мобильных устройств не совпадают. С планшетами ситуация еще интереснее. Чтобы наглядно продемонстрировать, как различные устройства влияют на сайты или приложения, приведу график, отображающий динамику прочтения статей пользователями Read It Later, заходящими на сайт со своих iPad (рис. 2.7). Несмотря на небольшой всплеск активности утром и постоянное обращение к услугам сервиса в течение дня, основной объем трафика приходится на вечер, когда люди ложатся в кровать. Я и сам читаю в постели — но, клянусь, только статьи по веб-дизайну.

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

График наглядно иллюстрирует одну характерную особенность: владельцы мобильных устройств задействуют их в течение коротких промежутков времени (именно поэтому пики оказываются столь резкими). Рэйчел Хинман из Nokia, описывая различия в поведении пользователей при работе со стационарными компьютерами и мобильными устройствами, провела замечательную аналогию: она назвала первых «аквалангистами», а вторых — «ныряльщиками» (http://bkaprt. com/mf/34).

С каждым днем появляется все больше веб-приложений для мобильных устройств, позволяющих выполнять короткие, импульсивные действия и способных на протяжении всего дня быстро обеспечить потребителей необходимой им актуальной информацией. Доступ к Facebook через мобильные браузеры всего за один год вырос на 112 %, а к Twitter — на 347 % (http://bkaprt.com/mf/18)! Оба сервиса идеально подходят для кратких погружений в океан последних новостей вашей френд-ленты.

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

Чем хороши ограничения

Мобильные устройства имеют несколько естественных ограничений, которые, на первый взгляд, могут сужать ваши возможности при проектировании мобильных приложений. Речь идет о небольшом размере экрана, о низкой скорости, о том, что пользователи обращаются к вашему приложению на короткое время или уделяют ему мало внимания. Разрабатывая дизайн по принципу «сначала мобильные!», вы будете вынуждены учитывать все эти ограничения. Но именно они заставляют нас находить элегантные решения. И преимущества такого подхода не ограничиваются мобильными устройствами.

Небольшой размер экрана заставляет определить, какой контент действительно важен для клиентов и компании.

Для всего остального просто нет места. Медленная связь и ограничения трафика вынуждают вас предельно упрощать и облегчать сайты, чтобы ускорить их загрузку.