Меню

+380979398298

Cоздание мобильной версии сайта.

  • 09
  • 12
  • 2009

Предлагаем Вашему мниманию статью Кристины Уорен (Christina Warren) A Guide to Mobile Web Design Tips and Tricks. Оригинал статьи вы можете посмотреть по адресу

Мобильный интернетНаличие версии сайта, оптимизированной для мобильных устройств, действительно может выделить Ваш сайт из общей массы. Не смотря на то, что такие смартфоны как iPhone и Google Android могут отображать «полноценные» веб-страницы, наличие страниц, отформатированных для небольших экранов и с функциями, которые могут использовать преимущества сенсорного экрана, геолокации или функционал адресной книги, могут значительно облегчить веб-серфинг на мобильном телефоне.

Еще несколько лет назад, оптимизация веб-сайтов для мобильных браузеров была болезненным и трудоемким процессом, отчасти из-за ограниченного функционала большинства мобильных браузеров. Сегодня, благодаря распространению WebKit (который является основой браузеров на iPhone, Android и WebOS- устройствах, а со следующего года, вероятно,  и BlackBerry), гораздо легче принять стратегическое решение о популяризации Вашего сайта на мобильных платформах.

Мы собрали подборку соответствующих ресурсов.

Сервисы для оптимизации Вашего контента под браузеры мобильных телефонов

Если у Вас нет опыта в HTML и CSS (или у Вас нет времени), существует целый ряд сервисов для создания мобильной версии Вашего сайта.

MoFuse and MoFuse Premium — MoFuse предлагает простой инструмент для блоггеров и предприятий по созданию мобильных версих веб-сайтов . Для блоггеров или маленьких сайтов, компания предлагает продукт MoFuse for Blogs, который представляет собой инструмент для быстрого создания мобильной версии Вашего сайта (он использует Ваш RSS для генерации нового сайта) с доступом к нему по ссылке “m.yourdomain.com.” Для предприятий или больших сайтов, которые хотят больше контроля предлагается продукт MoFuse Premium,содержащий больше настраиваемых параметров.

Mippin — другой бесплатный сервис, который позволяет быстро создавать мобильную версию Вашего сайта, используя RSS-канал. Опции и настройки довольно ограничены, но версия, создаваемая Mippin, должна просматриваться практически на любом WAP-совместимом мобильном телефоне.

mobiSiteGalore — позволяет быстро создавать мобильные версии сайтов. Продукт предоставляет пользователям несколько возможностей настройки,  а также, благодаря MOBI TLD.mobiSiteGalore, возможность создания мобильного сайта как  с компьютера, так и с мобильного телефона.

Плагины для WordPress и других издательских систем

wptouch-admin

Наличие сайта, отформатированного для WAP, — это хорошо, но если вы хотите  иметь возможность предложить посетителям с iPhone или Android устройствами некоторые действительно значительные оптимизированные мобильные функции, у Вас должен стать вопрос о создании отдельного стиля для сайта. Для пользователей WordPress и других издательских систем существует множество плагинов для очень простого добавления мобильных тем для Вашего сайта.

WPtouch —  замечательный плагин, доступный для пользователей WordPress.org  (пользователи WordPress.com  также могут воспользоваться преимуществами WPtouch с недавно добавленными мобильными темами), который автоматически делает ваш сайт удобным для чтения и доступа с iPhone или Android устройств.

Плагин является чрезвычайно надежным и даже предлагает такие бэкэнд-функции как возможность установки iPhone Favicon (так что, когда пользователи добавляют ваш сайт на главный экран своего iPhone, он отображается хорошо смотрящейся иконкой), способность работать с другими плагинами WordPress, такими как Flickr, RSS и Blip.it, поддержку AJAX, настройку заголовков и многое другое. Действительно интересно в WPtouch то, что пользователи могут отключить его и получить доступ к полной версии сайта в любое время с помощью переключателя на мобильную версию и обратно в нижней части каждой страницы.

WordPress Mobile Edition - Crowd Favorite создали плагин, который позволяет пользователям легко определить, для каких типов устройств должна быть показана мобильная веб-страница, а для каких нет (например, если вы хотите, чтобы пользователи BlackBerry просматривали страницу для мобильных устройств, а пользователи iPhone — полную версию сайта). Он поставляется с набором тем Crowd Favorite’s Carrington Mobile Theme приятных для восприятия и полностью настраиваемых.

WordPress Mobile Pack — это целый набор инструментов для оптимизации веб-сайтов для мобильных телефонов от команды dotMobi. Она включает в себя базу очень привлекательных тем, мобильную панель администрирования, поддержку мобильной рекламы и возможность посетителю переключения между полной и мобильной версиями веб-сайта.

WPtap — это плагин для WordPress. На сайте также предлагаются  некоторые альтернативные темы для пользователей, которые хотят настроить улучшенный внешний вид и восприятие сайта. WPtap выглядит очень похожим на WPtouch, однако акцент ставится на предоставлении готовых мобильных стилей.

