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

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

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

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

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

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

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

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

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

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

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

Вот две вещи, которые вы можете сделать, чтобы улучшить поддержку 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" />

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

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

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

Также вы можете взглянуть на Лучшие практики мобильного Интернета из w3c.

Код: Заставляет валидатор 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, которые используют отзывчивый рендеринг чтобы этот сайт подстраивался под размер экрана, будь то Планшет, Мобильное устройство или Рабочий стол

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

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