—»     —»   Веб-мастерство в эпоху мобильной связи: 25 советов по проектированию ресурсов для мобильных устройств
  Раздел: Подсказки   Комментариев: 2  

Веб-мастерство в эпоху мобильной связи: 25 советов по проектированию ресурсов для мобильных устройств



Я недавно вычитал, что к 2013 году пользователей, просматривающих Интернет-ресурсы с мобильных устройств, станет, как ожидается, больше, чем тех, кто посещает их с ноутбуков или стационарных ПК. Надо же! Значит, теперь мы, дизайнеры, должны сосредоточиться на проектировании и разработке ресурсов для мобильного потребителя плотнее, чем когда-либо прежде. Это становится настоятельной необходимостью, которая будет лишь усугубляться. Так давайте же пробежим глазами список советов по проектированию ресурсов для мобильных устройств.

Веб-сайт или приложение?

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

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

Проектируйте с учётом меньшего размера экранов

Проектируя сайт в расчёте на экраны мобильных устройств, вам нужно учитывать их мелкие размеры. Для тех из нас, кто привык к крупным мониторам высокой чёткости, способным отображать графику в разрешении 1920 х 1200 или выше, это будет непросто.

На сегодняшний день экран iPhone 4 имеет разрешающую способность 640 x 960, у iPad она немного выше - 1024 x 768. В сравнении с другими устройствами, это высокие показатели. Некоторые модели телефонов Android и Blackberry довольствуются экранами размером всего-то 320 х 240. Значительно мельче тех, для которых мы привыкли проектировать, и об этом различии нельзя забывать, приступая к разработке мобильной версии веб-сайта.

Веб-мастерство в эпоху мобильной связи: 25 советов по проектированию ресурсов для мобильных устройств

Учитывайте вероятность нестабильного Интернет-соединения

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

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

Назначайте мобильным версиям ваших сайтов отдельные URL-адреса

Конструируя полностью автономный сайт для мобильных устройств, подумайте о том, какой URL-адрес ему присвоить. Например, http://www.yoursite.com/mobile, или, если вы вправе дополнять имеющийся у вас домен собственными поддоменами, попробуйте что-нибудь в таком духе: http://mobile.yoursite.com.

Простота структуры URL-адреса, как в наших примерах, облегчает пользователю его применение и запоминание.

Веб-мастерство в эпоху мобильной связи: 25 советов по проектированию ресурсов для мобильных устройств

Распознавайте тип устройства пользователя и открывайте соответствующую версию сайта

Чтобы работа спорилась, важно обеспечить распознавание мобильных устройств среди прочих и перенаправление их пользователей на нужную страницу.

Типы устройств удобно распознавать, например, с помощью базы данных WURFL. В онлайн-базу данных WURFL поступают сведения обо всех выпускаемых мобильных устройствах. API-интерфейсы WURFL подобраны для различных языков программирования. Елица Харамийо (Yelitza Jaramillo) написала отличную статью об использовании PHP API-пакета при работе с WURFL.

Если у вас есть собственные приёмы распознавания устройств, пожалуйста, не стесняйтесь поделиться ими ниже, в разделе комментариев.

Подумайте о преимуществах одностолбцовых страниц, удобных для мобильников

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

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

Веб-мастерство в эпоху мобильной связи: 25 советов по проектированию ресурсов для мобильных устройств

Упрощайте и оптимизируйте ваш контент

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

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

Веб-мастерство в эпоху мобильной связи: 25 советов по проектированию ресурсов для мобильных устройств

Облегчайте пользователю ввод данных и сокращайте схемы навигации

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

Веб-мастерство в эпоху мобильной связи: 25 советов по проектированию ресурсов для мобильных устройств

Не задавайте размеры в точных величинах

Проектируя сайты для маленьких экранов, избегайте указывать размеры в пикселах. Например, вы задаёте ширину объекта в 200 пикселов, значит, на некоторых телефонах он займёт почти весь экран. Старайтесь использовать для этого относительные величины, такие как буквы "М" или проценты, чтобы масштабирование выполнялось автоматически.

Старайтесь обходиться без прокрутки. Легко сказать!..

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

Проектирование для сенсорных экранов

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

Веб-мастерство в эпоху мобильной связи: 25 советов по проектированию ресурсов для мобильных устройств

Выбор шрифта, подходящего вашему контенту

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

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

Отправляйте в утиль Flash- и Java-элементы, рамки и всплывающие окна

Веб-мастерство в эпоху мобильной связи: 25 советов по проектированию ресурсов для мобильных устройств

Большинство мобильных устройств не поддерживают Flash, Java-программки, отображение рамок и всплывающих окон. Избегайте их применения при разработке мобильных версий ваших сайтов. Если вы с Flash не разлей вода, то, возможно, пора проститься с этим другом. Особенно, на фоне недавнего заявления Adobe об отказе от разработки Flash Player для браузеров мобильных устройств.

Довольствоваться ли одним мобильным сайтом?

В связи с появлением у нас возможности распознавать типы устройств возникает вопрос, а не сузить ли нам подход ещё более? Может, стоит создать сайт, например, для более современных смартфонов, таких как iPhone и Android, а "предкам", функционально уже, так сказать, слабоватым, сверстать страницу попроще? То есть, кроить ресурсы строго по меркам устройства пользователя.

Пользуйтесь преимуществами функциональной начинки телефона

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

Например:

