Помните Интернет образца 1997 года? Страницы проектировались для мониторов с низким разрешением и медленных модемов. Текст доминировал в Вебе, а изредка встречающиеся изображения в форматах JPEG и GIF лишь украшали страницы. Чаще всего мы их даже не видели, поскольку отключение загрузки изображений было одним из верных способов немного ускорить работу dial-up модема. Спустя более десятилетия весь ландшафт Интернета изменился. Широкополосный доступ через кабельные и DSL-подключения стал стандартом в развитых странах, а веб-страницы могут использовать более сложные элементы — множество изображений, эффекты прозрачности и даже видео — для доставки контента. Мы можем даже транслировать целые фильмы из Интернета на наши компьютеры, не дожидаясь загрузки файлов!
Несмотря на масштабный переход к мониторам с высоким разрешением, широкополосным скоростям и изощренным графическим возможностям, второй тренд оказал огромное влияние на Всемирную паутину в её современном виде. По мере того как технологии телефонов становились более совершенными и доступными, смартфоны превратились в неотъемлемую часть интернет-опыта. Мобильные устройства представляют собой ключевой шлюз в Веб для миллионов пользователей, не имеющих персональных компьютеров. Например, в Индии использование популярного веб-браузера Opera Mini выросло на 300 процентов в период с марта 2010 по март 2011 года. Во многих регионах мира окном в Интернет является не 23-дюймовый монитор, а 3-дюймовый экран телефона. Даже дешевые «тупые» телефоны без сенсорных экранов или мощного оборудования могут просматривать Веб.
На сцену выходят мобильные веб-сайты. Поскольку популярность мобильного Интернета совпала по времени с появлением высокоскоростного интернет-доступа и более мощного компьютерного оборудования, разработчики онлайн-контента столкнулись с уникальной задачей. Веб-сайты, созданные для больших мониторов, быстрых компьютеров и быстрого Интернета, сильно опираются на графику и передовые программные решения, которые не всегда работают на небольших экранах и медленных сетях мобильных устройств. Решение заключается в мобильных веб-сайтах — страницах, специально адаптированных для работы на небольших устройствах и доставки важного контента при сокращении графики, замедляющей загрузку страниц. Хотя мобильные веб-сайты намеренно проще полных версий, это не означает, что их легко создавать. Мобильные веб-сайты по-прежнему требуют внимания к дизайну и технологиям, а строгие ограничения мобильного оборудования не облегчают задачу.
Почему мобильным веб-сайтам нужны особые дизайнерские решения
Переход от настольного браузера к мобильному — это не просто уменьшение экрана. Это избавление от лишнего шума. Когда вы проектируете мобильный веб-сайт, вы не просто делаете элементы меньше. Вы переосмысливаете то, что действительно важно.
Пользователи настольных компьютеров ожидают визуальной привлекательности. У них есть пропускная способность и количество пикселей, чтобы это выдержать. Мобильные пользователи? Не настолько. Пользователь с подключением 3G в сельской местности не будет ждать загрузки главного баннера. Ему нужен текст. Ему нужны данные. Если вы навязываете мобильному устройству опыт, соответствующий настольному уровню, вы не проявляете инновационность. Вы становитесь препятствием.
Это создает специфическую проблему для разработчиков. Как сбалансировать потребность в насыщенном контенте с реальностью ограниченных ресурсов?
Основные ограничения мобильного веб-дизайна:
- Экранное пространство ограничено. 3-дюймовый экран не может отображать ту же компоновку, что и 23-дюймовый монитор. Навигация должна быть интуитивно понятной, а не размашистой.
- Мощность оборудования сильно варьируется. Хотя смартфоны стали мощными, базовые телефоны по-прежнему существуют. Код, который плавно работает на iPhone, может «задушить» устройство Android начального уровня или кнопочный телефон.
- Нестабильность сети — это норма, а не исключение. В отличие от стабильного широкополосного подключения дома, мобильные сети подвержены колебаниям. Тяжелые ресурсы убивают время загрузки.
Это хождение по канату. Если вы уберете слишком много, сайт будет выглядеть сломанным. Если оставите слишком много, он будет загружаться так же медленно, как в 1998 году.
«Мобильные веб-сайты намеренно проще полных версий, но это не означает, что их легко создавать».
Речь не идет о
Дизайн диктует доступное пространство экрана
Всё сводится к квадратным дюймам. Или, точнее, к их нехватке.
Даже самые большие экраны смартфонов — те, диагональ которых превышает четыре дюйма (10,2 см), — выглядят как почтовые марки рядом с настольным монитором. Цифры разрешения могут расти, но законы физики не обманешь. Высокое количество пикселей на крошечном дисплее всё равно не позволяет отобразить полноценный веб-сайт разборчиво. В итоге вы щипаете экран для масштабирования, борясь с многоколоночными макетами, которые превращают навигацию в игру «бей по выскочившим мухам».
Хороший мобильный веб-дизайн — это не про уменьшение настольного сайта. Это про начало с чистого листа и использование одноколоночных макетов.
Это означает сведение всего в один вертикальный поток. Вы перестраиваете ссылки навигации. Вы убираете декоративный мусор. Вы сужаете основную колонку, чтобы она соответствовала реальной ширине телефона. Большинство мониторов — это широкие прямоугольники. А телефоны? Это высокие полосы. Да, вы можете повернуть устройство в альбомную ориентацию, но по умолчанию используется портретная ориентация. Сначала проектируйте для узкой полосы.
Затем есть проблема способа ввода.
Настольные браузеры полагаются на мышь. Наведите курсор на меню, и появится выпадающий список. Попробуйте сделать это большим пальцем. Не работает. Мобильный веб-дизайн требует переосмысления этих «состояний при наведении». Меню нужно нажимать, а не наводить на них курсор. Кнопки должны быть достаточно большими для пальца, а не для точного курсора. Если ваш сайт полагается на эффекты при наведении, он уже сломан на мобильных устройствах.
Кошмар фрагментации устройств
Разработка для настольных компьютеров и так сложна. У вас есть Internet Explorer, который устраивает истерики, Firefox, делающий своё дело, и Chrome, пожирающий всю оперативную память. Но мобильная разработка? Это совершенно другой зверь.
Разнообразие аппаратного обеспечения поражает. На одном конце спектра находятся «тупые» телефоны с крошечными экранами низкого разрешения и базовыми браузерами. На другом — смартфоны с четкими сенсорными дисплеями высокого разрешения и мощными процессорами.
Один размер не подходит всем. Иногда нужны отдельные интерфейсы.
Посмотрите на Facebook. Он не просто отдает один и тот же HTML-код всем подряд. Он определяет, какое устройство вы используете. Если у вас iPhone или Android, вы получаете адаптированный опыт, оптимизированный для конкретного экрана и возможностей браузера. Если у вас кнопочный телефон, вы получаете облегченную версию.
Одного мобильного сайта недостаточно. Нужно проектировать с учетом устройства, а не только браузера.
Эта логика определения — мост между пользователем и правильным интерфейсом. Это технология, которая делает дизайн возможным.
Умнее, а не проще
Упрощение интерфейса не означает упрощение опыта. На самом деле, для определенных задач мобильные устройства могут быть мощнее настольных.
У смартфонов есть аппаратные компоненты, которых нет у ПК. Камеры. GPS. Акселерометры.
QR-коды — идеальный пример. Наведите камеру на код, и он мгновенно откроет веб-сайт или загрузит приложение. Не нужно вводить URL. Не нужно искать. Просто отсканируйте и действуйте.
Карты используют данные GPS, чтобы предоставлять вам маршруты в реальном времени или рекомендации ресторанов на основе вашего точного местоположения. Это не просто «меньший сайт». Это другой инструмент.
Создание эффективного мобильного сайта требует умного использования этих технологий на стороне сервера. Это не только про CSS и HTML. Это про использование самого устройства. Дизайн и технологии — две стороны одной медали. Нельзя иметь одно без другого.
Давайте посмотрим поближе, как происходит это определение. Как Facebook узнает, что вы на iPhone, а не на старом Nokia?
Обеспечение мобильного опыта: обнаружение, поддомены и выбор пользователя
Вы видите чистые линии и читаемый текст. Это выглядит просто. Под капотом — хаос из хитрой инженерии. Современный веб-дизайн опирается на каскадные таблицы стилей или CSS. Этот код определяет шрифты, цвета, отступы и ширину страницы. Контент хранится в базе данных или в HTML-файлах. CSS решает, как этот контент будет выглядеть.
Каждое упомянутое ранее изменение дизайна происходит здесь. Чтобы сделать мобильный сайт быстрым, вы заменяете тяжелое фоновое изображение сплошным цветом. Это экономит пропускную способность. Это заставляет страницу загружаться быстрее.
Создание сайта — это первый шаг. Привлечение людей к его использованию — второй шаг. Не существует единственно правильного способа предоставления мобильного сайта. Существует несколько вариантов.
Самый простой метод — это ссылка. Вы размещаете ее на полном сайте. Она гласит: «Просмотр мобильного сайта». Часто разработчики используют поддомен, например m.website.com. Это легко распознать. Website.com ведет на десктопную версию. m.website.com ведет на мобильную версию. Некоторые сайты используют i.website.com из-за iPhone. Код работает одинаково.
Некоторым пользователям приходится вручную вводить m.website.com. Большинство сайтов автоматизируют этот процесс.
Как мобильные сайты определяют ваше устройство
Другие техники более сложны. Многие сайты автоматически определяют тип вашего устройства. Они решают, какой файл CSS предоставить, на основе вашего оборудования.
Это происходит путем запроса к устройству. Сервер проверяет идентифицирующие факторы, такие как ширина экрана в пикселях. Он считывает строку user agent. Эта строка объявляет, какой браузер загружает страницу.
Медиа-запросы — это строки кода CSS. Они ссылаются на строку user agent. Они выделяют конкретные идентифицирующие факторы. Если user agent идентифицирует себя как мобильный браузер с узким экраном, сервер загружает мобильную страницу.
У этого метода есть недостатки. Некоторые браузеры позволяют подделывать строку user agent. Новые браузеры постоянно выпускают новые строки. Серверы, как правило, отправляют правильный сайт на правильное устройство. Но это не идеально.
Эта система идентификации связана с другим вариантом. Дайте пользователю выбор. Перейдите на IMDB.com с телефона. Он автоматически загружает мобильный сайт. Он также предлагает вам скачать мобильное приложение. Приложение предлагает больше функций.
Преимущества и недостатки мобильных браузеров
Мобильные сайты обычно работают лучше, чем полные сайты, на смартфонах. Они специально созданы для маленьких экранов. «Один размер подходит всем» редко работает.
Но «лучше» — понятие относительное. Мобильные сайты предлагают ограниченный опыт. Они учитывают ограничения устройств. Навигация часто исчезает. На экране недостаточно места, чтобы держать меню видимым все время.
Взаимодействие с сайтом — самая сложная часть мобильного просмотра. Прокрутка формы ввода занимает время. Выбор полей утомителен. Печать на телефоне медленнее, чем на компьютере. Сенсорные экраны и программные клавиатуры усугубляют это.
Браузеры телефонов могут хранить файлы cookie. Они запоминают пароли, как и десктопные браузеры. Это помогает. Браузеры с десктопными аналогами, такие как Firefox для Android и Opera Mobile, могут синхронизировать данные. Вы переносите свои сохраненные данные с компьютера. Это упрощает просмотр на обеих платформах.
У телефонов тоже есть хитрости. Щипок для масштабирования увеличивает текст. Тап для масштабирования подстраивает абзац под ширину экрана.
Почему Flash-видео не работает на мобильных устройствах
Flash-видео входит в каждое обсуждение мобильного просмотра. Оно требует много ресурсов процессора. Оно разряжает батарею. Оно улучшилось за годы. Оно работает на многих устройствах.
Оно не работает ни на одном устройстве Apple.
Apple блокирует Flash-видео в iOS. Вместо этого они поддерживают видео HTML5. YouTube использует видео HTML5. Многие другие сайты тоже.
Вы можете встраивать Flash-видео в мобильные веб-страницы. Это противоречит принципам мобильного дизайна. Простота — величайшая сила мобильных сайтов. Они загружаются быстро, потому что используют текст и маленькие изображения. Flash нарушает это.
Размещение Flash на вашем сайте ограничивает пользователей iPhone. Они не могут взаимодействовать со страницей. Вы теряете огромную часть своей аудитории.
Мобильные покупки: действительно ли они безопаснее, чем покупки с компьютера?
Вот неожиданный поворот. Ваш телефон может быть более безопасным местом для ввода данных кредитной карты.
Большинство веб-вирусов нацелены на Windows. Они не работают на iOS или Android. Вы по сути невидимы для огромной части вредоносного программного обеспечения просто потому, что не пользуетесь ПК. Современные телефоны поддерживают HTTPS и шифрование SSL так же, как и ваш ноутбук.
Но не расслабляйтесь.
Вам по-прежнему нужно следить за адресной строкой. Ищите значок замка. Пользуйтесь только проверенными сайтами. Если сайт выглядит подозрительно на компьютере, он будет выглядеть подозрительно и на телефоне. Просто в меньшем масштабе. Ландшафт угроз меняется, но принцип остается прежним. Осторожность лучше сожаления.
Особенности дизайна мобильных страниц
Что вообще такое дизайн мобильных страниц?
Это не просто уменьшенная копия веб-сайта. Это специфическая оптимизация для сенсорных экранов и узких областей просмотра. Думайте о меньшем. Более простом. Без лишнего шума.
Сайты для настольных компьютеров полагаются на наведение курсора мыши и точные клики. Мобильные устройства полагаются на большие пальцы рук. Это меняет всё. Кнопки становятся больше. Меню скрываются. Контент расставляется по приоритетам. Если вы пытаетесь прочитать плотный абзац на экране размером 6 дюймов, вы боретесь с устройством. Хороший мобильный дизайн предотвращает эту борьбу еще до ее начала.
Мобильные сайты против традиционных сайтов
Люди постоянно путают эти термины. Давайте разграничим их.
Стандартный веб-сайт создан для настольных компьютеров. Клавиатуры. Мыши. Большие мониторы. Он предполагает, что у вас есть пропускная способность и терпение.
Мобильный сайт создан для смартфонов и планшетов. Он избавляется от лишнего. Функции, которые не работают на сенсорных экранах, удаляются. Изображения сжимаются. Скрипты облегчаются.
Разница имеет значение.
Почему? Потому что мобильные сайты загружаются быстрее. Они потребляют меньше данных. Это не просто удобство для пользователей Apple в Манхэттене. Это необходимость для людей в развивающихся странах, где высокоскоростной интернет — это роскошь, а не базовая услуга. Если ваш сайт тяжелый, они не смогут его загрузить. Точка.
Почему важен мобильный дизайн
Всё сводится к трению.
Обзор с настольного компьютера эффективен. Мобильный просмотр удобен. У вас есть интернет в кармане. Но печатать на стеклянном экране — утомительно.
Хороший мобильный дизайн заставляет эту утомительность исчезнуть. Он уважает ваше время. Он уважает ваш тарифный план на данные. Он учитывает тот факт, что вы, вероятно, ходите, пока пользуетесь устройством.
Здесь также работает реклама. Но гигантские всплывающие окна? Нет. Большинство мобильных браузеров их все равно блокируют. Google AdSense подходит идеально. Небольшой. Не навязчивый. Релевантный.
Мобильный веб — это не урезанная версия веб-сайта для настольных компьютеров. Это другой зверь. Относитесь к нему соответственно.
