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

Question

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

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

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

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

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

Answer 1

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

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

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

Кроме того, вы можете взглянуть на Mobile Web Best Practices от w3c.

Answer 2

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

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

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

Answer 3

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

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

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

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

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

Answer 4

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

Answer 5

Если вы хотите потратить очень небольшую сумму денег, вы можете найти использованную копию моей книги "Palm OS Web Application Developer's Guide" на Amazon за менее чем 1 доллар США. Хотя конкретные советы о старых устройствах Palm VII больше не применяются, есть несколько разделов, посвященных созданию мобильных веб-сайтов, которые могут все еще применяться. Мой основной совет таков: сначала создайте страницы с соответствующей информацией, а затем навигационными ссылками; нажимать общий/шаблонный контент на другие страницы; попытайтесь оптимизировать, чтобы уменьшить время, которое пользователь тратит на одну страницу; и избегать загрузки множества объектов (изображений, файлов JavaScript) для страницы, чтобы уменьшить латентность.

Answer 6

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

Сделать страницу свитка, чтобы скрыть 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 7

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

<!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”> 

Answer 8

В настоящее время (2014)

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

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

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