Pull to refresh

Progressive enhancement + mobile first = responsive web design

Futubra corporate blog
futubra

5 месяцев, 26 дней и сколько-то часов прошло с момента коммита в git первых строчек кода Футубры. Столько времени у нас ушло, чтобы собрать команду, провести ряд исследований, проработать концепцию и реализовать проект, который сделает жизнь людей интереснее.

За эти полгода мы уже столкнулись (и продолжаем сталкиваться каждый день) c целым рядом задач и проблем логического, интерфейсного, технического и организационного характера. Опытом решения самых интересных из них мы и будем делиться с вами в этом блоге.

Первый пост хочется посвятить самому важному – базовым принципам, на которых строится Футубра:
  • progressive enhancement
  • mobile first
  • responsive web design

Так что же такое Футубра и как мы применяем эти принципы?
Total votes 111: ↑69 and ↓42 +27
Views 26K
Comments 155

Адаптивный веб-дизайн vs. Отзывчивый веб-дизайн, в чем разница?

Website development *
Translation
Адаптивный веб-дизайн vs. Отзывчивый веб-дизайн

С тех пор, как вышли книги «Adaptive Web Design» Аарона Густафсона и «Responsive Web Design» Итана Маркотта (русское издание называется «Отзывчивый веб-дизайн»), в сообществе веб-дизайнеров и разработчиков ведутся споры о том, чем отличаются эти 2 подхода. Одни считают, что эти 2 понятия являются синонимами, а другие, что это совершенно разные понятия. Но, как известно, истина всегда где-то посередине, поэтому предлагаю вашему вниманию перевод статьи финского веб-дизайнера и разработчика Вильями Салминена (Viljami Salminen) «Adaptive vs. Responsive, what’s the difference?»:

Кажется, есть некоторая путаница относительно этих терминов и того, что они означают, так вот здесь мои мысли на данную тему и несколько ссылок, чтобы подкрепить их. Я, как правило, не очень пылкий, когда дело доходит до обсуждения чего-либо, но на этот раз я хотел бы внести в этот вопрос ясность, т.к. слышу его очень часто.
Читать дальше →
Total votes 43: ↑34 and ↓9 +25
Views 82K
Comments 24

Progressive Enhancement или всё-таки Graceful Degradation

Website development *Designing and refactoring *
SerenityНельзя просто так взять и рассказать про progressive enhancement, не упомянув о graceful degradation. В чем же разница между этими понятиями? Как уже говорилось в более ранней статье, graceful degradation можно перевести, как отказоустойчивость. Это очень широкое понятие, но в контексте веба его можно понимать как отказоустойчивость клиентских веб-интерфейсов, серверной части сайтов и так далее. В этой статье graceful degradation будет пониматься как отказоустойчивость клиентских веб-интерфейсов.

Graceful degradation может выражаться в возможности работы при отключенном JavaScript, в достаточно аккуратном отображении интерфейса в браузере, не поддерживающем новые свойства CSS3, в адекватном отображении сайта при отключенных изображениях. В каждом из этих случаев работа пользователя с интерфейсом будет в принципе возможна, хотя и не так удобна.
Читать дальше →
Total votes 39: ↑38 and ↓1 +37
Views 89K
Comments 49

Так ли дорого прогрессивное улучшение?

Website development *Designing and refactoring *

В предыдущей статье рассматривалась теория и практика прогрессивного улучшения (progressive enhancement). В этой статье мы от идеологии перейдем к аксиологии и рассмотрим финансово-экономическую обоснованность применения прогрессивного улучшения.

В некоторых комментариях к предыдущей статье выражалось мнение, что использовать прогрессивное улучшение в реальной разработке не стоит. Причины сводились к излишней дороговизне: «На то, чтобы создать сайт в соответствии с этим подходом, нужно потратить слишком много времени, а это слишком дорого и не нужно ни заказчику (за такие деньги), ни исполнителю».
Читать дальше →
Total votes 30: ↑27 and ↓3 +24
Views 15K
Comments 18

Эволюция проектирования с приходом адаптивного дизайна

AGIMA corporate blog Interfaces *
Хабр, привет!

Прошло около двух лет с момента запуска первого адаптивного сайта нашей компанией, примерно столько же этому вопросу в России вообще. С этого момента мне, как проектировщику, уже удалось пройтись по многим граблям, поэтому в первом своем посте хотел бы поделиться мыслями, что поменялось у нас в процессах проектирования сайтов вместе с приходом адаптива.
Читать дальше →
Total votes 51: ↑47 and ↓4 +43
Views 31K
Comments 13

Как использовать прогрессивное улучшение для вёрстки писем

Pechkin.com corporate blog CSS *HTML *Email layout *
Translation


При верстке email-рассылок важно сделать разметку пригодной для парсинга и добиться того, чтобы «рюшечки» не мешали чтению контента. А главным контентом в письме почти всегда является текст.

Сегодня мы поговорим о том, как использовать технику прогрессивного улучшения при разработке HTML-шаблонов писем.
Читать дальше →
Total votes 12: ↑10 and ↓2 +8
Views 12K
Comments 8

Разработка изоморфного RealWorld приложения с SSR и Progressive Enhancement. Часть 1 — Введение и выбор стека

Website development *JavaScript *Client optimization *HTML *Node.JS *
Tutorial
Весной 2017 года Eric Simons, со-основатель учебного проекта Thinkster, анонсировал проект «RealWorld»демо приложение и спецификация к нему. Проект объявил своей целью выйти за рамки привычных «todo»-демок для более прикладного сравнения и изучения возможностей различных фреймворков и технологий, а также подходов к разработке и способов решения задач.

