1. MoAction
Мы уже рассказывали, как сделать мобильную версию сайта с помощью конструктора MoAction. Процесс максимально простой, с ним справится даже неподготовленный пользователь, далёкий от вёрстки и программирования.
Главное достоинство MoAction — возможность работы с каталогами товаров. По сути, это самая сложная часть создания мобильной версии. Если у вас на сайте десятки и сотни товаров, заносить данные вручную вам вряд ли захочется. MoAction умеет импортировать существующий каталог в форматах «Яндекс.Маркета» (YML). Вам останется только указать период обновления, например раз в час или раз в день.
Кроме того, MoAction — единственный из представленных сервисов — позволяет создавать многоуровневые структуры и управлять списками товаров в несколько кликов.
Этот сервис предлагает самое большое количество шаблонов — 113. Все они разбиты по категориям для разных сфер бизнеса. Чем больше шаблонов, тем больше вероятность, что вы сможете найти подходящий именно вам.
3. DudaMobile
DudaMobile так же, как и GoMobi, предлагает своим пользователям автоматически конвертировать веб-сайт или создать мобильную версию на основе готового шаблона. И автоматическая версия у DudaMobile генерируется намного лучше.
Интерфейс минималистичный, простой и в целом приятный. Шаблонов не очень много, но все они выполнены качественно. Для каждого блока есть расширенные настройки.
Одно но: DudaMobile ориентирован в первую очередь на зарубежных клиентов, поэтому нет интерфейса на русском. В платной версии есть поддержка в LiveChat и по телефону, но она тоже будет вестись на английском.
Начало работы
Первая проблема, с которой вы столкнетесь, будет невозможность создание WAP-сайта на русском языке. Вы можете сделать все пункты меню транскрипцией, т. е. Menu, Novosti, Muzika, но это не спасет положения.
В зависимости от оператора сотовой связи, ваш сайт будет отображен по-разному. GSM может отобразить русские буквы. У Билайн и МТС это не пройдет. Выход один – набирать русский текст не русскими буквами, а их кодами. Т. е. русской букве «А» будет соответствовать код А.
А слову «ПРИВЕТСТВУЮ» будет соответствовать такая последовательность П Р И В Е Т С Т В У Ю. Вот и оказывается, что создание WAP-сайта не такое простое дело!
Перевод букв в коды
Чтобы не переводить каждую русскую букву в соответствующий код, надо предоставить перевод целого текста нашему замечательному компьютеру. Для этого вам надо установить HTML редактор FrontPage (или другой). Создать в нем новую страницу и на вкладке СВОЙСТВА СТРАНИЦЫ=>ЯЗЫК=>Сохранить документ как: (выбрать из списка) US/Western Europan. Теперь в обычном режиме набирайте русский текст, а потом смотрите HTML код. Там все буквы уже будут переведены.
Подготовка в редакторе FrontPage
Мы рекомендуем вначале создать весь WAP-сайт на языке HTML в редакторе FrontPage, а потом перевести в язык WML. Для этого создайте таблицу 100*80. Так примерно будет выглядеть ваш экран телефона. И в этой таблице делайте меню, переходы на другие страницы, вставляйте картинки. Сделайте полностью HTML сайт.
WAP-редактор
Наберите необходимый заголовок:
<?xml version="1.0"?>
теперь сюда вставляйте текст (т. е. коды букв) из FrontPage. Можете вставлять даже вместе с HTML-тегами и и другими (они совпадают с тегами языка WML). Только поменяйте на .
Сохраните файл с расширением wml. Ваша первая WAP-страница готова.
Закачка в интернет
Опубликуйте свой сайт в Интернет и откройте на сотовом телефоне, указав полный адрес. Теперь вместо кодов вы увидите нормальный русский текст! Поздравляем!
Создание картинок
Вы можете воспользоваться графическим редактором WAPDraw. Выберите в нем нужный размер картинки и нажмите «Ok». Теперь можете рисовать. Редактор сохраняет рисунки с разрешением WBMP.
Именно оно используется для WAP-графики. Но вы можете не рисовать картинки в этом редакторе вручную, а создать картинку в любом графическом редакторе, а потом копировать в WAPDraw. Он сам конвертирует её в черно-белое изображение.
Заключительный момент
Не делайте WAP-страницу более 4 кб, иначе она просто не загрузится в телефон. Подписывайте все картинки. Вставляйте больше графики (это радует глаз). Давайте дружить и сотрудничать. Живите ONLINE! Успехов в освоении WAP-технологий!
Подготовка
Писать код программы можно в различных WAP-редакторах или в обычном «Блокноте».
Желающих работать в «Блокноте», наверное, не найдется, поэтому вам нужно будет скачать WAP-редактор Waptor. И заодно сразу скачайте специальный графический редактор для создания картинок в формате WBMP (именно этот формат картинок используется для WAP-графики, а не JPEG или GIF.)
Он называется WAPDraw. Работать в этих программах легко. В них мало команд и сложно запутаться. Также приобретите браузер Opera 7.01. Он с легкостью отображает не только HTML страницы, но и WML (в нем встроен WAP-браузер.).
5. Prosto.mobi
У Prosto.mobi самый лаконичный дизайн. Сервис, судя по всему, ещё молодой, поэтому на данный момент функциональность редактора достаточно ограниченная: в платной версии на выбор предлагается всего 13 блоков. Например, блок с контактными данными, блок со ссылками на социальные сети, блок с фотографией. Этого мало, чтобы собрать оригинальный сайт.
Шаблонов тоже всего 15. Но в отличие от Onbile, у которого это действительно уникальные по структуре и дизайну мобильные версии, относящиеся к 15 различным отраслям бизнеса, у Prosto.mobi это один шаблон в 15 цветовых решениях.
Функций конструктора хватит только для создания максимально простого сайта. Например, страницы-визитки.
Ошибки дизайнеров
Почему некоторые сайты приятнее других? Что нас раздражает при использования того или иного интерфейса на смартфоне? Как не допускать критических ошибок при проектировании и вёрстке сайтов для мобильных устройств?
Ответить на эти вопросы поможет список самых распространенных косяков, хотя кому-то он покажется очевидным.
Большинство багов допускаются разработчиками и дизайнерами по неосторожности и из-за недостаточного внимания к мобильным платформам. Зачастую мобильную версию делают впопыхах и мало тестируют
Цель этой статьи — наглядно показать «как лучше не делать» и заставить больше думать о мобильном UX.
Поехали!
Время PDA- и WAP-версий закончилось. Просто имейте в виду.
Адаптивный дизайн может навредить, если использовать его неграмотно. Поместить все элементы в один ряд по вертикали — это не адаптация для смартфонов.
Не упрощайте мобильный сайт настолько, чтобы на нём было невозможно найти важную информацию. Не делайте WAP-сайт, ваша аудитория не настолько глупа. Не заставляйте их переходить на полную версию сайта.
Не делайте важный текст размером менее 16 пунктов.
Делайте межстрочное расстояние достаточным для комфортного чтения.
Не забывайте про отступы. Контент не должен быть приклеен к краям экрана.
Кнопки и ссылки должны быть адаптированы под палец.
Баннеры для настольной версии смотрятся плохо на мобильных устройствах. Отображайте на смартфонах баннеры другого размера.
Отключите функцию автокорректировки, исправления и ввода с заглавной буквы для полей с паролями, именами и адресами. Она может работать некорректно и затруднять ввод информации. Для отключения добавьте эти теги — .
Убедитесь, что на retina экранах изображения вашего сайта не выглядят размыто.
Все телефоны на вашем сайте должны быть в международном формате и содержать код страны. Иначе будет просто невозможно дозвониться.
Спасибо за внимание! Если есть вопросы — пишите.
Источник картинки на тизере: duoh.com