Новые правила адаптивного веб-дизайна

Новые правила адаптивного веба

От автора: адаптивный веб-дизайн в сети стал почти вездесущим модным словечком. Попытайтесь набрать #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

Источник: http://www.webdesignerdepot.com/

Редакция: Команда webformyself.

Хотите научиться создавать шикарные дизайны сайтов?

Получите бесплатную пошаговую обучающую систему по веб-дизайну

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (2)

  1. Maksim

    Статья хорошая, но слишком усложненная.Человек смотрит на адаптивную верстку сквозь очки «страха».Я лично занимаюсь адаптацией сайтов под всякие устройства и могу сказать, что научится делать такие сайты не так уж сложно и кстати CSS3 для этого вполне хватает.

  2. SMaverick

    Согласен с Maksim. Тоже занимаюсь разработкой адаптивной версткой. По первой было интересно и страшно. Но сейчас нечего сложного не вижу использую CSS2 реже CSS3. Я считаю только настоящие гуру верстки могут такое делать ;) !

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree