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

Question

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

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

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

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

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

Answer 1

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

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

Чтобы проверить возможности различных мобильных телефонов, взгляните на ВУРФЛ.

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

Answer 2

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

Прокрутите страницу вверх, чтобы скрыть панель URL:

<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" />

Answer 3

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

Answer 4

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

Возможно, нам не понадобится отдельный сайт для мобильных устройств, вместо этого мы можем использовать библиотеки внешнего интерфейса, такие как Твиттер-бутстрап который использует отзывчивый рендерингчтобы сайт адаптировался к размеру экрана, будь то Таблетка или Мобильное устройство или Рабочий стол

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

Чтобы узнать больше о Твиттер-бутстрап щелкнуть здесь

Answer 5

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

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

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

Answer 6

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

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

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

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

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

Answer 7

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

Answer 8

Код:Заставляет валидатор 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”>