Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки - Элиот Стокс

Карта все облегчает. Надпись «Вы здесь» показывает наше настоящее местоположение как данное; найти наш пункт назначения можно через индекс, а координаты посмотреть в таблице. Допустим, вы знаете, куда хотите пойти сначала. Тогда все, что вам остается, – это идти.

Философ Альфред Корзыбски заметил, что карта – это не территория: модель реальности – еще не сама реальность. Вот почему многие проектные планы не срабатывают. Не могу удержаться, но чувствую, в глубине души мы все это знаем. Примеры этого окружают нас везде: пробки, строительство дорог, улицы с односторонним движением, те вещи, которые мы не видели и не смогли бы увидеть на нашей карте, но мимо которых мы проходим.

Движение – это форма технологического рабочего процесса. Мы шныряем туда-сюда в транспорт, сокращаем путь, обходим стороной преграды, останавливаемся попить кофе, случайно сталкиваемся со старым другом и узнаем от него, что магазин, который мы ищем, находится уже в другом месте. Снова хватаем карту и корректируем план.

Технологический рабочий процесс должен быть плавным. Он должен приспосабливаться к различным обстоятельствам. Он должен быть… адаптивным, если хотите. Для нас, искателей шаблонов и любителей пошаговых руководств, нет ничего дороже, чем набор команд для нашего технологического рабочего процесса:

• пройдите прямо два квартала,

• поверните налево,

• пройдите еще два квартала,

• первое здание слева.

Это выглядело бы фантастически в том мире, где карта – это территория. Но так не бывает. Никогда.

Во-первых, мы часто не знаем, с чего нам надо начать проект. «Вы – здесь» не существует. Клиенты часто говорят нам: «Вы – здесь», но наша задача, как дизайнеров, спросить и выяснить, действительно ли это так.

Даже фраза «Я думаю, что мы здесь» – рискованное дело. Если вы хотите попасть в Нью-Йорк, а вы, скорее всего, в Париже, а не в Чикаго, у вас серьезные проблемы: машина, которую вы взяли в аренду, не лучший способ передвижения. Вам все-таки нужно добраться до Нью-Йорка, но это будет гораздо дольше.

Итак, технологический процесс должен оставаться подвижным, потому что любой фактор влияет на другие факторы. Комбинация исходной и конечной точек (пункт назначения или цель) определяет наш выбор для путешествия из пункта А в пункт В. Летите до Нью-Йорка самолетом, до отеля возьмите такси, до здания прогуляйтесь.

В веб-дизайне местность изменяется быстро. Польза от карт минимальна. В мультиплатформенном дизайне, где сайты и приложения будут использоваться на многих различных устройствах, мы сталкиваемся лицом к лицу с разнообразными пунктами назначения. Перечень устройств, которые нужно поддерживать, может быть нашей картой, но ее полезность в этом изменяющемся ландшафте ограничена. Мы не можем сказать: «Это должно хорошо выглядеть на Android», что это значит вообще? Возможно, вы столкнетесь со списком переменных, с которыми вам придется иметь дело: разрешение экрана, плотность пикселей, размер экрана, поддержка CSS (или вдобавок поддержка любой технологии), доступность, ввод через клавиатуру и мышкой против сенсорного ввода. Список можно продолжить. И это только технические факторы. Давайте не будем забывать о «туманных» (хотя все же технических) изменениях, например, почему у клиента сайт на устройстве BlackBerry выглядит иначе, чем в вашем макете Photoshop. Упс!

Итак, как же установить технологический процесс для создания или переделки нашего сайта так, чтобы оставаться гибкими и легко адаптироваться и при этом не блуждать туда-сюда? Первый и хороший шаг – это начать сначала. Давайте посмотрим, что мы имеем и откуда мы хотим начать наше путешествие. Для того чтобы обеспечить себе оптимальную гибкость, сосредоточимся сначала только на контенте.

Сначала структурированный контент: мышление, независимое от устройства или платформы

Намеренное игнорирование нашего пункта назначения и фокусирование на том, где мы есть и на самом ли деле хотим начать отсюда, требует от нас немалой гибкости. На сегодня одна из больших проблем Cети в том, что технологии влияют на принятие решений больше, чем следует. Возможности устройства становятся поводом для используемых функций. Система управления контентом выбирается еще до того, как мы решаем, что будет делать приложение и для кого оно. «Хотим использовать HTML5», – заявляем мы.

