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

Спасибо!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

wurfl.sourceforge.net/

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

ещё:

<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 — работает и на андроиде

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

или

@media (orientation: portrait) { … }

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

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

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

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

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