Советы по дизайну для мобилок (Часть 2) – Разрешения

Одним из первых решений, которые приходится принимать дизайнеру при создании нового сайта, так это решить, какого он будет размера. В то время как разрешение экрана варьируется от 1024x768px до 2560x1600px, многие дизайнеры перешли на фиксированные размеры и создают сайты с помощью CSS-фрэймворков. Вообще не очень хорошо делать ширину сайта 1200px, в то время как 20% пользователей всё ещё используют разрешение 1024×768.

В мире компьютерной техники, пользователи не так уж часто меняют оборудование. Для веб-дизайнеров это очень удобно. Если пользователи сидят на одном и том же разрешении, то нам ничего не нужно делать. Опираясь на статистику сайта w3schools.com, начиная с 2000 года, в последующие 9 лет всего лишь навсего 10% их пользователей продолжают использовать разрешение 800x600px. Похожую статистику мы можем получить и с сайта w3counter.com. Согласно полученным данным, в промежутке между маем 2007 и январём 2011, число пользователей, которые используют разрешение 1024x768px, упало с 50.97% до 20.59%. Даже учитывая эти 20.59% можно сказать, что данное устаревшее разрешение является популярным на сегодняшний день.

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

Конечно, различного рода фрэймворки облегчают жизнь огромному количеству верстальщиков, т.к. размеры таких вёрсток вполне удовлетворяют потребности пользователей. Когда дизайнер использует проценты вместо пикселей, то вероятность того, что экранное пространство будет использоваться на полную катушку, увеличивается. Сайт с процентом ширины 90% охватит 21.6 дюйм 24 дюймового монитора, в то время как популярная ширина 960px займёт всего лишь 10 дюймов того же монитора. Вот именно поэтому и нежелательно использовать фиксированные CSS фрэймворки (у кого-то когда-то были проблемы с просмотром сайта Wikipedia на расширении 1920×1200?).

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

Ну а теперь я приведу небольшую статистику разрешений экранов для мобилок, пока она не устарела (данные на Февраль 2011):

Учитывая вышеперечисленные разрешения экранов, очень трудно выбрать что-то одно для того, чтобы начать проект. Должны ли мы ориентироваться на наименьшее разрешение, как мы делаем это в обычной жизни? А как оно будет смотреться на всех остальных дисплеях?

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

Другой вариант решения данной проблемы - это создание дизайна для отдельного устройства, или набора устройств. Что это вообще значит? Вместо того, чтобы создавать дизайн с фиксированной шириной, лучше создать его так, чтобы он менялся в зависимости от положения и размерности экрана устройства.

В прошлом это было проще сказать, чем сделать. Для того чтобы применить накопленный опыт в разработке дизайна для мобилок, хотите того или нет, но придётся использовать javascript для определения разрешения.

Если говорить о мобильных устройствах, то тут всплывает ещё несколько проблем. Как вы, наверное, знаете, можно создавать каскадные таблицы стилей для разных медийных устройств. Вам, наверняка, знакомы такие ключевые слова как screen, print. Однако, браузеры в мобильных телефонах и других устройствах порой ведут себя совсем непредсказуемо. Одни будут воспринимать данные таблицы стилей, а другие будут их просто игнорировать.

Идеальным решением данных проблемы была бы реализация проекта “One Web” для веб-дизайнеров:

…One Web означает создание, насколько это возможно, одинаковых условий для использования и отображения информации на всех устройствах. Однако это не означает, что одна и та же информация будет выглядеть абсолютно одинаково на разных устройствах. Если говорить о сфере мобильных устройств, то это касается совместимости, трафика, и каких-то других стандартов.

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

С тех пор как были введены CSS3 Media запросы, у разработчиков появилась возможность определять такие данные, как ширина устройства, положение, и соотношение сторон. Используя Media запросы, появилась возможность подгружать различные стили для различных устройств (или коллекций устройств).

Использовать CSS Media запросы совсем не сложно. Стандартная имплементация может выглядеть следующим образом:

<!-- All common styles -->
<link rel="stylesheet" href="/common.css" type="text/css"
    media="screen" />

<!-- Devices between 480-1024px -->
<link rel="stylesheet" href="/styles_max_1024.css" type="text/css"
    media="only screen and (min-width:481px) and (max-width:1024px)" />

<!-- Devices below 480px -->
<link rel="stylesheet" href="/styles_max_480.css" type="text/css"
    media="only screen and (max-width:480px)" />

Код, приведённый выше, загрузит 3 таблицы стилей: для всех устройств, для тех, чьё разрешение варьируется между 481-1024px, и специальный стиль для разрешения 480px.

