Создание современного сайта


Перевод статьи How to build a modern website in 2011, которую считаю очень полезной для прочтения и осознания для каждого, кто занимается веб-дизайном.

За прошедшие 12 месяцев я прошёл добровольный квест за знанием. Сейчас мы стоим на пороге больших изменений – почти революционных – dot web, как я начал об этом писать 1го ноября 2011. И вот почему:

Неопределённость

Мы - вебдизайнеры пытались наложить ограничения на постоянно-изменчивую и необределённую сеть на протяжении многих лет. Я говорю про фиксированную ширину, флеш и пиксели. И мы не могли от этого избавится… до сегодняшнего момента. Поворотная точка (не совсем недавняя) - это распространение разнообразных браузерных устройств, которые проложили свою дорогу в сеть. Несколько лет назад, когда мы наконец-то перестали ссорится и договорились по поводу «оптимального» (читайте как «безопасного») разрешения экрана 1280 x 940, мы начали работу над нашей сеткой 960.gs и никогда не оглядывались назад. Много разработок для сети пришло от традиционного прошлого печати, но также многое было получено в поисках людьми, не имевших никакой формальной подготовки или дизайнерского образования. Кто может винить вебдизайнера-любителя, который хочет установить некоторую стабильность, взамен получая седые волосы в результате работы и получения профессии, основа которой неопределенность, поддержка всех предыдущих и последующих браузеров и тому подобное.  Теперь наконец-то мы скинули гниющий труп IE6 с наших плеч, спасибо, в частности, нашим самым лучшим лидерам в этом соревновании: Ethan Marcotte, Andy Clarke, Paul Irish, которые проходят испытание создания лучшей сети будущего (и, я уверен, легче их собственных жизней) упорно толкая вебиндустрию вперед, не останавливаясь на месте, впервые за много лет. Я чувствую нужду в таком фашизме (в положительном смысле) на пути, в направлении которого мы строим сеть сегодня – в той же манере движение веб стандартов начало своё эфективное и нужное дело, когда ударило по «мейнстриму» в 2003.

2011

Теперь наши пользователи просматривают нашу работу на миллиарде различных устройств, с различными размерами экранов и операционных систем. Величина этого растёт настолько быстро, что закрывать глаза на результаты Google Analytics уже не вариант. Живите с этим, и учитесь любить это, потому что преимущества сети сделают её намного лучше. Почему? Потому что нам нужно начинать разработку с точным как лезвие бритвы расчётом, базируя наши решения вне эмпиричных данных, персональных предпочтений или необоснованного мнения. Более того, не нужно больше дизайнерам просто создавать «корзины, в которые будет брошен контент» (префразируя Mark Boulton). Chris Coyier недавно заявил во всеуслышание о растущей неопределённости, с которой сталкиваются вебдизайнеры и прямота его высказывания и небезсмысленное направление удивительно отрезвляющи.

Поэтому, учитывая сказанное, я собираюсь заявить о всеуслышание, как я думаю всё должно быть сделано. Обратите внимание: я не говорю ничего ошеломительно нового, но потому что сложно не потерятся среди постоянных мотаний туда-сюда и бесконечных RSS фидов, я надеюсь будет полезно собрать все основы в одном месте – и эта задачка как раз для меня!

Мобильный вначале, адаптивный вебдизайн

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

Мобильный вначале

День первый, нулевая отметка, первый шаг. «Мобильный вначале» подход к разработке действительно очень прост. Более двух лет назад (фигасе!) человек с богатой фантазией и просто отличный парень Luke Wroblewski написал эту статью предлагая, чтобы мы разрабатывали вначале мобильные версии наших сайтов (и приложений) перед «полной» десктопной версией. Эта техника заставляла вас сфокусироватся на установке приоритетов для контента, который действительно нужен, перед тем, который «неплохо бы иметь», более того с этой методологией мы разбираемся с наиболее быстрорастущей и скоро наиболее важной проблемой на нашей нулевой отметке – теперь это имеет абсолютный смысл? Также, если вы когда-либо работали над таким проектом, в котором всё делается традиционно в противоположном направлении – от десктоп версии к мобильной – вы понимаете насколько подход «мобильный вначале» делает процесс разработки легче и сфокусированней.  С точки зрения фронт-энд разработки, мобильный вначале подход тоже требует CSS правила по-умолчанию в основном файле стилей style.css и чтобы мы прогрессивно наращивали макет и дальнейшие правила для бОльших экранов используя  min-width: Медиа запросы. Это значит, что устройства, которые не поддерживают атрибуты CSS3 Медиа запросов будут обслужены мобильной версией (но подробнее об этом позже…).

Ранее в этом году Luke Wroblewski написал книгу, озаглавленную Мобильный вначале со 123 страницами, содержащими принципы разработки мобильный вначале, впереди десктоп версии.

Контент вначале

