AlexSchneider.ru

Сокращённая версия настоящей статьи была опубликована на сайте Slon.ru.
©Slon.ru. Все права сохранены.

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

Вы можете создать нативное приложение. Оно будет распространяться через апп-стор соответствующего девайса (Apple App Store на платформе iOS, Android Market на платформе Android и т.д.) и сможет использовать все преимущества мобильного интерфейса. Одна проблема: мобильных платформ сегодня слишком много (никак не менее семи), и вам придётся создавать отдельное приложение для каждой — либо смириться с тем, что та или иная часть пользователей будет лишена доступа к вашему контенту. Представьте себе, каково это — создать и поддерживать семь совершенно различных программных продуктов! Кроме того, вы столкнётесь с необходимостью подчиняться политике владельца платформы, а она, зачастую, бывает очень жёсткой и недружественной по отношению к разработчику. Скажем, Apple довёл медиакомпании до того, что они начали покидать App Store.

Вы можете создать так называемую «мобильную версию» сайта. Это, по сути, отдельный, оптимизированный для небольших экранов сайт, на который будут перенаправляться — автоматически или вручную — пользователи мобильных устройств. Язык разметки веб-страниц является платформенно-независимым, и ваш сайт, скорее всего, будет работать (с определёнными ограничениями) на любом устройстве. Но тут возникает другая проблема: рынок сегодня чрезвычайно фрагментирован, и на нём присутствуют девайсы с экранами как минимум восьми размеров — от маленьких смартфонов с дисплеями 320×240 px до 10-дюймовых планшетов с экранами почти как у субноутбуков. И этот диапазон, скорее всего, будет продолжать расширяться. В результате вам, опять-таки, придётся разработать и поддерживать несколько версий своего сайта, что сложно и экономически накладно.

И наконец, вы можете, по примеру подавляющего большинства владельцев сайтов, вообще ничего не делать — в конце концов, мобильные браузеры сегодня способны отображать почти все сайты Интернета. Вот только что это за отображение... Попробуйте открыть обычный сайт, скажем, на Nokia E63 или на iPhone предыдущего поколения — удовольствие, скажу вам, небольшое.

Но если вас не устраивает ни один из трёх описанных выше вариантов, есть четвёртый. Он сочетает в себе почти все их преимущества — и при этом практически практически свободен от их недостатков. Этот подход был предложен весной прошлого года дизайнером Этаном Маркоттом и носит название «responsive web design» (что приблизительно можно перевести как «отзывчивый веб-дизайн»). Метод быстро завоевал популярность, но до последнего времени применялся, главным образом, в относительно небольших проектах. Всё изменилось две недели назад, когда газета The Boston Globe открыла свой новый сайт.

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

Концепция «отзывчивого веб-дизайна» основан на нескольких революционных методиках, созданных ранее другими дизайнерами: масштабируемые шрифты и изображения; «гибкая» сетка вёрстки (fluid grids); технология media queries, при которой сайт автоматически «опрашивает» браузер о размерах его окна и в зависимости от «ответа» загружает ту или иную таблицу стилей...

1 2 Вперед Статья целиком