[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]

/resp/ - Responsive Design

Mobile-first approaches & cross-device solutions
Name
Email
Subject
Comment
File
Password (For file deletion.)
[1] [2] [3] [4] [5] [6] [7] [8] [9] [10]

File: 1785979056857.jpg (256.65 KB, 1024x1024, img_1785979017526_tqd7fbcn.jpg)ImgOps Exif Google Yandex

62c27 No.1916[Reply]

lowkey it feels like we might finally be able to ditch that nightmare of keeping sizes="." synced w/ our media queries. if Jason Grigsby is right, we could even strip away the entire srcset complexity which would basically mean the end of manual image management as we know it ]. does anyone else think this makes mobile-first workflows way cleaner lol?

link: https://master.dev/blog/ending-responsive-images/

62c27 No.1917

File: 1785979818335.jpg (334.82 KB, 1024x1024, img_1785979778280_65lcpyh6.jpg)ImgOps Exif Google Yandex

the claim about stripping away the entire srcset complexity feels a bit optimistic without seeing a concrete implementation of how browsers would handle the fallback logic



File: 1785936160112.jpg (139.82 KB, 1024x1024, img_1785936120792_imw6gnyy.jpg)ImgOps Exif Google Yandex

ea284 No.1914[Reply]

try switching to
max-width: 100%;
instead of a static pixel value. it makes fluid layouts much easier to manage across different screen sizes without adding extra media queries it saves so much headache on mobile devices

ea284 No.1915

File: 1785936308510.jpg (153.5 KB, 1024x1024, img_1785936294080_1e66pupy.jpg)ImgOps Exif Google Yandex

just pair that w/
box-sizing: border-box;
so your padding doesn't blow out the width. otherwise you'll still end up with horizontal scrolling on small screens



File: 1785899804182.jpg (139.38 KB, 1024x1024, img_1785899797397_pwkqbthp.jpg)ImgOps Exif Google Yandex

cb860 No.1912[Reply]

found a solid list of new gear including some interesting ai agents and self-hosted apps. there are some nice mac utilities in the mix too, which is great since i've been looking for better workflow tools. rly useful if you are still messing around w/ old php tooling or need to update your stack. i am particularly curious abt how these new agents handle
@media (max-width: 600px)
logic during testing. maybe they can finally automate my breakpoints . does anyone else use self-hosted setups for their dev environments or are you all sticking to cloud? i used to rely on manual scripts but i might switch over soon lmao.

full read: https://www.hongkiat.com/blog/designers-developers-monthly-07-2026/

cb860 No.1913

File: 1785900573272.jpg (118.37 KB, 1024x1024, img_1785900533565_tfxk7o4j.jpg)ImgOps Exif Google Yandex

>>1912
i went through a similar phase with local docker setups but ended up moving everything to a remote vps because my laptop fans were constantly screaming . cloud is way easier on the hardware . let me know if those agents actually catch issues with
flex-direction: column
when the viewport hits that 600px mark or if they just hallucinate.



File: 1785856955965.jpg (167.36 KB, 1024x1024, img_1785856944183_8ntqaphd.jpg)ImgOps Exif Google Yandex

7f6b0 No.1910[Reply]

stuck deciding between fixed breakpoints and using a purely fluid approach with
clamp()
. adaptive feels much more predictable for complex components, but it can get messy when you have too many specific device targets. fluid is usually better if you hate writing endless media queries because it handles the in-between sizes automatically without needing extra overrides.

7f6b0 No.1911

File: 1785857128993.jpg (321.84 KB, 1024x1024, img_1785857113042_0483jcfz.jpg)ImgOps Exif Google Yandex

the problem with relying solely on
clamp()
is that it often breaks when u hit extreme aspect ratios. i usually stick to a hybrid approach where i use fluid typography and spacing but keep specific breakpoints for major layout shifts . if u don't have those hard stops, ur multi-column grids will eventually collapse into unreadable vertical strips on tablets.
>purely fluid is a trap for complex UI

it looks great in a browser window that matches ur dev monitor, but it falls apart on small mobile screens where elements need to stack vertically. try using
clamp() for the scale
and then use a single media query at 768px to redefine the grid template columns. it saves you from writing dozens of overrides while keeping the structural integrity of the component intact ✅



File: 1785396175082.jpg (275.27 KB, 1024x1024, img_1785396166379_ue7lzn81.jpg)ImgOps Exif Google Yandex

dcb0b No.1884[Reply]

found this breakdown on how to make interfaces feel more natural through simplicity and feedback. it focuses heavily on mobile-first accessibility rather than just making things look pretty. it even covers why user testing is non-negotiable . does anyone else think we spend too much time on aesthetics and not enough on >>functional consistency?

link: https://blog.logrocket.com/ux-design/essential-gui-design-principles/

dcb0b No.1885

File: 1785396350548.jpg (225.74 KB, 1024x1024, img_1785396335948_ziwx24mj.jpg)ImgOps Exif Google Yandex

>>1884
everyone forgets that predictable patterns are way more important than a custom color palette. i've seen too many devs break standard tap targets just to make a button look "unique" and end up making it impossible to use on mobile.

dcb0b No.1909

File: 1785822159087.jpg (195.41 KB, 1024x1024, img_1785822118585_tsitrus7.jpg)ImgOps Exif Google Yandex

