Оптимизация сайта для мобильных устройств

Question

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

1. Большинство мобильных устройств имеют собственные браузеры. Как можно протестировать приложение в этих разных браузерах (тестирование на реальном устройстве невозможно из-за ограничений безопасности)?

2. Как оптимизировать сайт под экран разных размеров?

3. Как сделать приложение удобным для прикосновений?

4. Как определить ориентацию устройств (в устройствах с акселерометром)?

5. Как проверить, что устройство не является настольным компьютером / ноутбуком?

Answer 1

Полное руководство должно быть в соответствии с рекомендациями W3C Mobile Web: http://www.w3.org/TR/mobile-bp/ Не позволяйте длине этого разочаровать вас - я считаю, что его гораздо легче читать, чем другие спецификации W3C. Ключевым разделом являются Положения о наилучшей практике, разделенные на куски размером с кусочек, часто с примером. Здесь также имеется недавнее и обширное руководство по оптимизации для мобильных веб-сайтов: http://dev.opera.com/articles/view/the-mobile-web-optimization-guide/ (отказ от ответственности: я работаю в Opera)

Answer 2

Вещи, которые я использовал при разработке мобильных веб-сайтов.

1. Узнайте, сколько устройств вы планируете поддерживать.Вот некоторые вопросы, которые вы можете задать:
   • Будете ли вы поддерживать только смартфоны
   • Какие платформы вы планируете поддерживать (iPhone, Android, Symbian?)

На многие из вас могут ответить те виды аналитики, которые вы можете собрать.Если у вас очень мало статистики, вы можете начать с этой стратегии.

1. Разделите целевой диапазон устройств на

   • simple (основные телефоны сминимальные возможности просмотра.) - Создайте для них очень простой простой ванильный сайт.
   • medium (смартфоны старшего поколения с браузерами с плохой поддержкой javascript) - Создайте сайт с чуть лучшими функциями.
   • Смартфоны Highend (iPhone, Android, WebOS) - предоставляют джазовые функции, которые поддерживают эти телефоны.

2. Используйте библиотеку обнаружения устройств, такую ​​как WURFL / .Mobi, для обнаружения устройств и WALL для динамическихрендеринг контента.

3. Вы можете использовать .Mobi для обнаружения мобильного браузера, совместимого с HTML5.Таким образом, вы можете воспользоваться возможностями HTML5 на устройствах, которые его поддерживают.

4. Для тестирования вы можете следовать этому подходу

   • тестировать в браузерах - Firefox/ Safari / Opera имеет плагины для изменения USER_AGENT и может симулировать мобильное тестирование.
   • Тестирование на симуляторах - все платформы устройств предоставляют бесплатную загрузку эмуляторов
   • При необходимости попробуйте продукты для эмуляции устройств, такие как устройства где угодно /perfecto.

Я надеюсь, что смог прояснить хотя бы некоторые из вас.:)

Answer 3

Q1 Большинство мобильных устройств имеют собственные браузеры.Как тестировать приложение в этих разных браузерах (тестирование на реальном устройстве невозможно из-за ограничений безопасности)?

Ответ зависит от того, сколько устройств вы хотите протестировать и поддерживать.

iPhone: устройство и симулятор доступны.Android: устройства и эмулятор доступны

Другие мобильные телефоны?

чек http://www.deviceanywhere.com

Конечно, вам нужно оплатить сервисный сбор.Но я думаю, что это разумно.

Q2 Как оптимизировать сайт для экрана разных размеров?

iphone4 WVGA854 WVGA800 VGA HVGA QVGA QCIF +

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

Q3 Как сделать приложение удобным для прикосновений?

Это проблема вашего дизайна.

Q4 Как определитьОриентация устройств (в устройствах с акселерометром)?

Android и iOS имеют специальное сообщение о таком событии.Вы должны следовать за таким сообщением.Разумеется, вам требуется как альбомная, так и макетная информация о портлете.

Q5 Как проверить, что устройство не является настольным компьютером / ноутбуком?

Вы можете использовать заголовок User-Agent или IP-адрес.Но IP-адрес не является хорошим методом.