Советы по дизайну веб-страниц, адаптированных для просмотра на маленьком экране мобильного устройства

Андрей МайдлаДизайн Comments

На стационарном компьютере просмотр различных веб-страниц не вызывает затруднений. Иное дело — мобильные устройства. Скорее всего, вы видели, как на iPhone можно перевернуть и увеличить размер веб-страниц. Он может показать вам все веб-страницы за один просмотр или увеличить контент, чтобы сделать чтение текста более удобным.

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

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

1. После создания сайта необходимо сделать тест: проверьте как выглядит ваш сайт на всех типах компьютеров, нетбуков, планшетов, а также на мобильных устройствах. Вы можете использовать онлайн эмуляторы для всех ваших тестов.
2. Если ваши страницы рассчитаны на широкий экран браузеров, то убедитесь, что самая важная информация видна даже в маленьком мониторе, который может не справиться с JavaScript, Ajax. Помните, что удобный для компьютеров формат XHTML Basic не поддерживается большей частью сотовых телефонов.
3. Если вы собираетесь построить отдельный вариант сайта только для просмотра с мобильных устройств, то убедитесь, что ссылка на эту версию есть в самой верхней части документа.
4. Большинство смартфонов используют браузеры Webkit (Safari на IOS и Android на Chrome) для отображения веб-страниц. Так что если ваша страница выглядит хорошо в Safari или Chrome, то она будет корректно отображаться на большинстве смартфонов.
5. Чем короче URL-адреса, тем лучше. Даже на iPhone набирать длинные адреса страниц утомительно. Формируйте адреса веб-страниц кратко.
7. Используйте больше текстовых ссылок, состоящих из длинных словосочетаний — ссылки из 3-5 слов проще нажать по телефону, чем 1 слово.
8. Не размещайте навигацию в самом верху экрана. Нет ничего более раздражающего, чем пролистывать весь экран в поиске ссылок, чтобы найти нужную информацию.
9. Изображения должны быть небольшими. Да, Android и Iphones может развернуть картинки, но чем они меньше, тем экономнее время загрузки. Оптимизация изображений на веб-сайтах обязательна даже для просмотра на компьютерах, а для сотовых телефонов жизненно необходима.
10. Не ставьте большие изображения в верхней части страницы. Может быть очень утомительно прокручивать изображение, которое занимает 3-4 полных экрана в самой верхней части страницы. Единственным исключением является случай с фотогалереями.
11. Технологии Флэш не поддерживаются большинством мобильных телефонов. Не стоит строить сайт на Flashe, если основные посетители сайта — обладатели сотовых телефонов.
12. Многие сотовые телефоны не имеют поддержки Cookies. Кроме Iphones.
13. Не используйте таблицы для разметки страниц, предназначенных для просмотра с мобильных устройств. И старайтесь избегать таблиц в целом.