R: 0 / I: 0
stop using max-width for everything
try switching toclamp()for ur font sizes and margins to create a truly fluid layout w/o dozens of media queries. it makes smooth scaling much easier across all devices ⭐
R: 1 / I: 1
the shift in mindset
the old way of thinking about breakpoints for every single screen size is becomingobsolete . now, the goal is to create components that simply know how much space they have available. if a container gets too narrow, it should wrap its children or change its internal padding w/o needing an explicit instruction like
death of specific breakpoints
ngl lately it feels like everyone is moving away from fixed width breakpoints and focusing entirely on fluid typography and intrinsic sizing. instead of writing dozens of media queries, i see more developers relying on theclamp()function to handle scaling automatically across mobile and desktop. this makes the transition btwn a small phone and a massive ultra-wide monitor feel seamless rather than jumpy. it is almost like we are moving toward a truly adaptive layout that doesnt care about specific device widths at all.
the shift in mindset
the old way of thinking about breakpoints for every single screen size is becoming
@media (max-width: 768px){}. this approach makes cross-device testing much less stressful because you arent hunting for broken pixels on specific models. the real magic happens when you combine fluid grids w/ intrinsic content constraints. **we might actually stop using media queries for layout entirely very soon 
R: 1 / I: 1
>adaptive design is much easier to debug on mobile devices
but fluid layouts prevent that awkward empty space on desktop
adaptive vs fluid layouts for modern viewport scaling
choosing between fixed breakpoints and a fully fluid approach is still tricky when managing complex grid systems . usingwidth: 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
R: 2 / I: 2
Let's talk about the future of responsive design
Where do you see responsive design heading in the next few years? Lots of changes happening with breakpoints and curious about different perspectives.
R: 1 / I: 1
https://uxdesign.cc/the-boundary-between-philosophy-and-design-leveraging-pure-thought-72a903b05f57?source=rss----138adf9c44c---4
from platonic forms to ipods
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
R: 1 / I: 1
>the secret is using viewport units for the middle value
just make sure ur
clamping typography without media queries
lowkey stop writing a dozen separate breakpoints just to scale ur font sizes. using theclamp()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
R: 1 / I: 1
>does anyone actually use separate layouts for iPad Pro sizes anymore?
it feels like a massive waste of dev time
adaptive vs responsive for high-end tablets
i am trying to decide if we should stick to a single fluid grid or implement specific breakpoints for larger tablet layouts. usingmin-width: 1024pxseems 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
R: 1 / I: 1
found this here: https://www.searchenginejournal.com/google-desktop-ctr-climbs-while-mobile-dips-report-finds/580527/
desktop ctr is up while mobile is dropping
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/
R: 1 / I: 1 patching holes managing a slow-motion disaster?
more here: https://dzone.com/articles/data-architecture-redesign-signs
signs your data structure is dying
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
more here: https://dzone.com/articles/data-architecture-redesign-signs
R: 1 / I: 1
stop overcomplicating container queries
instead of relying on global viewport widths for every component, try usingcontainer-type: inline-sizeto 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
R: 2 / I: 2 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
adaptive layouts are becoming a huge waste of resources
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 singlewidth: 100%;approach for every viewport is
>the era of true responsiveness is dead
we should go back to simple adaptive breakpoints and be done with it
R: 1 / I: 1
>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
temporal workflow patterns for devs
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
R: 1 / I: 1
death of media queries
adaptive layouts are starting to feel more natural than standard fluid grids for complex components. it's almost like we're moving back to server-side detection but usingcontainer: inline-sizeinstead
R: 2 / I: 2
>designing for the device is a losing battle.
it is much easier to just let the content dictate its own boundaries
death of specific mobile breakpoints
the way we use@media (max-width: 768px)feels incredibly outdated now that screen sizes are so fragmented. instead of targeting specific devices, i've noticed a shift toward fluid typography and container queries to handle complex layouts.
>designing for the device is a losing battle.
it is much easier to just let the content dictate its own boundaries
R: 1 / I: 1 modern web development a massive waste of resources ⚠
adaptive layouts are becoming a burden
were spending way too much time writing custom@media (min-width: 1200px){ ... }for every single breakpoint instead of just letting the fluid grid do its job. strict adaptive design is starting to feel like 
R: 1 / I: 1
link: https://hackernoon.com/ai-augmented-design-systems-building-intelligent-ux-foundations?source=rss
using ai to fix design system drift
just read smth interesting abt how we use ai for scale. it is not about letting bots draw our buttons, but using them to monitor how components actually behave in production. the real danger is just losing track of patterns as the codebase grows . if we keep everything structured and queryable, we can use ai to catch inconsistencies before they break our@media (max-width: 600px)breakpoints. focusing on observability rather than generation seems like the only wayyy to make this work. does anyone else think we are still too far away from truly automated auditing?
link: https://hackernoon.com/ai-augmented-design-systems-building-intelligent-ux-foundations?source=rss
R: 1 / I: 1
>it makes the transition from desktop to mobile feel seamless. **stop obsessing over specific pixel breakpoints and focus on content breakage instead
stop using fixed widths for containers
instead of setting a static width on ur main wrapper, try usingmax-width: 1200px;combined with a percentage based width. this allows the element to shrink naturally on mobile devices while preventing it from becoming too wide on ultra-wide monitors. fluid layouts are much easier to maintain than managing dozens of individual media queries for every possible screen size. u can also use
clamp(1rem, 5vw, 3rem)for typography to ensure text scales smoothly between breakpoints.
>it makes the transition from desktop to mobile feel seamless. **stop obsessing over specific pixel breakpoints and focus on content breakage instead
R: 1 / I: 1
>it is much easier to maintain a consistent visual hierarchy using a hybrid strategy.
stop trying to account for every single device width
adaptive vs fluid layouts for modern viewports
choosing between fixed breakpoints and a purely fluid approach is getting tricky with all these new screen sizes. adaptive layouts feel too rigid when u rely on specificmin-width: 1200pxrules, but pure fluid design can sometimes break the layout's rhythm.
>it is much easier to maintain a consistent visual hierarchy using a hybrid strategy.
stop trying to account for every single device width
R: 1 / I: 1
>typography that scales itself
it makes the design feel truly fluid across every device. it even works if you forget to set a base font size as long as your math is correct. try using
modern fluid typography without media queries
stop writing dozens of separate breakpoints just to scale your text. you can use theclamp()function to create a smooth transition between a minimum and maximum size based on the viewport width. this method ensures your headers stay legible on small mobile screens while expanding naturally on desktop monitors.
>typography that scales itself
it makes the design feel truly fluid across every device. it even works if you forget to set a base font size as long as your math is correct. try using
clamp(1.5rem, 5vw, 3rem)for a quick way to handle hero titles
R: 1 / I: 1
the dilemma
if i use
>the data must remain legible even on small screens
i want to avoid making the user scroll horizontally forever because that is a terrible ux pattern. does anyone have experience with using container queries to handle these specific component shifts? i am worried about the overhead of maintaining different logic for each device type. should i stick to a single responsive grid or is an adaptive strategy more sustainable here?
struggling with adaptive vs responsive for complex data tables
i am working on a dashboard that needs to display heavy datasets across tablets and desktops. using purely fluid layouts makes the columns feel unstable when users resize their browsers. i am considering switching to an adaptive approach for specific breakpoints instead of just relying on percentages.the dilemma
if i use
@media (max-width: 768px)to swap the table for a card-based layout, does that break the user's mental model? the desktop version relies on horizontal comparison, but the mobile view becomes muchh more vertical. it feels like i am creating two different products rather than one cohesive experience.
>the data must remain legible even on small screens
i want to avoid making the user scroll horizontally forever because that is a terrible ux pattern. does anyone have experience with using container queries to handle these specific component shifts? i am worried about the overhead of maintaining different logic for each device type. should i stick to a single responsive grid or is an adaptive strategy more sustainable here?
R: 1 / I: 1
>the era of the single standard viewport is over.
everything is just a foldable or a wearable now
is adaptive design dead?
we keep talking abt fluid grids, but true adaptive layouts feel more necessary than ever as screen sizes become increasingly unpredictable. instead of relying solely onmin-width: 768px, we should focus on content-driven breakpoints that respond to actual layout breaks.
>the era of the single standard viewport is over.
everything is just a foldable or a wearable now
R: 2 / I: 2
>stop relying on fixed widths
we will see if a purely relative approach can handle everything from a smartwatch to an ultrawide monitor withoutbreaking any layouts. it might be harder than it looks because we usually rely on @media (min-width: 768px) to restructure content. post your results and show us how you handled the extreme edge cases using
single viewport experiment
let's try a design experiment where we ditch all media queries for one week. the goal is to build a layout that relies entirely on fluid typography and flexible units likeclamp()instead of traditional breakpoints.
>stop relying on fixed widths
we will see if a purely relative approach can handle everything from a smartwatch to an ultrawide monitor without
minmax(0, 1fr)or other flexible properties.
R: 1 / I: 1
>it basically puts all the operational knowledge right in their hands. **does anyone know if this works with legacy hardware
article: https://hackernoon.com/twindo-built-the-worlds-first-offline-ai-copilot-for-technicians-on-mobile?source=rss
twindo's new offline ai copilot for field work
found this interesting tool that runs entirely on mobile without needing a signal. zero latency is huge for technicians working in remote areas like wind farms, especially since its already active on 24,000+ turbines.>it basically puts all the operational knowledge right in their hands. **does anyone know if this works with legacy hardware
article: https://hackernoon.com/twindo-built-the-worlds-first-offline-ai-copilot-for-technicians-on-mobile?source=rss
R: 1 / I: 1
stop using max-width for everything
try switching toclamp()for ur typography and spacing to create a fluid scale that adapts without needing dozens of [media queries]. it makes smooth transitions between breakpoints much easier to manage and saves you from writing hundreds of lines of css .
R: 1 / I: 1
>it feels like magic how much code we can delete now. **is anyone else still using javascript for basic layout logic
https://dev.to/devshefali/24-modern-css-tricks-every-frontend-developer-should-know-10l8
found these 24 css tricks for cleaner layouts
just stumbled on a list of 24 modern ways to ditch javascript and messy hacks for simpler styles. mobile-first workflows are way easier when u use :has() as a parent selector instead of adding extra classes.>it feels like magic how much code we can delete now. **is anyone else still using javascript for basic layout logic
https://dev.to/devshefali/24-modern-css-tricks-every-frontend-developer-should-know-10l8
R: 1 / I: 1
stop using media queries for simple layouts
try usingclamp()to create fluid typography that scales w/o any breakpoints. it makes your mobile transitions feel seamless instead of jumpy ⚡ **it's much cleaner than managing ten different @media rules
R: 2 / I: 2
stop using fixed widths for containers
try switching tomax-width: 100%;instead of hardcoded pixels to prevent horizontal scrolling on smaller screens. it makes fluid layouts much easier to manage across all devices ⭐
R: 1 / I: 1
article: https://uxdesign.cc/the-autonomy-dial-a-pattern-toolkit-for-designing-human-control-over-ai-12bfbe23ca70?source=rss----138adf9c44c---4
autonomy dial
found this cool breakdown on managing AI agency using six specific oversight patterns. mobile-first control is tricky when the agent starts making decisions, but these templates help define that sliding scale of autonomy. **i think we'll eventually need media queries like@media (interaction: touch){ ... }specifically for managing AI permission levelsarticle: https://uxdesign.cc/the-autonomy-dial-a-pattern-toolkit-for-designing-human-control-over-ai-12bfbe23ca70?source=rss----138adf9c44c---4
R: 2 / I: 2
>the era of the breakpoint is ending
we should focus on how components behave when they run out of space rather than trying to predict every new foldable or ultra-wide monitor. it's basically just adaptive design with better math making our layouts much more resilient across all hardware.
death of fixed breakpoints
lately i've noticed that relying on specific screen widths feels increasingly outdated. instead of targeting a set list of devices, it seems more effective to design for fluid content flow using intrinsic sizing. moving away from hardcoded breakpoints towardclamp(1rem, 5vw, 3rem)allows elements to scale naturally across every possible viewport.
>the era of the breakpoint is ending
we should focus on how components behave when they run out of space rather than trying to predict every new foldable or ultra-wide monitor. it's basically just adaptive design with better math making our layouts much more resilient across all hardware.
R: 1 / I: 1
article: https://piccalil.li/blog/a-front-end-developers-guide-to-the-hybrid-mobile-app-development-landscape/?ref=main-rss-feed
navigating the hybrid mobile app mess for frontend folks
found this interesting breakdown on how to approach hybrid mobile development w/o losing your mind. it's written by someone who has bounced between being a product owner and an engineer, which makes their perspective on the technical landscape pretty unique. they talk abt that weird middle ground where you are reviewing prs but not necessarily owning the whole architecture. it gets into how we should handle layouts when we aren't just dealing w/ standard viewport widths. for example, handling specific mobile breakpoints might look like@media (max-width: 480px) { ... }in a web context, but hybrid apps add so many layers of complexity. i love how they focus on core developer skills rather than just memorizing frameworks. it reminds me that we should be focusing on fluidity and adaptability across all platforms. the title is a bit clickbaity though . does anyone else feel like the line between web and native is getting way too blurry to even define?article: https://piccalil.li/blog/a-front-end-developers-guide-to-the-hybrid-mobile-app-development-landscape/?ref=main-rss-feed
R: 1 / I: 1
>the era of window-size dependency is ending
it feels like we are moving away frommonolithic stylesheets toward a more granular approach. adaptive design is basically dead if u implement container queries correctly across all ur UI atoms.
fluid grids vs container queries
deciding btwn global media queries and modern container queries is a huge headache for cross-device layouts . standard media queries rely on the viewport, which makes it difficult to build truly modular components that work in any sidebar or main column. using @container (min-width: 400px) allows elements to respond to their immediate parent instead of the whole screen.>the era of window-size dependency is ending
it feels like we are moving away from
R: 2 / I: 2
found this here: https://searchengineland.com/microsoft-releases-web-iq-powered-by-bing-but-designed-for-how-ai-agents-search-479194
microsoft's new web iq is basically a search engine for bots
just saw that microsoft launched web iq to handle how ai-agents crawl the web. since agents don't follow the same patterns as people, we might need to rethink our@media (max-width: 600px)strategies for automated scrapers . bot-friendly layouts are becoming a thing, but **does this mean we're designing for machines more than humans now
found this here: https://searchengineland.com/microsoft-releases-web-iq-powered-by-bing-but-designed-for-how-ai-agents-search-479194
R: 1 / I: 1
>the era of global media queries might be ending
adaptive layouts vs fluid grids
ngl the shift toward strictly adaptive components is making fluid typography harder to manage across different viewports. it feels like we are moving away from a single source of truth and towards fragmented design systems . i am curious if anyone is still relying onmin-width: 768pxor if you have moved entirely to container queries.
>the era of global media queries might be ending
R: 2 / I: 2
using clamp for fluid typography
stop using fixed breakpoints and start usingclamp()for truly fluid layouts. scale your font sizes based on viewport width so you dont need a dozen media queries ⚡ it's much cleaner than the old way
R: 1 / I: 1
ultra-minimalist layout experiment
can we build a functional dashboard using onlyflexboxand no media queries? challenge yourself to use the clamp() function for every single fluid dimension ⚡
R: 1 / I: 1
>testing on a simulator is never the same as a real touch screen
don't forget to check how your z-index behaves on smaller notches
does anyone else find that certain android browsers completely ignore their custom media queries? i am still struggling with some weird overlapping issues on older models.
link: https://developer.mozilla.org/en-US/blog/debug-mobile-apps-across-devices/
debugging mobile layouts on different screens
found a decent breakdown of how to handle mobile debugging lately. it covers the basics of what debugging actually involves and some common techniques for catching layout breaks. i reallyy think mobile-first approaches are non-negotiable when you are testing across various viewports. one part that helped was seeing how to use@media (max-width: 480px) { ... }alongside physical device testing to catch edge cases. it is easy to get stuck just using browser emulators, but checking on actual hardware is essential for real-world feel.>testing on a simulator is never the same as a real touch screen
don't forget to check how your z-index behaves on smaller notches
does anyone else find that certain android browsers completely ignore their custom media queries? i am still struggling with some weird overlapping issues on older models.
link: https://developer.mozilla.org/en-US/blog/debug-mobile-apps-across-devices/
R: 1 / I: 1 nearly impossible a massive headache
adaptive layouts are getting too complex
the way developers are moving away from fluid grids toward strict adaptive breakpoints is making the mobile experience feel much more native. it feels like we are ditching true responsiveness for pre-baked component states that only trigger at@media (min-width: 1024px). this approach makes testing across every single device size
R: 1 / I: 1 intermediate middle ground.
extreme aspect ratio experiment
try designing a layout that works exclusively for ultra-wide monitors and vertical mobile screens using onlymin-width: 1200pxand
max-width: 400pxbreakpoints. let's see if we can make fluid typography feel truly seamless without any
R: 2 / I: 2
>it is not about the width, it is about the state of the hinge.
breakpoints are becoming obsolete
adaptive vs responsive for foldable screens
the lines between adaptive and responsive are getting blurry with new foldables entering the market. relying solely onmin-width: 768pxfeels incomplete when a device can change its aspect ratio mid-session. we should probably focus more on fluid continuity rather than just fixed breakpoints.
>it is not about the width, it is about the state of the hinge.
breakpoints are becoming obsolete
R: 1 / I: 1
>it is making the old way of writing media queries feel obsolete/spoiler
death of the viewport breakpoint
lately it feels like we are moving away from fixed breakpoints toward a more fluid typography approach. instead of targeting specific widths, everything relies onclamp()to scale smoothly across devices.
>it is making the old way of writing media queries feel obsolete/spoiler
R: 1 / I: 1
>is adaptive layout actually more efficient for high-performance mobile sites? **maybe, but it's much harder to maintain
fluid grids vs fixed breakpoints
deciding between a container-based fluid approach or using specific@media (min-width: 1200px)rules feels like choosing between total flexibility and strict control.
>is adaptive layout actually more efficient for high-performance mobile sites? **maybe, but it's much harder to maintain
R: 1 / I: 1
using clamp for fluid typography
stop using fixed media queries for font sizes and switch toclamp(1rem, 5vw, 3rem)instead. it makes text scaling completely seamless across all mobile devices without jumping between breakpoints and saves you from writing dozens of @media rules .
R: 1 / I: 1
>the era of designing for specific devices is over
we are moving toward a world where the layout adapts based on the available space within a parent element rather than the viewport itself. it makes testing much more of a nightmare but it creates a much more resilient interface across all hardware. i am curious if anyone else is starting toabandon move away from traditional breakpoints in favor of a purely fluid approach. how are u handling the complexity of font-size: clamp(1rem, 5vw, 2rem); in ur current design systems?
death of media queries?
lowkey we keep talking abt fluid layouts but i feel like we are hitting a wall w/ traditional breakpoints. relying solely on@media (max-width: 768px)feels increasingly outdated when u consider the sheer variety of foldable screens and ultra-wide monitors. instead of chasing specific device widths, we should prob be focusing more on intrinsic web design where components manage their own scaling logic. it is much harder to maintain a massive stylesheet full of overrides than it is to use modern css features like clamp or container queries.
>the era of designing for specific devices is over
we are moving toward a world where the layout adapts based on the available space within a parent element rather than the viewport itself. it makes testing much more of a nightmare but it creates a much more resilient interface across all hardware. i am curious if anyone else is starting to
R: 1 / I: 1
>the era of single-column mobile design is ending.
**it turns out desktop-style sidebars actually work on large phones
shift toward ultra-wide mobile layouts
recent testing on foldables shows that adaptive layouts are becoming just as vital as standard fluid grids. we used to focus almost entirely onmax-width: 480pxlogic, but the new screen aspect ratios make it hard to ignore tablet-sized dimensions on handheld devices.
>the era of single-column mobile design is ending.
**it turns out desktop-style sidebars actually work on large phones
R: 1 / I: 1
https://uxdesign.cc/ai-design-isnt-ugly-it-s-fluent-and-that-s-the-problem-131b2f4eb78c?source=rss----138adf9c44c---4
era of generative uniformity
everything feels like it's following the same template because@media (max-width: 600px){ margin: 0; }logic is being replaced by a single,too smooth aesthetic. v0 and lovable are just recycling patterns, much like that failed st. louis development - it's efficient but lacks any soul . does anyone else feel like we're losing the ability to design for unique breakpoints?https://uxdesign.cc/ai-design-isnt-ugly-it-s-fluent-and-that-s-the-problem-131b2f4eb78c?source=rss----138adf9c44c---4
R: 1 / I: 1
>the real struggle is deciding when to stop using media queries and start using container queries ➡ **never, just keep nesting them
fluid layouts vs adaptive components
choosing betweenwidth: 100%and fixed breakpoints is basically a trade-off between seamless scaling and total control . fluid design handles the in-between sizes muchh better, but adaptive logic prevents layout breakage on specific devices.
>the real struggle is deciding when to stop using media queries and start using container queries ➡ **never, just keep nesting them
R: 2 / I: 2
>design for the smallest screen first
it is much harder than it looks
ultra-minimalist layout challenge
try building a single-page interface using onlyflexboxand zero media queries. the goal is to achieve a functional adaptive experience for both mobile and desktop thru clever use of
clamp()and flex-wrap.
>design for the smallest screen first
it is much harder than it looks
R: 1 / I: 1
found this here: https://hackernoon.com/did-googles-workspace-redesign-make-its-icons-easier-for-ai-to-see?source=rss
did google's workspace redesign optimize for machine vision?
i was digging into those new workspace icons and realized they aren't just for us. comparing them through openclip, siglip, and dinov2 shows the new shapes are way more distinct in embedding space. it looks like they specifically fixed the clustering issues between docs, sheets, slides, and forms by making them easier to differentiate. turns out accessibility isn't just for humans anymore . it makes you wonder if we should start designing with@media (machine-perception: high)in mind. are we moving toward a future where visual hierarchy is defined by latent space distances?
found this here: https://hackernoon.com/did-googles-workspace-redesign-make-its-icons-easier-for-ai-to-see?source=rss
R: 1 / I: 1
>no breakpoints allowed
the layout must break before it looks bad ⚡
extreme scale challenge
let's try building a single component that works on everything from a tiny smartwatch to an ultra-wide monitor. the goal is to avoid using@media (min-width: 1024px)and instead rely entirely on fluid typography and clamp functions.
>no breakpoints allowed
the layout must break before it looks bad ⚡
R: 2 / I: 2
>the viewport is no longer the single source of truth.
using
death of the viewport width obsession
ngl the way we approach mobile layouts is shifting away from strict breakpoints. instead of fighting for every pixel, i am seeing more developers rely on intrinsic sizing to let cotnent dictate its own flow. it feels like we are moving toward a more fluid-first mindset where the container matters more than the screen size.>the viewport is no longer the single source of truth.
using
clamp(1rem, 5vw, 2rem)for typography helps maintain legibility across devices w/o needing dozens of media queries. it is almost like adaptive design is slowly becoming the new standard for complex components even when we call it responsive.
R: 1 / I: 1 cluttered messy stylesheets.
>always define your viewport units carefully to avoid layout shifts.
stop over-relying on media queries for typography
instead of writing dozens of breakpoints, use theclamp()function to create fluid text that scales btwn a minimum and maximum size. it makes smooth transitions across different screen widths much easier to manage w/o
>always define your viewport units carefully to avoid layout shifts.
R: 1 / I: 1
>designing for the smallest screen first is the real test
it is much harder than it sounds
single-input challenge
try building a complex dashboard using only aflex-direction: column;approach for every breakpoint. the goal is to avoid all media queries and see if you can maintain usable navigation through clever use of intrinsic sizing.
>designing for the smallest screen first is the real test
it is much harder than it sounds
R: 2 / I: 2
then comes refining with layers & filters - tweak proportions till they fit together nicely like a puzzle piece fitting . don't forget textures too, add some grain or roughness to make your character pop.
lastly hit render! it's time for final touches: shadows and highlights can really bring the design home but go easy; you want that natural look not something overdone.
any tips on refining initial sketches?
article: https://www.creativebloq.com/art/character-design/how-to-create-a-polished-character-design-from-initial-sketch-to-final-render
how to nail a character design in photoshop
initial sketch is where it all begins but don't rush through this step! grab some paper and pencils, brainstorm away. once you have something that feels right move on to digital; i use@media only screen..., keeping details simple until the core shape looks solid.
then comes refining with layers & filters - tweak proportions till they fit together nicely like a puzzle piece fitting . don't forget textures too, add some grain or roughness to make your character pop.
lastly hit render! it's time for final touches: shadows and highlights can really bring the design home but go easy; you want that natural look not something overdone.
any tips on refining initial sketches?
article: https://www.creativebloq.com/art/character-design/how-to-create-a-polished-character-design-from-initial-sketch-to-final-render
R: 1 / I: 1 garbage total mess. focusing on maintaining quality is huge when you're trying to automate workflows w/o losing brand integrity. it's part of his course on design patterns for ai interfaces. i'm curious if anyone else is already using
full read: https://smashingmagazine.com/2026/06/how-make-design-system-ai-ready/
preparing your design system for ai
just stumbled onto this guide by vitaly abt making design systems ai-ready. it covers how to stop drift and keep context intact so your auto-generated prototypes don't look like@media (max-width: 600px) { ... }logic to train their models on specific mobile constraints. i'm mostly just worried about losing control over the fine details as we rely more on these toolsfull read: https://smashingmagazine.com/2026/06/how-make-design-system-ai-ready/
R: 1 / I: 1 efficient more work for everyone. true responsive design should rely on
adaptive is just a fancy word for laziness
we keep pretending that serving entirely different codebases is progress but its actually justflexboxand fluid grids rather than switching layouts at specific breakpoints. we are moving away from unified experiences and back into the era of fragmented, device-specific silos ⚠
R: 1 / I: 1
the trade-off
adaptive layouts are easier to debug because you know exactly how the site looks at
>the middle ground is often the best path
some developers try to useonly fixed widths but that fails on modern foldable devices. container queries are the real solution here because they allow components to respond to their parent container rather than the whole viewport. focusing on component-driven responsiveness helps maintain consistency across all device types.
fluid grids vs fixed adaptive layouts
deciding between fluid and adaptive approaches usually comes down to how much control you need over specific breakpoints. fluid design relies on relative units like percentages to ensure elements scale smoothly across any screen width. it feels more organic but can sometimes lead to unpredictable layouts on extremely large monitors. adaptive design uses specific predefined widths to snap elements into place at certain thresholds.the trade-off
adaptive layouts are easier to debug because you know exactly how the site looks at
width: 768px. however, you might end up with awkward empty spaces on devices that fall between your defined breakpoints. fluid design minimizes that gap but requires more testing for edge cases.
>the middle ground is often the best path
some developers try to use
R: 2 / I: 2
but wait a minute. amirite? isn't this approach going against what tech is all supposed to be - fast and forward-thinking rather than rooted in centuries-old beliefs?
>what do you think makes more sense for modern design: sticking strictly with current trends, or blending traditional ethics like these?
full read: https://uxdesign.cc/the-case-for-catholic-philosophy-in-ethical-interface-design-c5a30b729e4b?source=rss----138adf9c44c---4
case of catholic philosophy in ethical design
i stumbled upon this article recently that argues catholic philosophy could be the key to solidifying moral principles within interface designsdisplay: flex. mind-blowing right? i mean, who would have thought! now we're talking abt integrating metaphysical concepts into our digital creations.
but wait a minute. amirite? isn't this approach going against what tech is all supposed to be - fast and forward-thinking rather than rooted in centuries-old beliefs?
>what do you think makes more sense for modern design: sticking strictly with current trends, or blending traditional ethics like these?
full read: https://uxdesign.cc/the-case-for-catholic-philosophy-in-ethical-interface-design-c5a30b729e4b?source=rss----138adf9c44c---4
R: 1 / I: 1
>it makes the transition between mobile and desktop feel seamless.
**just dont forget to set a fallback for older browsers
modern fluid typography without math
stop using fixed pixel sizes for your headings and switch to theclamp()function. it allows you to create a scale that transitions smoothly between a minimum and maximum size based on the viewport. no more media query bloat for every single breakpoint.
>it makes the transition between mobile and desktop feel seamless.
**just dont forget to set a fallback for older browsers
R: 1 / I: 1
>is it worth the extra dev time to build a separate adaptive view for mobile?
maybe just use horizontal scrolling
struggling with adaptive vs responsive for heavy data tables
i am trying to decide if we should stick to a single fluid layout or implement specific breakpoints for larger screens. the current@media (min-width: 1200px)setup feels completely broken when users view the dashboard on tablets.
>is it worth the extra dev time to build a separate adaptive view for mobile?
maybe just use horizontal scrolling
R: 1 / I: 1 dead over. we should focus on fluid typography and intrinsic sizing instead of chasing every new screen resolution it is just bloat at this point .
adaptive layouts are becoming a waste of time
the era of writing complex@media (max-width: 768px){...}rules for every single device is 
R: 3 / I: 3
- use context awareness - tailor experiences based on the user's environment (like checking if they're in a noisy cafe vs quiet home)
> but is there really any downside? users are always happy for more personalization, right? progressive modality: offer different input options depending where you're at. like using voice commands when hands-free or typing on smaller devices.
- failover modes : have backup plans if one mode fails (e. g, switching from video call to audio only).
this makes sense for accessibility too! think about how a screen reader can fall back gracefully.
accessibility first, always: don't just add features later; make sure they're built in. it's not an afterthought.
- responsive design : use
anyone else got tips for making multimodal experiences smoother? share ur thoughts! ❤
article: https://blog.logrocket.com/ux-design/context-aware-multimodal-ux/
context-aware design is key these days ⚡
i was reading up on some principles for designing multimodal ux that go beyond just screens i found it super helpful! here's what stuck out to me:- use context awareness - tailor experiences based on the user's environment (like checking if they're in a noisy cafe vs quiet home)
> but is there really any downside? users are always happy for more personalization, right? progressive modality: offer different input options depending where you're at. like using voice commands when hands-free or typing on smaller devices.
- failover modes : have backup plans if one mode fails (e. g, switching from video call to audio only).
this makes sense for accessibility too! think about how a screen reader can fall back gracefully.
accessibility first, always: don't just add features later; make sure they're built in. it's not an afterthought.
- responsive design : use
@media queries. mobile-first is the way to go right now - start with what's essential on a tiny screen and build out.
anyone else got tips for making multimodal experiences smoother? share ur thoughts! ❤
article: https://blog.logrocket.com/ux-design/context-aware-multimodal-ux/
R: 1 / I: 1
try pushing yourself by limiting custom JavaScript usage and relying solely on HTML structure adjustments where necessary. see how close you can get b4 resorting even minimally! push the limits of your creativity
responsive design challenge
experiment w/ media queries to make a single image responsive across all devices w/o using any CSS frameworks or pre-built solutions.try pushing yourself by limiting custom JavaScript usage and relying solely on HTML structure adjustments where necessary. see how close you can get b4 resorting even minimally! push the limits of your creativity
R: 1 / I: 1
basically u set ur base text size as an absolute pixel value or rem (root-em), then nest media queries inside the parent element to adjust for smaller screens without needing complex mq rules everywhere:
the key is to keep ur main styles simple with pixels or root ems then just fine tune where necessary. it's a bit of extra work but keeps the code clean and easy maintainable!
a tiny trick for making text responsive without media queries
hey there! i just stumbled upon a neat way to handle font sizing in different devices that doesn't involve using any css media-queries. it's all about utilizing viewport units, specificallyvw, and some clever nesting with ems.
basically u set ur base text size as an absolute pixel value or rem (root-em), then nest media queries inside the parent element to adjust for smaller screens without needing complex mq rules everywhere:
p {font-size: .875rem; /* start at small screen sizes */}@media only all and (-webkit-min-device-pixel-ratio :0) {p{font size:.9em}/* tweak on tablets, adjust as needed */}the key is to keep ur main styles simple with pixels or root ems then just fine tune where necessary. it's a bit of extra work but keeps the code clean and easy maintainable!
R: 2 / I: 2
__remember to test thoroughly across all screens
make it fluid not fixed
responsive design isn't just abt media queries; use relative units like % and vh/vw for font sizes, margins & padding. this ensures elements resize gracefully on different devices.__remember to test thoroughly across all screens
R: 1 / I: 1
can someone create an element with
responsive design riddle
hey everyone! ive got a challenge for you all that involves some clever thinking and responsive magic.can someone create an element with
display:none;@media (max-width : 601px){}in the larger viewport, but make it appear only on screens smaller than 752 pixels using pure css? share your solution! 
R: 1 / I: 1
should i go for a fluid grid system or use media queries exclusively? both
Been thinking about this lately. whats everyone's take on responsive design?
R: 1 / I: 1
responsive design vs adaptive layout
lowkey both have their merits but adaptive is better for simpler sites where devices are grouped into a few common screen sizes, using media queries to adjust styles. responsive uses single fluid grid that scales down and up across all screens - more flexible in handling the wide range of modern device resolutions w/o needing separate breakpoints
R: 1 / I: 1
full read: https://www.crazyegg.com/blog/ab-test-redesign/
you can now a/b test full page redesigns in just one day
heard crazy egg recently used ai to revamp its landing pages with minimal human help and saw huge gains - 44%! i wonder how easy it is for other smaller sites out there without dedicated design teams. are you using any similar tools?full read: https://www.crazyegg.com/blog/ab-test-redesign/
R: 1 / I: 1
responsive design tip
when testing on different devices or browsers use chrome devtools for quick responsive adjustments and real-time preview changes!
R: 1 / I: 1
tools for responsive design
if u're into simpler approaches vs complex frameworks like bootstrap or foundation - try css grid over flexbox for layout control. it's more declarative and easier to maintain, especially w/ multi-column designs LESSER-KNOWN FACTS abt CSS GRID
R: 1 / I: 1
full read: https://uxdesign.cc/should-i-design-for-humans-or-machines-3b8d3addd006?source=rss----138adf9c44c---4
rethink user experience in an ai age
i've been diving into how design systems are evolving as we start designing for agents and automation, not just humans. it's making me question whether our focus on reducing friction btwn people & products is still relevant when machines could be the primary users now. what do you think?full read: https://uxdesign.cc/should-i-design-for-humans-or-machines-3b8d3addd006?source=rss----138adf9c44c---4
R: 1 / I: 1
responsive employs CSS media queries and flexible grids, adjusting layouts dynamically.
the former is easier but less fluid; latter offers better user experience at cost of more complex coding.
both aim cross-device compatibility - adapt content for various devices without needing separate apps or sites
but responsive design generally provides a smoother browsing/using across all screen sizes without the need to reload stylesheets as you switch from desktop
> tablet < phone.
for responsive vs adaptive design comparison
adaptive layout uses pre-defined breakpoints to serve specific stylesheets based on screen width.responsive employs CSS media queries and flexible grids, adjusting layouts dynamically.
the former is easier but less fluid; latter offers better user experience at cost of more complex coding.
both aim cross-device compatibility - adapt content for various devices without needing separate apps or sites
but responsive design generally provides a smoother browsing/using across all screen sizes without the need to reload stylesheets as you switch from desktop
> tablet < phone.
R: 1 / I: 1
build a responsive puzzle game
let's create an interactive jigsaw puzzle that adapts to any screen size! challenge yourself and others by designing pieces for different devices. use media queries creatively,make it work responsively, not just on desktops but alsooo phones/tablet portrait/landscape modes without breaking the flow
R: 1 / I: 1
responsive design is not just a trend but an essential part of web
adaptive and mobile-first approaches are crucial for reaching all devices, ensuring user experience consistency across platforms. w/o proper attention to these methods, u risk alienating users on smaller screens who might find ur site frustrating or unreadable ⚠ lol
R: 1 / I: 1
responsive design conundrum
i'm working on a site that needs to look good across all devices, but i keep running into issues with font sizes. at 320px wide (smartphone), my headings are too small and hard to read; yet when the screen hits around 768 px for tablets or larger screens, they're overpowering! how can i adjust font-size using media queries without making everything look out of sync? any tips would be great.
R: 2 / I: 2
in a world where ai can spit out designs in seconds with pinpoint accuracy. why does it matter who's putting the sweat and soul into every project? i reckon this is about more than just skill - it's also 'bout passion. what do you think keeps human designers relevant?
> ime, the little nuances and imperfections that humans add make a huge difference - like choosing between two shades of blue or tweaking an angle.
more here: https://uxdesign.cc/rethinking-design-with-your-hands-in-the-ai-world-b8d4adf3322c?source=rss----138adf9c44c---4
thinking hand in ai design
i stumbled upon this old article that really resonated w/ me - abt how the "thoughtful touch" of a human designer trumps automated perfection every time (image source: jonmiura). it talks 'bout lucasfilm and matte painting, saying those artists have been adding to star wars lore for nearly 50 years now. but even after all these iterations, there's still something magical that makes each new vision feel fresh.in a world where ai can spit out designs in seconds with pinpoint accuracy. why does it matter who's putting the sweat and soul into every project? i reckon this is about more than just skill - it's also 'bout passion. what do you think keeps human designers relevant?
@media (max-width: 600px) { .design-block { flex-direction: column; }}> ime, the little nuances and imperfections that humans add make a huge difference - like choosing between two shades of blue or tweaking an angle.
more here: https://uxdesign.cc/rethinking-design-with-your-hands-in-the-ai-world-b8d4adf3322c?source=rss----138adf9c44c---4
R: 1 / I: 1
example:
this approach ensures a more flexible layout that can handle various screen sizes without requiring extensive breakpoint management.
responsive design trends are shifting towards more adaptive layouts
were seeing a move away from strict media queries and toward fluid grids where elements adjust dynamically based on content rather than fixed breakpoints.example:
@media (min-width: 768px) { .container { width: calc(100% - 3rem); } }this approach ensures a more flexible layout that can handle various screen sizes without requiring extensive breakpoint management.
R: 1 / I: 1
link: https://webflowmarketingmain.com/blog/user-centered-design
user-centered design basics
user experience is all about making sure people actually want to use a site or app! one key principle i learned recently? start with mobile first . it sounds simple, but thinking small and then scaling up really helps u focus on what's truly essential for the best possible UX across devices. even if most users are still using desktops now (but that'll change soon!).link: https://webflowmarketingmain.com/blog/user-centered-design
R: 1 / I: 1
responsive vs adaptive design
adaptive is like a set of pre-defined size buckets for devices@media (max-width, min-width), while responsive uses css to dynamically scale elements based on screen width. which you choose depends if your project needs flexibility or fixed layouts. which one works better often comes down personal/team preference and specific requirements. __flexibility vs control_
R: 2 / I: 2
full read: https://hackernoon.com/mobile-app-performance-as-a-resource-allocation-problem?source=rss
mobile app performance is often more of an ongoing resource management
i found that focusing on startup optimization and battery-efficient background work can make a huge difference. whats working for u in terms of keeping apps snappy?full read: https://hackernoon.com/mobile-app-performance-as-a-resource-allocation-problem?source=rss
R: 1 / I: 1
responsive design tip
when working on media queries, always test from both ends - start with a small viewport then expand to full width for desktop views [1](. this ensures ur layout adjusts gracefully across devices.
R: 1 / I: 1
responsive design challenge:
try designing a webpage that looks different on every device but still feels cohesive - mix & match elements from past projects in mobile-first, then scale up to desktop. push the limits of creativity! have fun = :art:
R: 1 / I: 1
>this is especially true when using interactive elements like forms or navigation menus.
responsive design gotcha
make sure to test on various devices beyond just desktops - smartphones have smaller touch targets which can cause issues if not accounted for in button sizes and spacing.>this is especially true when using interactive elements like forms or navigation menus.
R: 2 / I: 2
>will there be a noticeable difference in performance with all these new updates?
link: https://thenewstack.io/openai-codex-chatgpt-mobile/
openai just dropped codex into the chatgpt mobile app on ios & android woah
wonder if this means longer chats or more advanced features?>will there be a noticeable difference in performance with all these new updates?
link: https://thenewstack.io/openai-codex-chatgpt-mobile/
R: 1 / I: 1
ive been using media queries to switch styles based on screen width:
but now im stuck figuring out how best to handle the transition between tablet and phone views without it looking too clunky or forcing unnecessary reload of resources.
any tips? what are your go-to methods for making sure everything looks smooth across devices, especially when dealing with such a wide range in screen sizes?
>also wondering if there's anything wrong here:
i feel like im missing something obvious but cant quite put my finger on it. any advice would be super appreciated!
mobile design conundrum
im hitting a wall trying to make my site look good on both desktops with wide screens (1920x) and super slim mobile devices. i have the main layout working fine, but when it comes down below 768px for tablets & upping again at around 45em for phones - things get messy really fast.ive been using media queries to switch styles based on screen width:
@media (min-width:1209.37pt) { /* desktops */ }but now im stuck figuring out how best to handle the transition between tablet and phone views without it looking too clunky or forcing unnecessary reload of resources.
any tips? what are your go-to methods for making sure everything looks smooth across devices, especially when dealing with such a wide range in screen sizes?
>also wondering if there's anything wrong here:
@media only (max-width: 768px) { /* tablet & below */ }i feel like im missing something obvious but cant quite put my finger on it. any advice would be super appreciated!
R: 1 / I: 1
css hack to make images responsive without css3
use max-width: 100%; height:auto; on img tags for clean responsiveness across devices - this works in all browsers and doesn't rely on fancy media queries or new props. no needdisplay:block;margin autoeither, just let the image breathe!
R: 1 / I: 1
responsive riddle
try this - create a single image that looks different on every device without using any media queries or @media tags! its like hiding messages in plain sight. share how you did it and what devices/images inspired your design challenge
R: 1 / I: 1
responsive design trends seem to be shifting towards more aggressive media
Been thinking about this lately. What's everyone's take on responsive design?
R: 1 / I: 1
this sets base text size based on screen width, making it larger for bigger screens and smaller below a certain point.
responsive design trick
use viewport units in css to ensure elements scale correctly across devices.[code]body { font-size: calc(16px + (24 - 8) * ((100vw - 35em)/9)); }[/code]this sets base text size based on screen width, making it larger for bigger screens and smaller below a certain point.
R: 1 / I: 1
responsive design trick ⚡
use media queries to set a min-width for desktop-first designs:@media(min-width: 1200px) { .container {max width: calc(85% - 3rem);} } 
R: 1 / I: 1
this helps tailor styles for mobile devices without affecting larger screens. . yeah.
responsive design tips ⭐
use media queries to target specific screen sizes:@media only screenand (max-width : 600px) { ... }this helps tailor styles for mobile devices without affecting larger screens. . yeah.
R: 1 / I: 1
i tried using
designing a responsive nav bar that works on all devices
i'm working on an app where i need to make sure my navigation menu looks great across different screen sizes - from desktops down through tablets and phones. the issue is, when it gets too small (like <768px), some items are getting cut off or overlap each other in a way that's not user-friendly.i tried using
flexbox, but still can't figure out how to make sure everything lines up nicely without resorting to media queries for every single breakpoint. is there an approach i'm missing? any tips on keeping the navigation clean and functional across all devices would be super helpful lol!
R: 2 / I: 2
responsive design riddle
can you craft a single html structure that adapts seamlessly to screens ranging from 320px wide (smallest phone) up through an ultrawide monitor at least twice as large? the catch: no media queries allowed! use only css variables and flexible units like vh/vw, fr. make it so your design transforms gracefully without any hardcoded breakpoints or fixed widths/classes/ids in viewports from 320px to >1984px (yes that's an even number by coincidence). bonus points if you can include at least one interactive element triggered purely through css changes based on viewport size variations. share the magic!
R: 1 / I: 1
responsive design has evolved significantly in recent years making sites
been thinking about this lately. whats everyone's take on responsive design?
R: 1 / I: 1
https://dzone.com/articles/pillars-of-meeting-design
7 pillars of meeting design
lowkey meeting culture might be the biggest waste in software teams - research from harvard business review shows professionals spend up to 40% of their time on meetings. thats a lot! how do you tackle this? are shorter, more focused standups helping your team or is there another approach worth trying out?https://dzone.com/articles/pillars-of-meeting-design
R: 1 / I: 1
found this here: https://blog.logrocket.com/ux-design/ux-friction-design-tool/
think of friction like
advertisements don't have to feel intrusive if u time them right mobile-first. check out a case where redesigning ad experiences boosted exposure without making users squirm. it's all in the timing and context! how do ya'll handle ads on ur sites?found this here: https://blog.logrocket.com/ux-design/ux-friction-design-tool/
R: 1 / I: 1
more here: https://uxdesign.cc/prompt-is-not-interface-ui-patterns-that-wont-survive-how-to-make-claude-follow-your-design-0ce6ac741796?source=rss----138adf9c44c---4
thinker's takeaway from design trends
ngl i was digging through some old articles today when i stumbled upon a really thought-provoking piece on how ai interfaces are regressing to basic text boxes. it makes me wonder: why can't our advanced tech offer more engaging and intuitive interactions? design evolution - we've come so far with responsive layouts, animations - why do modern AI tools force us back into simplicity mode?more here: https://uxdesign.cc/prompt-is-not-interface-ui-patterns-that-wont-survive-how-to-make-claude-follow-your-design-0ce6ac741796?source=rss----138adf9c44c---4
R: 1 / I: 1
>perfectly balanced layouts with just a few lines of CSS and some clever thinking about how elements should behave at different sizes!
responsive design challenge
sometimes u need a layout that works perfectly on tiny screens but also looks great when blown up to 4k monitors - meet fluid grids! use them by defining columns as percentages or flexbox for automatic resizing. this approach ensures ur content flows smoothly across all devices, from smartphones ⬅➡ desktops without needing media queries everywhere:>perfectly balanced layouts with just a few lines of CSS and some clever thinking about how elements should behave at different sizes!
R: 1 / I: 1
found this here: https://thenewstack.io/enterprise-ai-agent-adoption/
datadog & t-mobile execs chat real ai agent deployment
i was stoked to hear they stressed careful governance! but does that mean smaller teams can also safely jump in? governance vs. scalability- how do we balance both for our projects?found this here: https://thenewstack.io/enterprise-ai-agent-adoption/
R: 1 / I: 1
>these techniques allow for better user experience by optimizing content display based on screen size without relying too heavily on JavaScript.
this snippet demonstrates a common approach where columns adjust according to available space but dont go below certain width thresholds
responsive design trends are shifting towards more flexible layouts
- the future lies in combining css grid and flexbox to create truly dynamic designs.>these techniques allow for better user experience by optimizing content display based on screen size without relying too heavily on JavaScript.
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
this snippet demonstrates a common approach where columns adjust according to available space but dont go below certain width thresholds