#адаптивная_вёрстка — Public Fediverse posts

5 библиотек, которые помогут улучшить UX в вашем React Native-приложении

Даже если вы разрабатываете MVP в условиях жестких сроков, не стоит забывать: результатом нашей работы будет приложение, которым будут пользоваться реальные люди. Причем первыми пользователями вполне могут оказаться инвесторы, заказчики или стейкхолдеры, которые оценивают продукт на ранней стадии. И будет здорово, если их первая реакция будет не «ну, работает», а «вау, это выглядит как полноценный продукт». Почему разработчикам вообще стоит задумываться о пользовательском опыте? Кажется, что это зона ответственности product/project-менеджеров, UX-дизайнеров и аналитиков. Но на практике у разработчиков в мобильных проектах есть довольно большая свобода влиять на UX-детали. Более того, многие мелкие улучшения интерфейса стоят буквально десятки строк кода и несколько минут времени, но при этом заметно повышают ощущение «живости» приложения. Меня зовут Алексей Цуцоев, я Frontend TeamLead в KODE. В этой статье разберу несколько библиотек, которые позволяют быстро улучшить UX React Native-приложения без значительных затрат на разработку.

https://habr.com/ru/articles/1009370/

#мобильная_разработка #адаптивная_вёрстка #интерфейсы #фронтенд #библиотеки #ux

24 «привычки» оптимизации изображений

Я работаю с графикой для web с тех бородатых времен, когда случайное нажатие кнопки wap на телефоне могло привести к инфаркту и моментальному списанию всех средств на счете. В погоне за мобильной доступностью цифровых продуктов в те времена приходилось исхитриться каждый раз и делать это по новому. Сегодня, специалисты в вэб — как спецы в геймдеве «оптимизация? не не слышал» для игр у тебя должна быть 5090, в для сайтов 5g и гигабит, 2026 ведь на носу. Я решил поделится теми «привычками» оптимизации контента/графики, которые уже 20 лет в моем арсенале и остаются актуальными и по сей день.

https://habr.com/ru/articles/969236/

#webразработка #графика #графика_для_сайта #адаптивная_вёрстка #адаптивный_вебдизайн #адаптивный_сайт #оптимизация_изображений #оптимизация #оптимизации #svg

CSS-медиазапросы без min- и max-. Как работает новый синтаксис и стоит ли переходить?

Разбираем новые возможности CSS Media Queries Level 4 — логические операторы сравнения, которые делают код более читаемым и интуитивным. От (min-width: 768px) and (max-width: 1024px) к простому (768px <= width <= 1024px) . Зачем это нужно и как с этим работать?

https://habr.com/ru/articles/929530/

#медиазапросы #media_queries #вёрстка #адаптивная_вёрстка #css #css3 #postcss #диапазоны_css

CSS-медиазапросы без min- и max-. Как работает новый синтаксис и стоит ли переходить?

Разбираем новые возможности CSS Media Queries Level 4 — логические операторы сравнения, которые делают код более читаемым и интуитивным. От (min-width: 768px) and (max-width: 1024px) к простому (768px <= width <= 1024px) . Зачем это нужно и как с этим работать?

https://habr.com/ru/articles/929530/

#медиазапросы #media_queries #вёрстка #адаптивная_вёрстка #css #css3 #postcss #диапазоны_css

CSS-медиазапросы без min- и max-. Как работает новый синтаксис и стоит ли переходить?

Разбираем новые возможности CSS Media Queries Level 4 — логические операторы сравнения, которые делают код более читаемым и интуитивным. От (min-width: 768px) and (max-width: 1024px) к простому (768px <= width <= 1024px) . Зачем это нужно и как с этим работать?

https://habr.com/ru/articles/929530/

#медиазапросы #media_queries #вёрстка #адаптивная_вёрстка #css #css3 #postcss #диапазоны_css

CSS-медиазапросы без min- и max-. Как работает новый синтаксис и стоит ли переходить?

Разбираем новые возможности CSS Media Queries Level 4 — логические операторы сравнения, которые делают код более читаемым и интуитивным. От (min-width: 768px) and (max-width: 1024px) к простому (768px <= width <= 1024px) . Зачем это нужно и как с этим работать?

https://habr.com/ru/articles/929530/

#медиазапросы #media_queries #вёрстка #адаптивная_вёрстка #css #css3 #postcss #диапазоны_css

Универсальный подход к адаптивному веб-дизайну интерфейсов Stretch, Scale, Switch (SSS)

Создание адаптивных версий интерфейса это боль многих дизайнеров и, как следствие, разработчиков. Разные экраны, хаос в макетах, непонимание между специалистами… Но есть способ сделать адаптацию проще, предсказуемее и удобнее для всех. В этой статье я предложу вам подход, который сократит количество макетов и сделает интерфейс аккуратным на любом устройстве. Готовы взглянуть на адаптацию под новым углом?

https://habr.com/ru/companies/simpleone/articles/881168/

#дизайн #адаптивный_дизайн #адаптивный_вебдизайн #адаптивная_вёрстка #адаптивность #адаптивный_сайт #адаптив #вебдизайн #ux #ui

