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

Question

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

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

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

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

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

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

Answer 1

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

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

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

1. Отдельный выход целевого диапазона устройств в

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

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

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

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

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

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

Answer 2

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

Answer 3

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

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

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

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

проверка http://www.deviceanywhere.com

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

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

iphone WVGA85 WVGA800 VGA HVGA QVGA QCIF +

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

Q3 Как настроить удобное приложение?

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

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

У Android и iOS есть специальное сообщение о таком событии. Вы должны следовать такому сообщению. Конечно, вам нужны как ландшафт, так и портлайн.

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

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