Советы по разработке веб-страниц для мобильного браузера?

Question

Я дебютирую в разработке веб-приложения, специально предназначенного для мобильных браузеров.Хотя раньше я писал веб-страницы в C # / ASP.NET, я никогда ничего не делал специально для ограниченного экрана и других особенностей мобильных браузеров.Итак, я ищу несколько указателей здесь:

• Какие конструктивные соображения я должен учитывать (кроме явно меньшего экрана)?
• Какие полезные функции есть в C #что может дать хороший эффект для мобильного клиента?
• Как обеспечить одинаково удобное использование для всех мобильных браузеров?
• Есть ли у вас еще какие-либо советы?

Спасибо!

Answer 1

Сжатие, минимизация, оптимизация по нескольким причинам.Пропускная способность невелика, страница, которая загружается за пару секунд на рабочий стол, может занять более 30 секунд на мобильном устройстве.Кэширование действительно плохо на мобильных телефонах.Например, iPhone не будет кэшировать компоненты веб-сайта свыше 25 КБ.Так что ваши изображения, сценарии, таблицы стилей должны быть как можно меньше.

Answer 2

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

• Используйте таблицу стилей мобильного устройства (атрибут media="handheld" в элементе link)
• Иметь как можно меньше HTTP-запросов:
  • Сжать все скрипты и таблицы стилей в один файл (один для .js, другой для .css, то есть)
  • Как можно меньше изображений
• Имейте в виду различия между сенсорными и не сенсорными устройствами (например, размер кнопок)
• Будьте осторожны с количествомсодержание, которое умещается на одной странице.

Answer 3

Вероятно, очевидно, но убедитесь, что вы определили индивидуальную ручную таблицу стилей.

<link rel="stylesheet" href="http://domain.tld/mobile.css" type="text/css" media="handheld" />

Хотя современные смартфоны (например, iPhone) могут обрабатывать обычные сайты, постоянное увеличение и уменьшение масштаба лучше избегать для специального мобильного приложения. Однако стоит разработать две версии на тот случай, если пользователь захочет получить доступ к приложению с помощью ноутбука / настольного компьютера.

Answer 4

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

Как насчет взаимодействия с пользователем, например, есть несколько устройств, которые допускают «зависание», поэтому не зависите от псевдо-классов, которые нельзя эмулировать на мобильном устройстве, но не игнорируйте их полностью, так что мобильные устройства могут использовать их.

Подумайте об ориентации дизайна, если устройство поддерживает горизонтальный и горизонтальный просмотр.

Некоторые устройства, такие как iPhone, не могут работать с точностью до мм с помощью стилуса, поэтому не делайте вводы опасно маленькими.

Если использовать эффекты для запуска интерфейса, большинство мобильных устройств не очень хорошо отображают эффекты (например, предоставляемые jQuery) ...

Наконец тестируй, тестируй, тестируй! Протестируйте как можно больше реальных мобильных устройств, и когда вы закончите, подумайте об использовании эмуляторов (например, для BlackBerrys или iPhone ), хотя это не даст вам ощущение использования устройства, оно должно показывать любые проблемы рендеринга.

Answer 5

Вы должны проверить WURFL , который в основном представляет собой огромный XML-файл, который помогает вам идентифицировать устройство.Вы берете пользовательский агент и сравниваете его с файлом с их API, чтобы получить все возможности и функции для этого устройства.Я использовал его во многих проектах с большим успехом.

Answer 6

Не перенаправляйте на мобильную версию сайта, теряя намеченную цель. Если я хочу просмотреть статью на сайте, не переводите меня на домашнюю страницу мобильного устройства. Вы можете перевести меня на мобильную версию этой статьи, но захват цели полностью недопустим.

Некий кр *** ed.com делает это всегда, что невероятно бесит ....