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

Проблемы мобильных устройств:
- маленькое разрешение экрана;
- медленные соединения;
- ограниченный размер кэша;
- много различных устройств и форм-факторов;
- низкая мощность процессоров;
- широкая поддержка HTML5;
- относительно новые браузеры

Общие рекомендации:
- используйте gzip для сжатия текстовых данных;

- помещайте CSS в заголовке HTML документа, а javascript в нижней части страницы;

- объединяйте файлы javascript и CSS, которые используются по всему сайту;

- используйте минимизацию кода CSS и javascript;

- JS и CSS которые используются только 1 раз на сайте, а также небольшие JS и CSS (до 5 kB), включайте прямо в страницу;

- сжимайте файлы (например Smush.it);

- избегайте или по крайней мере делайте кэшируемыми редиректы;

- используйте Quicktime Reference Movies (позволяет “отдавать” посетителю разные видео-файлы, исходя из возможностей его интернет-соединения).

Оптимизация HTML и CSS:
- HTML код должен быть предельно простым. Используйте семантические элементы HTML5, указывайте , исключайте необязательные атрибуты xmlns. Также старайтесь сократить количество div-ов и классов;

- старайтесь реже использовать input, а если и использовать, то в форматах HTML5;

- используйте CSS-градиенты вместо фоновых картинок — это кардинально сократит количество обращений к серверу;

- CSS даёт много других полезных возможностей, применение которых более эффективно, чем картинок (тени, закруглённые границы, множественные фоны).

Оптимизация изображений:
В html и css кодируйте изображения в base64 (поддерживается большинством мобильных браузеров)- кодировка происходит на стороне сервера(помимо PHP — base64_encode(), можно использовать HTML5 технологию из Canvas — toDataURL());

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

Оптимизация в зависимости от скорости соединения:
Пример данных, получаемых с устройства, которое работает в 3G сети:navigator = {
connection: {
 "type": "4",
 "UNKNOWN": "0",
 "ETHERNET": "1",
"WIFI": "2",
"CELL_2G": "3",
"CELL_3G": "4"
 }
};

Тип соединения “4”, что соответствует CELL_3G. Используя простой скрипт можно определить тип соединения и передать эту информацию как CSS класс в HTML элементе.

В результате при определении низкоскоростного соединения мы передаём браузеру посетителя оптимизированные картинки, используя CSS:

.highbandwidth .logo { background-image:url('logo-high.jpg'); }

.mediumbandwidth .logo { background-image:url('logo-medium.jpg'); }

.lowbandwidth .logo { background-image:url('logo-low.jpg'); }

Кэширование:
- кэшируйте ajax;

- устанавливайте заголовки актуальности файлов на далёкое будущее (far-future cache expiration headers);

- избегайте cookies, вместо этого используйте localStorage (cookies передаются http-запросами, значительно увеличивая размер передаваемых данных).

LocalStorage и SessionStorage — это технологии HTML5, которые являются более эффективной альтернативой cookies. Там же можно хранить и внешние CSS и javascript;

Оптимизация javascript:
- избегайте javascript timeout анимации, вместо этого лучше использовать CSS3 переходы;

- на touch-устройствах обработчики кликов приводят к задержке в 300-500 мс.: используйте “родные” обработчики ontouchend;

- используйте только необходимые части больших фрэймворков (напр. jQuery), а не их целиком;

- стремитесь к минимизации javascript в формах, лучше использовать HTML5, там, где это возможно;

- используйте базы данных, которые хранятся на стороне клиента (HTML5);
используйте ajax (onhashchange — для управления историей) и запрашивайте только то, что нужно изменить;

- загружайте JS асинхронно основному содержанию;

- уменьшайте стартовые задержки программных модулей.

P.S. не мое - перевод англ статьи, но кратко, доступно и все по теме.

Да уж, Adsense - Капитан Очевидность! =)))

Сергей, надо было это отдельной новостью публиковать:)

пусть редакторы обновят статью или перепубликуют отдельно, на лавры не претендую :)

Сергей, благодарим Вас за предоставленный познавательный материал!

Мы уверены, что опубликованные Вами комментарии вызывают не меньший интерес, чем любые топовые публикации на портале.

Спасибо за участие в жизни нашего ресурса!