Оптимизированная версия сайта для мобильных устройств поможет выделить ваш сайт из сотни других. Несмотря на то, что такие смартфоны, как iPhone, а также устройства на платформе Google Android могут просматривать “обычные” веб-страницы, форматирование под небольшое разрешение экрана, возможность использовать такие функции, как определение местонахождения, а также адресную книгу, позволят сделать ваш веб-сайт более удобным для просмотра в браузере мобильного телефона.
Всего несколько лет назад оптимизация веб-сайтов для мобильных браузеров являлась непростым и изнурительным процессом из-за ограниченности функций различных девайсов. На сегодняшний день, используя систему WebKit (поддержку которой осуществляют iPhone, устройства на Android и webOS) довольно просто создать и внедрить отдельную мобильную версию вашего веб-проекта.
Мы собрали лучшие инструменты, которые помогут вам начать. Если в статье не упомянуты сервисы, которые используете вы, сообщите нам об этом в комментариях.
Сервисы для оптимизации вашего контента под мобильные браузеры
Если у вас нет опыта работы с HTML или CSS (или у вас просто нет времени), данные сервисы помогут вам с легкостью создать мобильную версию вашего веб-сайта.
MoFuse и MoFuse Premium — Сервис MoFuse предоставляет уникальную возможность блоггерам и бизнес компаниям быстро и легко создать мобильную версию сайта. Для блоггеров существует специальная версия, которая использует RSS, для создания и оптимизации сайта для мобильных устройств. Данная версия будет доступна по адресу “m.имя_вашего_домена.ru”. Для бизнес компаний и для крупных проектов была выпущена версия MoFuse Premium, которая имеет ряд дополнительных настроек.
Мобильная версия сайта Mashable была создана при помощи сервиса MoFuse.
Mippin — Mippin очередной бесплатный сервис, который позволяет быстро создать мобильную версию вашего веб-сайта, используя RSS. Конечно, здесь нет каких-либо дополнительных настроек и опций, однако результат – веб-сайт, оптимизированный Mippin, может просматриваться на любом устройстве, поддерживающем технологию WAP.
mobiSiteGalore — mobiSiteGalore позволяет создать мобильную версию любого сайта и предоставляет ряд дополнительных настроек. Вы можете создать ваш мобильный веб-сайт как с телефона, так и с компьютера.
Плагины для WordPress и других публикационных платформ
Если у вас есть wap-версия сайта, то это очень хорошо. Однако, вам стоит позаботиться о том, чтобы пользователи устройств на платформе Android или iPhone могли также комфортно просматривать ваш веб-сайт. Если ваш проект создан на WordPress или другой популярной публикационной системе, то вы можете установить один из плагинов, которые позволяют комфортно работать с мобильной версией сайта.
WPtouch — WPtouch уникальный плагин, который доступен всем пользователям WordPress.org (пользователи сервиса WordPress.org могут также использовать данный плагин, применив также несколько дополнительных мобильных тем). Данное дополнение автоматически добавляет возможность просматривать ваш сайт с iPhone и устройств на Android.
Используя данный плагин вы можете задать фавикон для пользователей iPhone (теперь, когда обладатели iPhone перейдут на домашнюю страничку, они увидят иконку вашего веб-сайта), а также использовать такие дополнения, как FlickrRSS и Blip.it. Кроме того, плагин имеет поддержку AJAX, позволяет изменять заголовки и многое другое. Что мне действительно нравится в WPtouch – это возможность в любое переключить вид веб-сайта с мобильного на “обычный” и наоборот: специальная ссылка находится внизу каждой страницы.
WordPress Mobile Edition – Плагин, созданный Crowd Favorite, автоматически определяет с какого телефона зашел пользователь и оптимизирует сайт под ту или иную платформу. Кроме того, данный плагин включает в себя отличную тему от Crowd Favorite, которая также имеет огромное количество настроек.
WordPress Mobile Pack — Плагин WordPress Mobile Pack, созданный командой dotMobi представляет собой коллекцию необходимых инструментов для комфортной оптимизации сайтов под браузеры мобильных устройств. Включает в себя стандартную мобильную тему, которая выглядит довольно привлекательно, мобильную админ-панель, наличие поддержки рекламы и опцию для посетителей, благодаря которой они могут выбрать мобильный и “обычный” вид веб-страницы.
WPtap — WPtap представляет собой плагин для платформы WordPress. Позволяет создавать мобильную версию вашего блога с возможностью различных настроек. WPtap очень похож на плагин WPtouch, однако данный сервис предоставляет огромное количество встроенных стилей.
WordPress Mobile by Mobify — Это плагин для сервиса Mobify (см. ниже). С его помощью вы сможете настроить автоматическую переадресацию пользователей мобильных браузеров на страницу, созданную при помощи Mobify.
Mobile Plugin for Drupal — Поможет вам оптимизировать для мобильных устройств сайты, созданные на Drupal.
OSMOBI — OSMOBI представляет собой плагин для Joomla и Drupal и позволяет с легкостью создать мобильную версию вашего сайта. Если ваш проект посещает не более 150 пользователей мобильного интернета, то вы можете воспользоваться бесплатной версией плагина. В ином случае, вам стоит обратиться к платным тарифам.
Инструменты для дизайнеров
Mobify — Mobify действительно стоящий сервис, с помощью которого дизайнеры и обычные пользователи, знающие основы HTML и CSS, могут легко изменить и оптимизировать свой сайт для браузера мобильных телефонов. Mobify бесплатен (существует и платная версия, включающая в себя несколько дополнительных опций) и имеет поддержку таких платформ, как WordPress, Drupal, ExpressionEngine и многих других.
Mobify наделен визуальным редактором, который отображает вид вашего контента на различных девайсах и позволяет с легкостью редактировать CSS стиль страниц. Среди пользователей Mobify – проект A List Apart, а также сайты веб-разработчиков и дизайнеров, таких как Jonathan Snook и Veerle Pieters.
iPhoney — iPhoney от Marketcircle представляет собой специальный инструмент для пользователей компьютеров Mac. Разработчики уже давно не обновляли свой продукт, однако и в настоящее время, данный инструмент окажется полезным для многих.
iWebKit — iWebKit представляет собой фреймворк, позволяющий создавать оптимизированные веб-сайты и веб-приложения для iPhone, используя различные элементы пользовательского интерфейса данного смартфона.
jQTouch — jQTouch является инновационным плагином jQuery для мобильных разработчиков. С помощью него вы можете создавать веб-сайты или веб-приложения с поддержкой анимированных изображений, форм, элементов пользовательского интерфейса, дополнительных расширений и много другого.
iPhone Compatible CSS Layouts — Мэттью Джейм Тэйлор создал огромное количество бесплатных ликвидных CSS стилей, оптимизированных для iPhone и iPod Touch. Если вы только начинаете создавать мобильную версию сайта, вам стоит обратить внимание на данный ресурс.
Другие ресурсы
Mobile Web Design by Cameron Moll — Это действительно отличная публикация (доступна как в печатном издании, так и в виде электронной книги). Включающая в себя советы и примеры оптимизации веб-сайтов для мобильных устройств. Книга была написано еще до популяризации iPhone, однако мобильные веб-разработчики найдут здесь немало полезной информации.
Craig Hockenbery’s “Put Your Content in My Pocket” — В августе 2007 Грейг Хокенбери (служащий компании Iconfactory, также являлся одним из создателей Twitterrific для платформы Mac и iPhone) написал отличную статью для “A List Apart”. Несмотря на то, что с тех пор прошло немало времени, многое из того, что было написано Грейгом остается актуальным и по сей день.
Smashing Magazines’s Mobile Design Showcase – Находитесь в поисках вдохновения? Smashing Magazine представляет отличный обзор iPhone-оптимизированных дизайнов для веб-сайтов.
CSSiPhone — CSSiPhone представляет собой галерею CSS кода, направленного на оптимизацию сайта для iPhone.
Opera Mobile Developer Community — Как заметил кто-то из наших читателей, браузер Opera позволяет увидеть, как выглядит тот или иной сайт на мобильном устройстве. Для этого просто необходимо нажать комбинацию Shift-F11. Также обратите внимание на документацию, позволяющую оптимизировать сайт для мобильного браузера Opera. Напомним, что Opera Mobile и Opera Mini являются одними из самых популярных браузеров для мобильных телефонов.
Ваши мысли
Что вы думаете о мобильных веб-разработках? Есть ли у вас любимые сайты для мобильных устройств? Можете ли вы дать советы по созданию таких ресурсов? Дайте нам знать в комментариях к данной статье.