Дни Lorem ipsum окончены. Не используйте его. Никогда. Да, я осведомлён о том, что вкусы клиента, имеющего на руках полную веб-копию, готовую с самого начала проекта – это, как к примеру, Памела Андерсон часто требующая некоторого уважения к себе, поэтому мы как дизайнеры должны стать более жесткими к клиенту. Мы стали посредниками проблемы, когда начали процесс разработки без этого. Если клиент не имеет готовой копии, скажите вернутся ему, когда она будет на руках. Или, если вы знаете немного про копию и стратегию контента, как мы на Modular, тогда помогите им и заставьте завершить создание контента перед началом процесса разработки. В ином случае, если вы объясните им, что необходимо убедиться в том, что финальный продукт более сфокусирован и вы будете строить  подогнанную структуру, чтобы красиво разместить их контент, а не дешёвый пластиковую корзину, в которую грубо затолкаете его,  разбавив их послание в процессе, просто чтобы всё внутри помещалось - в общем, они сделают глупо, если ослушаются тебя, не так ли! Смешно то в методе контент-снаружи, что это то, что всегда делали дизайнеры-печатники. У вас бы не было клиента, который бы вызывал их и говорил: «Мне нужно, чтобы вы разработали макет и инфо-графики для книги (или статьи журнала), но у меня нет пока никакого текста».  Это было бы просто смешно. Прочитайте это еще раз, если хотите.

Упрощение дизайна

Видели некоторые из наиболее популярных вебсайтов в сети сегодня таких как  GMail или Mailchimp? Выглядят вполне нейтрально, я бы даже осмелился сказать «голо», не так ли! Впрочем не совсем. Наконец, объединённые рабочие сети начали обучать себя и понимать, что гонка за печатной страницей не должна быть конечной целью.  Мы начали разработку для сети как её собственнй вещи, её собственной среды. Дни флешевой глупости слава богу прошли и, как индустрия, теперь мы уделяем внимание базовым принципам графического дизайна: находим применение для этого недоиспользованного цвета #fff, используем правильные типографические правила, максимизируем белое пространство всередине макета и, что самое умное, тонко используем цвета и цветовые палитры.

Есть некоторые другие значимые причины для упрощения вебдизайна. Большие массивы объектов (таких как изображения и текстуры) в объединении с множеством цветов не передаются на малые экраны хорошо – и это часто ограничено передачей данных. Более того, исходя из фундаментальной точки дизайн должен бы обдуман как чистый способ дать форме функциональность. Я думаю средние ребята, разрабатывающие для сети, начинают понимать, что дизайн не должен быть в фокусе – это должно (спорно) оставлено искусству. Я страстно верю, что целью современного веб-дизана является чисто обеспечение нейтральной канвы к элегантно показанному контенту, позволяя пользователям взаимодействовать с ним натуральными, непринуждёнными путями и то, что он должен быть оптимизирован невзирая на то, какое устройство пользователь выберет для его просмотра. Это должно быть нашей единственной целью в дизайне. Мы пытаемся удовлетворить нашего пользователя, дайте просто то, что им нужно и если мы сделаем это действительно хорошо, то они воспримут это как подарок. Наши разработки должны быть искуссными, ранимыми, продуманными и более того: быть человечными. Мы должны дарить подарки и превышать ожидания наших пользователей. В то же время, как и со всеми широкораспространяемыми идеями – достижение этого не является простым, многие попытаются, но не многие достигнут успеха. Думайте об этом как о 4.0.

Типография

Типография – это центр абсолютно всего, что мы делаем. Хороший выбор и объединение типов и шрифтов создаёт визуальную шкалу и органическое соединение между дизайном и контентом. Типография – это гармоническая воля делять невидимые чудеса с вашим дизайном – к сожалению, это тип элемента, который, если объединён и плохо поставлен, то он полностью разрушит дизайн, но если мастерски сделан, то будет незамечен, потому что достигнута гармония и возникает «чувство правильного». Таким образом, жизненно важно, чтобы время и внимание были выделены в этом направлении. Я говорил про разработку из контент-снаружи раньше, следующий шаг – это разработка тип-снаружи используя модулярные шкалы. И далее, используя выбор типа, определите макет и форму.

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

Создавайте в соответствии с вертикальным ритмом – базовые сетки включены и их rem (избегайте каскадов и переназначения констант, но убедитесь в обеспечении  резерва пикселей) как наше вертикальное измерение и проценты на горизонтали. Мы не ищем полное выравнивание но находимся в поисках гармонии, о которой говорит Tim Brown в своей статье More Meaningful Typography. Это также полезный инструмент для добавления в ваш типографический арсенал.

Вдохновение

Уже было мудро установленно (и экспертно описано), что получение вдохновения прямо от ресурса, который вы искали для разработки, ведёт просто к тупому повторению. Мы должны искать вдохновения в местах, отличных от сети. Выйдите на улицу, читайте книги в реальном мире. Мои любимые места для вдохновения – это аэропорты, музеи, библиотеки и кофейни. Если вы будете брать своё вдохновение из CSS галерей, то всё что вы сделаете – это повторите то, что уже кто-то сделал до вас. В этом году я также подписался на печатное издание трёх разных магазинов, не ради их содержимого, но ради формы в которую они обволакивают своё содержимое, ради дизайна. Более того, я оценил по достоинству после месяцев просмотра PDF для устройств-таблеток и ePub книг, ценность обычных бумажных книг в помощи вдохновлении способом, который никогда не будут иметь альтернативные устройства с экраном. Это привело меня к подписке на Руководство, и также я горячо предвидел (физическую) публикацию Frank Chimero Форма Дизайна.