Единственной проблемой данного подхода является то, что 3 разные таблицы стилей означают 3 отдельных http запроса. Для того чтобы сократить время загрузки страницы, мы должны добиться того, чтобы подобных запросов было как можно меньше. Это особенно касается мобильных устройств. Подробнее об этом мы говорили в предыдущей статье.

Ещё одним вариантом имплементирования подобной функциональности является использование одного файла таблиц стилей. Он будет выглядеть примерно так:

/* Common CSS Goes Here */

/* Devices between 480-1024px */
@media screen and (min-width:481px) and (max-width:1024px) {
    /* styles go here */
}

/* Devices 480px & below */
@media screen and (max-width:480px) {
    /* styles go here */
}

Специфичные стили для устройств

Очень важно иметь возможность предоставить специфическому устройству свою специфическую таблицу стилей (пример: веб-приложение, написанное специально для iPad). Для этого вы также можете воспользоваться Media запросами, чтобы определить разрешение:

<!-- iPad specific styles -->
<link rel="stylesheet" href="/iPad.css" type="text/css" media="only screen and (max-device-width:1024px) and (min-device-width:768px)" />

Специфичные стили в зависимости от ориентации

Также возникают случаи, когда необходимо определить ориентацию устройства. Для этого нужно использовать подобную технику:

<!-- Orientation styles for devices w/ max width of 1024px  -->
<link rel="stylesheet" href="/portrait.css" type="text/css"
    media="only screen and (max-device-width:1024px) and (orientation:portrait)" />

<link rel="stylesheet" href="/landscape.css" type="text/css"
    media="only screen and (max-device-width:1024px) and (orientation:landscape)" />

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

Специфичные стили для браузеров

Как и в привычном нам случае, все мобильные браузеры имеют свои особенности отображения страниц. Однако не сложно применить технику, которая позволит вам определить, какую таблицу стилей загрузить в зависимости от браузера, который использует пользователь. Gecko, Opera, и Webkit браузеры могут быть определены без особых усилий.

Internet Explorer Mobile предприняло огромное количество решений для рендеринга кода, но проблем от этого не убавилось, поэтому, чтобы определить IE Mobile на Windows Phone 7 необходимо использовать следующий код:

<!--[if IEMobile]>
    <link rel="stylesheet" href="/ie_mobile.css" type="text/css" media="screen" />
<![endif]—>

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

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

Ширина отображения браузера на мобильном устройстве ограничена размерами самого устройства. По умолчанию, многие современные мобильные устройства, отображают всю актуальную ширину контента на странице, и могут быть масштабированы.

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

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

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

Так как пользователи постепенно привыкают к просмотру мобильных версий сайтов, они могут устать от панорамирования и масштабирования и будут более склонны к веб-сайтам, которые планируются специально для них. Ну ведь сами подумайте. Допустим, вы хотите прочитать новости. Если сайт не предназначен для мобильных устройств, то вам нужно возиться с масштабом. Для пользователя удобнее, если всё это будет делаться автоматически, не правда ли?

Возьмём к примеру мобильную версию сайта Facebook. Тут разработчики Facebook не позволяют пользователям производить пиксельное масштабирование, путём применения резинового отображения ширины для браузера, который будет отображать данный сайт. Благодаря данной технике, мобильная версия Facebook прекрасным образом будет отображаться на разных мобильных устройствах. Если кто пользовался данной версией сайта, то он может сказать что она очень дружественная для пользователя и не предоставляет никаких сложностей в навигации и чтении информации.

Для того чтобы явно обозначить точку просмотра, необходимо воспользоваться мета тегом <meta name=”viewport”>. Использовать его нужно следующим образом:

<meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

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

Microsoft Kin была специальной платформой для смартфонов, работа над которой приостановилась в начале Апреля 2010 года. После двух лет разработки, было потрачено около 1 миллиарда долларов США. После 48 дней маркетинговой компании данный продукт под названием Kin был снят с производства. Так в чём же проблема?

Существует целый список причин, почему работа над Kin была приостановлены. Я думаю (это, конечно же, только моё мнение), что смартфоны Kin на самом деле не являлись смартфонами, т.к. для смартфонов предусматривается наличие приложений. Для Kin этого не было предусмотрено.

Люди всегда ожидают того, что облегчит им жизнь. Это выражение конечно же можно оспорить, но большинство аудитории будет на моей стороне. Сегодня нужно идти по пути современного развития. Если вы делаете сайт, касающийся выпечки, то обязательно сделайте мобильную версию данного сайта. Иначе вы всегда будите плестись позади всех.

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

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

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

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

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

Спасибо за внимание и всего хорошего!

• Комментарии