Как создать вебсайт для мобильных устройств

[@k12th]

Спасибо!

[@catsmeetman]

приятно-полезные нюансы

[@freeozone]

Очень хорошая статья, и прекрасная манера подачи материала. Продолжайте публиковаться, пожалуйста.

[@LionAlex]

api.yandex.ru/detector/

[@lelick]

>Дополнительно ожидается появление релиза jQuery Mobile.

А разве еще не вышел?

[@trurl123]

это всего-лишь альфа

[@neex]

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

[@VolCh]

А фидбэки даёте? Я вот задумался о введении такой поддержке в одном проекте по настоянию пользователей. Теперь надо как-то разобраться как её осуществлять (в этом статья поможет, надеюсь) и как тестировать не имея на руках таких девайсов и, желательно, не тратя мобильный трафик.

[@neex]

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

[@region23]

Вместо code.google.com/p/mobileesp/ можно использовать детектор от уважаемого Яндекса: api.yandex.ru/detector/

[@trurl123]

спасибо, добавил ссылку

[@artyfarty]

Стоит также упомянуть совершенно магический UIKit.

Это CSSка, отображающая обычную разметку в айфон-стиле. Например совершенно обычная HTML-ка с не менее обычным ul-li(...) без каких-либо классов будет выведена как дефолтный айфоновский лист.

[@trurl123]

спасибо, включил в статью

[@VolCh]

Спасибо, как раз о чем-то таком думал последние дни :)

А нет ли где-нибудь обзора/статистики, какие разрешения экрана/браузеры/ос/js/html/css наиболее популярны в мобильном рунете? Вообще этот рынок не представляю, девайса соответствующего нет (wap сейчас вообще востребован?), а пользователи просят ввести поддержку, жалуясь и на глюки, и на общее неудобство UI под Opera Mini — на что нужно ориентироваться?

[@trurl123]

Если у вас есть сайт, то такую статистику можно получить, используя Google Analytics.

[@waplab]

Объективную статистику от Google Analytics. ждать не стоит. Далеко не все браузеры мобильных девайсов поддерживают javascript

[@VolCh]

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

[@artyfarty]

Ну вон у нелюбимого тут вконтактика есть аскетичная версия для опер мини — m.vkontakte.ru/ (ссылочки в столбик) и айфон-веб-приложение i.vkontakte.ru/.
Оба кстати чудесно работают и в хроме.

[@L3n1n]

waplog.net/ru/html/stat/1/screens/

[@VolCh]

О, спасибо, то что нужно :)

[@kost]

Теги статьи запятыми разделите.

[@region23]

Если у вас есть Мак и вы пишите сайт под iPhone, то можно скачать бесплатный XCode.

В комплекте с ним идет DashCode — конструктор сайта для iPhone. С помощью AJAX можно подтягивать с сервера динамику.

[@region23]

А для анализа не забывайте про такой чудесный инструмент как Яндекс.Метрика.

С появлением Метрики, в Google Analytics вообще перестал заходить.

[@metakey]

wurfl.sourceforge.net/

The WURFL is an XML configuration file which contains information about capabilities and features of many mobile devices.

[@beono]

ещё:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0"/>
<link rel="apple-touch-icon" href="/app-logo.png"/> 

apple-touch-icon — работает и на андроиде

[@L3n1n]

Все проблемы начинаються когда открываешь сайт с оперы мини. Ей просто наплевать на все стили и виевпорты. Их сервер просто режет CSS как ему хочется и отображает сайт как ему хочется.

Если есть об этом статьи буду рад за ссылки.

[@VolCh]

Вроде это только, если пользователь включит (или не отключит?) соответствующий режим

[@KaLGaN]

Ну и Safari Reference Library в помощь.

[@cbx]

Такое впечатление что авторы последних статей по вёрстке под мобильные устройства находятся в какой-то параллельной реальности где из телефонов встречаются только iPhone и Android с поддержкой свежайших веб-стандартов. Было бы интересно посмотреть реальную статистику (например у контент-провайдеров) по моделям телефонов и браузерам, особенно в России.

Может быть я драматизирую, но если ориентироваться на более-менее массовый сегмент пользователей, то всё значительно сложнее:

• С разрешениями экранов полный зоопарк, соответственно графику и размеры элементов в пикселах нужно либо сводить к минимуму, либо делать несколько версий сайта что увеличивает количество работы в разы
• Зоопарк браузеров и их версий на порядок превосходит десктопный. Большинство браузеров содержит массу глюков, устарело и возможности для обновления нет, т.к. вендорам интереснее продавать новые модели телефонов нежели поддерживать старые
• Операторские шлюзы, которые вытворяют всякие гадости с заголовками, пытаются самостоятельно сжимать/оптимизировать контент и даже имитировать поддержку cookie. И ещё умолчательные настройки точек доступа загоняющие клиентов в wap.
• Javascript? А кто сказал что javascript на устройстве вообще есть или не обрезан?
• CSS? Ну-ну. Пляски с хаками под десктопный IE покажутся вам сказкой по сравнению с той кашей что творится на мобильных устройствах
• Про шрифты даже можно не говорить

Ну и вот ещё: www.passani.it/gap/

[@fStrange]

согласен
неплохо бы еще увидеть статистику Яндекса и Гугла по мобилам

статистика контент-провайдеров не очень показательна, ибо это определенный сегмент устройств

[@fStrange]

2. Не поддерживается тег
input type=«file» /
, поскольку нет доступа к файловой структуре.
это касается не только IPhone но и целого ряда старых мобил.

Что касается UserAgent и разрешения экрана, то есть пополняемая библиотека wurfl и Tera_WURFL — PHP MySQL driven WURFL
Она позволяет не прибегать к помощи Гугла и Яндекса

[@mythmaker]

Советую читать вот эту статью — здесь более полный материал, да и примеров больше. Потом вот это и на закуску это.

[@trurl123]

похоже вы эту статью не дочитали, поскольку первая ссылка уже есть в статье.

[@mythmaker]

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

[@trurl123]

Я посчитал, что в статье очень много воды и поэтому многое выкинул, оставил только то, что посчитал нужным.

[@webrover]

2. Поставьте display: none; на неважных элементах

лучше все таки вырезать блоки из шаблона (меньше трафик, меньше DOM дерево) — все равно у вас другой будет шаблон для мобильной версии

[@kostos]

Теги HTML5 позволяют проводить валидацию на стороне браузера и открывать соответствующий набор символов.

Теги ничего не позволяют, позволяет браузер.

[@Wott]

не люблю @import, скажите

<link rel="stylesheet" media="orientation: portrait" href="example.css" />

или

@media (orientation: portrait) { … }

насколько поддерживается?

[@lol2Fast4U]

У iPhone нет проблем с font-face, просто ему нужно давать шрифты в формате SVG. Как и Chrome < 4.x.

[@asanov]

У вас опечатка в строчке, пропущен дефис:
/>

Должно быть max-device-width:480px

Двадцать минут пытался понять, где ошибка и почему не работает)

[@asanov]

хабр съел код, попробую ещё раз, вот тут опечатка:

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

[@trurl123]

спасибо, спустя 1.5 года кто-то нашел опечатку.