С чего начать с разработки смартфонов?

Ответ 1

UPDATE

В то время как большая часть текста, приведенного ниже, по-прежнему применяется, я бы сказал, что jQuery Mobile отлично справляется с обеспечением хорошо продуманного и пригодный для использования набор компонентов пользовательского интерфейса, а также облегчает многие проблемы с тестированием и обнаружением устройств, которые я использовал WURFL в прошлом. Он все еще в бета-версии, но, похоже, работает очень хорошо. Я рекомендую проверить его.

Две наиболее важные проблемы, которые необходимо учитывать при запуске:

1) Обнаружение устройства

2) Мобильный дизайн пользовательского интерфейса

Для номера версии 1 я настоятельно рекомендую посмотреть набор данных устройства WURFL:

http://wurfl.sourceforge.net/

Используя это, вы можете получить (некоторые) возможности устройств, которые обращаются к вашему сайту, используя их строку User Agent. Тестирование мобильных веб-приложений вроде как тестирование браузера из ада - существует так много разных комбинаций устройств и браузеров, что это сложная задача. Если вы можете сосредоточиться на разработке одной или двух версий для довольно способных телефонов, скажите:

1) минимальная ширина 300 пикселей с заявленной "веб-поддержкой" и сенсорным экраном 2) То же, что и выше, но без сенсорного экрана

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

1) Составление списка всех ваших друзей и каких телефонов у них есть 2) Переход в магазин телефонов и использование этих телефонов для тестирования вашего сайта.

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

Что касается дизайна пользовательского интерфейса, есть несколько проблем. Самый простой - красивый CSS. Здесь просто посмотрите на некоторые мобильные сайты, которые вам нравятся, и украсть их CSS. Как только вы это сделаете, вы в основном делаете обычную старую веб-разработку, как раз на маленьком экране. ul станет хорошим iPhone-y-таблицами и т.д.

Большая проблема - удобство использования мобильных веб-сайтов. Во многих отношениях мы находимся в ситуации 90-х-Интернета с развитием мобильных веб-сайтов. Я имею в виду, что мы работаем без устоявшихся шаблонов проектирования. Это делает создание мобильных веб-приложений действительно забавным, но это также означает, что вы должны быть готовы настроить свой уродливый/сломанный интерфейс, когда развиваются лучшие идеи. Одним из текущих примеров являются глобальные навигационные/панибрасы, которые вы видите на многих мобильных сайтах. Удивительное количество людей пытается имитировать поведение родных приложений для iPhone, предоставляя постоянный инструмент навигации (кнопка "Назад" ) в мобильном приложении. Хотя это довольно красиво, у него есть несколько проблем:

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

2) Сеть отличная. Вы можете вводить, оставлять и повторно вводить "приложения" в любой момент своей структуры. Предполагая, что пользователь использует линейный путь через ваше приложение, вы уменьшаете его webiness, делая его намного более грубым по отношению к остальной части Интернета.

3) Это ломается. Либо вы можете попасть в ситуацию, когда навигатор и навигатор браузера указывают в противоположных направлениях (нажатие кнопки "Назад" в вашем приложении проходит вперед по истории приложений), или вы подделываете кнопку "Назад" с javascript, которая ломается, t начинать в начале приложения (по электронной почте ссылку, закладка) или настраивать сеансы, что может быть большой болью, чтобы просто скопировать то, что вы получаете из браузера бесплатно. Сессии также уязвимы для нарушения (ссылки по электронной почте, закладки), и вы действительно не получаете много.

Я думаю, мои основные моменты здесь:

1) Не забывайте, что вы в Интернете. Сеть крутая, браузеры классные, используйте это.

2) Не бойтесь играть. Здесь не так много устоявшихся шаблонов, поэтому вам, возможно, придется попробовать свои собственные.

Ответ 2

A List Apart может вас начать: "Поместите свой контент в мой карман" от CRAIG HOCKENBERRY

Ответ 3

Вот сайт, который предлагает приложение для смартфонов для Интернета, я еще не тестировал, я опубликую комментарий после его использования! http://www.makeuseof.com/dir/appsbar-build-your-own-smartphone-app/

Ответ 4

С современными смартфонами фактически нет разницы между разработкой обычной веб-страницы и выделенного веб-сайта.

Но вы могли бы попробовать эмуляторы, чтобы основные игроки, такие как Apple, RIM, Motorola и Nokia, могли посмотреть, как они выглядят.

Ответ 5

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

• m.reddit.com
• diggriver.com
• mobile.washingtonpost.com

Ответ 6

Поскольку современные мобильные браузеры работают так же, как настольные браузеры, старая пословица "минимизировать JS и CSS, оптимизировать изображения" должна быть вашей главной задачей, поскольку пропускная способность более ценна для мобильных устройств.

Кроме того, рассмотрите следующее:

• Подумайте, нужны ли вам все ваши изображения, и если они слишком большие для небольших экранов. Рассмотрите возможность удаления или уменьшения размера больших изображений.
• Проверьте свой JavaScript - Будет ли ваш сайт работать без него? Может быть полезно отключить его части, так как это может легко снизить скорость работы в мобильных браузерах.
• Вы часто можете получить просто путем включения специализированных стилей CSS, предназначенных для небольших экранных устройств на вашем основном сайте.

Вам также может пригодиться: Почему ваш мобильный сайт, возможно, сосет

Ответ 7

Мобильные сайты часто используются на обычных телефонах и часто переходят на m.example.com вместо www.example.com. Эти сайты имеют мало/не поддерживают javascript или css. Когда вы спрашиваете о мобильных сайтах, имейте в виду, что существуют два типа мобильных сайтов.

Современный смартфон должен обрабатывать браузеры так же, как полноценный браузер, но это не так. Фактически, iPhone живет в мире фантазий и будет сообщать ширину окна более 900 пикселей!

Есть трюки, которые вы можете сделать для смартфона. Сенсорный экран не нужен для псевдо-класса: hover. Это может быть проблемой для меню, которое требует зависания. Вы можете спроектировать вокруг этого. Как? вы спрашиваете...

Apple смотрит на новый метатег (он делает поиск по Google), а другие браузеры для смартфонов тоже смотрят на это. Благодаря этому вы можете заставить смартфон сообщать о фактическом размере экрана в пикселях, а не о запрограммированном размере фантазии.

Теперь, когда вы это сделали, вы можете использовать условные выражения css,

@media only all and (max-width:600px){

CSS RULES THAT ONLY APPLY IF THE SCREEN WIDTH IS <600 PIXELS
}

код >

Я использовал это, чтобы заблокировать <div>, который загромождал экран мобильного устройства: например, лайтбокс. Я также использовал это для изменения ширины изображения, поэтому они лучше подходят для устройства. Почему я выбрал 600 пикселей? Я чувствовал, что многие новые "нетбуки" также должны быть сосредоточены здесь.

Надеюсь, это поможет.

- Дэйв

Ответ 8

Если вы хотите сделать разработку специально для iPhone или iTouch, используйте этот условный оператор.

[if SafMob] @import url(iphone.css);

Вот статья о создании сайтов для мобильных устройств. http://www.alistapart.com/articles/pocket/

Ответ 9

Обсуждение Meagan Fisher на Разработка эффективных мобильных интерфейсов дает хороший обзор. Она рекомендует книгу "Мобильный веб-дизайн" Кэмерон Молл. Технология разумная, я бы начал с знакомства с XHTML Mobile Profile, если вы еще этого не сделали.

Что касается дизайна, подумайте тонким. Захватите книгу с красивой типографикой и посмотрите, можете ли вы дублировать макет страницы с помощью CSS. "Элементы типографского стиля, применяемые к Интернету" - хорошая отправная точка для этого. Телефонные сайты касаются прокрутки, а не сложной навигации. Ритм и интервал важны. Держите изображения маленькими, а текст сильно контрастным, и вы получите то, что быстро загружается и выглядит хорошо.

Ответ 10

Существует также этот триппер "Мобильный веб-дизайн" от Cameron Moll:

Состояние мобильной сети
Методы безумия
Советы и методы

Серия с 2005 года, но многие из данных по-прежнему актуальны. В последней части "Советы и методы" также перечислены многие другие ресурсы для разработки мобильных веб-сайтов.