Pull to refresh

Веб-дизайн. Каждому устройству свое представление

Reading time 5 min
Views 11K
Регулярно увеличивающееся количество разнообразных устройств предоставляющих доступ во «Всемирную паутину» радует практически любого гика, но зачастую огорчает разработчиков и дизайнеров сайтов. В абсолютном большинстве сайтов совершенно нет поддержки ничего, кроме браузеров обычного компьютера, да и пресловутая кросбраузерность не всегда реализована в полном объеме. Хоть разработчики устройств и стремятся свести к минимуму различия в необходимом представлении, но не всегда это возможно по техническим причинам.

Стоит ли поддерживать различные методы доступа к своему сайту? Однозначно да.

Так что я предлагаю по сути дела? Я предлагаю реализовывать различные представления сайта для различных устройств.

Какими устройствами сейчас пользуются?


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

ПК, ноутбуки и нетбуки

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

Основных проблем разработки сайта для ПК я вижу две:
  • поддержка вывода на печатающее устройство;
  • поддержка различных разрешений экрана (резиновая верстка).

Какие проблемы таит вывод на печать? В превалирующем большинстве сайтов на данный момент не реализованы стили для печатающих устройств. Сайты воюющие за внимание пользователя не делают банальных вещей, помогающих их пользователям. Создавая тысячи статей авторы сайта не догадываются, что эти статьи кто-то будет читать и распечатывать. А для чего тогда они? Многие люди найдя статьи по интересующей их тематике сразу же их печатают, а изучают уже позже. Часто же информацию вообще ищут для другого человека, например по заданию руководителя, или набор рецептов для бабушки. Заставляя пользователя самостоятельно обрабатывать статью убирая из нее множество баннеров, форм регистрации, комментариев и пр. вы теряете клиента. Отдельная «страница для печати» улучшает ситуацию, но не спасает. Сильней всего от этой проблемы страдают сайты компаний предоставляющих прайсы и каталоги в виде сайта, а также проекты новостных и информационных порталов.

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

В чем же тогда проблемы с «резиновой» версткой? Проблем хватает. На сегодняшний день ширина экранов используемых на ПК колеблется от 800px до 1980px (почти в два с половиной раза). Попытки растянуть текст на всю ширину, как правило, приводят к плачевному результату, текст очень сложно читать на широких экранах.

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

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

Отдельно стоит рассмотреть экраны нетбуков. Они имеют ширину 800px и 1024px. И подавляющее большинство современных сайтов в них не помещается без горизонтальной прокрутки, и это огромная ошибка. Пользователей нетбуков становится все больше и больше.

Телефоны, КПК и комуникаторы

К особенностям этого класса устройств можно отнести относительно малый размер экрана, и при этом очень широкий шаг его разрешения. А также очень ограниченные возможности навигации на странице. Также обычно этот класс устройств обладает низкой скоростью соединения. Загружать лишнюю информацию на эти устройства не стоит. Лучше отключить всю рекламу, лишние изображения и пр. Покажите только нужную информацию в удобной форме, дайте возможность легкой навигации и в частности поиска по сайту, и не забудьте предоставить возможность отправить ссылку на этот материал в виде сообщения эл. почты одним нажатием, это позволит ему вернуться позже с более традиционного устройства.

Интернет планшеты

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

Телевизоры и HD-плееры

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

Эл. книги

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

Что нужно сделать?


А сделать нужно не много. Нужно определить какими устройствами могут пользоваться ваши посетители, проработать и создать для этих устройств представление вашего сайта, определить устройство по средством проверки заголовков браузеров, и отправить наиболее подходящее представление.

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

Послесловие


На регулярное возражение «А ко мне никто не заходит с телефонов, телевизоров и Е-буков. Зачем не их поддерживать?» отвечу вопросом «А что, конкретно ты, сделал, чтобы к тебе заходили с этих устройств?».

О планах на будущее


В ближайшее время я предоставлю статью с полным описанием метода обеспечивающего разработку удобных представлений для различных устройств и подключение этого метода к некоторым наиболее востребованным CMS и цикл статей по юзабилити интерфейсов сайтов для каждого из классов устройств, кроме ПК. О юзабилити сайтов для ПК написано и так уже очень много.
Tags:
Hubs:
+29
Comments 35
Comments Comments 35

Articles