Оптимизация сайта под мобильные телефоны

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

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

Не пытайтесь оптимизировать сайт под все телефоны

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

Вместо того, чтобы пытаться оптимизировать сайт под все существующие платформы, попытайтесь поразмышлять о ваших будущих потенциальных клиентах, посмотрите на статистику сайта. К примеру, если вы знаете, что большинство пользователей мобильной версии сайта использует iPhone для доступа, тогда направьте работы по оптимизации сайта под мобильные телефоны, в первую очередь, именно под iPhone.

Или наоборот, если вы получаете большое количество трафика с таких частей мира, как Азия, Ближний Восток и Южная Америка, то вам нужно сосредоточиться на оптимизации сайта под Symbian.

Кроме этого помните, что на данный момент большинство новых поколений мобильных телефонов использует движок WebKit для отображения веб-страниц. На движке WebKit работают встроенные браузеры Nokia - S40 и S60, браузер Safari от Apple (кстати, именно Apple и разработала WebKit), WebOS от Palm, Android от Google, а также BlackBerry 6 тоже будет работать на движке WebKit.

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

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

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



1. iBBDemo2 – приложение Adobe Air, которые позволит увидеть, как выглядит ваш сайт на iPad и на iPhone. Разработчики обещают сделать поддержку Android в сасое ближайшее время. Приложение работает немного медленно, но зато точно показывает, как выглядит наш сайт на ЙаМобилко и Йа Блокнотег.

2. Android SDK - представляет собой эмулятор, с помощью которого можно увидеть, как отображается веб-сайт на телефонах на платформе Android.

3. Blackberry Web Development Page - Эта страница дает нам доступ к эмуляторам BlackBerry, а также на странице есть советы по проектированию устройств на платформе BlackBerry.

4. Symbian S60 SDK – сайт с информацией о браузерах на платформе S60 от Nokia. Также на сайте доступна работа с эмуляторами.

5. Opera Mini – десктопные версии различных версий своего браузера и множество ресурсов для разработки приложений на платформе Opera Mobile.

Используйте несколько CSS таблиц

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

Измените User Agent в Firefox или Safari

Если вы хотите в режиме реального времени тестировать отображение вашего сайта в веб-браузере, то может просто сменить User Agent в Firefox или Safari. В Safari и Firefox можно легко сменить User Agent и увидеть, как отображается ваш сайт в разных версиях браузеров, разработанных под разные устройства. Для Firefox можно скачать User Agent Switcher. После установки этого модуля, можно будет менять User Agent с помощью пользовательского меню, как показано на рисунке:



В Safari нужно включить Developer Mode (для этого нужно зайти в Preferences настройки, потом в Advanced и установить флажок "Show Develop"), а потом выбрать пункт User Agent, как показано на рисунке:



Используйте возможности вашей CMS

Если вы используете такую систему управления контентом, как WordPress или Drupal, то лучше всего воспользоваться готовыми плагинами, с помощью которых легко можно оптимизировать сайт под мобильные телефоны. Для WordPress, к примеру, разработан плагин WPtouch. У плагина есть и бесплатная и платная версии, которые работают с различными устройствами. В плагине можно указать, для каких устройств использовать оптимизированную под мобильники версию CSS, а для каких устройств показывать нормальную версию CSS.



Для Drupal тоже есть много плагинов, к примеру Mobile Plugin.

А что вы посоветуете при оптимизации сайта под мобильные телефоны?