Естественно, что люди сосредотачиваются на технологии. Ведь технология – это захватывающая и такая классная забава. Веб-технологии – это игрушки, инструменты, всякие штуки, который используют «все». Вместо того чтобы дать нашей проблеме подвести нас к выбору правильной технологии для решения, мы смотрим на классные демоверсии и придумываем повод использовать их. Мы забываем о том, что эти демоверсии делают люди, которые…ну, делают демоверсии. Когда вы занимаетесь проектом редизайна, это реальная жизнь. Вам нужно сделать вещь, которая действует. «Круто» – это, конечно, хорошо, но только в том случае, если это работает и решает проблему. Сегодня все внимание слишком часто приковывается к решениям, а не проблемам. Нам надо на время превратиться в пессимистов и сосредоточиться на всех наших проблемах – сосредоточиться на них пристально, позволить им вырасти. Тем, кто имеет дело с веб-технологиями (т. е. вам), ответы придут на ум прямо в душе.

Перечень контента

Есть определенное мнение о контенте, которое поможет разработчикам (и их клиентам) сосредоточиться на реальной сущности проекта. На протяжении всего времени действительно имеют значение только две вещи – это основной контент и функциональные возможности сайта или приложения. В этом причина того, почему люди, в первую очередь, используют продукт. Не обращайте внимания на платформу. Игнорируйте браузеры. Сосредоточьтесь на причинах того, почему так. Назовем это мышлением, независимым от устройства или платформы, так как нас не волнуют эти вещи, по крайней мере, сейчас. Давайте применим это мышление к основному контенту и функциональным возможностям.

Как всегда, вопросы помогут нам мыслить критично:

1. Во-первых, почему люди будут использовать этот сайт? Найдите веские причины… Я не уверен. Поищите еще. А теперь «отшлифуйте» эти причины. Они должны быть истинными.

2. Если бы в мире существовал только один браузер, и он воспроизводил бы только язык HTML, со стилями по умолчанию и функциями, которые обрабатывает сервер, какую совокупность контента и функциональных возможностей вы могли бы предложить? Проще говоря, что смогли бы увидеть и сделать пользователи в таком случае?

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

Когда все сделано (это займет какое-то время и будет достаточно для промежуточного этапа разработки), посмотрите внимательно на результат. Он гласит: «Вы – здесь!»

В этом разделе мы расскажем о том, что можно изменить в технологическом процессе и в обычном веб-дизайне, чтобы в будущем сайт стал более удобным для пользователя. Мы поймем, как применять наш новый технологический процесс в простом проекте. Проект будет маленьким и умышленно не полным. Он просто покажет, как можно осуществить эти идеи. Попробуйте применить несколько или все техники в ваших личных проектах. Берите то, что работает для вас, и изменяйте или убирайте то, что не нужно. Я использовал все элементы в этом технологическом процессе в реальных проектах и остался доволен результатами. Надеюсь, что вы почерпнете из этих идей столько же полезного, сколько и я.

Пример: «Три маленьких прямоугольника»

Предположим, что мы работаем над сайтом, который обучает разработчиков CSS гибкой модульной верстке (или Flexbox), относительно новому модулю для разметки, которая имеет большие возможности в мультиплатформенном пространстве[120].

Смысл в том, чтобы объяснения и примеры были до смешного простыми. В силу того, что большая часть свойств CSS может объясняться текстом и несколькими прямоугольными блоками, назовем наш сайт «Три маленьких прямоугольника». Со временем мы можем расширить наши уроки и включить другие CSS-модули.

«Три маленьких прямоугольника» будут состоять из теории и синтаксиса, а также нескольких заданий, каждое из которых строится на основе предыдущего задания. Пользователь сможет написать их код в редакторе на странице, и кнопка «результат» покажет результат кода. Щелчком по клавише «Запустить» запускается введенный код. Каждое задание имеет два вида текстового контента: теорию и задание. Теория объясняет синтаксис и концепцию, а задания являются упражнениями, которые даются студентам для закрепления.