Страница:
Как отмечает эксперт по мобильному бизнесу Джейсон Григсби, «веб-ссылки не открывают приложения, они направляют вас на веб-страницы» (http://bkaprt.com/mf/24). Если у вас есть контент в Сети, то пользователи найдут его и расскажут о нем другим – через системы поиска, по электронной почте, через социальные сети или на своих веб-страницах. Отсутствие мобильного веб-решения означает, что пользователь, который пойдет по ссылкам на ваш ресурс с мобильного устройства, не увидит ничего хорошего (а то и вообще не сможет получить доступ к контенту). И наличие нативного приложения ситуации не изменит (рис. 1.4).
Рис. 1.4. Несмотря на наличие нативных приложений для iOS, Android, Blackberry и Palm, геолокационный сервис Gowalla имеет также и мобильное веб-приложение, на которое пользователи попадают по ссылкам на других сайтах
Для пользователя главное преимущество мобильных устройств – их доступность. Даже если вы решили создать нативное приложение для одной или нескольких платформ, велика вероятность, что все существующие платформы вам охватить не удастся. Для Apple iOS требуется Objective C, а для Google Android – Java; программы для Microsoft Windows Phone 7 пишутся на Silverlight, для Samsung Bada – на C++, а для Blackberry от RIM – на базе Java, WebWorks и Adobe Air. Мало кто способен одновременно вести разработку с использованием всех перечисленных технологий. И даже если у вас получится создать нативные приложения для каждой платформы, расходы на их поддержку могут оказаться непомерными.
Кроме того, не исключено, что именно Сеть обеспечит вам максимум посетителей. Например, 14 % пользователей Twitter заходят в сеть через браузер, 8 % – при помощи нативного приложения для iPhone, и 7 % – нативного приложения для Blackberry. На долю остальных платформ приходится менее 4 % (http://bkaprt.com/mf/25).
То же самое можно сказать и о Facebook. Около 19 % постов в Facebook отправляются с мобильного сайта, в то время как с использованием нативных приложений для iPhone, Android и Blackberry публикуются лишь по 4 % сообщений (http://bkaprt.com/mf/26). Причина все та же – доступность мобильного сайта на любых платформах.
Скажу больше: наличие нативного приложения зачастую стимулирует пользователей применять мобильный веб.
Каждый раз, когда вы делитесь ссылкой или нажимаете на нее в нативном приложении, она открывается в окне браузера. Таким образом, увеличение числа нативных приложений приводит к росту мобильного трафика.
Веб-приложения не требуют от пользователя загрузки обновлений (сайт обновляется непосредственно на сервере, на котором располагается). С их помощью можно постоянно исследовать предпочтения пользователей, сравнивая, как они реагируют на различные варианты интерфейса (A/B-тестирование). Если какие-то из перечисленных факторов для вас важны, имеет смысл отдать предпочтение мобильному вебу.
И наверное, лучше всего начинать с мобильного решения хотя бы потому, что у вас уже имеются навыки в области веб-дизайна и развития проектов. Стартовать можно в любой момент. В сущности, я думаю, стартовать следует прямо сейчас.
http://bkaprt.com/mf/27) получают доступ при помощи мобильных устройств. Они в два раза активнее тех, кто заходит на сайт со стационарного компьютера или ноутбука.
Для пользователя главное преимущество мобильных устройств – их доступность. Даже если вы решили создать нативное приложение для одной или нескольких платформ, велика вероятность, что все существующие платформы вам охватить не удастся. Для Apple iOS требуется Objective C, а для Google Android – Java; программы для Microsoft Windows Phone 7 пишутся на Silverlight, для Samsung Bada – на C++, а для Blackberry от RIM – на базе Java, WebWorks и Adobe Air. Мало кто способен одновременно вести разработку с использованием всех перечисленных технологий. И даже если у вас получится создать нативные приложения для каждой платформы, расходы на их поддержку могут оказаться непомерными.
Кроме того, не исключено, что именно Сеть обеспечит вам максимум посетителей. Например, 14 % пользователей Twitter заходят в сеть через браузер, 8 % – при помощи нативного приложения для iPhone, и 7 % – нативного приложения для Blackberry. На долю остальных платформ приходится менее 4 % (http://bkaprt.com/mf/25).
То же самое можно сказать и о Facebook. Около 19 % постов в Facebook отправляются с мобильного сайта, в то время как с использованием нативных приложений для iPhone, Android и Blackberry публикуются лишь по 4 % сообщений (http://bkaprt.com/mf/26). Причина все та же – доступность мобильного сайта на любых платформах.
Скажу больше: наличие нативного приложения зачастую стимулирует пользователей применять мобильный веб.
Каждый раз, когда вы делитесь ссылкой или нажимаете на нее в нативном приложении, она открывается в окне браузера. Таким образом, увеличение числа нативных приложений приводит к росту мобильного трафика.
Веб-приложения не требуют от пользователя загрузки обновлений (сайт обновляется непосредственно на сервере, на котором располагается). С их помощью можно постоянно исследовать предпочтения пользователей, сравнивая, как они реагируют на различные варианты интерфейса (A/B-тестирование). Если какие-то из перечисленных факторов для вас важны, имеет смысл отдать предпочтение мобильному вебу.
И наверное, лучше всего начинать с мобильного решения хотя бы потому, что у вас уже имеются навыки в области веб-дизайна и развития проектов. Стартовать можно в любой момент. В сущности, я думаю, стартовать следует прямо сейчас.
http://bkaprt.com/mf/27) получают доступ при помощи мобильных устройств. Они в два раза активнее тех, кто заходит на сайт со стационарного компьютера или ноутбука.
Комбинация решений для мобильных устройств и компьютеров повышает вовлеченность пользователей обоих типов. Это происходит потому, что Facebook не расценивает свой мобильный сайт как дополнение к основному, а использует его, чтобы сделать ресурс более удобным для всех посетителей.
Джо Хьюитт, в прошлом ведущий разработчик приложения Facebook для iPhone, говорит:
Изначально мы рассматривали мобильное веб-приложение только в качестве вспомогательного сервиса, но я быстро понял, что могу создать версию, которая будет гораздо лучше, чем основной сайт.
В сущности, в его словах заключена основная идея стратегии развития мобильных приложений.
А теперь зададимся следующим вопросом: каким образом ограничения и возможности мобильных устройств помогут нам достичь заветной цели?
2. Ограничения
Несомненно, невероятный рост использования Интернета через мобильные устройства связан с улучшением их характеристик, однако сами эти устройства имеют и серьезные ограничения. У них маленькие экраны, телефонные сети зачастую ненадежны, да и доставать телефон иногда бывает просто неудобно. Но на самом деле все эти ограничения полезны, и не только для бизнеса, но и для самого дизайна.
Со мной согласятся все те, кто считает, что для достижения совершенства необходимо отсекать все лишнее и необязательное. Другими словами, ограничения надо приветствовать, а не бороться с ними – это позволит нам сделать дизайн лучше.
Со мной согласятся все те, кто считает, что для достижения совершенства необходимо отсекать все лишнее и необязательное. Другими словами, ограничения надо приветствовать, а не бороться с ними – это позволит нам сделать дизайн лучше.
Размер экрана
На протяжении многих лет в дизайнерском сообществе горячо обсуждалась тема пространства на экране стационарных компьютеров. В итоге мы сошлись на том, что будем считать стандартом размер 1024 × 768 пикселей. Однако мобильные устройства сжимают наш огромный песчаный пляж до размеров песочницы.
Первое поколение смартфонов на платформах iOS, Android и WebOS имели экраны разрешением 320 × 480 пикселей, что составляет примерно 20 % экрана обычного компьютера. Таким образом, 80 % всех ссылок, рекламных объявлений, текстов, картинок и прочих элементов прежнего дизайна должны были либо найти себе новое место, либо исчезнуть. На экране мобильного телефона им просто не хватало пространства. И это… прекрасно!
Как только вы поймете, каким количеством бессмысленных навигационных элементов, пустого контента и неэффективных рекламных баннеров завален типичный сайт, вам станет очевидно, почему мобильная «диета» может оказаться полезной как для самих владельцев сайта, так и для их клиентов. Как только потребитель начинает использовать мобильную версию, он хочет, чтобы и версия для обычного компьютера стала «поскромнее».
Давайте посмотрим на сайт авиакомпании Southwest Airlines (рис. 2.1), отвечающий, как кажется, на все возникающие у клиентов вопросы – даже те, которые они никогда не зададут. Добавлять новые элементы на сайт довольно легко, поэтому на веб-страницах размещаются горы контента – особенно при наличии множества заинтересованных сторон.
Рис. 2.1. На сайте Southwest Airlines каждый пиксель заполнен рекламным призывом или важным сообщением
Требования к сайтам весьма разнообразны: владельцы хотят одного, пользователям нужно другое. Поэтому при разработке дизайна страницы часто приходится искать баланс между различными рекламными предложениями, контентными модулями, вариантами навигации… На экране 1024 × 768 так много свободных пикселей!
Мобильное решение (в данном случае нативное приложение Southwest для iPhone) позволяет максимально сконцентрироваться на том, что нужно клиенту: бронировании путешествий, регистрации на рейс, проверке расписания, расчете призовых миль и получении уведомлений (рис. 2.2). Ничего лишнего – лишь то, что может понадобиться в первую очередь.
Рис. 2.2. Приложение Southwest Airlines для iPhone содержит лишь самое необходимое
Ограниченное пространство дисциплинирует разработчиков. На небольшом экране им необходимо представить набор свойств, наиболее важных для бизнеса и клиентов. Для сложных интерфейсов или контента сомнительной ценности просто нет места. Приходится оставлять самое важное.
А для этого нужно хорошо знать и своих клиентов, и суть бизнеса. Нравится вам это или нет.
Чтобы еще раз проиллюстрировать эту мысль, предлагаю взглянуть на сайт популярного фотохостинга Flickr. Многие из вас наверняка с ним знакомы. В течение многих лет сайт активно развивался, в результате в одном только верхнем навигационном меню появилось около 60 пунктов (рис. 2.3).
Рис. 2.3. Одновременная демонстрация всех возможностей верхнего меню Flickr
Когда же пришло время для создания мобильного приложения, команда Flickr смогла выбрать из 60 опций шесть наиболее важных. Каким образом они это сделали? Просто Flickr знали, чего ждут их клиенты. Большинство пользователей этого сервиса заходят на сайт, чтобы проверить свои фотоальбомы, просмотреть новые фотографии друзей или взглянуть на самые популярные изображения. Мобильная версия сайта ставит во главу угла именно эти функции (рис. 2.4).
Рис. 2.4. При разработке мобильной версии Flickr прежние 60 навигационных опций были сокращены до шести
Начиная разработку мобильного веб-приложения, необходимо прежде всего определить, что считать самым важным. Впоследствии тот же подход вы можете применить при проектировании версий для стационарных компьютеров или других устройств. Если вы уже определились с тем, какие свойства будут основными для ваших клиентов и вашего бизнеса, то почему эти приоритеты должны меняться, как только в вашем распоряжении окажется больше экранного пространства?
Конечно, поведение посетителей обычного сайта и его мобильной версии будет в чем-то различаться. Однако главная ценность любого веб-сервиса остается неизменной и не зависит от форматов и устройств. В сущности, клиенты ожидают от мобильной версии практически того же, что и от версии для большого экрана. Особенно это справедливо для тех, кто выходит в Интернет преимущественно с мобильных устройств. Поэтому не зацикливайтесь на простоте мобильных приложений, лучше подумайте о том, что действительно важно для ваших пользователей.
Подход «сначала мобильные!» предполагает, что конечный результат будет обеспечивать решение наиболее важных для пользователей задач, поэтому при проектировании сайтов разработчикам необходимо безжалостно избавляться от избыточного интерфейса, пустого контента и всего того мусора, которым сегодня заполнены многие интернет-ресурсы. На экране размером 320 × 480 пикселей для всего этого просто нет места.
Первое поколение смартфонов на платформах iOS, Android и WebOS имели экраны разрешением 320 × 480 пикселей, что составляет примерно 20 % экрана обычного компьютера. Таким образом, 80 % всех ссылок, рекламных объявлений, текстов, картинок и прочих элементов прежнего дизайна должны были либо найти себе новое место, либо исчезнуть. На экране мобильного телефона им просто не хватало пространства. И это… прекрасно!
Как только вы поймете, каким количеством бессмысленных навигационных элементов, пустого контента и неэффективных рекламных баннеров завален типичный сайт, вам станет очевидно, почему мобильная «диета» может оказаться полезной как для самих владельцев сайта, так и для их клиентов. Как только потребитель начинает использовать мобильную версию, он хочет, чтобы и версия для обычного компьютера стала «поскромнее».
Давайте посмотрим на сайт авиакомпании Southwest Airlines (рис. 2.1), отвечающий, как кажется, на все возникающие у клиентов вопросы – даже те, которые они никогда не зададут. Добавлять новые элементы на сайт довольно легко, поэтому на веб-страницах размещаются горы контента – особенно при наличии множества заинтересованных сторон.
Требования к сайтам весьма разнообразны: владельцы хотят одного, пользователям нужно другое. Поэтому при разработке дизайна страницы часто приходится искать баланс между различными рекламными предложениями, контентными модулями, вариантами навигации… На экране 1024 × 768 так много свободных пикселей!
Мобильное решение (в данном случае нативное приложение Southwest для iPhone) позволяет максимально сконцентрироваться на том, что нужно клиенту: бронировании путешествий, регистрации на рейс, проверке расписания, расчете призовых миль и получении уведомлений (рис. 2.2). Ничего лишнего – лишь то, что может понадобиться в первую очередь.
Ограниченное пространство дисциплинирует разработчиков. На небольшом экране им необходимо представить набор свойств, наиболее важных для бизнеса и клиентов. Для сложных интерфейсов или контента сомнительной ценности просто нет места. Приходится оставлять самое важное.
А для этого нужно хорошо знать и своих клиентов, и суть бизнеса. Нравится вам это или нет.
Чтобы еще раз проиллюстрировать эту мысль, предлагаю взглянуть на сайт популярного фотохостинга Flickr. Многие из вас наверняка с ним знакомы. В течение многих лет сайт активно развивался, в результате в одном только верхнем навигационном меню появилось около 60 пунктов (рис. 2.3).
Когда же пришло время для создания мобильного приложения, команда Flickr смогла выбрать из 60 опций шесть наиболее важных. Каким образом они это сделали? Просто Flickr знали, чего ждут их клиенты. Большинство пользователей этого сервиса заходят на сайт, чтобы проверить свои фотоальбомы, просмотреть новые фотографии друзей или взглянуть на самые популярные изображения. Мобильная версия сайта ставит во главу угла именно эти функции (рис. 2.4).
Начиная разработку мобильного веб-приложения, необходимо прежде всего определить, что считать самым важным. Впоследствии тот же подход вы можете применить при проектировании версий для стационарных компьютеров или других устройств. Если вы уже определились с тем, какие свойства будут основными для ваших клиентов и вашего бизнеса, то почему эти приоритеты должны меняться, как только в вашем распоряжении окажется больше экранного пространства?
Конечно, поведение посетителей обычного сайта и его мобильной версии будет в чем-то различаться. Однако главная ценность любого веб-сервиса остается неизменной и не зависит от форматов и устройств. В сущности, клиенты ожидают от мобильной версии практически того же, что и от версии для большого экрана. Особенно это справедливо для тех, кто выходит в Интернет преимущественно с мобильных устройств. Поэтому не зацикливайтесь на простоте мобильных приложений, лучше подумайте о том, что действительно важно для ваших пользователей.
Подход «сначала мобильные!» предполагает, что конечный результат будет обеспечивать решение наиболее важных для пользователей задач, поэтому при проектировании сайтов разработчикам необходимо безжалостно избавляться от избыточного интерфейса, пустого контента и всего того мусора, которым сегодня заполнены многие интернет-ресурсы. На экране размером 320 × 480 пикселей для всего этого просто нет места.
Эффективность
Мобильными устройствами мы готовы пользоваться всегда и везде, но мобильные сети зачастую не дают нам этого делать. Даже при наличии сети путешествие по Интернету может оказаться достаточно дорогостоящим удовольствием (это зависит от тарифа), соединение – не всегда стабильным, скорость соединения – невысокой, а значит, придется нервничать в ожидании загрузки очередной страницы.
Такова реальность, и, проектируя дизайн для мобильных устройств, необходимо ее учитывать. Все, что можно сделать для того, чтобы повысить эффективность работы вашего мобильного сайта, должно быть сделано. На практике это означает снижение интенсивности обмена данными и использование всех доступных методов для ускорения загрузки и сокращения трафика между сервером и мобильным устройством.
Если вы будете управлять размерами и количеством отправляемых на устройства файлов (то есть HTTP-запросами), ваши пользователи смогут загружать меньшие объемы данных, а значит, не только быстрее получать всю необходимую информацию, но и существенно экономить на оплате счетов. Ни для кого не секрет, что из-за задержек с передачей сигнала каждый HTTP-запрос, сделанный с мобильных устройств, способен изрядно ударять по карману. Поэтому убедитесь, что вы:
• Использовали «спрайты[4]» для группировки нескольких изображений в единый закодированный файл. (Главное, чтобы при раскодировании он не оказался слишком большим!)
• Объединили и максимально уменьшили размер файлов CSS и JavaScript.
• Ограничили использование и вообще постарались избегать зависимости от тяжелых библиотек JavaScript, особенно если они применяются всего для одной-двух функций.
• Ограничили использование CSS-сеток.
• Применили соответствующие HTTP-заголовки, для того чтобы нужные файлы правильно сохранялись в кэше браузера.
• По возможности использовали такие HTML5-функции современных браузеров, как Canvas (http://bkaprt.com/mf/29) и AppСache (http://bkaprt.com/mf/30).
И моя любимая рекомендация: используйте CSS3 для скругленных углов, градиентов, теней текста и HTML-объектов. Это позволит вам избавиться от необходимости публиковать картинки по всему сайту – в современных мобильных браузерах сайт будет выглядеть прекрасно; кроме того, он будет смотреться вполне достойно даже в браузерах, не обеспечивающих полную поддержку CSS3.
Однако не стоит перегружать сайт тяжелыми CSS3-эффектами, так как это может снизить результативность работы браузера.
Скорость важна не только для мобильных сайтов. Как показывают результаты тестов, проведенных Amazon, Yahoo! Microsoft и многими другими компаниями, даже небольшая задержка (100 миллисекунд) при работе в Сети может заставить пользователя покинуть сайт. Многолетние исследования компании Google показали, что низкая эффективность имеет отсроченный эффект: даже после того, как проблема задержки была решена, посетители в течение пяти недель менее активно заходили на такие сайты (http://bkaprt.com/mf/31). Так что эффективность имеет значение и для стационарных компьютеров.
Если вы следуете принципу «сначала мобильные!» и разрабатываете веб-приложения с учетом нестабильности мобильных сетей, то на обычных компьютерах они будут загружаться с поразительной скоростью. Это наверняка понравится вашим клиентам – вот вам и дополнительные преимущества такого подхода.
Такова реальность, и, проектируя дизайн для мобильных устройств, необходимо ее учитывать. Все, что можно сделать для того, чтобы повысить эффективность работы вашего мобильного сайта, должно быть сделано. На практике это означает снижение интенсивности обмена данными и использование всех доступных методов для ускорения загрузки и сокращения трафика между сервером и мобильным устройством.
Если вы будете управлять размерами и количеством отправляемых на устройства файлов (то есть HTTP-запросами), ваши пользователи смогут загружать меньшие объемы данных, а значит, не только быстрее получать всю необходимую информацию, но и существенно экономить на оплате счетов. Ни для кого не секрет, что из-за задержек с передачей сигнала каждый HTTP-запрос, сделанный с мобильных устройств, способен изрядно ударять по карману. Поэтому убедитесь, что вы:
• Использовали «спрайты[4]» для группировки нескольких изображений в единый закодированный файл. (Главное, чтобы при раскодировании он не оказался слишком большим!)
• Объединили и максимально уменьшили размер файлов CSS и JavaScript.
• Ограничили использование и вообще постарались избегать зависимости от тяжелых библиотек JavaScript, особенно если они применяются всего для одной-двух функций.
• Ограничили использование CSS-сеток.
• Применили соответствующие HTTP-заголовки, для того чтобы нужные файлы правильно сохранялись в кэше браузера.
• По возможности использовали такие HTML5-функции современных браузеров, как Canvas (http://bkaprt.com/mf/29) и AppСache (http://bkaprt.com/mf/30).
И моя любимая рекомендация: используйте CSS3 для скругленных углов, градиентов, теней текста и HTML-объектов. Это позволит вам избавиться от необходимости публиковать картинки по всему сайту – в современных мобильных браузерах сайт будет выглядеть прекрасно; кроме того, он будет смотреться вполне достойно даже в браузерах, не обеспечивающих полную поддержку CSS3.
Однако не стоит перегружать сайт тяжелыми CSS3-эффектами, так как это может снизить результативность работы браузера.
Скорость важна не только для мобильных сайтов. Как показывают результаты тестов, проведенных Amazon, Yahoo! Microsoft и многими другими компаниями, даже небольшая задержка (100 миллисекунд) при работе в Сети может заставить пользователя покинуть сайт. Многолетние исследования компании Google показали, что низкая эффективность имеет отсроченный эффект: даже после того, как проблема задержки была решена, посетители в течение пяти недель менее активно заходили на такие сайты (http://bkaprt.com/mf/31). Так что эффективность имеет значение и для стационарных компьютеров.
Если вы следуете принципу «сначала мобильные!» и разрабатываете веб-приложения с учетом нестабильности мобильных сетей, то на обычных компьютерах они будут загружаться с поразительной скоростью. Это наверняка понравится вашим клиентам – вот вам и дополнительные преимущества такого подхода.