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


В блоге Google Adsense появилась любопытная информация для разработчиков и владельцев сайтов. Adsense дает 10 советов, как оптимизировать сайт под мобильные устройства.

Итак, согласно советам Adsense необходимо:

1. Обеспечить быстроту загрузки. Сайт должен быстро загружаться, а тексты должны быть адаптированы для быстрого чтения;
2. Упростить навигацию. Необходимо разработать интуитивно понятную структуру переходов и средства поиска;
3. Ориентироваться на сенсорные экраны. Чтобы можно было легко нажимать на элементы;
4. Улучшать читаемость;
5. Сделать сайт универсальным. Чтобы он работал на устройствах любых типов;
6. Облегчить конверсию. Чтобы пользователь мог легко понять, как совершать покупки;
7. Учитывать местоположение;
8. Интегрировать основной и мобильный сайты – в последнем должно быть как можно больше функций главного ресурса;
9. Применять переадресацию. Пользователи должны автоматически попадать на мобильную версию сайта;
10. Поддерживать обратную связь.



Если вы заметили ошибку в тексте новости, пожалуйста, выделите её и нажмите Ctrl+Enter
3 балла
--+

Комментарии:
  masterserg / 06 December 2011 10:18 2
Проблемы мобильных устройств:
- маленькое разрешение экрана;
- медленные соединения;
- ограниченный размер кэша;
- много различных устройств и форм-факторов;
- низкая мощность процессоров;
- широкая поддержка 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. не мое - перевод англ статьи, но кратко, доступно и все по теме.
  Moonlight Shadow / 06 December 2011 14:19 1
Да уж, Adsense - Капитан Очевидность! =)))
  Андрей Гусаров / 06 December 2011 14:19 0
Сергей, надо было это отдельной новостью публиковать:)
  masterserg / 06 December 2011 15:00 2
пусть редакторы обновят статью или перепубликуют отдельно, на лавры не претендую :)
  admin / 06 December 2011 15:13 1
Сайт: https://www.raskrutka.by
Тема: пусть редакторы обновят статью или перепубликуют отдельно
Сергей, благодарим Вас за предоставленный познавательный материал!

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

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

Для добавления комментария надо зарегистрироваться и авторизоваться.
Добавить комментарий можно после авторизации через Loginza. Yandex Facebook Google Вконтакте Mail.ru Twitter Loginza MyOpenID OpenID


SEO персоны

Сергей Чаботько
Компания: Дизайн-Студия MEGA™
Должность: SEO-специалист
Сергей Анатольевич Потапов
Компания: SeoCode
Должность: СЕО-мастер
Максим Аксюто
Компания: Seobility
Должность: Директор
ТОП SEO персон

SEO компании

Дизайн-студия nashekrashe
веб-дизайн, графический дизайн, айдентика
a Priori
Интернет-реклама, комплексное продвижение сайтов
ISD Studio
Веб дизайн, SEO, биллинг, автоматизация бизнес процессов
ТОП SEO компаний

Популярные материалы

Михаил Райцин: ''Мы не против стать Китаем на SEO-рынке''

Михаил Райцин, мУркетолог, разработчик бирж Miralinks и WebEffector, дал специальное интервью для Raskrutka.by, где рассказал о годе трафика, WebEffector и конкурентах, а также своих увлечениях.

11.03.2010
  candy hard 23 балла 16

Извилистые пути Девушки-из-Сети

Что думает о байнете и кризисе одна из известнейших белорусских блоггерш Алена aka Девушка, живущая в Сети.

02.03.2009
  candy hard 17 баллов 12

Банковские пластиковые карты Яндекс.Деньги для белорусов: так ли все однозначно?

На прошлой неделе Яндекс запустил новую услугу – выпуск банковских пластиковых карт для Яндекс.Деньги. Об этом Raskrutka.by уже писала ранее. Несмотря на заявление о том, что пользоваться этой карточкой белорусы могут свободно, нас обуяли сомнения: все ли так однозначно?

02.05.2012
  admin 14 баллов 15

Последние вакансии

Интернет-маркетолог

Компания: ООО БелХард Девелопмент
Должность: Интернет-маркетолог
Зарплата (у.е.): По результатам собеcедования

10.10.2019

Программист

Компания: LetItBuild LLC
Должность: Программист
Зарплата (у.е.): 2000

03.12.2014

Программист

Компания: LetItBuild LLC
Должность: Программист
Зарплата (у.е.): 2000

03.12.2014