iPhone и CSS-фреймворки

Как и многие жизненные проблемы,
эту можно решить сгибанием
Бендер, Футурама

Сначала о том, что накипело: я нашел в себе силы, справился с ленью и переверстал-таки свой блог. Верстать под WordPress оказалось весьма сомнительным удовольствием. Ни тебе XSLT, ни вообще какого-то языка шаблонов: голый PHP с весьма странными функциями вроде the_tags() и the_content() (Капитан Очевидность легко подскажет их назначение). Стандартные темы, которые я взял для примера, оказались перегружены лишними кусками html-кода и их пришлось серьезно перерабатывать (проще говоря, делать с нуля). В общем, одни огорчения.

Я бы еще поворчал на тему верстки под WordPress, но в заголовке статьи нет про него ни слова :). Что ж…

Верстать под iPhone? Проще некуда

Все более-менее активные интернет-пользователи давно обзавелись или собираются купить в ближайшее время айфоны или Android-телефоны. Увы, обычные сайты совершенно не предназначены для мобильных устройств: и на экран они не умещаются, и кнопки слишком мелкие, и картинок для дорогого EDGE/3G многовато. Приходится делать более компактные и менее функциональные версии сайтов. Естественно, верстка под умные мобильники чуть-чуть отличается.

Есть два пути сделать айфон версию сайта (господа фанаты Android, я вас тоже имею в виду :) ):

1. написать все с нуля;
2. воспользоваться готовым фреймворком и сымитировать интерфейс нативного приложения.

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

Дальше поможет только опыт (и, надеюсь, мои статьи о html-верстке). Спустя короткое время вы выясните, что onclick и onmouseover, onmousemove и onmouseout работают несколько не так, как вы ожидаете (по сути в айфоне нет клика, есть только наведение мышью). Eще через короткое время вы узнаете, что, чтобы сделать полноэкранный сайт, вам понадобится не только специальный метатег, но и AJAX (иначе новая страница будет открываться в браузере с элементами управления, а не на весь экран). Вас определенно порадуют фишки современного браузера и отсуствие Internet Explorer как такового :).

К фишкам современных браузеров, конечно, стоит отнести и HTML5 и CSS3 (правда, зачастую с префиксами -webkit ) и довольно быстрый JS. Стоит, правда, оговориться, что так было не всегда и первые версии прошивок для iPhone не имели многих возможностей, хотя… кого это сейчас волнует?

Однако иногда нужно сделать сайт, который будет в точности повторять нативное приложение (например, чтобы не писать приложение на Objective C для iTunes Store). Конечно, такое решение будет не совсем верным: правильно сымитировать интерфейс вам не удастся. Почему? Сейчас расскажу.

“Лучшие” фреймворки для верстки

О библиотеках для верстки под айфон не написал только ленивый. Говорят, основная цель этих фреймворков – минимизировать вашу возню с дизайном и созданием контролов и эффектов, похожих на настоящие “айфоновские”: они сами принесут с собой CSS и JavaScript, которые будут эмулировать поведение элементов интерфейса на веб-странице. Они также избавят вас от возни с AJAX и прочей вебдванольностью. Поиск в Google даст целую кучу фреймворков и каждый из них будет, по мнению разработчиков, самым удобным, самым быстрым и самым гибким.

Когда я начинал работать над  iPhone-версией нашего сериального стартапа, я прошелся по всему списку фреймворков и попробовал каждый из них. Ровно неделю я потратил на то, чтобы поковыряться в начинках этих фреймворков, отправить один багрепорт и сверстать таки сайт без их использования. О причинах такого странного решения чуть позже. Сейчас давайте поговорим о каждом в отдельности.

1. jQtouch

По первым двум буквам несложно догадаться, что он имеет какое-то отношение к jQuery. Так и есть. Это плагин для знаменитого jQuery. Как и почти все плагины для jQuery он удобен, красив и монструозен: его интерфейс заслуживает высших оценок, но… обманывать пользователя и вынуждать загрузить 60 килобайт ради пары чекбоксов, мне кажется, будет подло. Подождать 20-30 секунд тоже захочет не каждый.

Несмотря на всю красоту и кажущееся удобство, я отказался от него: нам не нужен был сайт, сжирающий весь трафик разом.

2. IUI

Это минималистичная библиотека, которая состоит из пары JS и CSS файлов и набора картинок. Она приносит с собой стандартные поля ввода, чекбоксы и кнопочки в стиле iPhone. Создатели не напирали на кроссбраузерную совместимость (напомню, в iPhone и в Android используется один и тот же Webkit) и поступили правильно: код достаточно хорош, компактен, им приятно пользоваться. На этой библиотеке я, наверное, и остановился, если бы не баги в работе с AJAX. Одну ошибку удалось-таки исправить (не отправлявшаяся форма), с остальными я мириться не смог и, плюнув на почти готовый сайт, взялся переделывать все с нуля.

3. UiUIKit

Справедливости ради, стоило начинать именно с этого фреймворка, однако именно этим фреймворком я и заканчивал свои “исследования”. Это набор CSS и HTML, который несет в себе вполне неплохие примеры пользовательского интерфейса в iPhone. Пожалуй, это все, что можно про него сказать: нет смысла использовать чужой CSS и HTML, добавлять ему типично айфоновское поведение и укрощать те баги, которые будут периодически лезть из всех щелей (верстка чужая, и баги будут точно).

Конечно же, были и другие фреймворки, эмулирующие поведение айфона. Увы, они все равно эмулировали его: подтормаживали, загружали непонятно что из интернета и не всегда были настолько smooth and sexy, насколько бывают iPhone-приложения.

Попробовав немало сайтов (в частности, айфон вариант Facebook), я окончательно убедился, что двигаюсь в неверном направлении и за вечер смастерил вполне неплохой сайт для iPhone, написав весь код с нуля.

И?

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

• Оставить комментарий (5)
• Теги: iPhone, О верстке, фреймворки