Планирование и создание мобильного сайта для вашего основного сайта

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

Просматривая несколько примеров мобильных сайтов, мы заметили, что многие сайты с WAP в URL-адресах на самом деле являются просто упрощенными HTML-файлами. http://wap.mlb.com - это не WAP, а простой HTML.

Мой вопрос: WAP - это воспоминание о прошлом? Поскольку смартфоны и iPhone имеют возможность отображать сайты как есть, нужно ли нам беспокоиться о WML и WAP или будет достаточно урезанной версии html?

Также можете ли вы порекомендовать блог или учебное пособие или ответьте ниже, как лучше всего проверить мобильные устройства? Нужно ли нам, как программисту, знать каждый вариант пользовательского агента, чтобы перенаправить его на наш мобильный сайт?

Наконец, запрограммируете ли вы мобильный сайт для браузера iPhone / Touch Safari или просто оставите сайт как есть?

Ответов (8)

Решение

Новые телефоны поставляются с WAP2, который использует мобильный профиль HTML (XHTML MP), который очень похож на обычный HTML. Старые телефоны используют язык разметки беспроводной связи (WML).

В зависимости от вашей аудитории я бы подумал о создании версии сайта для мобильных телефонов с использованием XHTML MP и полностью отказался от WML. Под мобильным телефоном я подразумеваю легкую графику, немного JavaScript и простую навигацию.

Чтобы проверить возможности разных портативных телефонов, взгляните на WURFL .

Кроме того, вы можете ознакомиться с рекомендациями по использованию мобильного Интернета от w3c.

Вот две вещи, которые вы можете сделать, чтобы улучшить поддержку iPhone без особых усилий:

Сделайте так, чтобы страница прокручивалась вверх, чтобы скрыть адресную строку:

<script type="application/x-javascript">

  if (navigator.userAgent.indexOf('iPhone') != -1) {
    addEventListener("load", function() {
      setTimeout(hideURLbar, 0);
    }, false);
  }

  function hideURLbar() {
    window.scrollTo(0, 1);
  }

</script>

И установите масштабирование для ширины страницы (лучше всего провести некоторое тестирование и поиграть с этим, также поищите другие примеры, которые могут использовать user-scalable=true ):

<meta name="viewport" content="width=320; user-scalable=false" />

Код: заставляет валидатор w3 возвращать 11 ошибок, когда я его использую. Вот индексная страница, на которой он был опробован: Вы не будете использовать несколько строк, которые не используются. Это строки шаблона.

<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Photography Aerial Commercial Portrait Underwater Wedding Tom Szabo</title>
<meta name="description" content="A Thomas Image professional photography serving Cleveland
Northeast Ohio Chagrin Falls Chardon Kirtland Madison Mentor Painesville Perry and Willoughby">
<meta name="keywords" content="A Thomas Image, professional, photography, cleveland, northeast ohio, chagrin falls, chardon, concord, kirtland, madison, mentor, painesville, perry, willoughby,commercial, marketing, advertising, executive, head shot, portrait, baby, children, family, high school senior, family reunion, underwater, scuba diving, pool party, wedding, bride, groom,">
<meta name="y_key" content="7b00158550200c1c">
<meta name="y_key" content="b5a3e0c1d778ff8a">
<meta name="msvalidate.01" content="7C6C4CEC2EB84051B1DCFEC558B77724" />
<meta name="verify-v1" content="G4nmk0aesZsCjneBo0W6kVlv5NpImVnTfsQ+fXEk1fA=" />
<meta name="viewport" content=”width=320,user-scalable=false”>

На данный момент (2014)

Мы , возможно , не потребуется отдельный сайт для мобильных устройств , вместо этого мы можем пойти на интерфейсными как найти библиотеки Twitter Bootstrap , который использует адаптивный рендеринг таким образом , что сайт подстраивается под размер экрана , будь то Tablet или мобильного устройства или рабочего стола

Одним из основных преимуществ является меньшее обслуживание по сравнению с отдельными веб-сайтами для мобильных устройств и компьютеров.

Чтобы узнать больше о Twitter Bootstrap, нажмите здесь

Я думаю, что основное различие между телефонами 2.5G и новыми телефонами 3G заключается в том, что в то время как в телефонах 2.5G использовались собственные браузеры, браузеры на телефонах 3G стали намного более похожими / точными в своих возможностях рендеринга.

С другой стороны, вы можете использовать CSS для рендеринга одного и того же HTML либо в формате большого экрана, либо в небольшом формате, оптимизированном для мобильных устройств, поэтому я предполагаю, что произошло то, что подход «простого HTML» оказался наименее сложным. принять. Кроме того, макеты без таблиц позволяют веб-сайтам лучше масштабироваться, что упрощает отображение сайта как на большом, так и на маленьком экране.

Таким образом, конечный вопрос будет заключаться в целевом рынке. Вы ориентируетесь на технически подкованную аудиторию, которая, как правило, будет иметь телефоны с полной поддержкой 3G? Вы ориентируетесь на людей, у которых может быть максимум 2,5 Гб?

Мой опыт показывает, что это действительно зависит от того, что вы пытаетесь сделать и кто / где находятся пользователи.

Хотя WAP получил много плохих отзывов в прессе, его сила в том, что у вас есть соединения с низкой пропускной способностью и высокой задержкой. Контент WML оптимизируется шлюзом оператора связи, чтобы значительно сократить объем данных, передаваемых по воздуху. Если у вас есть iPhone и тому подобное, в областях с надежным покрытием 3G вы можете позволить себе использовать более богатый контент, но если вы хотите, чтобы приложение по-прежнему хорошо работало в более труднодоступных местах, WAP имеет большое преимущество.

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

Если вы изменяете контент в зависимости от пользовательского агента, вы также должны предоставить явный способ доступа к определенному типу контента (например, отдельным uri) - автоматический выбор не всегда правильный, и вы хотите, чтобы клиент мог его переопределить.

Если вы занимаетесь разработкой WAP, обратите внимание на WinWAP - WAP-браузер на базе Windows.

Я настоятельно рекомендую вам проверить Cameron Molls' книга для мобильных веб - дизайна . Это не столько технические инструкции по созданию сайтов, оптимизированных для мобильных устройств, это заставляет вас задуматься о различных доступных вариантах и ​​суммирует достоинства и недостатки каждого из них. Определенно заставит вас задуматься о том, какой подход вы принимаете и правильный ли он. Я думаю, что в нем также есть некоторые указатели на ресурсы, которые помогают обнаруживать запросы мобильных устройств к вашему сайту. Существуют различные варианты.

Если вы хотите потратить очень небольшую сумму денег, вы можете найти бывшую в употреблении копию моей книги «Руководство разработчика веб-приложений для Palm OS» на Amazon менее чем за 1 доллар. Хотя конкретные советы о старых устройствах Palm VII больше не применимы, есть несколько разделов о создании мобильных веб-сайтов, которые все еще могут применяться. Мой основной совет таков: делайте небольшие страницы сначала с релевантной информацией, а затем с навигационными ссылками; переносить общий / шаблонный контент на другие страницы; попробуйте оптимизировать, чтобы уменьшить количество времени, которое пользователь проводит на одной странице; и избегайте загрузки большого количества объектов (изображений, файлов JavaScript) для страницы, чтобы уменьшить задержку.