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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Эл. книги

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

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


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

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

Послесловие


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

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


В ближайшее время я предоставлю статью с полным описанием метода обеспечивающего разработку удобных представлений для различных устройств и подключение этого метода к некоторым наиболее востребованным CMS и цикл статей по юзабилити интерфейсов сайтов для каждого из классов устройств, кроме ПК. О юзабилити сайтов для ПК написано и так уже очень много.
AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 35

    +2
    Актуальные вопросы подымаете. Я бы с удовольствием посмотрел на решения и используемые техники. Особенно интересует media queries в CSS3.
      0
      В ближайшее время обязательно оформлю в виде цикла статей и методы и размышления на тему.
        +3
          0
          Знакомый ресурс. Спасибо.
            0
            Ресурс классный! Спасибо.
          0
          Спасибо за статью. Вопросы актуальные и важные. Я бы рекомендовал вам ознакомиться со стьёй A User-Centered Approach To Web Design For Mobile Devices или её переводом, хотя есть подозрение, что вы её проработали перед этой статьёй.
            0
            Нет. Слышал о такой статье, но не изучал. Спасибо за ссылки прочту обязательно. Может еще что-то почерпну.
              0
              Еще раз спасибо за ссылку. В общем согласен с большинством высказанного в ней. Кроме момента, что необходимо понаблюдать за тем, что делают пользователи с мобильных устройств на сайте. Т.к. проблема заключается в том, что если мобильного представления у сайта нет, то просто следить незачем. Пользователи заходя на не оптимизированные сайты пугаются и больше уже не возвращаются.

              Вывод. Думать и оптимизировать нужно сразу. А потом еще дополнительно изучать и совершенствовать.
              +1
              Видимо при написании данной статьи вы руководствовались инфой из книги Не заставляйте меня думать — С.Круг.
                0
                Нет. Эти мнения сформировались при длительной работе в разработке сайтов. В качестве отправной точки я использовал труд «Интерфейс: новые направления в проектировании компьютерных систем» Джеф Раскин. Из этого труда я почерпнул основную идею, что для того, чтобы кто-то пользовался продуктом им должно быть удобно пользоваться и не надо человека мучить.

                Подумав и сделав один раз можно сэкономить много человекочасов своих клиентов, а они за это отблагодарят.
                –2
                Думаю эта тема немного устарела. Нынче все современные мобильные браузеры стараются отображать все сайты как их настольные собраты. На фоне этого ваши затраты на создание для каждого устройства свой UI может не оправдаться… Так что, думаю, тут главное с самого начала спроектировать основной сайт так, чтобы при выключенной графике основная информация была читабельна. Исключением являются по настоящему информационные ресурсы, где важна скорость доступа к искомой информации, но и там для всех мобильных устройств можно «сообразить» что-то общее…
                  +1
                  Конечно не для всех сайтов такие трудозатраты оправданны. Но стоит отметить, что для определенных групп сайтов очень даже целесообразно рассмотреть альтернативные девайсы. Так, например, новостной портал может получить очень много лояльных пользователей, если сделает удобный доступ к информации с эл. книг, вроде Kindle, а сайт посвященный сериалам с отдельного интерфейса для приставок, телевизоров и HD-плееров. В статье я просто рассмотрел, что такое возможно и иногда желательно, а также показал, что иногда даже банальные стили для принтеров не внедряют в сайты.

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

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

                      Но многие моменты об удобстве тех или иных интерфейсов почерпнул с книги Джефа Раскина «Интерфейс: новые направления в проектировании компьютерных систем»
                        0
                        Несколько статей на тему подготовки страниц для мобильных устройств: dev.opera.com/articles/mobile/ (английский)
                        Не смотрите что от имени Opera, там опираются на стандарты.

                        А вообще всё достаточно просто:
                        1. верстаете по стандартам, потом под конкретные браузеры;
                        2. узнаёте разрешения экранов необходимых устройств и оптимизируете под них вывод страниц;
                        3. навигацию стрелками можно опробовать под Opera управлять курсором на странице клавишами Shift-стрелки (аналогов не знаю, ищите...);
                        4. если что-то специфичное всплывает на том или ином устройстве, тогда уже идет заточка под это устройство.

                        На сегодняшний день тенденция следования стандартам наблюдается во всех платформах, поэтому рассматривать каждое устройство как отдельная вселенная не стоит. Исключения — устаревшие бродилки, типа как браузер в PS3…
                      0
                      И еще раз насчет отображения как у настольных собратов. Если у кого-то есть Е-Book с браузером попробуйте зайти на Хабр. В принципе навигация вполне достойная, но прочесть ничего нельзя из-за очень маленького шрифта, т.к. разрешения там очень высокое относительно экрана и буквы получаются сильно мелкими. А решить это можно очень просто и получить благодарных читателей в метро.
                      0
                      Забыли такой класс устройств, как ИГРОВЫЕ ПРИСТАВКИ.
                        0
                        Их особенность — навигация с помощью джойстиков и кнопочных панелей (как правило не больше 8 кнопок). Самое геморное в таком устройстве набирать текст (в том числе, адреса сайтов).
                          0
                          Да не учел такой класс. Если честно не видел ни одного человека, который бы набирал адреса с джойстиков и производил с них навигацию по сайту. Обычно подключают клавиатуру и мышь к таким приставкам (или есть приставки имеющие доступ в интернет, но не имеющие возможности подключения клавиатуры и мышки?).

                          Попробую изучить этот вопрос отдельно. Может быть полезно для игровых порталов и видео порталов.
                        0
                        А вот как корректно отдавать пользователю нужный интерфейс? Анализировать User-Agent на стороне сервера — можно за клоакинг у поисковиков в бан попасть, да и не всё вроде можно детектировать на стороне сервера (нетбуки/планшеты например с обычным десктопным браузером). Делать интерфейс на JS целиком — у пользователя он может быть отключен (а то и вообще не быть).
                          +2
                          Это как раз тема следующей статьи. Для разных устройств имеются свои методы. И для некоторых даже несколько методов. Почему я выбираю те или иные я расскажу подробней позже.

                          За клоакинг в бан вы не попадете. Т.к. поисковым системам вы будете скармливать тот-же код, который предназначен для браузера. А при разном представлении страница особо сильно меняться не будет, полезный контент просто обязан остаться весь на 100%, а если для мобильного вы не выведете Flash заставку или какой нибудь баннер, то за это ни один поисковик вас не накажет.
                          +1
                          Пост не помешает разбавить примерами (скринами), а то говорить про дизайн только словами как-то неправильно…
                            +1
                            Насчет скринов думал. Но решил, что использовать в качестве скринов свои проекты будет попахивать саморекламой и рекламой этих проектов. В цикле статей посвященных юзабилити для отдельных устройств я сделаю дизайн абстрактного новостного портала, как наиболее наглядный пример, и покажу все на нем.
                              0
                              Отлично, тогда ждем!
                            0
                            Делал сайт для рекламного агентства:
                            • основной сайт был на флеше (так захотел клиент)
                            • версия для айфонов/айпадов — копия флеш версии, но на jQuery и с поддержкой тач интерфейса
                            • версия для других мобильных устройств — логотип и контактные данные

                            Мне кажется это оптимальный вариант
                              0
                              Вполне возможно. Т.к. рекламному агентству, как правило, нужно показать портфолио и контакты. Все остальное уже не так важно. Для этих целей ваш вариант, скорей всего и является оптимальным.

                              А вот сайту пицерии с возможностью онлайн заказа и доставкой в любую точку в черте города и даже на природу может быть еще нужно дать интерфейс для заказа с мобильника, чтобы клиент мог под пиво себе заказать :) Так что это нужно рассматривать в каждом отдельном случае.
                                0
                                Тут даже скорее речь не столько об устройстве, сколько о причинах посещения сайта с этого устройства — с телефона.
                                Для агентства — это уточнее координат в пути (ну не вижу я причин смотреть портфолио с телефона).
                                Для пиццы — это да, может что угодно, но и там можно угодить всем
                                1. быстрый заказ постоянного клиента — а значит нужно предусмотреть максимально быстро и с минимумом трафика сделать заказ
                                2. новый клиент — тут нужна «вкусная» версия
                                3. заход на сайт для поиска номера телефона, чтобы сделать заказ по телефону
                              • UFO just landed and posted this here
                                  0
                                  Отдельная версия для поисковика попадет под санкции этого самого поисковика за клоакинг. Поисковику необходимо отдавать содержимое представляемое для десктопного браузера.

                                  Исключение пауки специализирующиеся на каком-то устройстве, например индексирующие сайты для TV или еще чего нибудь. Но я таких не знаю, если честно.
                                  • UFO just landed and posted this here
                                      0
                                      Одним неоспоримым преимуществом флеш-сайтов является единая разработка для WEB и для CD презентации.

                                      А так согласен. Практически любой дизайн, который воплощают во Flash можно воплотить и более традиционными способами.

                                      Правда заказчиков иногда не поймешь. Я уже привык делать заказы, которые не добавляю в портфолио.
                                        0
                                        По второму моменту вы заблуждаетесь. Его решает связка джаваскрипта и экшнскрипта через location.hash
                                  0
                                  Мне кажется этой ссылке тут место: my.comdi.com/event_export/_rec/rit/01/?room=1&rec=23
                                    0
                                    Меня в последнее время больше занимает вопрос универсальной и удобной клавиатурной навигации по сайтам. Мне даже начинает казаться что без мышки в вебе никуда… а жаль.
                                      0
                                      возможное решение — habrahabr.ru/blogs/webdev/125247/

                                      Only users with full accounts can post comments. Log in, please.