Вам не нужно проектировать два разных сайта, но вы, вероятно, захотите, если важно, чтобы мобильные пользователи имели доступ к вашему сайту.
Есть несколько способов решения этой проблемы, каждый из которых имеет свои плюсы и минусы. Я предполагаю, что ваш сайт имеет свою информацию в базе данных, и публикует эти данные с помощью набора шаблонов? (Например, сайт Ruby on Rails или Django; сайт PHP; блог и т. Д.) Если вы вручную кодировали несколько статических HTML-страниц, это будет для вас более трудоемким.
1: тот же HTML, разные таблицы стилей для ЭКРАНА и МОБИЛЬНОЙ
Идея: вы предоставляете одинаковую структуру HTML для всех запросов. Вы создаете таблицу стилей для ЭКРАНА и одну для МОБИЛЬНОЙ.
Хорошо: для вас, программист. Вам проще поддерживать 2 таблицы стилей, чем поддерживать 2 совершенно отдельных сайта-шаблона.
Плохо: для ваших пользователей. Сайт, который легко использовать на мобильном устройстве, обычно неэффективен для обычного браузера; и сайты, оптимизированные для настольного компьютера / ноутбука, часто терпят неудачу на мобильном устройстве. Очевидно, это зависит от того, как вы кодируете свои страницы, но в большинстве случаев загрузка обычного сайта в мобильный браузер будет плохой для ваших пользователей. (См. http://www.useit.com/alertbox/mobile-usability.html для краткого изложения недавнего исследования юзабилити Якоба Нильсена на мобильных сайтах.)
2: ведение отдельных сайтов
(Gmail поддерживает даже более 2 систем! В основном они имеют разные контейнерные приложения / шаблоны, которые обрабатывают одни и те же данные: полную версию браузера AJAX; простую версию браузера HTML; базовую мобильную версию; нативное приложение Blackberry и родное приложение для iPhone.)
Это новый стандарт для сайтов, которые действительно заботятся о своем присутствии на мобильных устройствах и компьютерах. Это больше работы для вас, но в целом это гораздо лучше для ваших пользователей.
С другой стороны, вы, вероятно, можете создать один урезанный чистый HTML-сайт, который будет работать для мобильных устройств и будет использоваться в качестве запасного варианта для редкого веб-пользователя, у которого нет javascript или у которого есть серьезные проблемы с доступностью, которые мешают им использовать «полный» сайт.
Кроме того, в зависимости от вашей пользовательской базы: в США люди обычно имеют доступ к настольному компьютеру / ноутбуку и используют свои мобильные устройства для дополнительного доступа. Например, я бронирую билеты на самолет и аренду автомобиля с помощью настольного компьютера, но я хочу посмотреть код бронирования на своем мобильном телефоне. Во многих случаях вы можете обойтись без ограничения функциональности, которую вы предлагаете на мобильном сайте, и потребовать полный компьютер для выполнения необычных сценариев использования.
Основная процедура:
- Дизайн и создание интерфейсов для мобильных устройств и экрана.
- запускать сайты по двум разным URL; Появляется соглашение: www.yoursite.com для настольной версии и m.yoursite.com для мобильной версии. (Это позволяет пользователям переходить непосредственно на m.yoursite.com, если они знают о соглашении.)
- На сайте www.yoursite.com найдите пользовательский агент и проверьте, является ли браузер пользователя мобильным. Если это так, направьте пользователя на m.yoursite.com.
- Существуют снифферы, написанные на разных серверных языках (PHP, Perl и т. Д.), Которые вы, вероятно, можете использовать. Проверьте лицензии. Вот пример сниффера, написанного на php .
- Из Статья Википедии о прослушивании пользовательского агента : «Веб-сайты, специально предназначенные для мобильных телефонов, такие как I-Mode NTT DoCoMo или порталы Vodafone Live! Vodafone, часто сильно зависят от прослушивания пользовательского агента, поскольку мобильные браузеры часто сильно отличаются друг от друга. За последние несколько лет были сделаны многие разработки в области мобильного просмотра, в то время как многие старые телефоны, не обладающие этими новыми технологиями, все еще широко используются. Поэтому мобильные веб-порталы часто генерируют совершенно другой код разметки в зависимости от Мобильный телефон использовался для их просмотра. Эти различия могут быть небольшими (например, изменение размера определенных изображений для отображения на экранах меньшего размера) или весьма значительными (например, отображение страницы в формате WML вместо XHTML). "
- На m.yoursite.com предоставьте ссылку на www.yoursite.com. Пользователи, которые нажимают на эту ссылку, НЕ должны перенаправляться обратно на мобильный сайт, и то, как вы это сделаете, зависит от вашей реализации.
Возможно, вы захотите следовать Quirksmode за его новыми статьями о мобильном тестировании.
3: шаблоны выводят разные блоки данных в зависимости от агента пользователя и поддерживают отдельные таблицы стилей
Как и (2), для этого требуется, чтобы вы прослушали пользовательский агент. В отличие от (2), вы все еще используете ту же логику страницы и не должны поддерживать два отдельных сайта. Это может быть хорошо, если вы просто имеете дело с блогом или веб-сайтом, который в основном посвящен чтению данных.
В коде вашего шаблона вы можете сказать что-то вроде
if( $useragentType != mobile ) {
echo( 'bigBlockOfRelatedArticlesAndAds.php' );
}
Это позволяет вам в основном поддерживать один набор файлов шаблонов. Вы также можете упростить страницы, которые вы отправляете своим мобильным пользователям, чтобы у них не было большой раздутой страницы, когда они просто хотели прочитать ваше сообщение в блоге или что-то еще.