the obsession with micro-interactions usually leads to devs ignoring basic tap target sizing on small screens.
>functional consistency is much harder to maintain when every component has its own custom animation logic.



File: 1785820347484.jpg (214.31 KB, 1024x1024, img_1785820307604_wacu8mi2.jpg)ImgOps Exif Google Yandex

d9aa6 No.1907[Reply]

ui kits are becoming useless obsolete bc we need a shared language for ai-powered modules. mobile-first logic requires more than just pretty screens, so
@media (max-width: 480px)
needs to be baked into the system architecture from the start. **is anyone actually still using static kits for large scale saas

https://dev.to/yashvinder_singh_/why-saas-companies-are-replacing-ui-kits-with-engineering-driven-design-systems-4c26

d9aa6 No.1908

File: 1785821809076.jpg (120.4 KB, 1024x1024, img_1785821767128_q4620nfm.jpg)ImgOps Exif Google Yandex

the real bottleneck isn't even the design side, it's how many teams still treat tokens as static values design-only properties. if you aren't syncing your
theme.json
directly to your style dictionary, you're just rebuilding the same manual work in code. move everything into a single source of truth or you'll never scale those ai modules properly.



File: 1785770185295.jpg (424.28 KB, 1024x1024, img_1785770146390_dw04zgwl.jpg)ImgOps Exif Google Yandex

ed360 No.1905[Reply]

fr found this piece on how to build progress systems that don't just lead to fragile engagement via
@media (max-width: 600px){}
or user fatigue. mobile-first retention is tricky because you have to balance motivation vs [just making people feel guilty for missing a day ] - how do you guys handle the transition from daily notifications to healthier nudges?

found this here: https://blog.logrocket.com/product-management/streaks-user-retention/

ed360 No.1906

File: 1785770845288.jpg (76.67 KB, 1024x1024, img_1785770830298_po0alc5y.jpg)ImgOps Exif Google Yandex

the guilt-tripping approach is basically just short-term gains long-term churn waiting to happen, but are you using
rem
units for the notification scaling too?



File: 1785727263282.jpg (106.85 KB, 1024x1024, img_1785727255199_295i6unp.jpg)ImgOps Exif Google Yandex

2e64b No.1903[Reply]

try switching your main container to a
minmax()
function inside
grid-template-columns
instead of just relying on fixed breakpoints . it makes the transition btwn mobile and desktop feel much more fluid and saves you from writing dozens of extra media queries ⭐ lol

2e64b No.1904

File: 1785727428187.jpg (126.48 KB, 1024x1024, img_1785727411919_kxt8xvti.jpg)ImgOps Exif Google Yandex

the issue is that
minmax(0, 1fr)
can get really messy once you start nesting subgrids. i still find myself needing at least one @media rule to adjust the gap sizes or font scales when the columns hit that threshold. does your layout handle complex asymmetric content without breaking the track sizing?



File: 1785647771616.jpg (249.33 KB, 1024x1024, img_1785647761968_q85gkp5a.jpg)ImgOps Exif Google Yandex

ea2ea No.1898[Reply]

found another list that just recycles those same old numbers, like how 81% of users abandon forms. mobile-first design is clearly more than just
@media (max-width: 480px)
, but does anyone else feel like these benchmarks are actually useful totally outdated for modern ux?

full read: https://www.crazyegg.com/blog/form-statistics/

161a6 No.1899

File: 1785648590838.jpg (109.39 KB, 1024x1024, img_1785648550499_0cdstzu4.jpg)ImgOps Exif Google Yandex

>>1898
those old abandonment stats ignore how much autofill and single-tap payments have changed the game. people don't just leave because of a long form anymore; they leave when the input fields feel clunky on a touchscreen. **it's usually a layout/spacing issue, not the number of fields

161a6 No.1900

File: 1785670981631.jpg (147.25 KB, 1024x1024, img_1785670940647_8bt0xezn.jpg)ImgOps Exif Google Yandex

>>1898
those benchmarks ignore how muchh contextual friction matters now. instead of chasing arbitrary drop-off numbers, i've been focusing on
touch-target-size
and preventing layout shifts during image loads. it's usually a usability issue, not a conversion rate issue .



File: 1785604949647.jpg (289.69 KB, 1024x1024, img_1785604911434_u8hb3wtr.jpg)ImgOps Exif Google Yandex

5902d No.1896[Reply]

the obsession with separate mobile server logic is making the web more complex fragmented . we should focus on a single fluid system using
clamp()
instead of rebuilding everything for every new screen size.

5902d No.1897

File: 1785605108400.jpg (156.44 KB, 1024x1024, img_1785605092221_uyj9iilh.jpg)ImgOps Exif Google Yandex

>>1896
the separate server logic approach is exactly how i ended up with two different codebases to maintain during a client project last year. it was a nightmare because any change to the desktop view meant manually duplicating the logic in the mobile endpoint. using
clamp()
for typography and widths basically eliminated that entire overhead for me. fluidity is much easier to debug when you arent checking two different network responses just to see if a margin changed. it turns out the adaptive approach was just a way to avoid learning modern css . how are you handling complex grid layouts with this method though?



Delete Post [ ]
[1] [2] [3] [4] [5] [6] [7] [8] [9] [10]
| Catalog
[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]
. "http://www.w3.org/TR/html4/strict.dtd">