А также, прочтите это.

Техническое становление

Фреймворки

Критической точкой отправления в 2011 для современного вебпроекта – это HTML5 Boilerplate.  Я также персонально предпочитаю 320 & Up дополнение, которое делает фреймворк Boilerplate чуточку более дружественным к малоэкранным устройствам при использовании подхода «мобильный вначале» и я запустил собсвенный, который мы используем в  Modular – он содержит в себе два предыдущих и несколько других лучших практик, которые мы начали использовать исходя из опыта.

Адаптивный дизайн – резиновые сетки, гибкие изображения и медиа запросы

В этом году было написано очень много по поводу адаптивного вебдизайна, что я не собираюьс затрагивать эту тему – но, вы можете прямо перейти на сайт Modular, чтобы прочесть больше по этому делу и про преимущества для пользователя.  Просто прочтите книгу Ethan Marcotte Responsive Web Design и далее перейдите на сайт MediaQueri.es, чтобы увидеть в деле адаптивность.

В то же время, первый проект с «громким именем» - это The Boston Globe – был запущен к концу этого года. Прочитайте больше об этом здесь и здесь. В данный момент он работает как рекламный постер для HTML5 и адаптивного дизайна. Он также заслуживает упоминания  потому что это публикация, владелец которой New York Times, и можно с долей уверенности предполагать, что они тестируют эту технику с просмотром возможности перехода на адаптивный дизайн для других своих он-лайн проектов. Другие адаптивные проекты с громкими именами в данный момент находятся в разработке, это Mark Boulton DesignStuff & Nonsense и Clearleft – будут запущены в 2012.

Поддержка браузеров

Использование домашних ПК упало до 20% с 2008 и продолжает уменшатся. Более того, в 4 квартале 2010 заказы смартфонов стали большими за заказы ПК - 2 года раньше предсказаного индустриальным аналитиком Morgan Stanley! Рисунок, который я возможно слишком грубо рисую, это рисунок о том, что дни ПК проходят быстро и закончатся быстрой смертью. Мобильные устройства – это единственные потребители интернета, которые показывают рост и я даю вам гарантию, что люди будут скоро использовать ближайший экран для доступа в сеть. Более того, мобильные телефоны переплюнут десктопы как устройства для доступа в сеть к 2013 – а может даже и раньше! Эти новые разношёрстные устройства с различными типами сред и отображений несут с собой «море боли». Поэтому как мы можем разрабатывать лидирующие вебсайты, которые соответствуют нуждам быстрорастущей массы пользователей, если мы пытаемся полностью поддерживать древние (я имею в виду в вебгодах) браузеры, такие как IE 5 – 8 в то же время? Это абсолютно невожможно. Но полный отказ от поддержи версий предков Internet Explorer, вывешивание баннера «мы не поддерживаем IE6, потому что мы делаем сайты для продвинутых» приведёт к потере ваших клиентов и появления разочарованных пользователей у которых нет иного варианта (по какой бы то ни было причине) обновить их браузер. Поэтому man-up, берёмся за дело и перестаём жаловатся. Вы же не думали, что создание хороших вебсатов будет простым делом? Но вот где именно вам поможет подход «мобильный вначале»!

В 2011 мы можем вести разработку и построения сайта с подходом мобильный вначале, далее разработка с установкой на лучшие браузеры вначале – для IE со стандартной типографией и цветной мобильной разметкой со станными сперцифическими IE классами (используя Modernizr как сниффер браузера) для исправления таких вещей как длина строки и читаемости. Альтернатива - использование javascript polyfill (такого как Respond.js) для поддержки CSS3 медиа запросов. В то же время, существует вероятность столкнутся с проблемами, плюс вы получите некоторый удар по произодительности (будет особенно заметно на ранних Windows телефонах, которые не поддерживают ни CSS3 Медиа запросы, ни другие CSS3 плюшки, и других устройствах). Альтернатива - как недавно написал Andy Clarke, обслуживать IE наборами стилей с фиксированной шириной (всё еще адаптивными) для каждой точки разрыва. Мне очень нравится данный подход и кажется он наиболее реалистичным и это именно тот способ, которым я сейчас работаю.

15 декабря 2011: Jeffrey Zeldman опубликовал новость  Microsoft скоро автоматически обновит пользователей предыдущих версий IE. Магия! Мы не можем, конечно же, вечно полагаться на то, что все пользователи будут автоматически обновлятся.

В заключение

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

Когда идёт движение от правильных людей (таких как Andy Clarke и Jeremy Keith, Luke Wroblewski, Ethan Marcotte и др.) я чувствую, что мы должны чаще поощрять «фашисткий» веб-дизайн. В тот же способ движение по веб стандартам продвигает эти вещи устанавливая некоторые  S.M.A.R.T. критерии по которым следует разрабатывать, движение One Web должно стремится сделать аналогичное.