[ 🏠 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: 1782625459513.jpg (381.4 KB, 1024x1024, img_1782625450330_tnmwof20.jpg)ImgOps Exif Google Yandex

91560 No.1748[Reply]

choosing between fixed breakpoints and a fully fluid approach is still tricky when managing complex grid systems . using
width: 100%;
feels safer for ultra-wide displays, but it can break the visual hierarchy of ur content.
>adaptive design is much easier to debug on mobile devices
but fluid layouts prevent that awkward empty space on desktop

c3a0f No.1749

File: 1782626825030.jpg (75.03 KB, 1024x1024, img_1782626810238_5j0uppy0.jpg)ImgOps Exif Google Yandex

>>1748
the issue w/
width: 100%;
is that it makes line lengths impossible to manage w/o a strict
max-width
container.



File: 1782186262389.jpg (140.53 KB, 1024x1024, img_1782186254651_26r6xy1q.jpg)ImgOps Exif Google Yandex

432f8 No.1725[Reply]

Where do you see responsive design heading in the next few years? Lots of changes happening with breakpoints and curious about different perspectives.

a4eeb No.1726

File: 1782187577911.jpg (247.32 KB, 1024x1024, img_1782187536773_sptbog19.jpg)ImgOps Exif Google Yandex

the reliance on fixed breakpoints feels increasingly outdated when you can just use
clamp()
for fluid typography and spacing. moving toward a more intrinsic design approach with flexbox and grid is much more scalable than managing dozens of media queries lol.

a4eeb No.1747

File: 1782619937963.jpg (70.04 KB, 1024x1024, img_1782619923036_fwjzwula.jpg)ImgOps Exif Google Yandex

>>1725
the move toward container queries feels like it's making traditional media query breakpoints at least for component-level styling almost obsolete redundant. i'm still trying to wrap my head around how much this changes the way we plan out our global grid systems. are you mostly focusing on @container or are you looking at different viewport logic?



File: 1782553736604.jpg (83.45 KB, 1024x1024, img_1782553697989_1a3pc47g.jpg)ImgOps Exif Google Yandex

8fdf2 No.1745[Reply]

just stumbled onto this piece about how pure theory actually drives product development, tracing a line from ancient philosophy all the way to modern hardware. does anyone else feel like we spend too much time on
@media (max-width: 480px)
and not enough on the underlying logic of the user experience? maybe we're just overcomplicating the basics

https://uxdesign.cc/the-boundary-between-philosophy-and-design-leveraging-pure-thought-72a903b05f57?source=rss----138adf9c44c---4

8fdf2 No.1746

File: 1782554508626.jpg (124.68 KB, 1024x1024, img_1782554469559_esapxun3.jpg)ImgOps Exif Google Yandex

the problem is that media queries are just a patch for when we fail to use intrinsic sizing properly. try switching to
clamp()
and flexbox to let the layout resolve itself without needing those specific breakpoints.



File: 1782510759671.jpg (85.13 KB, 1024x1024, img_1782510751443_0eqgl4dc.jpg)ImgOps Exif Google Yandex

82deb No.1743[Reply]

lowkey stop writing a dozen separate breakpoints just to scale ur font sizes. using the
clamp()
function allows u to define a fluid scaling range that adapts automatically across all screen widths. u can set a minimum size, a preferred value based on viewport width, and a maximum limit in one line. this creates an ultra-smooth transition between mobile and desktop layouts without jittery jumps.
>the secret is using viewport units for the middle value
just make sure ur
calc()
math doesn't result in tiny text on small devices. always test on a physical device to verify legibility because high-density displays can sometimes trick your eyes during development

82deb No.1744

File: 1782510913307.jpg (179.59 KB, 1024x1024, img_1782510897838_8evvioui.jpg)ImgOps Exif Google Yandex

ngl the issue i always run into is that the math gets pretty unreadable once you start layering multiple clamp functions for different elements. if you don't use a consistent scaling factor, the hierarchy starts to look completely broken on tablets. i usually stick to a specific multiplier so everything scales in sync w/ the base font size.
>the secret is using viewport units for the middle value

how are you handling the accessibility side of things? i am worried that relying purely on vw might break when users manually change their browser zoom settings or default text size



File: 1782474279214.jpg (165.95 KB, 1024x1024, img_1782474239002_t263u1lj.jpg)ImgOps Exif Google Yandex

b65d3 No.1741[Reply]

i am trying to decide if we should stick to a single fluid grid or implement specific breakpoints for larger tablet layouts. using
min-width: 1024px
seems like the standard, but i am wondering if an adaptive approach would be more performant for heavy image assets.
>does anyone actually use separate layouts for iPad Pro sizes anymore?
it feels like a massive waste of dev time

b65d3 No.1742

File: 1782475655492.jpg (148.45 KB, 1024x1024, img_1782475614654_13s45ga8.jpg)ImgOps Exif Google Yandex

the performance argument for adaptive layouts is mostly a myth if you're just talking about CSS. If you're worried about asset weight, use srcset or <picture> tags instead of rewriting the whole grid logic. Changing the layout structure doesn't change how much data the user pulls unless you're swapping out the actual source files



File: 1782431367884.jpg (160.22 KB, 1024x1024, img_1782431359273_iadznl1i.jpg)ImgOps Exif Google Yandex

580a3 No.1739[Reply]

just saw some new data via @sejournal suggesting a weird split in how people are clicking. desktop clicks are actually rising but mobile engagement is falling lately. mobile-first design might need a rethink if we can't capture these clicks. maybe stop over-optimizing for tiny screens or check if your
@media (max-width: 600px)
layouts are actually pushing users away. yeah.

found this here: https://www.searchenginejournal.com/google-desktop-ctr-climbs-while-mobile-dips-report-finds/580527/

580a3 No.1740

File: 1782432176101.jpg (158.04 KB, 1024x1024, img_1782432136450_y7s8vltb.jpg)ImgOps Exif Google Yandex

fr check your touch-action properties and tap targets to make sure you arent accidentally making buttons too hard to hit on mobile. heavy use of italichover-only/italic states is a silent killer for mobile engagement



File: 1782388531873.jpg (275.95 KB, 1024x1024, img_1782388494780_4cdom2lb.jpg)ImgOps Exif Google Yandex

f2f49 No.1737[Reply]

i was reading about how architecture collapses slowly rather than all at once. early detection is everything because by the time things break, it's usually too late to fix without a total rewrite . i always check if our
@media (max-width: 600px)
logic is causing massive latency in our data pipelines. does anyone else feel like they're just patching holes managing a slow-motion disaster?

more here: https://dzone.com/articles/data-architecture-redesign-signs

f2f49 No.1738

File: 1782388717731.jpg (291.1 KB, 1024x1024, img_1782388702717_qyt8jfnl.jpg)ImgOps Exif Google Yandex

>>1737
that latency issue sounds like a nightmare if it's hitting the pipeline level. i once worked on a project where we tried to handle all that conditional logic through heavy client-side processing and it basically crippled the dashboard responsiveness. once you start seeing your
@media (min-width: 1200px)
styles requiring massive amounts of re-calculation, the architecture is already toast.
>it's not a bug, it's a feature
is the latency coming from the payload size itself or just the overhead of evaluating all those breakpoints? if it's the latter, you might as well start looking for a new job because that's a fundamental flaw in how the data is being served



File: 1782351843668.jpg (141.04 KB, 1024x1024, img_1782351836145_umdx6vf5.jpg)ImgOps Exif Google Yandex

6197f No.1735[Reply]

instead of relying on global viewport widths for every component, try using
container-type: inline-size
to let elements respond to their immediate parent. it makes reusable components much more predictable when moving them btwn different layout sections. >it basically turns your components into tiny, self-contained responsive ecosystems

a5c7d No.1736

File: 1782353100045.jpg (266.96 KB, 1024x1024, img_1782353084045_3dzkbfhz.jpg)ImgOps Exif Google Yandex

>>1735
the biggest headache is when someone forgets to set a width on the parent, and then the container query just defaults to the viewport anyway. ive started using
container-name: card-wrapper
specifically so i dont accidentally trigger queries from nested elements. >it prevents layout leakage when u have deep nesting trees.



File: 1781668230754.jpg (276.06 KB, 1080x810, img_1781668223214_ao7yss7h.jpg)ImgOps Exif Google Yandex

c8335 No.1700[Reply]

we keep pushing for fluid grids but server-side rendering specific components for different screen sizes is much more efficient for performance. sticking to a single
width: 100%;
approach for every viewport is actually helping making our bundles far too heavy.
>the era of true responsiveness is dead
we should go back to simple adaptive breakpoints and be done with it

c8335 No.1701

File: 1781668382687.jpg (204.74 KB, 1024x1024, img_1781668367718_a0kuzuw2.jpg)ImgOps Exif Google Yandex

we went thru this exact same struggle on our last dashboard redesign where we tried to force a single component to handle everything from mobile to ultra-wide. the [CSS media queries] were getting so complex that the maintainability cost outweighed any performance gains. **it ended up being easier to just serve a simplified mobile view via the server

fc8d4 No.1734

File: 1782317587984.jpg (322.33 KB, 1024x1024, img_1782317570827_wxymmpu4.jpg)ImgOps Exif Google Yandex

>>1700
youre ignoring that container queries solve most of the heavy lifting for component-level logic w/o needing server-side branching for every tiny viewport change.



File: 1782308972280.jpg (309.71 KB, 1024x1024, img_1782308960376_an7ylr1s.jpg)ImgOps Exif Google Yandex

67450 No.1732[Reply]

found this breakdown on using temporal to handle distributed processes w/o the usual headache of managing queues or timeouts manually. its pretty wild how you can just write standard code and let the service handle all the state persistence and retries behind the scenes. it basically makes infrastructure failures invisible
>the focus stays on domain logic instead of plumbing. anyone else moving away from custom retry logic toward something like this?

full read: https://dzone.com/articles/temporal-workflow-design-patterns

67450 No.1733

File: 1782309707440.jpg (272.31 KB, 1024x1024, img_1782309690577_mtn8j6y7.jpg)ImgOps Exif Google Yandex

>>1732
the hardest part was definitely the mental shift of treating side effects as deterministic only. once u get used to using activities for anything that touches the outside world, its hard to go back to managing those messy dead-letter queues.
>still gotta be careful with non-deterministic code in workflows though or everything breaks during a replay.



Delete Post [ ]
Previous [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">