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

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

Когда мы погружаемся в решение проблемы, то не нужно тут же думать “нужно всё здесь переделать”, вместо этого нужно взглянуть на проблемы и далее подумать как их можно решить. Развитие дизайна - это гораздо мощный инструмент, чем переделывание или полный редизайн, которые показывают фундаментальные пробелы как в архитектуре сайта, так и в планировании.

Если вы уже решились на переделку сайта, то вот несколько правил от Джонни Холмана, который объявил о переделке сайта и сделал для себя набор правил (“в этот раз я сделаю всё правильно”). Даю их в переводе ниже, кто хочет, може посмотреть оригинал.

Думаю эти правила будут очень полезны, так как о некоторых пунктах я узнал совсем недавно.

Правила

Выполняйте все эти правила, когда производите какие-либо изменения в дизайне.

Верстка

  • Использовать Mobile first
  • Без сайдбаров

Поведение

  • Без эффектов “навести-чтобы-открыть”

Объекты

  • Все изображения должны быть ретина-готовыми
  • Все изображения должны включать оригинальные файлы-источники
  • Что может быть в SVG, должно быть в SVG
  • Думайте долго и тщательно перед каждым добавлением любого JS

CSS

  • Никаких упоминаний пикселов вне границ. Только ems или проценты
  • CSS селекторы не должны быть связанны с HTML структурой
  • Никаких ветвлений глубже 2го уровня
  • Все цвета должны быть переменными
  • Держать макет отдельно от стиля
  • Никаких important
  • Никаких ID селекторов
  • Использовать отрицательные margin только как последнее средство
  • Все загружаемые шрифты должны начинаться с правильно определённых отступлений (fallbacks)

Обновления

  • Должны быть нетрудными
  • Их возможно проводить из любого места

Удалить

  • сайдбар
  • комментарии
  • кнопки твитта

Вдохновение брать из сайтов

Типы контента

инфо

  • текст со списками
  • фото с текстом

пост блога

  • эссе с фото
  • объявление с лого или фото
  • урок с кодом
  • урок со скриншотами

проект

  • лого, описание, ссылки
  • лого, описание, скриншоты

список

  • нумерованные текстовые списки
  • списки с точкой
  • списки с миниизображением

Фичи (можно обойтись без них или добавить свои)

  • цветовая схема для контент-переменных