Веб-сайт или приложение?
Вот в чём вопрос. Приложение - ресурс более утилитарный, позволяющий дизайнеру ярче проявить своё мастерство в обеспечении удобства пользователя, кроме того, оно может применяться в оффлайн-режиме, и потенциально гораздо сильнее веб-сайта в плане закрепления пользователей. Но, приняв во внимание особую трудоёмкость проектирования и разработки приложений на мобильных платформах, мы выберем темой нашей статьи мобильные веб-сайты.
Вероятнее всего, вам придётся разрабатывать для ваших заказчиков именно мобильные версии веб-сайтов, кроме, разве что, случаев, когда клиентура компании потребляет её продукцию в большом объёме, то есть, готова скачивать и устанавливать себе специальные приложения. Мобильные веб-сайты легче и быстрее разрабатывать, а также запускать. Да, и доступ к ним возможен с любого устройства, пригодного для выхода в Интернет.
Проектируйте с учётом меньшего размера экранов
Проектируя сайт в расчёте на экраны мобильных устройств, вам нужно учитывать их мелкие размеры. Для тех из нас, кто привык к крупным мониторам высокой чёткости, способным отображать графику в разрешении 1920 х 1200 или выше, это будет непросто.
На сегодняшний день экран iPhone 4 имеет разрешающую способность 640 x 960, у iPad она немного выше - 1024 x 768. В сравнении с другими устройствами, это высокие показатели. Некоторые модели телефонов Android и Blackberry довольствуются экранами размером всего-то 320 х 240. Значительно мельче тех, для которых мы привыкли проектировать, и об этом различии нельзя забывать, приступая к разработке мобильной версии веб-сайта.
Учитывайте вероятность нестабильного Интернет-соединения
Вспомните недавнее прошлое, когда широкополосный доступ к Интернет ещё не входил в дежурное меню закусочных на каждом углу, а веб-дизайнерам приходилось больше думать о возможностях пользовательского соединения, оптимизируя параметры графического и видео-контента ради ускорения его загрузки. Возьмётесь конструировать мобильный сайт - вам тоже придётся.
Провайдеры постоянно наращивают скорость соединения, но зона покрытия сигнала кое-где пока остаётся "рваной", мягко говоря. К тому же, некоторые пользователи, чьи тарифы небезлимитны, вынуждены оплачивать скачивание данных. Поэтому нам, разработчикам, вновь приходится мыслить категориями той ранней эпохи модемной зависимости. Нужно будет облегчить программную основу, упразднить лишние метки и комментарии. Позаботьтесь о компактности картинок, сжимайте изображения для ускорения загрузки страниц.
Назначайте мобильным версиям ваших сайтов отдельные URL-адреса
Конструируя полностью автономный сайт для мобильных устройств, подумайте о том, какой URL-адрес ему присвоить. Например, http://www.yoursite.com/mobile, или, если вы вправе дополнять имеющийся у вас домен собственными поддоменами, попробуйте что-нибудь в таком духе: http://mobile.yoursite.com.
Простота структуры URL-адреса, как в наших примерах, облегчает пользователю его применение и запоминание.
Распознавайте тип устройства пользователя и открывайте соответствующую версию сайта
Чтобы работа спорилась, важно обеспечить распознавание мобильных устройств среди прочих и перенаправление их пользователей на нужную страницу.
Типы устройств удобно распознавать, например, с помощью базы данных WURFL. В онлайн-базу данных WURFL поступают сведения обо всех выпускаемых мобильных устройствах. API-интерфейсы WURFL подобраны для различных языков программирования. Елица Харамийо (Yelitza Jaramillo) написала отличную статью об использовании PHP API-пакета при работе с WURFL.
Если у вас есть собственные приёмы распознавания устройств, пожалуйста, не стесняйтесь поделиться ими ниже, в разделе комментариев.
Подумайте о преимуществах одностолбцовых страниц, удобных для мобильников
При загрузке на телефон страница, как правило, масштабируется до такого мелкого размера, чтобы целиком поместиться в экран. А экраны почти всех телефонов настолько малы, что читать содержимое страниц можно, только укрупняя их. Далеко не самое оптимальное решение, поскольку пользователю для ознакомления с вашим контентом приходится выполнять больше действий. Обычно он вынужден прокручивать страницу как вниз, так и вправо.
Попробуйте вместо такой разметки применить одностолбцовую, вместимую в экран мобильного устройства. Пользователю, вероятно, всё равно, придётся прокручивать вашу страницу, но теперь уже только по вертикали.
Упрощайте и оптимизируйте ваш контент
Вновь призываю вас мыслить легче и проще. Планируйте размещение вашего контента и размечайте страницу, придерживаясь правила "чем меньше, тем больше". Постарайтесь убрать лишние ссылки и материалы, не вмещающиеся в окно основного контента. Часто бывает так, что всем, выносимым на стандартных сайтах в боковую панель или в "подвал", можно легко пожертвовать ради облегчения и упрощения работы.
Избавление от подобного контента также сокращает объём и время загрузки страницы, а это важный аспект проектирования мобильных страниц.
Облегчайте пользователю ввод данных и сокращайте схемы навигации
Вводить данные владельцам телефонов некоторых моделей может быть непросто. С их клавиатурой не управиться так же быстро, как с обычной, к тому же, пользователи чаще ошибаются при наборе на ней. С учётом этого, мы можем кое-что подправить и сделать так, чтобы им не приходилось вводить столько сведений. Например, можно задать извлечение данных из действующего аккаунта пользователя во время проверки. А схему навигации можно свести к одному всплывающему меню. Встроенные функции телефона тоже вполне сослужили бы нам службу, подробнее поговорим об этом далее.
Не задавайте размеры в точных величинах
Проектируя сайты для маленьких экранов, избегайте указывать размеры в пикселах. Например, вы задаёте ширину объекта в 200 пикселов, значит, на некоторых телефонах он займёт почти весь экран. Старайтесь использовать для этого относительные величины, такие как буквы "М" или проценты, чтобы масштабирование выполнялось автоматически.
Старайтесь обходиться без прокрутки. Легко сказать!..
По-моему, совсем обойтись без прокрутки в большинстве случаев просто нельзя из-за малых размеров экранов мобильных устройств, но можно уменьшить необходимость в ней с помощью некоторых приёмов. Оптимальный вариант - вёрстка одностолбцовых страниц, прокручиваемых по вертикали, - описан выше. Другое хорошее решение - очистка страницы от лишних картинок и материалов. Посмотрите также, нечего ли вам "вытряхнуть" из "шапки", например, логотипы или меню навигации, сдвигающие прочий контент страницы вниз и вынуждающие её прокручивать.
Проектирование для сенсорных экранов
Сенсорные экраны смартфонов повышают удобство работы пользователя, если не брать в расчёт нажатие очень мелких кнопок и открытие ссылок. Пальцы большинства людей слишком велики для "точечного удара" по крохотной текстовой ссылке. Позаботьтесь о крупных кнопках во всю ширину экрана для значимых ссылок и узлов навигации.
Выбор шрифта, подходящего вашему контенту
Располагая возможностью встраивать шрифты в наши веб-страницы, важно не ошибиться и выбрать шрифт, разборчиво читаемый на маленьком экране. Откажитесь от шрифтов, имитирующих письмо от руки или буквенную вязь, даже в названиях и крупных надписях. На экране телефона и крупный шрифт выглядит мелким.
Кроме того, правильно рассчитывайте межбуквенные и межстрочные интервалы для максимальной разборчивости ваших текстов.
Отправляйте в утиль Flash- и Java-элементы, рамки и всплывающие окна
Большинство мобильных устройств не поддерживают Flash, Java-программки, отображение рамок и всплывающих окон. Избегайте их применения при разработке мобильных версий ваших сайтов. Если вы с Flash не разлей вода, то, возможно, пора проститься с этим другом. Особенно, на фоне недавнего заявления Adobe об отказе от разработки Flash Player для браузеров мобильных устройств.
Довольствоваться ли одним мобильным сайтом?
В связи с появлением у нас возможности распознавать типы устройств возникает вопрос, а не сузить ли нам подход ещё более? Может, стоит создать сайт, например, для более современных смартфонов, таких как iPhone и Android, а "предкам", функционально уже, так сказать, слабоватым, сверстать страницу попроще? То есть, кроить ресурсы строго по меркам устройства пользователя.
Пользуйтесь преимуществами функциональной начинки телефона
Вот вам и шанс использовать преимущества просмотра вашего сайта на мобильном телефоне. Кое в чём возможности телефонов шире, чем ПК, так что, никогда не упускайте случая задействовать их ради повышения практичности ваших ресурсов.
Например:
* Задайте возможность вызова абонентов по телефону щелчками по ссылкам, содержащим их номера.
* Предоставьте пользователю опцию поиска по карте вашего офиса или ближайшей точки доступа к вашим товарам и т. п.
* Расширьте набор функций за счёт специальных операций, таких как Quick Response или считывание штрих-кода.
Два слова о CSS-кодировке мобильных сайтов
Ниже приводятся общие рекомендации по применению CSS при вёрстке мобильных сайтов.
* Чтобы задать "усадку" вашей страницы до размеров различных экранов, указывайте значения ширины для адаптера в процентном отношении к стандартной ширине.
* Соразмеряйте абзацы, заголовки и объекты навигации с площадью экрана, вмещайте их в блоки, отображаемые в пределах этого пространства.
* Имейте в виду, что мобильная версия Safari не полностью поддерживает @font-face.
* Конструируя мобильную версию вашего сайта, ориентируйтесь по CSS3 Media Queries.
* Придерживайтесь простых и рациональных решений.
Проектирование для iPhone
iPhone удалось закрепиться в довольно крупном секторе рынка мобильных устройств.
Конструируя сайты специально для просмотра на экране iPhone, вам нужно учитывать его размеры. У более ранних моделей iPhone - 320px на 480px, у iPhone 4 и iPhone 4S - 640px на 960px.
Посредством CSS3 Media Queries можно добавлять стили, определяющие только его отображение на экране iPhone, в главную таблицу стилей вашего сайта.
Учитывайте положение устройства
Положение (вертикальное/горизонтальное) плоскости экрана iPhone и прочих современных смартфонов можно менять, поворачивая телефон на бок. Ещё одна причина выбирать для вашего сайта гибкую разметку, обеспечивающую заполнение пространства экрана независимо от его положения.
jQuery для мобильных сайтов
Если вы - разработчик интерфейсов, то вам не нужно расхваливать библиотеку jQuery и принцип её работы "пишите меньше - делайте больше". То же относится к новинке jQuery Mobile.
Унифицированная пользовательская интерфейсная система на базе HTML5 для платформ всех популярных мобильных устройств, в основе которых - твердокаменный фундамент jQuery и её пользовательского интерфейса. Её компактная кодировка предусматривает поступательную модернизацию, а дизайн радует своей гибкостью и лёгкостью смены тем оформления.
К этому каркасу стоит очень внимательно присмотреться, если перед вами стоит задача разработки прочной и удобной для пользователя системы под мобильную версию вашего сайта.
Пользовательские интерфейсные наборы и иконки для мобильных сайтов
Free iPhone App Icon Kit
Dark Mobile User Interface Kit
Fresh iPhone UI Kit
Glossy 3D UI Kit
Инструменты разработчика мобильных ресурсов
PhoneGap - платформа позволяет вам запросто конструировать приложения на базе HTML5, родственные ещё шести различным платформам.
RhoMobile - девиз "программная основа под любой смартфон" говорит сам за себя.
Мобильная версия WordPress для WP-пользователей
Для поклонников WordPress имеются несколько дополнительных модулей, рассчитанных на мобильные устройства. Один из них стоит отметить особо. Пользователям, просматривающим ваш сайт с мобильных устройств, открывается интерфейс дополнительного модуля WordPress Mobile Edition, специально предназначенный для взаимодействия с мобильными устройствами. Распознаёт мобильные браузеры автоматически, их список можно редактировать на странице настроек.
Тестирование вашего мобильного веб-сайта
Тестирование на мобильных устройствах - дело непростое. Особенно с учётом того, что вы, вероятно, не покупаете десятки "подопытных" телефонов разных моделей. Возьмите в подручные Opera Mobile Emulator. Этот ресурс поддерживает около 20 различных платформ.
Примеры невероятно качественных мобильных веб-сайтов
Ищете, где бы почерпнуть полезные идеи? Уже нашли. Ниже представлена подборка потрясающих образцов мобильных веб-сайтов.
