Советы по дизайну для мобилок (Часть 1) - Скорость

Я помню тот момент, когда передо мной встала задача создать сайт для мобильных устройств. Кажись, это был 2006, и тогда только начинали получать популярность домены “.mobi”. Вооружившись своим новым BlackBerry Pearl 8100, я был готов к первым попыткам построения сайта для мобилок размер экрана которых составлял 240x260px.

Мой эксперимент продолжался совсем недолго т.к. на рынке укрепляли свои позиции такие гиганты как YouTube и Facebook, а так же были в самом разгаре браузерные войны (как раз тогда были только запущены Firefox 2 и IE 7). Именно тогда тема мобильного интернета немного отошла на второй план.

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

Таким образом, интернет для мобилок перестал быть чем-то особенным и занял приличные позиции на рынке, а для нас – разработчиков настало время обуздать эту новую сферу деятельности, если мы хотим оставаться на плаву.

Эта серия уроков предназначена специально для тех дизайнеров, которые хотят понять разницу построения дизайна для мобильных устройств. В самом начале, мы рассмотрим всевозможные правила, которые необходимо учитывать на сегодняшний день. Во второй части, мы обсудим, какие нововведения необходимо ожидать в ближайшем будущем. По ходу мы так же рассмотрим тему интеграции дизайна для мобильных устройств и создание сайтов, которые будут соответствовать всем изученным нами стандартам. Готовы? Ну тогда поехали!

Давайте начнём с небольшого анализа.

Два поезда выходят из одной и той же точки и следуют одному и тому же маршруту. Их показатели отличаются только лишь в одном: первый поезд путешествует вдвое быстрее, чем второй. Для пассажиров сразу же становится понятным, что первый поезд им больше подходит. Кто не понял, речь на самом деле не о поездах, а о сайтах.

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

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

Поскольку скорость загрузки мобильного сайта значительно ниже традиционной, то критически важно знать все возможности улучшения показателей. Хотя многие провайдеры на сегодняшний день предоставляют пакеты с довольно таки высокой скоростью, скорость подавляющего большинства людей не превышает 256Kb, поэтому нам нужно считать буквально каждый бит.

Поскольку далее следует довольно таки тонкий материал, вам необходимо освежить в голове некоторые вещи.

Ниже вы можете найти общие единицы измерения, которые непосредственно относятся к передаче данных через интернет.

• Kb: Килобит (128 байт)
• KB: Килобайт (8 Килобит)
• Mb: Мегабит (128KB или 1024Kb)
• MB: Мегабайт (8Mb или 1024KB или 8192Kb)

Некоторые люди часто не различают такие понятия как Килобайты и Килобиты, и в результате часто ожидают одну скорость вместо другой. Если скорость вашей загрузки равна 256Kb (Килобит в секунду), то вы не загрузите файл размером 256KB (Килобайт) в 1 секунду. С тех пор как в 1 Килобайт составляет 8 Килобит (в 1 байте 8 бит), скачивание при скорости 256Kb файла размером 256KB займёт 8 секунд.

Перевод Kb в скорость может быть вычислена благодаря следующим правилам:

• Kb к KB: Kb / 8 = KB
• Kb к Mb: (Kb / 8) / 128 = Mb

Десять лет назад скорость в 256Kb была просто божественной. Позже она была между 150Kb-1Mb для скачивания. Эх, мало кто вспоминает сегодня о тех скоростях, кроме нас, кто делает сайты для мобильных устройств.

Согласно основным исследованиям Твентского университета, весь трафик за 2000 год вызван скачиванием изображений и текста. Эти цифры значительно изменились в 2007, когда основной частью трафика стали фотографии, видео и другие виды файлов для скачивания. Как следствие, скорость ответа (размер файлов, передаваемых через интернет) увеличилась более чем на 500% за прошедшие 7 лет.

За последние 10 лет роль интернета значительно изменилась. Сегодня мы делимся видео данными; пользуемся насыщенными пользовательскими интерфейсами; и используем тяжеловесные скрипты.

В 2010, United States FCC определила “Широкополосное вещание” с предтечей данных со скоростью в 4 Mb. Вместе с тем средний размер страницы составляет 320KB. Так же скорость загрузки страниц в 2010 колеблется в районе 1 секунды. Другими словами скорость загрузки сайтов у нас хорошая и практически никто из разработчиков не принимает во внимание сферу мобильного интернета.

Сегодня на дворе стоит 2011 год и мало кто знает, что ждёт нас в 2020, однако я уверен, что у нас будет ещё много нововведений и опыта, который предстоит получить. Если у человека есть два инструмента для решения одной и той же задачи, но один из которых удобнее, то что выберет этот человек?

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

ВРЕМЯ ЗАГРУЗКИ СТРАНИЦ

Тут мы можем сделать несколько неутешительных выводов. Загрузка одного из самых популярных сайтов в мире составляет более 10+ секунд – такого не было даже в 2000 году. Различного рода стандарты продолжат меняться, и мы будем переходить с устройства на устройство. В связи с этим мы должны обеспечивать нашим пользователям все условия, чтобы они комфортно могли пользоваться тем, что мы делаем.

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

Итак, вы уже увидели разнице между скоростью загрузки 256Kb и 4Mbps. Давайте же ещё раз посмотрим на те же сайты, только на этот раз на версии для мобильных телефонов.

ВРЕМЯ ЗАГРУЗКИ ДЛЯ МОБИЛЬНЫХ САЙТОВ

Согласно докладу PCWorld в 2009-2010 годах скорость загрузки между AT&T, Sprint, T-Mobile, и Verizon 3G составила 987Kb. Некоторые провайдеры могут отключать пользователей, которые превышают месячный лимит (T-Mobile снижает скорость передачи данных после того как пользователь перешёл порог в 5GB).

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

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

Как вы можете увидеть внизу каждой из таблиц, Facebook предоставляет своим пользователям очень хорошую скорость загрузки. Это просто было бы издевательством заставлять их ждать 11 секунд.

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

• Комментарии