От автора: адаптивный веб-дизайн в сети стал почти вездесущим модным словечком. Попытайтесь набрать #rwd (аббрев. Responsive web design – адаптивный дизайн) в Twitter’е в поиске равнозначного контента и Twitter-спама. Это –нормальная стадия вызревания новой идеи. Я помню время, когда последним писком моды был AJAX; этот термин затаскали до дыр. Теперь мало кто говорит об AJAX’е, но в рабочем процессе разработчика плотно присутствуют библиотеки вроде jQuery.
То же происходит с адаптивным веб-дизайном. Этим термином пользуются все. Моя приятельница занимается издательской деятельностью, недавно она попала на конференцию, где издатель широко известного нового журнала говорил о новых тенденциях и упомянул адаптивный веб-дизайн. Издатели могут не быть веб-профессионалами, но им отлично известны модные словечки.
По мере того, как адаптивный дизайн набирался сил, изменились методы построения сайтов. Так как это понятие перемещается из категории просто слов «на слуху» в обычную рутину каждого дизайнерского проекта, требуется изменить методику нашей работы как веб-профессионалов. Имея это в виду, следует разработать ее основные правила.
Правило 1: Не останавливайтесь на “податливости”
Когда кто-то просит вас “проверить этот адаптивный сайт”, что вы делаете в первую очередь? Вы, возможно, меняете масштаб окна, чтобы посмотреть, как изменяется разметка. Скорее всего, я не соберусь открыть его в телефоне и «таблетке» и начать менять ориентацию или тестировать страницу на скорость. Я меняю масштаб браузера и иду дальше по своим делам. Это – наши впечатления от сайта с точки зрения дизайнеров и разработчиков, но не пользователей. При посещении сайта в качестве посетителя у меня заканчивается терпение. Мне без разницы, красиво ли изменяется сайт – мне нужно только то, что я хочу.
“Податливость” – это линейное масштабирование вебсайта. Изменяется ли сайт от узкого до широкого? Вместо линейного масштабирования адаптивный веб-дизайн должен сосредоточиться на создании ядра сайта и его прогрессивной загрузке, основанной на производительности. Представьте себе сайт, который следует создать для крошечного сотового телефона, работающего на IE7 в сети EDGE. Он и должен стать вашим корневым сайтом, а затем масштабироваться на основании размера экрана и производительности.
Правило 2: Не ищите легких путей
Адаптивный веб-дизайн – сложный. Уж какой есть, такой есть. Мне хотелось бы подсказать вам, как можно его облегчить, но сказать нечего. По большей части народ отозвался на адаптивный веб-дизайн, что-то добавив в процесс своей работы, то ли это новая комплектующая, то ли просто обращение к разработчику с вопросом, будет ли их проект работать адаптивно.
У меня есть приятельница, работающая над адаптивным сайтом для клиента. Она строит сайт в Photoshop’е под размер настольного компьютера. После разработки макетов нескольких страниц она решила показать, как будет выглядеть сайт на «таблетке» и в смартфоне, поэтому сделала макеты и для них. После демонстрации клиенту она получила несколько креативных поправок. На данный момент для этого сайта готово примерно 50 файлов PSD. Несколько дней у нее занимает переработка разметок.
Попытка добавления одних лишь новых дизайнов в результате окончится длительным по времени и непоследовательным процессом. Лучше всего решить эту проблему путем разработки прототипов каркаса и представления их своему клиенту. Так вы получаете основной узел, способствующий непосредственному общению с разметкой сайта без одновременных разговоров о дизайне. Основание от ZURB (Foundation by ZURB) – отличный инструмент быстрого построения прототипов.
Однако простого создания прототипов дополнительно к рабочему процессу будет недостаточно. Чтобы преуспеть при создании адаптивных сайтов, вам придется приспособиться, из чего следует очередное наше правило.
Правило 3: Примите перемены
Только начав строить вебсайты, я применял два инструмента – Photoshop и GoLive. Теперь у меня по меньшей мере шесть программ, безусловно необходимых при построении сайта. Я все еще применяю Photoshop для создания графических элементов, но по большей части занимаюсь дизайном в браузере с Sublime Text 2 и применяю инструменты разработчиков Safari для тщательного изучения элементов в своей iOS 6. Я также пользуюсь Codekit для компиляции препроцессорных CSS, и Terminal для контроля версий в Git.
Адаптивный дизайн, помимо всего, означает изменение манеры создания дизайна. Вместо разметки всей страницы в Photoshop’е я использую фрагменты стилей Саманты Уоррен (Samantha Warren’s Style Tiles) для четкой координации визуального дизайна. Сделав визуальный бренд сайта и элементы интерфейса вне действительной разметки, можно напрямую обращаться к дизайну проекта и сочетать его с разметкой прототипа с целью создания в браузере адаптивного сайта.
Препроцессоры CSS также отлично помогают при любом адаптивном рабочем процессе. Проще говоря, препроцессоры можно использовать для разрешения некоторых сложностей построения сайта. Я лично предпочитаю SCSS, но LESS для некоторых – лучшая альтернатива, так как у него лучше документация.
Правило 4: Помните об истоках
[Сеть] должна быть доступной с любого устройства, способного соединяться с Интернетом: стационарного или мобильного, с малым или большим экраном. — Тим Бернерс-Ли (Tim Berners-Lee)
HTML и CSS по своему существу адаптивны. С момента создания HTML, web должен быть достаточно гибким, для работы на любом оборудовании с Интернет-соединением. Ничего не менялось, пока мы, как дизайнеры и разработчики, не приблизились вплотную к фиксированным разметкам. В попытке навязать вебсайтам фиксированные размеры мы приспосабливали сеть к настольным компьютерам.
Подведение итогов
Адаптивный веб отделяет то, что вы хотите сказать, от того, как вы это говорите. Возьмите, например, последний шаг NPR к модели содержимого, управляемого API. Обратившись для обеспечения контента к API, NPR удалось последовательным образом организовать свою коллекцию приложений и сайтов. Единственное, что меняется – это уровень демонстрации.
Вот чем в точности должен заниматься адаптивный веб. Выяснять то, что вы можете сказать, и позволять управлять тем, как именно вы это говорите. Дизайн – это движение навстречу потребностям таким образом, чтобы визуально это было красиво, а также и отвечало требованиям пользователя.
Вот в чем заключается суть адаптивного веба — пользователь должен получить контент сайта в удобном виде, независимо от того, каким устройством он открыл сайт. Создание сайтов, приспособляемых к маленьким экранам – это лишь начало.
Автор: Matthew Carver
Источник: //www.webdesignerdepot.com/
Редакция: Команда webformyself.
Комментарии (2)