С чего начать с веб-разработки для смартфонов? - PullRequest
14 голосов
/ 04 декабря 2009

Ха все,

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

Я не создаю приложение, я создаю веб-сайт и ищу полезные действия, а не делаю это в отношении html, css, ширины / высоты подходов, javascript (jquery будет хорошо играть на всех платформы?) и все остальное, что относится к платформе такого типа.

Глядя на других, мне очень нравится http://mobile.whistlerblackcomb.com/.

С уважением, Denis

Ответы [ 10 ]

15 голосов
/ 21 декабря 2009

UPDATE

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


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

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

2) Дизайн мобильного интерфейса

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

http://wurfl.sourceforge.net/

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

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

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

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

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

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

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

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

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

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

Я предполагаю, что мои основные моменты здесь:

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

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

1 голос
/ 11 декабря 2011

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

1 голос
/ 04 декабря 2009

List Apart поможет вам начать: «Положи свой контент в карман» от CRAIG HOCKENBERRY

0 голосов
/ 14 декабря 2009

Существует также три части, «Мобильный веб-дизайн» Кэмерон Молл:

Состояние мобильного Интернета
Методы к безумию
Советы и приемы

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

0 голосов
/ 14 декабря 2009

Доклад Meagan Fisher о Разработка эффективных мобильных интерфейсов дает хороший обзор. Она рекомендует книгу «Мобильный веб-дизайн» Кэмерон Молл. Если говорить о технологиях, я бы начал с знакомства с мобильным профилем XHTML, если вы этого еще не сделали.

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

0 голосов
/ 10 декабря 2009

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

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

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

0 голосов
/ 09 декабря 2009

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

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

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

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

Теперь, когда вы сделали это, вы можете использовать условные операторы CSS, </p> <p>@media only all and (max-width:600px){</p> <pre><code>CSS RULES THAT ONLY APPLY IF THE SCREEN WIDTH IS <600 PIXELS }

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

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

- Dave

0 голосов
/ 04 декабря 2009

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

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

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

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

0 голосов
/ 04 декабря 2009

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

  • m.reddit.com
  • diggriver.com
  • mobile.washingtonpost.com
0 голосов
/ 04 декабря 2009

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

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

...