Как сделать сайт более iPhone-совместимым за 5 шагов


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

Ниже предлагаются простые 5 шагов, с которых можно начать, на примере сайта WHOIS Digger.

Шаг 1. Аналог favicon.ico

Когда пользователь создает ссылку на ваш сайт в виде иконки в SpringBoard, iPhone автоматически формирует картинку из скриншота страницы. В результате почти всегда получается неразборчивая каша, которая на гордое звание «иконки для iPhone» никак не тянет. Пропишите этот тег в заголовке страницы:

<link rel="apple-touch-icon" href="res/iphone_icon.png" />


и добавьте соответствующую картинку res/iphone_icon.png размером 57х57 пикселов. iPhone сам добавит скругленные углы и полукруглый блик, сделав вашу иконку похожей на остальные.

Вот так выглядит исходная картинка и иконка на рабочем столе iPhone:

Как сделать сайт более iPhone-совместимым за 5 шагов


Шаг 2. Полноэкранный режим (почти).

Добавление вот этого тега приведет к тому, что ваш сайт, будучи запущен по иконке из SpringBoard, будет похож на отдельностоящее приложение (не будет отображаться ни строка ввода адреса / поиска, ни нижний тулбар). Останется только верхняя полоска статуса.

<meta name="apple-mobile-web-app-capable" content="yes" />


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

Это вид веб-сайта, запущенного с иконки на рабочем столе. Как видите, ничего лишнего.

Как сделать сайт более iPhone-совместимым за 5 шагов


Шаг 3. Адаптируем диапазон масштабирования

Если Ваш сайт изначально отображается в iPhone не на полный экран, то вы можете подобрать начальный масштаб отображения, максимальный масштаб отображения и, при необходимости, запретить масштабирование пальцами вообще (если весь сайт при выбранном масштабе умещается на экране по горизонтали):

<meta name="viewport" content="width=device-width; initial-scale=0.85; maximum-scale=0.85; user-scalable=0;" />


Шаг 4. Добавляем CSS-стили, предназначенные только для iPhone

Вот так можно подключить отдельный CSS, который будет воспринят только на iPhone:

<link rel="stylesheet" href="res/iphone.css" media="only screen and (max-device-width: 480px)" />


Критически оцените вид вашего сайта на iPhone и посмотрите, какие элементы навигации и контента можно увеличить, чтобы по ним легче было попадать пальцем. Какие блоки можно на iPhone вообще скрыть или уменьшить? Можно ли привести сайт к одноколоночной верстке, для которой легче подобрать масштаб? Понятно, что разработка полноценного стиля сайта под iPhone — занятие ответственное, но какие-то моменты можно подправить достаточно быстро.

Шаг 5. Отмена автоматической коррекции масштабирования

Если Ваш сайт использует Ajax-запросы или javascript для динамического изменения содержимого страницы, вы можете наблюдать неприятные побочные эффекты в виде изменения масштаба текста при изменениях DOM или сворачивании/отображении некоторых элементов. Следующий кусок CSS отключит встроенную эвристику мобильного Safari и избавит от этих эффектов:

html {-webkit-text-size-adjust: none;}


В итоге за 15 минут работы получилось полноценное веб-приложение для iPhone:

Как сделать сайт более iPhone-совместимым за 5 шагов


P.S.: теперь можно скачать исходники WHOIS Digger для установки на своем сайте.



Источник: Уроки CSS на Хабрахабре


А вот, что получилось у нас для собственного сайта

иконка сайта для рабочего стола iPad
иконка для рабочего стола в ipad


полноэкранное приложение

Как сделать сайт более iPhone-совместимым за 5 шагов


на самом деле, для настоящего полноэкранного приложения нехватает полной аякс навигации, так как в этом режиме клик по любой ссылке приводит к переходу к обычному Сафари


так же рекомендую ознакомиться с заметкой на ХабраХабре

Зачем компаниям мобильные приложения или почему в Маркетах столько барахла


Мобильное приложение — визитка

Клиент говорит:
— Мы хотим сделать приложение о нашей компании.
— Какие функции Вы бы хотели в нем видеть?
— Ну, информацию о нашей компании, контакты, форму заказа обязательно, новости, отзывы.
— Окей, а сколько на вашем сайте посетителей?
— Не знаю, может быть, 50
— А есть те, которые приходят повторно?
— Вряд ли, в основном люди попадают на наш сайт из поиска.

На вопрос «А зачем тогда люди станут устанавливать программу на телефон?» клиенты уже ответить не могут.

На самом деле все очень просто. Приложение — это инструмент для решения какой-то задачи. Вот три основных задачи, которые люди решают с помощью мобильных приложений:
— скоротать время;
— получить доступ в интернет при отсутствии других способов;
— срочно получить необходимую информацию;

Если приложение не решает ни одной из этих задач, оно скорее всего не нужно людям. Лучше потратьте деньги на хорошую мобильную версию сайта, и будет вам счастье! А если вы видите, что люди регулярно заходят на ваш сайт, то скорее всего сайт позволяет решить им какую-то задачу. Отразив ее в мобильном приложении, вы скорее всего получите довольных клиентов!


читать целиком


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


30 января 2012  0 9 009   верстка iOS Версия для печати


Похожие публикации

Хак MobTPL для DLE

Позволяет для разных устройств использовать разные шаблоны. Основан на коде Генри Хофмана "Хак MobTPL для DLE версия 1.0 от 02.08.2012" В данной версии предлагаются две реализации: 1. OLD... читать далее

Оптимизируем производительность веб-страницы: CSS

В наше время скорость интернета довольно высока. Казалось бы, можно забыть о тех временах, когда нам приходилось ждать по 20-30 (а то и больше) секунд, чтобы веб-страница загрузилась и отобразилась... читать далее

iPad-шаблон для DataLife Engine

Представляем вашему вниманию шаблон для CMS DLE - специально адаптированный для отображения контента на планшетных компьютерах Apple iPad Основные моменты: - верстка html5 - метатеги для iOS... читать далее

Адаптивный дизайн против Мобильных версий сайта

Адаптивным («отзывчивым», Responsive) называют дизайн, который проектируется и разрабатывается таким образом, что сайт становится совместимым с любым устройством, которое может быть использовано для... читать далее

Веб-разработка / Эмуляция интерфейса iPhone с помощью CSS

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

Как сделать профессиональную иконку человека в Фотошоп

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

Прокомментировать


@

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent

Архив сайта

Реклама на сайте