Как я могу начать разработку сайта, который можно просматривать с мобильных телефонов? Например, если вы просматриваете сайт Gmail с iPhone, сайт выглядит иначе, чем обычный сайт. Вы должны создать два разных сайта для этого? Как узнать, доступен ли сайту мобильный браузер?Как я могу создать сайт для мобильных телефонов
Вам не нужно разрабатывать два разных сайта, но вы, вероятно, захотите, чтобы мобильные пользователи получили доступ к вашему сайту.
Есть несколько способов решения этой проблемы, каждая из которых имеет плюсы и минусы. Я предполагаю, что ваш сайт имеет свою информацию в базе данных и публикует эти данные с помощью набора шаблонов? (Как Ruby on Rails или сайт Django, сайт PHP, блог и т. Д.). Если вы вручную закодировали кучу статических HTML-страниц, это будет более трудоемким для вас.
1: То же, HTML, различных стилей для SCREEN и MOBILE
Идея: Вы поставить такую же структуру HTML на все запросы. Вы создаете таблицу стилей для SCREEN и одну для MOBILE.
Хорошо: для вас, программист. Вам легче поддерживать 2 таблицы стилей, чем поддерживать 2 полностью отдельных сайта шаблонов.
Плохо: для ваших пользователей. Сайт, который прост в использовании на мобильном устройстве, обычно неэффективен для обычного браузера; и сайты, оптимизированные для настольных компьютеров/ноутбуков, часто терпят неудачу на мобильном устройстве. Очевидно, это зависит от того, как вы кодируете свои страницы, но в большинстве случаев перенаправление вашего обычного сайта на мобильный браузер будет плохо для ваших пользователей. (См http://www.useit.com/alertbox/mobile-usability.html для резюме последних исследований юзабилити Якоба Нильсена на мобильных сайтах.)
2: Ведение отдельных участков
(Gmail поддерживает даже больше, чем 2 системы Они в основном имеют различные контейнеры приложений/шаблоны обрабатывать одни и те же данные: полную версию браузера AJAX, обычную версию браузера для браузера HTML, базовую мобильную версию, приложение на базе Blackberry и приложение для родного iPhone.)
Это новый стандарт для сайтов, которые действительно заботятся о том, чтобы как мобильное, так и настольное присутствие. Это больше для вас, но в целом это намного лучше для ваших пользователей.
Сверху вы можете создать один удаленный чистый HTML-сайт, который работает на мобильных устройствах и который действует как резерв для редкого веб-пользователя, у которого нет javascript, или у которого есть основные проблемы доступности, которые мешают им используя «полный» сайт.
Кроме того, в зависимости от вашей пользовательской базы: в США люди обычно имеют доступ к рабочему столу/ноутбуку и используют свои мобильные устройства для дополнительного доступа. Например, я бронирую билеты на самолет и аренду автомобиля с помощью своего настольного компьютера, но я хочу найти код моей брони на своем мобильном телефоне. Во многих случаях вы можете уйти с ограничениями, которые вы предлагаете на мобильном сайте, и потребовать, чтобы полный компьютер выполнял необычные варианты использования.
Основная процедура:
Возможно, вы захотите следовать за Quirksmode за его новые статьи о мобильных тестах.
3: Шаблоны вывод различных фрагментов данных в зависимости от агента пользователя, и поддерживать отдельные таблицы стилей
нравится (2), это требует, чтобы вы обнюхивает агент пользователя. В отличие от (2), вы все еще используете одну и ту же логику страницы и не должны поддерживать два отдельных сайта. Это может быть хорошо, если вы просто имеете дело с блогом или веб-сайтом, который в основном касается чтения данных.
В коде шаблона, вы можете сказать такие вещи, как
if($useragentType != mobile) {
echo('bigBlockOfRelatedArticlesAndAds.php');
}
Это позволяет в основном сохранить один набор файлов шаблонов. Вы также можете оптимизировать страницы, которые вы отправляете своим мобильным пользователям, чтобы они не получали большую раздутую страницу, когда они просто хотели прочитать ваш блог или что-то еще.
Вам нужно создать два разных сайта для этого?
Да
Как я могу знать, если сайт доступен на мобильном браузере?
Ваш язык программирования, вероятно, каким-то образом просматривает информацию клиента. PHP, например, имеет супергрупповую переменную $_SERVER, которая имеет все виды информации как обслуживающего сервера, так и клиента-клиента. В этом случае, вы были бы заинтересованы в значении $_SERVER['HTTP_USER_AGENT'], который даст следующий результат, я должен посетить страницу:
Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_6; en-us) AppleWebKit/528.16 (KHTML, like Gecko) Version/4.0 Safari/528.16
Это говорит о том, что я бегу Mac OS X 10.5.6, используя Safari 4.0. Известны ключевые слова для различных мобильных браузеров. Одна из версий браузера iPhone, например, имеет следующий агент пользователя:
Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3
«iPhone» уже дает его прочь, но подтверждается еще ключевых слов «Mobile» и «Сафари»
Keep это просто, подумайте opera mini, и вы это исправите. (iPhone имеет больше от нормального браузера ...)
Фокус на содержание
Избегайте плагины
Следуйте сетевые стандарты
Раздельное содержание от макета/дизайн , используйте css как можно больше.
Используйте текст и фотографии.
Добавьте остальную часть колокола и свистки, если вы должны, но убедитесь, что веб-сайт: содержание s всегда доступно даже тогда, когда колокола и свистки выключены. Если вы можете просматривать страницу с помощью простого браузера, такого как lynx и обычный браузер, например firefox, то вы на правильном пути.
Для получения дополнительной информации, не стесняйтесь посетить any browser campaign
Edit: В случае, если это не очевидно, вы работаете с различным CSS для разных типов браузеров, но всегда используете один и тот же контент. Посетите css zen garden для приятной демонстрации.
Update: Добавление ссылки на типы CSS СМИ, и, как указано другим это портативный вариант, который является интересным.
Большинство сайтов имеют немного другой поддомен для мобильных сайтов (большинство используют "м"). например flickr использует m.flickr.com
(есть рекомендация использовать .mobi TLD, но я никогда не видел, что используется)
Сделать дизайн супер просто, не используйте слишком много графики, где нужно, чтобы держать их в качестве маленький по возможности. This может быть полезен для дизайна.
Возможно, я построил бы другой набор страниц для мобильных пользователей, используя те же бизнес-объекты и т. Д., Которые вы используете для основного сайта.
Если различия между дизайном двух достопримечательностей невелики, вы можете получить доступ только к отдельным файлам CSS?
Для проверки того, как weppage выглядит в мобильном браузере использовать Opera Mini Emulator
Большинство мобильных устройств поддерживают эти дни «мобильные таблицы стилей», которые являются просто альтернативными таблицами стилей для отображения вещи проще. Вы можете добавить мобильную таблицу стилей на ваш сайт в обычном порядке, и включают в себя media="handheld" атрибут:
<link rel="stylesheet" type="text/css" href="/mobile.css" media="handheld" />
Затем эти стили будут применяться на мобильные телефоны.
Единственная проблема с этим методом заключается в том, что ваш HTML является громоздким, для загрузки страницы может потребоваться некоторое время, поскольку большинство мобильных браузеров работают медленнее (кроме Opera Mini). Вот почему более крупные сайты, такие как flickr и digg, используют отдельные сайты.
Дополнительные примечания:
media. IIRC, добавив вышеприведенный код, заставит браузеры игнорировать первую таблицу стилей. Если вы добавите media="all" к первому, оба будут использоваться (и вы можете таким образом переопределить исходные стили, а не начинать заново).Проверьте проект WURFL. Его цель - помочь разработчикам ориентироваться на несколько телефонных браузеров и начать путь назад, прежде чем появился Mobile Safari, еще во времена HDML, WAP и XHTML-MP. Тем не менее, он обновляет возможности современных устройств, таких как iPhone. Он имеет данные на более чем 400 устройствах и имеет библиотеки в Java, PHP, Perl, Ruby, Python, .NET, C++. В зависимости от того, насколько широким вы хотите настроить таргетинг на свое мобильное приложение, вам стоит посмотреть. Here's список сайтов, использующих WURFL.
Другой связанный проект, написанный Лукой Пассани (соучредителем и сопровождающим WURFL), является Switcher. Вы можете использовать это для автоматического перенаправления на мобильную версию своего сайта.
Ваш сайт должен быть ограниченным для мобильного телефона, который может поддерживать максимальные требования. вы не можете даже развлечь всех mobile phone.
Ваш веб-сайт должен иметь различный набор стилей css, а HTTP AGENT должен проверять тип клиента в соответствии с запросом выбора Css.
В обычной Opera вы можете использовать View> Small Screen. Он будет очень похож на Opera Mini, но, вероятно, есть небольшие различия в CSS и JavaScript. –