|
|
|||||||||||||||||||
Эксперимент The Boston Globe: запущен сайт будущегоСкопируйте код в ваш блог
Статья будет выглядеть вот так:
Фото: Fotolia/PhotoXPress.ru
Как поступить, если менеджер компании уволился и унес с собой единственный файл с базой клиентов в Excel?
Представьте себе: у вас есть сайт. Правильно свёрстанный и интересно оформленный, богатый разнообразным контентом: текстами, изображениями, видео. Например, такой, на одной из страниц которого вы читаете эти строки. Информация, содержащаяся на сайте, ежедневно привлекает множество посетителей, и вы заинтересованы в том, чтобы их число росло. Тогда вы, вероятно, захотите, чтобы содержимое сайта было доступно не только пользователям настольных компьютеров и ноутбуков, но и владельцам всевозможных мобильных устройств. Как этого добиться?
Вы можете создать нативное приложение. Оно будет распространяться через апп-стор соответствующего девайса (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, при которой сайт автоматически «опрашивает» браузер о размерах его окна и в зависимости от «ответа» загружает ту или иную таблицу стилей.
Процесс разработки «отзывчивого сайта» несколько более сложен и трудоёмок, чем традиционный веб-дизайн, зато и преимущества неоспоримы. Самое главное – responsive web design требует совершенно нового подхода к визуальному представлению информации, когда на первое место выходит user experience, удобство пользователей, просматривающих сайт на самых разных устройствах и платформах. Не случайно автор методики (и многочисленные разработчики, развивающие и совершенствующие её) рекомендуют начинать создание сайта именно с его мобильной версии, причём с наиболее простого варианта, и уже потом постепенно наращивать размер страниц и сложность вёрстки. Подобно направлению в архитектурном дизайне, называемом «отзывчивой архитектурой» (согласно которому пространство жилища должно реагировать на присутствие находящихся в нём людей, автоматически настраиваясь на их нужды и особенности), «отзывчивый веб-дизайн» позволяет наилучшим образом удовлетворять потребности любого посетителя, каким бы инструментарием для потребления информации тот ни пользовался. Возможно, это и есть тот самый «выход из тупика», который безуспешно ищут разработчики с самого момента, как появление iPad произвело настоящую революцию в способах потребления контента. Дилемма «мобильный веб против нативных приложений» наконец-то получает своё решение.
В России тоже начинаются первые эксперименты с responsible web design. Например, в ближайшем будущем журнал PrintWeek, издателем которого я являюсь, откроет новый сайт, который целиком будет построен на методиках «отзывчивого дизайна». Для нас новый подход – отражение общей тенденции в развитии медиакомпаний, согласно которой они должны обрести полную независимость от платформ и носителей. Функцией любого издания становится прежде всего создание высокоценного контента, который поступает читателю через все каналы, которыми он пожелает воспользоваться. «Отзывчивые» сайты уже очень скоро станут частью «отзывчивых медиа», автоматически настраивающихся под пользователя и условия, в которых ему захотелось воспользоваться информацией, – а современные мобильные технологии позволяют ему делать это в любом месте и в любое время.
Следите за обновлениями Slon.ru в вашей социальной сети: ВКонтакте или Facebook.
А также
|
Быстрый Slon
|
||||||||||||||||||
Александр Шнайдер 
|
25.05.2012 19:59
|
|
25.05.2012 18:53
|
|
25.05.2012 18:53
|
|
25.05.2012 18:25
|
|
25.05.2012 17:18
|
Сегодня читают
Комментарии
Просмотры
Не очень понимаю... А что, собственно, нового в автоформатировании текста? При наличии у разработчика прямых рук всё это делается с помощью CSS и HTML и работает во всех браузерах и на всех девайсах.
1) Прочтите статью http://alexschneider.ru/articles/2011/10/responsive-web-design-otzyvchivyj-veb-dizajn/ , и вы поймёте, что
а) в полной мере это стало возможно только в стандартах HTML5/CSS3;
б) судя по сегодняшнему состоянию веба, "прямые руки" (в вашем понимании) характерны где-то для 0,001% разработчиков. По крайней мере, примерно такова доля сайтов, способных настраиваться под размер экрана и тип устройства.
@alexschneiderru (Александр Шнайдер),
Почему только CSS3? Отлично работает и в "раннем" CSS.
Открыл 10 сайтов браузером Opera Mobile. 9 из них отлично форматируются под экран и под зум. Браузер обычный. Сайты обычные. Что я делаю не так?
Под тип устройства - да, наверное такая настройка еще не сильно распространена.
Media queries появились только в стандарте CSS3. Без них такое реформатирование практически невозможно.
Уменьшите окно браузера до ширины 600px. А теперь до 480 px. Появился горизонтальный скроллинг. Теперь попробуйте попользоваться сайтом. Удобно? Тогда зачем вы покупали 20 или 22-дюймовый монитор? Зачем на вашем ноутбуке горизонтальное разрешение 1540 px или что-то вроде того? Оставьте окно браузера в размере 480 px и наслаждайтесь процессом.
Это просто смешно ) Лебедев уже сто лет назад писал о "резиновых сайтах" и студия его примерно столько же эти сайты делает. )))
@Sam Lobashev, резиновые сайты и @media queries - это совсем разные вещи. Сайт с медиа цсс не обязательно будет резиновым, тут подразумевается практически полная перетасовка модульной сетки в зависимости от разрешения и т.п.
И без media queries с CSS3 такое делать можно. Ширину окна джаваскриптом можно найти. Стили и элементы на странице в зависимости от ширины им же меняются. Вроде, даже не сложно.
Только кода, наверное, больше будет
Строго говоря, это не что-то принципиально новое, а просто логичное развитие принципов "резинового сайта". Основной принцип (и преимущество) - отсутствие горизонтальной прокрутки при любом разрешении экрана - следовало бы упомянуть в статье (вместо "попробуйте это", зайдите туда" и т.п.).
С ума сойти какая инновация. Таких сайтов уже тысячи, если не миллионы.
технология реально нужная и очевидно, что это тренд и новая ниша для разработчиков. а профанство некоторых комментаторов доставляет.
Хе... Пока одни собираются, другие уже давно пользуют. Вот пример российского сайта, который уже с полгода работает на подобной технологии: http://Khrolenok.ru/
Мы ещё немного не закончили свой новый сайт, но ведём разработку уже именно в такой responsive вёрстке ) кому интересно, лично вышлю ссылку на тестовый сервер.
Всё изменилось две недели назад, когда газета The Boston Globe открыла свой новый сайт. - в мире много чего меняется - для вас изменилось все, когда газета The Boston Globe открыла свой новый сайт
Дада, но заказчики пока не спешат переплачивать за responsive web design. Что странно, потому что продажи планшетов и смартфонов первысили продажи ноутбуков и настольных компьютеров — http://wedeal.ru/blog/prodazhi-planshetov-i-smartfonov-obognali-prodazhi-noutbukov-i-desktopov/