image
Читать дальше →
Total votes 10: ↑10 and ↓0 +10
Views 9.6K
Comments 5

Разработка изоморфного RealWorld приложения с SSR и Progressive Enhancement. Часть 2 — Hello World

Website development *JavaScript *Client optimization *HTML *Node.JS *
Tutorial
В предыдущей части туториала мы узнали что такое проект RealWorld, определились целями туториала, выбрали стек технологий и написали простой веб-сервер на Express в качестве основы для изоморфного фронтенда.

В этой части, мы допилим серверную часть и напишем изоморфный «Hello World» на Ractive, а также соберем все это с помощью Webpack.


Читать дальше →
Total votes 10: ↑10 and ↓0 +10
Views 5.6K
Comments 7

Разработка изоморфного RealWorld приложения с SSR и Progressive Enhancement. Часть 3 — Routing & Fetching

Website development *JavaScript *Client optimization *HTML *Node.JS *
Tutorial
В предыдущей части туториала мы научили наше изоморфное приложение проксировать запросы к backend api, с помощью сессии передавать начальный стейт между синхронными запросами и осуществлять Server-side rendering с возможностью переиспользования разметки на клиенте (hydrate). В этой части мы решим еще две ключевые проблемы изоморфных веб-приложений: изоморфный роутинг и навигация, и повторный фетчинг и начальное состояние данных. И сделаем это буквально 5-ю строками кода. Погнали!

image
Читать дальше →
Total votes 5: ↑5 and ↓0 +5
Views 4.6K
Comments 0

Разработка изоморфного RealWorld приложения с SSR и Progressive Enhancement. Часть 4 — Компоненты и композиция

Website development *JavaScript *Client optimization *HTML *Node.JS *
Tutorial
В предыдущей части туториала мы решили проблемы изоморфного роутинга, навигации, фетчинга и начального состояния данных. В итоге, получилась довольно простая и лаконичная основа для изоморфного приложения, которую я также выделил в отдельный репозиторий — ractive-isomorphic-starterkit. В этой части мы начнем писать приложение RealWorld, но сначала осуществим декомпозицию. Погнали!
image
Читать дальше →
Total votes 14: ↑13 and ↓1 +12
Views 3.1K
Comments 2

Делаем HTTP-запросы, изящно деградируем (и ни единого разрыва)

TINKOFF corporate blog JavaScript *HTML *Accessibility *
image

Сегодня мало кто помнит, что веб-приложения могут работать без единого XHR-запроса. AJAX (Asynchronous Javascript and XML) дает классную возможность — подгружать данные без перезагрузки страницы. Эта концепция лежит в основе большинства современных SPA.

Но ничто не дается просто так, за все нужно платить. Концепция AJAX кажется предельно простой, но даже на уровне запроса данных с сервера можно встретить кучу проблем.
Читать дальше →
Total votes 32: ↑30 and ↓2 +28
Views 18K
Comments 7

CSS Houdini: практическое руководство

Website development *CSS *JavaScript *Programming *HTML *
Translation
Доброго времени суток, друзья!

Что такое Houdini?


Houdini (Гудини) — коллекция API браузера, значительно улучшающих процесс веб разработки, включая разработку стандартов CSS. Разработчики смогут расширять CSS, используя JavaScript, влияя на рендеринг CSS и указывая браузеру, как следует применять стили. Это обеспечит значительное повышение производительности и стабильности, нежели использование полифилов.

Гудини состоит из двух групп API — высокоуровневые API и API низкого уровня.

API высокого уровня связаны с процессом рендеринга (стиль — макет — рисование — композиция). Эта группа включает:

  • Paint API — позволяет расширять CSS на шаге (имеется ввиду стадия рендеринга) отрисовки визуальных элементов (цвет, фон, границы и т.д.).
  • Layout API — позволяет расширять CSS на шаге определения размеров, позиции и выравнивания элементов.
  • Animation API — «точка расширения» на шаге отображения и анимирования элементов.

Низкоуровневые API являются основой для высокоуровневых и включают в себя:

  • API типизированной объектной модели (Typed Object Model)
  • API пользовательских свойств и значений (Custom Properties & Values)
  • API метрик шрифта (Font Metrics)
  • Ворклеты (Worklets)
Читать дальше →
Total votes 10: ↑8 and ↓2 +6
Views 16K
Comments 5

Petite-vue

Open source *JavaScript *VueJS *
Sandbox

Привет, эта статья - "перевод документации и часто используемых примеров" для petite-vue + ещё немного приколов и одна интересная практика (с которой не всё так очевидно, как могло бы казаться).

Зачем нужен petite-vue?

Petite-vue это 6-ти килобайтное подмножество Vue, основной задачей которого, по словам Эвана, является Progressive Enchancement.

Выучить очередной фреймворк
Total votes 11: ↑10 and ↓1 +9
Views 6.4K
Comments 7

Прогрессивный Petite-vue

JavaScript *ReactJS *VueJS *

Привет 👋, это статья про progressive enchancement с помощью petite-vue. Тут я расскажу про его прикольные фичи (как отдельного инструмента, так и в составе Vue).

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

В общем (и целом), всё круто 👍

Прогрессировать
Total votes 3: ↑2 and ↓1 +1
Views 4.3K
Comments 2