Подсказки для разработки веб-страниц для мобильного браузера?
Я дебютирую в разработке веб-приложения, конкретно предназначенного для мобильных браузеров. В то время как я записал веб-страницы прежде в C#/ASP.NET, я ничего никогда не делал специально для ограниченной экранной недвижимости и других особенностей мобильных браузеров. Таким образом, я ищу некоторые указатели здесь:
- Какие конструктивные соображения я должен принимать во внимание (кроме, очевидно, меньшего экрана)?
- Какие полезные функции находятся там в C#, который может быть помещен успешно для мобильного клиента?
- Как Вы удостоверяетесь, что дали относительно универсальный пользовательский опыт для всех различных мобильных браузеров?
- Какие-либо другие подсказки Вы имеете?
Спасибо!
6 ответов
Возможно, очевидно, но убедитесь, что вы определяете индивидуальную ручную таблицу стилей.
<link rel="stylesheet" href="http://domain.tld/mobile.css" type="text/css" media="handheld" />
Хотя современные смартфоны (например, iPhone) могут работать с обычными сайтами, постоянного увеличения и уменьшения масштаба лучше избегать для специального мобильного приложения. Тем не менее, стоит разработать две версии на случай, если пользователь хочет получить доступ к приложению также с ноутбука / настольного компьютера.
Создание хорошего опыта работы с мобильными устройствами в основном связано с пользовательским интерфейсом, а не с конечным приложением.
- Используйте таблицу стилей для мобильных устройств (атрибут
media="handheld"наlink-элементе) - Делайте как можно меньше HTTP-запросов:
- Сжимайте все скрипты и таблицы стилей в один файл (один для .js, один для .css, то есть)
- Как можно меньше изображений
- Учитывайте различия между сенсорными и несенсорными устройствами (размер кнопок, например)
- Будьте осторожны с количеством контента, который вы помещаете на одну страницу.
Вам следует ознакомиться с WURFL , который по сути представляет собой огромный XML-файл, который помогает идентифицировать устройство. Вы берете пользовательский агент и сравниваете его с файлом с его API, чтобы получить все возможности и функции для этого устройства. Я с большим успехом использовал его во многих проектах.
Сжатие, минификация, оптимизация по нескольким причинам. Пропускная способность не очень велика, страница, которая загружается за пару секунд на настольном компьютере, может занять 30+ секунд на мобильном устройстве. Кэширование очень плохо работает на мобильных устройствах. Например, iPhone не будет кэшировать компоненты сайта размером более 25 тысяч. Поэтому делайте изображения, скрипты, таблицы стилей как можно меньше.
Не перенаправляйте на мобильную версию сайта. , потеряв намеченную цель. Если я хочу просмотреть статью на сайте, не переходите на главную страницу для мобильных устройств. Вы можете переключить меня на мобильную версию статьи, но полностью захватить мою цель недопустимо.
Некий cr *** ed.com всегда так делает, что невероятно бесит ....
Какими соображениями по дизайну я должен быть принимая во внимание (кроме очевидно меньший экран)?
Как насчет взаимодействия с пользователем, например, есть несколько устройств, которые позволяют «зависать»,поэтому не повествуйте от psuedo-классов, которые не могут быть эмулированы на мобильном устройстве, но не полностью игнорируйте их, поэтому мобильные устройства могут их использовать.
Подумайте об ориентации конструкции, если устройство поддерживает ландшафтный и горизонтальный вид.
Некоторые устройства, такие как iPhone, не могут управляться с точностью до мм с помощью стилуса, поэтому не делайте входы опасно маленькими.
При использовании эффектов для создания пользовательского интерфейса большинство мобильных устройств не очень хорошо отображают эффекты (например, предоставляемые jQuery)...
Наконец-то тестируйте, тестируйте, тестируйте! Протестируйте на как можно большем количестве реальных мобильных устройств, и когда вы закончите, рассмотрите возможность использования эмуляторов (например, для BlackBerrys или iPhone), хотя это не даст вам ощущения от использования устройства, оно должно показать какие-либо проблемы с рендерингом.