Верстка сайта под мобильные устройства: iPhone и Android

Верстка сайта под мобильные устройства: iPhone и Android Ipad

Верстка сайта под android

Не секрет, что компания Google стремительно вышла на рынок мобильных платформ и сейчас активно продвигает собственную мобильную ОС. Отличие Google Android от iOS состоит в том, что первая – полностью открыта и позволяет сторонним разработчикам создавать все новые и новые приложения.

Верстка сайта под iphone и ipad

На сегодняшний день доминирующей платформой среди мобильных устройств является iOS, что может означать только то, что именно iPhone или iPad приведет к вам посетителей, которые достойно оценят ваш сервис. Дизайн мобильной версии сайта,сверстаного под iPhone (iPad), обладает стилем Apple, что включает в себя различные градиенты, структуру страницы и уникальное цветовое решение Apple.

Верстка сайта под windows phone 7

Корпорация Microsoft стала одной из первых, кто разрабатывал программное обеспечение для персональных компьютеров. Теперь, в 21-ом веке, она опять дает о себе знать, в частности, тем, что разработала мобильную платформу Windows Phone 7. Эта платформа стремительно набирает популярность и имеет все шансы стать такой же известной, как основной продукт компании – ОС Windows.

А это, в свою очередь, означает, что нужно двигаться в этом направлении и не забывать о растущем числе пользователей смартфонов и интернета в целом. Что касается верстки сайта под Windows Phone 7 — яркое цветовое решение и дизайн сайта в стиле Мetro отлично подойдут под операциионную систему от Microsoft.

Зачем верстать под мобильные платформы?

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

  • Увеличивает скорость загрузки страниц на мобильных устройствах и, в то же время, уменьшает количество трафика, необходимое для загрузки страницы;
  • Позволяет сделать отличный дизайн под специальную платформу, которую в данный момент использует посетитель сайта. Это, в свою очередь, совершенствует навигацию по сайту, что также немаловажно для посетителя ресурса;
  • Повышает результаты выдачи мобильной версии сайта в поисковых системах.

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

Как сделать сайт более 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 сам добавит скругленные углы и полукруглый блик, сделав вашу иконку похожей на остальные.

Читайте также:  Сравнение: Samsung Galaxy Tab S6 Lite против iPad 10.2 - HowTablet

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

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

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

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

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

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

Шаг 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:

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

Как тестируют мобильную версию сайта на различных платформах

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

Лучшее для быстрого кодирования: gocoedit

Ищете текстовый редактор, ориентированный на разработку, который поможет вам сделать больше быстрее? GoCoEdit имеет поддержку подсветки синтаксиса для десятков языков, включая HTML, и ряд полезных функций, которые делают кодирование быстрее и более приятным на устройствах iOS.

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

GoCoEdit поддерживает работу в автономном режиме и непосредственно на сервере, а также синхронизируется с Dropbox и другими облачными сервисами хранения. Вы также можете загрузить/загрузить через FTP/SFTP. Браузер предварительного просмотра, в комплекте с консолью Javascript, встроен в приложение.

Читайте также:  Почему iPad — это единственный нормальный планшет? |

Лучшее для подключения: codeanywhere


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

Приложение изначально подключается к облачным сервисам хранения, таким как Dropbox, Google Drive, OneDrive и Amazon S3, а также к GitHub и Bitbucket. Вы также можете использовать его поддержку FTP/SFTP/FTPS для загрузки и скачивания файлов практически из любого места.

Если у вас еще нет сервера, Codeanywhere даже предложит настроить его для вас с выбранной вами средой разработки. После подключения файловый браузер приложения получает все стандартные функции, такие как выгрузка, загрузка, перемещение и удаление, а также возможность установки разрешений (chmod). Там также есть встроенный SSH-клиент.


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

Базовая версия бесплатна и более чем достаточна, чтобы начать работу, с дополнительными функциями, доступными через ряд ежемесячных планов подписки.

Лучший бесплатный вариант: html & html5 editor

Хотя HTML & HTML5 Editor не может похвастаться таким количеством функций, как платные приложения, такие как Textastic или GoCoEdit, этот простой редактор хорошо справляется с основами – и с ценой не поспоришь.

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

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

Это приложение является хорошим вариантом для владельцев iPad с базовыми требованиями к редактированию HTML. Поскольку он бесплатный, HTML & HTML5 Editor стоит проверить, отвечает ли он вашим потребностям, прежде чем предлагать платную альтернативу с дополнительными функциями.

Ручная верстка vs storyboard/nib

