Современный сайт

Денис Левченко

Руководитель

Современный сайт

В среде веб-разработчиков часто говорят о том, что такое современный сайт. Программисты жонглируют модными хипстерскими технологиями, продакт-менеджеры заявляют о юзабилити и прочих UI/UX.

Мы считаем, что современный сайт — это субъективное понятие (примерно как женщина). И вот что это значит для нас:

  • Сайт свёрстан на HTML5 и CSS3. В HTML5 проще создавать и управлять мультимедийными и графическими объектами, проще и лучше семантическая вёрстка. Кроме того, HTML5 — это шаг в сторону в унификации и единства кода. Вот пример HTML5 в действии. Так, CSS3 умеет делать анимацию без JS и хорошо обрабатывает визуальные эффекты: градиенты, сглаживания и тени. Вот, CSS3 в бою.
  • Вся графика ретинизирована: от логотипа до изображений в блоге. Тем более, что это несложно сделать — достаточно сохранить файл в разрешении 144 пикселя на дюйм (и приписать префикс @2x для логотипов). Мы ретинизируем все новые сайты — например, «Генерент»
  • Сайт нарисован и свёрстан исходя из принципа Mobile First. Сначала мы делаем мобильную версию, потом, на её основе — десктопную. Проект без адаптивного дизайна вообще не выпускается. Потяните, например, сайт The Great Discontent: он легко подстраивает свои <blackquote> и <aside> блоки под любую мобильную вёрстку. Разумеется, сайт «Дело в сайте» — респонсив.
  • Чем больше векторной графики, тем лучше. Иконки на сайте — через веб-шрифты или прямо в .svg. Это помогает не париться с ретинизацией иконок (не забываем про поддержку старых браузеров). Пример — «Ройал Спирит»
  • Дизайн минималистичен, без украшательства и сквеоморфизма. Например, такой. Заодно посмотрите, как Teenage Engineering представляют каждый свой продукт: большой статьей с идеальными иллюстрациями.
  • У сайта есть полезное действие и оно очевидно: скачать, купить, посмотреть информацию, прочитать. Например, сайт хипстерского журнала Kinfolk. Он сразу предлагает купить журнал: сначала в попапе, а потом на первом экране сайта.
  • Сайт не стесняется использовать возможности современных браузерных движков.
  • На странице нет чёрной магии — моментов, когда сайт ведёт себя нелогично или решает что-то за пользователя. Зато есть белая магия — вау-моменты.
  • Вёрстка не страдает div-измом. Разумно используются теги canvas и video.

В своих новых проектах мы стараемся придерживаться этих же принципов.

Комментарии

Тут без вас никак. Поделитесь с нами вашими мыслями

Горячие вакансии