* Задайте возможность вызова абонентов по телефону щелчками по ссылкам, содержащим их номера.
* Предоставьте пользователю опцию поиска по карте вашего офиса или ближайшей точки доступа к вашим товарам и т. п.
* Расширьте набор функций за счёт специальных операций, таких как Quick Response или считывание штрих-кода.

Два слова о CSS-кодировке мобильных сайтов

Ниже приводятся общие рекомендации по применению CSS при вёрстке мобильных сайтов.

* Чтобы задать "усадку" вашей страницы до размеров различных экранов, указывайте значения ширины для адаптера в процентном отношении к стандартной ширине.
* Соразмеряйте абзацы, заголовки и объекты навигации с площадью экрана, вмещайте их в блоки, отображаемые в пределах этого пространства.
* Имейте в виду, что мобильная версия Safari не полностью поддерживает @font-face.
* Конструируя мобильную версию вашего сайта, ориентируйтесь по CSS3 Media Queries.
* Придерживайтесь простых и рациональных решений.

Проектирование для iPhone

Веб-мастерство в эпоху мобильной связи: 25 советов по проектированию ресурсов для мобильных устройств

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

Конструируя сайты специально для просмотра на экране iPhone, вам нужно учитывать его размеры. У более ранних моделей iPhone - 320px на 480px, у iPhone 4 и iPhone 4S - 640px на 960px.

Посредством CSS3 Media Queries можно добавлять стили, определяющие только его отображение на экране iPhone, в главную таблицу стилей вашего сайта.

Учитывайте положение устройства

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

Веб-мастерство в эпоху мобильной связи: 25 советов по проектированию ресурсов для мобильных устройств

jQuery для мобильных сайтов

Если вы - разработчик интерфейсов, то вам не нужно расхваливать библиотеку jQuery и принцип её работы "пишите меньше - делайте больше". То же относится к новинке jQuery Mobile.

Унифицированная пользовательская интерфейсная система на базе HTML5 для платформ всех популярных мобильных устройств, в основе которых - твердокаменный фундамент jQuery и её пользовательского интерфейса. Её компактная кодировка предусматривает поступательную модернизацию, а дизайн радует своей гибкостью и лёгкостью смены тем оформления.

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

Веб-мастерство в эпоху мобильной связи: 25 советов по проектированию ресурсов для мобильных устройств

Пользовательские интерфейсные наборы и иконки для мобильных сайтов

Free iPhone App Icon Kit

Веб-мастерство в эпоху мобильной связи: 25 советов по проектированию ресурсов для мобильных устройств

Dark Mobile User Interface Kit

Веб-мастерство в эпоху мобильной связи: 25 советов по проектированию ресурсов для мобильных устройств

Fresh iPhone UI Kit

Веб-мастерство в эпоху мобильной связи: 25 советов по проектированию ресурсов для мобильных устройств

Glossy 3D UI Kit

Веб-мастерство в эпоху мобильной связи: 25 советов по проектированию ресурсов для мобильных устройств

Инструменты разработчика мобильных ресурсов

PhoneGap - платформа позволяет вам запросто конструировать приложения на базе HTML5, родственные ещё шести различным платформам.

Веб-мастерство в эпоху мобильной связи: 25 советов по проектированию ресурсов для мобильных устройств

RhoMobile - девиз "программная основа под любой смартфон" говорит сам за себя.

Веб-мастерство в эпоху мобильной связи: 25 советов по проектированию ресурсов для мобильных устройств

Мобильная версия WordPress для WP-пользователей

Для поклонников WordPress имеются несколько дополнительных модулей, рассчитанных на мобильные устройства. Один из них стоит отметить особо. Пользователям, просматривающим ваш сайт с мобильных устройств, открывается интерфейс дополнительного модуля WordPress Mobile Edition, специально предназначенный для взаимодействия с мобильными устройствами. Распознаёт мобильные браузеры автоматически, их список можно редактировать на странице настроек.

Тестирование вашего мобильного веб-сайта

Тестирование на мобильных устройствах - дело непростое. Особенно с учётом того, что вы, вероятно, не покупаете десятки "подопытных" телефонов разных моделей. Возьмите в подручные Opera Mobile Emulator. Этот ресурс поддерживает около 20 различных платформ.

Веб-мастерство в эпоху мобильной связи: 25 советов по проектированию ресурсов для мобильных устройств

Примеры невероятно качественных мобильных веб-сайтов

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

Веб-мастерство в эпоху мобильной связи: 25 советов по проектированию ресурсов для мобильных устройств

Веб-мастерство в эпоху мобильной связи: 25 советов по проектированию ресурсов для мобильных устройств

Веб-мастерство в эпоху мобильной связи: 25 советов по проектированию ресурсов для мобильных устройств

Веб-мастерство в эпоху мобильной связи: 25 советов по проектированию ресурсов для мобильных устройств

Веб-мастерство в эпоху мобильной связи: 25 советов по проектированию ресурсов для мобильных устройств
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Опубликовал Design FactoRy   Прочитано (раз): 7623   |   Оставлено комментариев: 2
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 29 декабря 2011 @ 15:36
Написал: Lazy_elf — группа: Читатели  
На сайте с: 17.01.2010   |   Публикаций: 0   |   Комментариев: 7
ICQ: --- не указано ---
Спасибо, добавил в закладки.
Комментарий #2: 5 февраля 2012 @ 17:31
Написал: david — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Очень полезные советы, учту, спасибо!
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930