Большинство разработчиков для iOS знакомы со Storyboard. Apple предлагает использовать его. Но в последнее время, удобство этого инструмента вызывает у меня сомнения.

Ниже я хочу сравнить различные методологии с использованием Storyboard или набора Xib-фалов, с ручной верстой (с использованием autolayout и без). Не претендую на полноту раскрытия темы и буду рад, если вы укажете мне на ошибки и/или предложите другие методологии и критерии сравнения.

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

С теми или иными оговорками, существуют следующие методологии разработки:

Storyboard и Xib

Проблемы:

  1. Большую часть кода, связанного с анимациями туда не поместить.
  2. Если их несколько, то при переходе с одного на другой — создается нагрузка на main thread (NSKeyedArchiver должен распарсить сториборду, а он сам по себе медленный).
  3. Нельзя все сделать в Storybaord при все желании. Например, задать cornerRadius, shadowOffset и т.д.; на самом деле, можно — через user defined runtime attributes (@IBInspectable)
Читайте также:  Как загрузить видео с компьютера на iPad

Плюсы:

  1. Верстка наглядна.
  2. User-story виден при просмотре.
  3. SizeClasses
  4. Используем Embedded Segue/Storyboard Reference и живем счастливо
  5. Мы абстрагируемся от типа перехода и для осуществления самого перехода достаточно знать segue identifier (см. RamblerSegues), также, при использовании автоматических dependency injection библиотек (см. typhoon), мы абстрагируемся от внедрения зависимостей.

Ручная верстка с использованием Autolayout-ов

Использовал различные тулы, наиболее, удобные — PureLayout и Cartography (для swift).

Проблемы:

  1. Больше кода (приблизительно в 1.2 раза).
  2. Нет наглядности
  3. Сложный layout превращается в ад

Плюсы:

  1. Немного быстрей — экономим на парсинге Xib/Storyboard файла NSKyedArchiver-ом.
  2. Декларативно и все в одном месте (не нужно постоянно переключаться между Storyboard и текстом).
  3. Удобней делать анимации (например, pan).

Ручная верстка

Проблемы:

  1. При неправильной реализации — есть hardcoded-значения (при правильной, только padding-и и прочее; причем это можно вынести в отдельных header).
  2. Больше кода (приблизительно в 1.5 раза).
  3. Нет наглядности
  4. Сами нужно заботиться об адекватном изменении frame-а при изменении параметров внешней view
  5. Нет SizeClasses

Плюсы:

  1. При правильной реализации все очень гибко.
  2. Работает быстрей.
  3. Можно рассчитать фреймы в background-потоке и просто их потом применить.

Итог

При отказе от каждого из [Stobyboard, Xib, Autolayout] работа усложняется и кода становится больше.

Имеет смысл не использовать Storyboard (не обязательно полностью), если:

Имеет смысл, требовательные к ресурсам TableView/CollectionView не делать ни в Storyboard, ни в Xib (мы теряем время на парсинге файла, теряем

гибкость

). При оптимизации, можно сначала сверстать с использованием autolayouts, но если лаги не проходят — замерить в инструментах, убедиться, что именно layout-ы тормозят, и потом уже переходить на ручной счет.

Иногда, похожее содержимое необходимо отображать как в TableViewCell так и в CollectionViewCell. При ручной верстке это не будет проблемой. А при использовании Xib-а решается, например, так: содержимое ячейки верстаем в xib-файле, а в init-е ячейки вызывать addSubview с данным view.

EDIT:

Подводя итог, можно сказать, что Storyboard имеет следующие преимущества перед ручной версткой:

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

Чем мобильная верстка сайта отличается от обычной или адаптированой?

Существует три вида верстки сайта: обычная, адаптированная и мобильная. Рассмотрим их поподробннее:

Обычная верстка сайта — это версия сайта, которая предназначена для стандартного расширения монитора. Данная верстка встречается на большинстве сайтов;

Адаптированная версия верстки сайта может скрывать или показывать элементы страницы при определенном расширенни экрана. При этом код страницы не меняется, изображения и js-скрипты загружаются в полном обьеме (именно этот недостаток устраняет мобильная верстка сайта);

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

Мобильная версия сайта полностью адаптирована под мобильное устройство пользователя. Данная верстка учитывает размеры экрана, расположение (вертикальное или горизонтальное) устройства и операционную систему гаджета. Она написана с минимальным количеством кода и картинок в интерфейсе.

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

Оцените статью
iPad Мобайл
Добавить комментарий