Что ждет Интернет в будущем? Нет, мы имеем в виду не тренды ближайшего года, а то, какой будет виртуальная сеть лет через пять? Десять? И, что самое сложное, каким мы должны делать дизайн сайтов уже сейчас, чтобы он смог как можно дольше оставаться актуальным?
Для того чтобы правильно ответить на этот вопрос, в первую очередь следует разобраться, что же ждет всемирную паутину в будущем. Термин, который сразу же приходит на ум, — «мобильность». Мобильные веб-сайты, мобильные девайсы, мобильные приложения: этот список можно продолжать до бесконечности. Но не только в мобильности кроется будущее веба.
Меняться будет и способ выхода в сеть. Не только за счет растущего числа мобильных телефонов, поэтому правильнее будет делать акцент не на мобильности, а на портативности будущего Интернета.
За последние 10 лет количество Интернет пользователей выросло на более чем 444% и теперь насчитывает 28.7% всего населения Земли. Это около 2 миллиардов людей, большинство из которых находится в Азии. Этот рост постоянно подстегивается огромными инвестициями в разработку соответствующего оборудования, девайсов и железа: миллионы миллионов компьютеров, безграничное количество километров кабелей, сотни тысяч беспроводных точек доступа и, в довершение ко всему, растущее 3G покрытие по всему миру.
Интернет сервис теперь доступен везде и осуществляется через огромное количество девайсов. В прошлом месяце Samsung создал первый холодильник, с панели управления которого можно отправлять твитт-сообщения! И это далеко не предел. Вся суть веба будущего в том, что создатели сайтов даже догадываться не будут, каким девайсом пользователь захочет открыть страницу. Поэтому главное, что мы должны будем уметь — это доносить наше сообщение как можно большей аудитории, создавать такие сайты, которые будут одинаково хорошо смотреться как на экране ПК, так и на приборной доске… холодильника.
Готовы?
Готовы вы ли к изобретательности пользователя? Для того чтобы проверить себя, давайте представим, как ваша последняя работа смотрелась бы в трех следующих ситуациях:
1. Пользователь смотрит любимый сериал с помощью своего нового Интернет-ТВ. Чтобы не слушать какой-то скучный диалог, он решает быстренько проверить свою почту. А там друг прислал линк на ваш сайт, который юзер открывает на боковой панели и смотрит параллельно с сериалом.
2. Пользователь возвращается на автобусе домой с работы и смотрит ваш сайт через 3G Интернет на своем iPad.
3. Пользователь заглядывает на вашу веб-старничку с помощью своего Sony Ericsson с установленной туда программой Opera Mini.
Каждый из этих сценариев ставит перед нами отдельную задачу: в первом случае — это добавочное форматное соотношение и комбинирование браузеров, во втором — хорошая площадь просмотра, но медленная скорость соединения и в третьем — очень маленькая площадь просмотра. И судя по сегодняшней ситуации, все эти три сценария — более чем реальны.
Если вы заранее не задумывались об этом вопросе, очень вероятно, что ваш сайт не будет нормально работать в каждом из вышеприведенных случаев.
Как же сделать такой сайт, который будет всегда отлично отображаться?
Создавая дизайн веб-сайта, в первую очередь мы должны думать о ключевом контенте и способе его отображения. Главная мысль не должна меняться в зависимости от девайса, которым пользуется юзер, а должна передавать постоянную неизменную идею.
В будущем мы не сможем контролировать путь, с помощью которого пользователь захочет открыть наш сайт. Поэтому дизайнеры должны полностью забыть о каких-то форматах и привязках к одному конкретному девайсу, а рассматривать процесс создания сайта несколько по-другому: основываться на ядре контента.
1. Веб-сайт должен быть доступен для просмотра как можно большей аудитории.
2. Веб-сайт должен содержать один и тот же контент, вне зависимости от того, где он просматривается.
3. Структура веб-сайта не должна меняться в зависимости от того, на каком устройстве его просматривают.
4. Контент должен отображаться в стиле, соответствующем девайсу.
Использование новейших веб-стандартов
Да, мы имеем в виду именно HTML5. Хорошая новость: оба наиболее распространенных мобильных браузера, Webkit и Opera, очень дружат с HTML5; Webkit вообще делает это еще с ноября 2007 года.
Используя новейшие стандарты веб-разработок, вы будете иметь качественное преимущество не только потому, что идете в ногу со временем, но и потому, что можете рассчитывать на долголетие и актуальность созданного вами веб-сайта.
Если вы пока «плаваете» во всех тонкостях и нюансах HTML5, обратитесь за помощью к нижеперечисленным мануалам. Они помогут.
Dive into HTML5
Обзор возможностей и стандартов HTML5.
HTML5 Demos and Examples
Целая серия демонстраций, показывающая возможности HTML5 вместе с кодом источника.
HTML5 Gallery
Галерея сайтов, построенных на HTML5.
Начните с простого
Мыслить портативно — значит мыслить просто и чисто. Большое разнообразие размеров экранов толкает нас к созданию масштабируемых и адаптационных дизайнов. И чем они проще, тем адаптационнее.
Простое начало всегда дает удобный фундамент для строительства. Естественно, мы начинаем с самых базовых элементов, доступных даже на самых простых мобильных девайсах и продолжаем двигаться к более сложным вариантам, подходящим для планшетных браузеров.
Остерегайтесь Flash, Silverlight и JavaScript. Пока что
Плохая новость в том, что нам придется пожертвовать некоторыми вещами, к которым мы так привыкли: к примеру, платформы Flash и Silverlight переживают сейчас не самые спокойные времена. Microsoft уже заявил, что он прекращает разработку платформы Silverlight для того, чтобы полностью сконцентрироваться на HTML5. А Flash используется, в основном, как платформа для разработки игр и механизм для просмотра видео. Если мы собираемся создавать действительно кросс-платформенные веб-сайты, которые правильно отображаются на всех девайсах, тогда Flash и Silverlight — не наш выбор. Мы не можем быть уверены, что в будущем этот софт будет установлен на девайсах пользователей.
Нам, возможно, придется воздержаться и от использования JavaScript и AJAX, потому что некоторые не самые навороченные девайсы могут еще не обладать софтом, нужным для того, чтобы справиться со сложными библиотеками.
Эта тема становится особо актуальной в свете последнего «хеш-бэнг» тренда. Он зародился вместе с противоречивым редизайном веб-сайтов компании «Gawker Media» (включая Gizmodo, Lifehacker и Gawker). Эти сайты основываются на JavaScript и состоят из одной страницы, которая загружается динамичным контентом. Но каждый пользователь, чей браузер не поддерживает JavaScript по какой-либо причине, не сможет посмотреть такой веб-сайт.
Поддержка JavaScript будет очень полезной, когда девайсы по всему миру перейдут на более современные и новые платформы, а старые устройства будут изыматься из оборота. Но в данном конкретном случае верность консервативному подходу гарантирует нам более широкую аудиторию пользователей.
Тестируйте, тестируйте и еще раз тестируйте
В будущем у нас не будет возможности тестировать свой сайт относительно каждого возможного устройства, на котором его могут загрузить. Но это совсем не исключает важности тестирования продукта. Мы ДОЛЖНЫ тестировать его.
Купить по девайсу на каждую платформу — задача нереальная. Но существуют и альтернативы. Для большинства основных платформ доступны девайс-эмуляторы, которые симулируют опыт Интернет-браузинга. Есть также много платных сервисов, к примеру, DeviceAnywhere. Он позволит вам протестировать сайт на более чем двух тысячах устройств.
К сожалению, пока еще не существует эмуляторов для Интернет-ТВ, но, будем надеется, что это лишь вопрос времени:)
И, наконец, мы не должны забывать протестировать нашу работу на обычном компьютере, ноутбуке и т.п. Цель дизайна для портативного веба — это создать одинаково верное отображение сайта на максимуме возможных устройств. И только тот факт, что теперь пользователь может юзать Интернетом каким угодно способом не означает, что он тут же забросит свой старый-добрый ПК или ноут.
Гадкий утенок?
Так что же получается: выступая за визуальную простоту, портативный дизайн против красоты наших сайтов? Нет, конечно. Просто не стоит забывать, что превосходный дизайн — это не только произведение художественного искусства, но и четкое предоставление информации. Что подводит нас к следующей теме:
Контент для портативного веба
Контент — это Король портативного веба. А сократив вес художественных элементов дизайна, вы еще больше фокусируете внимание посетителя на контенте.
В первую очередь стоит понять, какая идея в вашем контенте является первозначимой для пользователя. И не забывайте, что на маленьких экранах нет места сложной навигации, она должна быть чрезмерно простой.
Давайте сравним главную страницу мобильной и полной версий сайта YouTube:
