Устойчивый веб-дизайн

Теперь, когда новости были размечены с помощью соответствующих элементов HTML – статей, заголовков, абзацев, списков и изображений – пришло время для третьего шага: улучшить!

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

Нет никакой гарантии, что каждый браузер сможет выполнить все правила CSS, которые вы ему подкинете. Это нормально. Эти браузеры будут игнорировать то, что они не понимают. Важно, что новости по-прежнему доступны для всех, независимо от возможностей CSS в их браузере.

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

Благодаря постоянно развивающейся природе CSS, существует множество способов применения макета. Как сказал Энди Таненбаум:

«Самое приятное в стандартах то, что у вас есть из чего выбрать..»

Общение

Применить трехэтапный процесс к новостному сайту относительно просто. Просмотр новостей – это довольно пассивное действие. Чтобы действительно проверить этот процесс, нам нужно применить его к чему-то более интерактивному.

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

Вот лишь некоторые из социальных сетей, которые появились в Интернете.

Отображать сообщения в веб-браузере несложно. На сервере может быть много сложностей, связанных с базами данных, синхронизацией, очередями и балансировкой нагрузки, но HTML, необходимый для структурирования списка в обратном хронологическом порядке, не сильно отличается от HTML, необходимого для новостного сайта.

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

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

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

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

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

Мы можем перехватить отправку формы и отправить данные на сервер с помощью Ajax – мне нравится использовать слово Hijax для описания такого перехвата Ajax. Если есть ответ от сервера, мы также можем обновить часть текущей страницы вместо обновления всей страницы. Также было бы неплохо представить подходящую анимацию.

Мы можем пойти дальше. Браузеры, поддерживающие WebSockets, могут получать сообщения с сервера. Люди, использующие эти браузеры, могли получать обновления, как только они были отправлены. Можно даже использовать одноранговые соединения между браузерами, чтобы люди могли общаться напрямую.

Не каждый браузер поддерживает эту расширенную функциональность. Это не страшно. Основная функциональность – отправка и получение сообщений – по-прежнему доступна всем.

Творение

Что, если бы наша социальная сеть была более специализированной? Давайте сделаем сервис для обмена фотографиями. Это немного поднимает планку. Вместо отправки и получения сообщений основной функцией теперь является отправка и получение изображений.

Сайты обмена фотографиями.

Интерфейс должен показывать обратный хронологический список изображений. HTML справится с этой задачей. И снова нам нужна форма для отправки данных на сервер, но на этот раз это должна быть загрузка файла, а не текстовое поле.

С этими изменениями основная функциональность создана. Настало время для усовершенствования.