По данным AdMob, доля операционной системы iPhone составляет 50% от всего мирового рынка смартфонов, за ней следует ОС Android, чья доля на мировом мобильном рынке составляет 24%.

Прогнозы продаж Ipad компании Apple говорят о четырех миллионах единиц проданных планшетных компьютеров в первый год появления новинки. Нравится нам это или нет, iPhone OS и Safari, в частности, стали силой, с которой необходимо считаться. И если вы хотите успешно работать и развиваться в сфере разработки сайтов и мобильных продуктов, вам пора уже изучить и ознакомиться с инструментами, необходимыми для оптимизации веб — сайтов и веб — приложений для этой OS.

К счастью, Safari на iPhone OS является действительно большим браузером, который во многом облегчает работу. Так же, как и Safari 4 для стационарных компьютеров, она поддерживает CSS3 и HTML5.

Сейчас идет множество активных дискуссий о том, как писать приложения для этой OS. Вы все равно можете создавать мощные приложения с помощью HTML, JavaScript и CSS. Эта статья посвящена трем этапам разработки и оптимизации вашего сайта: дизайн, верстка и тестирование.

Прежде чем рассмотреть эти три этапа, давайте поговорим о преимуществах веб – приложений по сравнению с простыми мобильными приложениями.

Преимущества создания веб — приложений для мобильных устройств:

•  Оптимизация веб — приложения для других популярных платформ, таких как Android и Blackberry с тем же кодом намного проще.
• Вам не придется учить Objective-C.
• Если вы повторно взимаете плату с пользователей вашего приложения, вам не придется делиться доходом с компанией Apple.
• Вы получаете 100% контроль над средствами оплаты, продвижения и распространения вашего мобильного приложения. Последний пункт можно считать недостатком, смотря с какой точки зрения на него посмотреть.

Недостатки создания веб – приложений для мобильных устройств:

•  Не продается в App Store.
• Установка веб — приложения на мобильное устройство требует времени.
• Нет доступа к некоторым из функций, которые являются родными для iPhone OS.

Дизайн

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

Вдохновение

Не многие знают, что компания Apple имеет специальный раздел на своем сайте, который посвящен демонстрации оптимизированных сайтов.

Популярные веб — приложения на Apple.

Есть также несколько галерей на других сайтах, которые демонстрируют лучшие примеры работы мобильного веб — дизайна:

• Apple Web Apps Listing
• Mobile Awesomeness Design Gallery
• CSS iPhone Design Gallery
• Well Placed Pixels
• Apple App Store.

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

Бумага

Я давно использую бумажные эскизы при разработке очередного проекта мобильного приложения или веб – сайта. Почему мне нравится работать на бумаге? Потому что на бумаге сразу видны масштабы, а также же необходимые размерные ограничения.  Для успешной оптимизации веб – приложения для iPhone OS, вы должны сократить множество компонентов. Я предлагаю минимальное сохранении дизайна.

Notepod отлично подходит для создания первоначальных идей для iPhone и iPad.

•  Notepod: iPad and iPhone sketchbooks
• App Sketchbook
• PixelPads
• UI Stencils sticky pads
• Apress iPhone Application Sketch Book
• Printable iPhone Wireframe Template (бесплатное)

Ipad GUI с Тихана Lax.

 Теперь, когда вы примерно представляете, как будет выглядеть ваше приложение, давайте обратимся непосредственно интерфейсу. Мне очень нравится работать с OmniGraffle, но иногда имеет смысл использовать Photoshop. В любом случае, эти инструменты помогут облегчит и ускорить вашу работу.

•  iPad GUI preview from Teehan + Lax.
• iPhone GUI PSD 3.0 and iPad GUI PSD (Photoshop)
• Layered iPhone GUI elements (Photoshop), from Designer’s Toolbox
• PSD Vector Kit (Photoshop), статья с Smashing Magazine
• iPad and iPhone stencils; так же см. на Graffletopia (OmniGraffle)
• iPhone and iPad Development GUI Kits, Stencils and Icons

Код

Когда вы начинаете писать код для Safari на iPhone OS, вы приходите к пониманию того, как важна работа браузера. Кроме того, существуют тонкие различия в работе браузеров iPhone и iPad. Самое главное, что Safari поддерживает CSS3 и HTML5, так что вы можете использовать современные коды без необходимости беспокоиться о кросс – браузерной поддержке.

Образование

Компания Apple проделала хорошую работу по документированию Safari для iPhone OS. Ниже я вам расскажу, какие источники вам нужно прочесть для того чтобы ориентироваться в особенностях iPhone OS.

iPhone Human Interface Guidelines for Web Applications – Основные принципы пользовательского интерфейса при разработке приложений для iPhone.

Отличное руководство о том, как Safari работает. Советую прочитать до конца, потому что там есть множество примеров кода.

iPad Human Interface Guidelines — …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров