Как сделать мобильную версию сайта

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

3 ответа

Решение

Пожалуйста, пожалуйста, убедитесь, что вы делаете следующее:

  1. Делайте мобильную версию, только если она добавляет ценность.
  2. Если пользователь запрашивает глубокую ссылку с мобильного устройства, не перенаправляйте на мобильную домашнюю страницу
  3. Разрешить пользователю выбирать для просмотра полной версии
  4. Убедитесь, что планшеты, такие как iPad, используют полную версию по умолчанию
  5. Не используйте WML для смартфонов с высоким разрешением, таких как iPhone
  6. Если ваш полноразмерный веб-сайт непригоден для использования на телефоне, лучше настроить его (не печатать текст слишком широко).

Современные iPhone и iPad прекрасно справляются с большинством полноразмерных веб-сайтов, поэтому нет необходимости в мобильной версии, если она не улучшает пользовательский интерфейс. Я не хочу, чтобы меня перенаправили на детский интерфейс, который не предоставляет нужную мне информацию.

Хорошие примеры мобильных версий включают в себя:

  • Веб-сайт Google
  • Веб-сайт Gmail

Посредственные примеры включают в себя:

  • Любой блогпресс сайт

Плохие примеры включают

  • все, что использует WML

Вот совет Apple по предоставлению мобильных версий для iPad:

Обратите внимание, что строка пользовательского агента Safari на iPad содержит слово "Mobile", но не содержит слово "iPhone". Если вы в настоящее время предоставляете мобильный контент любому браузеру, который идентифицирует себя как "Мобильный", вам следует изменить проверку строк вашего пользовательского агента, чтобы найти iPad и не отправлять неверную версию вашего сайта. Номера версий в этой строке могут со временем меняться по мере появления новых версий Safari на iPad, поэтому любой код, проверяющий строку пользовательского агента, не должен полагаться на номера версий.

Что-то, на что стоит обратить внимание, - это медиа-тип @mobile css, который используется для загрузки различных стилей при загрузке на мобильное устройство. Я не уверен, какие устройства поддерживают это, но я предполагаю, что это будет большинство популярных моделей. Что касается вашего предложения, вы, конечно же, можете разместить два отдельных сайта, но я бы с удовольствием ознакомился с предложениями Алекса, прежде чем вы решите проблему.

http://www.w3.org/TR/css-mobile/

У Алекса было несколько хороших предложений, но если вы действительно хотите предоставить конкретную версию, основанную на мобильной или не мобильной версии, вы можете взглянуть на заголовок http. В некоторых случаях пользовательский агент выдаст его, но не всегда. Проверьте эту ссылку для деталей: http://detectmobilebrowsers.mobi/

Другие вопросы по тегам