WordPress Mobile by Mobify — это плагин для службы Mobify (см. описание в разделе ниже). Он осуществляет автоматическое перенаправление мобильных клиентов к вашей мобильной версии сайта.

Mobile Plugin for Drupal — плагин предлагает Drupal-сайтам версию, оптимизированную для просмотра с мобильных телефонов. Поставляется с мобильной версией стандартной темы Drupal Garland и включает в себя определение устройств, средства для добавления специфических мобильных функций и автоматическую замену видео вставленного из YouTube на m.youtube.

OSMOBI — это услуга, и плагин для Joomla и Drupal пользователей, что позволяет легко настроить свой блог для мобильных пользователей. Эта услуга является бесплатной для 150 просмотров страниц в день, но премиум-планы также доступны.

Инструменты для дизайнеров

alistapartmobile

Mobify — действительно интересный сервис,  потому что предоставляет собой простое средство для дизайнеров или пользователей, которые знают HTML и CSS, безболезненно модифицировать и оптимизировать свои веб-сайты для мобильного доступа. Эта услуга является бесплатной (хотя доступны ежемесячные платные планы с расширенными возможностями) и она очень хорошо работает с такими системами как WordPress, Drupal, ExpressionEngine и любыми другими, которые имеет предсказуемые URL-модели и хорошо сформированным HTML.

В Mobify присутствует визуальный редактор, который позволяет увидеть, как будет отображаться Ваш контент на различных типах устройств, а затем позволяет изменить CSS и просмотреть изменения в режиме реального времени. В качестве примеров использования Mobify для создания сайтов, оптимизированных под мобильные устройства, можно назвать List Apart и сайты уважаемых веб-разработчиков и дизайнеров, такие как Jonathan Snook и Veerle Pieters.

iPhoney — iPhoney от Marketcircle предоставляет разработчикам возможность просмотреть с точностью до пиксела, как будет выглядеть сайт при просмотре на iPhone . Почему это важно? Потому что при создании мобильной версии сайта, важно иметь возможность посмотреть, как конечный продукт будет выглядеть на вашем телефоне. iPhoney на данный момент не обновлен, но все еще является очень полезным инструментом.

iWebKit — это framework для создания сайтов, оптимизированных для просмотра на iPhone, использующий все его функции и преимущества.

jQTouch — это действительно инновационный JQuery-плагин для веб-разработки под  iPhone и IPod Touch. С его помощью можно создавать веб-сайты или веб-приложения с анимацией, поддержкой форм, настройкой элементов пользовательского интерфейса, дополнительных расширений и многого другого. Это действительно полезный инструмент для разработчика, позволяющий делать некоторые удивительные вещи.

iPhone совместимые CSS шаблоны - Мэтью Джеймс Тейлор (Matthew James Taylor) создал большое количество гибких CSS макетов совместимых с iPhone и IPod Touch бесплатных для любого использования. Если вы ищете отправную точку для создания сайтов, оптимизированных для мобильных устройств, то Вам стоит обратить внимание на эти макеты.

Другие ресурсы

Mobile Web Design by Cameron Moll — это действительно отличная книга с полезными советами, описанием передовых подходов и примерами дизайна и оптимизации контента сайта для мобильных устройств. Если говорить о недостатках книги, то надо учесть, что она была написана до iPhone бума, за счет чего она теряет в актуальности информации. Но тем не менее любители мобильного Интернета могут почерпнуть в ней много полезной информации.

Craig Hockenbery’s “Put Your Content in My Pocket” - в августе 2007 года Крейг Хокенберри (Craig Hockenberry) (из Iconfactory и один из людей, стоящих за Twitterr для Mac и iPhone) написал большую статью для «A List Apart», и хотя некоторые из технологий изменились, многое из того, что он написал, применяется и сегодня.

Smashing Magazines’s Mobile Design Showcase - Ищите вдохновения? Smashing Magazine сделал большой обзор дизайнов, оптимизированных для iPhone.

CSSiPhone — это галерея CSS, посвященная дизайну сайтов, оптимизированных для iPhone. Как сказал Пикассо, «Хорошие художники копируют, великие художники воруют!»

Opera Mobile Developer Community - браузер Opera позволяет увидеть, как будет выглядеть сайт на мобильном телефоне (Меню Вид->Маленький экран). Кроме того, здесь  можно проверить документацию для разработчиков Opera по оптимизации страницы для просмотра на мобильных устройствах. Opera Mobile и Opera Mini является распространенным браузером на мобильных телефонах.

RIpple emulator — эмулятор мобильной версии браузера

Эдуардо

Замечательная подборка инструментов, спасибо за наводку.

Bugagashka

Всех с наступающим Новым Годом!!!

Оставьте комментарий

Ваш e-mail не будет опубликован.