Гибкие макеты: Решаем проблему на корню

При создании гибких макетов главный фактор, который мы должны учитывать, — это ширина корневого элемента. Мы можем получить процентное измерение ширины, с помощью такой единицы как vw . Не все знают, что можно менять размер шрифта в настройках браузера, и тем более не многие этим пользуются. Но если мы хотим обеспечить отзывчивость, мы должны учитывать и этот фактор. Во всех браузерах размер шрифта по умолчанию равен 16px; если это значение будет изменено, будет изменен и размер одного rem . Поэтому все размеры связанные с типографикой и не только лучше задавать в этих единицах. Таким образом, мы хотим, чтобы при изменении ширины страницы или размера шрифта в настройках браузера автоматически менялись и размеры элементов, отступов и шрифтов. Важно отметить, что изменение всех размеров нас интересует только в пределах минимальной и максимальной ширины макета. ▎ Проблема Например мы хотим задать размер для заголовка первого уровня. При минимальной ширине макета (320px), размер шрифта должен быть 28px. При максимальной ширине (1440px), размер шрифта должен быть 40px. Для решения этой задачи мы можем использовать специальный онлайн калькулятор: Min-Max-Value Interpolation Для наших значений мы получим такой код: clamp(1.75rem, 1.536rem + 1.07vw, 2.5rem)

https://habr.com/ru/articles/874716/

#frontend #frontendразработка #frontend_development #верстка #вебдизайн #css #адаптивность #адаптивная_вёрстка #адаптивный_дизайн #резиновая_верстка

Fullstack v2: учимся писать UI на Go

Меня зовут Илья Глухов. Последние 7 лет я пишу на Go. Я люблю этот язык, а ещё люблю задаваться странными, на первый взгляд, вопросами. Например, как разные интересные штуки, которые мы пишем на Go взаимодействуют с пользователем? В классическом бэкенде мы при помощи RPC (Remote Procedure Call), протокола HTTP или разных очередей модифицируем поведение нашей программы. А что насчёт graphic UI? Он же из фронтенда? Или нам так только кажется? Давайте создадим пользовательский интерфейс (UI) на Go. Выбор решений разнообразен: Gopherjs, gomobile, обёртки для Qt, GTK и много чего ещё. Но если мы хотим добиться кросс-платформенной совместимости для браузеров, мобильных устройств и десктопов, нам нужен универсальный UI. Давайте на практическом примере разберём как создать его на Go.

https://habr.com/ru/companies/oleg-bunin/articles/865292/

#go #ui #fullstack #мобильные_приложения #pwa #amp #кросплатформенная_разработка #адаптивная_вёрстка #gopherjs #ncurses

Стили, темы и адаптивная верстка в React Native

Из этой статьи вы узнаете, как эффективно организовать очень важную часть разработки на React Native - работу со стилями и ресурсами для создания адаптивных и доступных интерфейсов под три платформы: iOS, Android и Web. Также в целом обсудим особенности верстки и проблемы производительности в рамках данного фреймворка.

https://habr.com/ru/articles/860156/

#react_native #expo #доступность #архитектура_приложений #стили #адаптивная_вёрстка #производительность

Адаптив без боли: как сделать резиновую вёрстку с заботой обо всех разрешениях

Все верстальщики рано или поздно сталкивались с болью, которая заключается в адаптиве сайта под различные устройства. Существуют разные технологии, упрощающие подгонку размеров под определённые устройства, например, clamp() . Эта функция удобна, так как позволяет минимизировать использование брейкпоинтов, но у неё есть свои недостатки:

https://habr.com/ru/articles/819565/

#адаптивная_вёрстка #отзывчивый_вебдизайн #упрощение_подхода #верстка_сайтов #вебразработа #резиновая_верстка #rem #scss #html #css

Адаптив без боли: как сделать резиновую вёрстку с заботой обо всех разрешениях

Все верстальщики рано или поздно сталкивались с болью, которая заключается в адаптиве сайта под различные устройства. Существуют разные технологии, упрощающие подгонку размеров под определённые устройства, например, clamp() . Эта функция удобна, так как позволяет минимизировать использование брейкпоинтов, но у неё есть свои недостатки:

https://habr.com/ru/articles/819565/

#адаптивная_вёрстка #отзывчивый_вебдизайн #упрощение_подхода #верстка_сайтов #вебразработа #резиновая_верстка #rem #scss #html #css

Адаптив без боли: как сделать резиновую вёрстку с заботой обо всех разрешениях

Все верстальщики рано или поздно сталкивались с болью, которая заключается в адаптиве сайта под различные устройства. Существуют разные технологии, упрощающие подгонку размеров под определённые устройства, например, clamp() . Эта функция удобна, так как позволяет минимизировать использование брейкпоинтов, но у неё есть свои недостатки:

https://habr.com/ru/articles/819565/

#адаптивная_вёрстка #отзывчивый_вебдизайн #упрощение_подхода #верстка_сайтов #вебразработа #резиновая_верстка #rem #scss #html #css