Как стать автором
Обновить

Progressive enhancement + mobile first = responsive web design

Блог компании Futubra
futubra

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

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

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

Так что же такое Футубра и как мы применяем эти принципы?
Всего голосов 111: ↑69 и ↓42 +27
Просмотры 26K
Комментарии 155

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

Разработка веб-сайтов *
Перевод
Адаптивный веб-дизайн vs. Отзывчивый веб-дизайн

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

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

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

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

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

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

Разработка веб-сайтов *Проектирование и рефакторинг *

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

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

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

Блог компании AGIMA Интерфейсы *
Хабр, привет!

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

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

Блог компании Pechkin.com CSS *HTML *Верстка писем *
Перевод


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

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

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

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

image
Читать дальше →
Всего голосов 10: ↑10 и ↓0 +10
Просмотры 9.4K
Комментарии 5

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

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

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


Читать дальше →
Всего голосов 10: ↑10 и ↓0 +10
Просмотры 5.5K
Комментарии 7

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

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

image
Читать дальше →
Всего голосов 5: ↑5 и ↓0 +5
Просмотры 4.5K
Комментарии 0

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

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

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

Блог компании TINKOFF JavaScript *HTML *Accessibility *
image

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

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

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

Разработка веб-сайтов *CSS *JavaScript *Программирование *HTML *
Перевод
Доброго времени суток, друзья!

Что такое 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)
Читать дальше →
Всего голосов 10: ↑8 и ↓2 +6
Просмотры 15K
Комментарии 5

Petite-vue

Open source *JavaScript *VueJS *
Из песочницы

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

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

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

Выучить очередной фреймворк
Всего голосов 11: ↑10 и ↓1 +9
Просмотры 5.4K
Комментарии 7

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

JavaScript *ReactJS *VueJS *

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

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

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

Прогрессировать
Всего голосов 3: ↑2 и ↓1 +1
Просмотры 3.9K
Комментарии 2