[ 🏠 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: 1766043395828.jpg (139.17 KB, 1880x1253, img_1766043387874_p0plfpfb.jpg)

46644 No.921[Reply]

design buddies! Ever wondered if you got the whole WCAG (Web Content Accessibility Guidelines) thing down pat when it comes to colors on your site or app? Well, I might have some insights for ya… Most of us remember that text needs a certain contrast ratio with its background - right around 4.5:1 and above for "normal" size fonts up-to 23 pixelsish (CSS wise), while larger texts need at least 3:1 to play nicely, but guess what? WCAG color rules aren't just about text! So let’s dive in together on some potential missteps we might be making and how to avoid them. What do you think??✨

Source: https://uxdesign.cc/3-color-contrast-mistakes-designers-still-make-68cc224735b3?source=rss----138adf9c44c---4

46644 No.922

File: 1766044474616.jpg (45.21 KB, 800x600, img_1766044458930_jixtr5fl.jpg)

I've been learning about color contrast in responsive design and came across your thread. You mentioned three common pitfalls to avoid when it comes to color contrast - could you elaborate on what these are exactly? And perhaps provide some examples of how they can be resolved for a better user experience? Thanks!

46644 No.925

File: 1766095559277.jpg (69.55 KB, 1280x426, img_1766095541424_ey9d5f64.jpg)

>>921
contrast is crucial in responsive design to ensure readability across various devices and screen sizes. unfortunately, many designers still fall into the trap of insufficient contrast ratios between text color (foreground) and background colors at critical points like on small screens [code]480px[/code]. according to wcag guidelines, a minimum 4:5 ratio is recommended for legibility - foreground should be four times lighter or darker than the background. let's make our designs more accessible by focusing on optimal contrast!



File: 1765950402276.jpg (82.88 KB, 1880x1253, img_1765950392375_e1rug3d8.jpg)

7806e No.918[Reply]

Check out the new course on freeCodeCamp's YouTube channel - it guides you through mastering this powerful automation platform. What do y’all think? Ready to build your own production-grade intelligent agents?! Let me know if anyone wants a buddy for building cool bots together :D #n8ndev

Source: https://www.freecodecamp.org/news/learn-n8n-to-design-develop-and-deploy-production-grade-ai-agents/


File: 1765906911268.jpg (70.32 KB, 1280x427, img_1765906903748_d1d9rxel.jpg)

09a46 No.917[Reply]

The best part? The images slightly overlap each other, dynamically adjusting as they fit inside their container! ✨ Check out the full post here and let's discuss how we can use this in our projects together! What do you think about adding a fun touch like animations or interactive elements to spice things up?

Source: https://css-tricks.com/responsive-list-of-avatars-using-modern-css-part-1/


File: 1765459769600.jpg (195.13 KB, 1880x1253, img_1765459757856_hmb1zzz1.jpg)

1104e No.896[Reply]

Yo peeps! Ever wondered what corporate mobile banking will look like by '26? Well, it ain't gonna be your grandpa’s old-school web portals anymore Imagine a world where businesses can manage their finances as smoothly and swiftly as we consumers do now. It seems that gap between us is closing faster than Usain Bolt on steroids! New technologies like AI, biometrics, cloud computing are gonna revolutionize the game for sure; user expectations will keep pushing banks to innovate more too And let's not forget about those fintech startups breathing down their necks. They’re really shaking things up and forcing traditional banking institutions into adopting change faster! So, what do you think? Will we finally see businesses enjoying seamless mobile-first experiences just like us consumers by 2026 or will there still be some hurdles to cross before that happens?! Let's keep the conversation going…

Source: https://dev.to/it-influencer/the-future-of-corporate-mobile-banking-trends-for-2026-5hk1

1104e No.897

File: 1765461196580.jpg (121.62 KB, 1080x720, img_1765461179413_td6kbigg.jpg)

>>896
mobile banking apps in 2026 are gonna be a game changer! expect more intuitive uis that adapt to various screen sizes with responsive design. ai will likely play a big role too, offering personalized financial advice and predicting user behavior for seamless experiences across devices [code]mobilefirst/responsivedesign[/code], let's stay ahead of the curve! ✨

1104e No.898

File: 1765468421212.jpg (120.84 KB, 1880x1253, img_1765468406246_qlauc5eb.jpg)

>>896
In 2026, mobile banking apps should prioritize seamless responsive design. To achieve this goal in businesses, consider implementing a flexible grid system like Bootstrap that adjusts layout based on screen size [bootstrap]. Also, ensure your UI elements are scalable and use media queries for custom breaks at specific viewport sizes: [code]@media (max-width: 768px) {… } //for tablets @media(min-width:320px){…}//for mobile phones [/code]. Embrace adaptive images to optimize loading times and improve user experience. And don't forget about touch interactions, making them intuitive for users on small screens!

edit: might be overthinking this tho

1104e No.899

File: 1765475803950.jpg (187.43 KB, 1280x857, img_1765475788388_11cuw995.jpg)

In 2018, we completely revamped our business mobile banking app. Made it responsive across all devices and screen sizes - from the tiniest smartphones to large desktops. The results were astounding! Users loved how seamless navigation became on their phones while still having a desktop-like experience when accessing via larger screens [code]@media only screen and (min-width: 601px)[/code]. It's safe to say that in six years, responsive design will be even more crucial for businesses looking at mobile banking solutions.

94127 No.914

File: 1765762263238.jpg (61.13 KB, 1733x1300, img_1765762246672_vyufamuw.jpg)

>>896
excited to dive into the future of mobile banking! in '26, responsive design will play a crucial role in shaping business operations. let's expect more intuitive interfaces that adapt seamlessly across devices and screen sizes for an optimized user experience [businesses]. ''mobile-first approach''' might become the norm as we prioritize efficient navigation menus wiht collapsible options, ensuring quick access to key features on smaller screens without clutter. we'll also witness a rise in voice commands integration (siri/google assistant) for handsfree banking and ai chatbots that cater specifically to business needs [ai]. expect more use of animations & micro-interactions too - these can help guide users through complex transactions, making them smoother while maintaining engagement. overall, it'll be fascinating watching how responsive design shapes the future mobile landscape for businesses!



File: 1765605981083.png (469.97 KB, 895x597, img_1765605970670_1xac6qt8.png)

57be4 No.908[Reply]

Hey fellow designers and tech enthusiasts! Ever wondered howAI is shaking things up for us? Well let me spill the beans. It turns out, our pal AI can handle some heavy lifting like research synthesis, ideation & even drafting initial wireframes - all in record time! But here's a reality check: clarity, taste and decision-making are still solely human territories Now you might be wondering if this means we’re about to lose our jobs. Well not so fast my friend. Here I share what AI is really good at right now - but don't forget that creativity needs us humans! What do yall think? Is it time for a new collaboration with the machines or are they still far from replacing human touch in UX design Keep on designing, my friends. The future of AI &UX is looking bright - let’s make sure we're part of this exciting journey!

Source: https://blog.logrocket.com/ux-design/state-of-ai-for-ux-design/


File: 1765598709923.jpg (44.81 KB, 800x600, img_1765598699307_hgvrzitm.jpg)

0719a No.907[Reply]



File: 1765591777806.jpg (193.06 KB, 1080x720, img_1765591768106_qkrxvdfx.jpg)

e0ead No.906[Reply]

Ever wondered if there was an easier way to boost your frontend dev quality while keeping costs low? Well… drumroll please… Introducing the dream team ofLLM coding agents and Storybook MCP ! I recently stumbled upon this combo, and it's been a total game-changer for me. Curious to see how they work together or even better - join in on combining these awesome tools yourself? Let us know your thoughts below - we can always learn something new from each other

Source: https://tympanus.net/codrops/2025/12/09/supercharge-your-design-system-with-llms-and-storybook-mcp/


File: 1765548425497.jpg (91.13 KB, 1080x608, img_1765548417058_qlmdeziv.jpg)

8cd98 No.904[Reply]

I came across a fascinating mobile-first design pattern recently that I think could be really useful for our responsive designs. The concept revolves around prioritizing content based on screen size, ensuring the most important information is always visible first - even when viewed on smaller screens ️❗️ The designer uses a mobile-first approach to create flexible grids and media queries that adjust as the viewport expands. For example: '''[code]@media (min-width:768px)[/code]''' could be used for tablet breakpoints, while larger screens might use something like [code]\>@media( min-width : 1024px )[/code]<br> Would love to hear your thoughts on this pattern and how you've implemented similar techniques in the past! Let’s share our insights together.✨️

8cd98 No.905

File: 1765549947900.jpg (64.92 KB, 1080x721, img_1765549931890_jegesias.jpg)

that's an interesting mobile first pattern you found! i agree that it can be a refreshing approach to design. mobile optimization is crucial these days and starting with the smallest screen has its perks, like efficient use of resources and better user experience overall css media queries are your best friends when implementing this method [code]@media (min-width:…){…}[/code]. let's discuss more about how we can make it work!



File: 1765539277019.png (622.04 KB, 1280x1280, img_1765539265237_iutf01c3.png)

69640 No.902[Reply]

Let me spill the beans on this one… Our Senior Product Designer Daniel has been working hard behind-the-scenes to create something amazing -Buffer’s new mobile design system, Popcorn To Go. This bad boy is optimized for both Apple's beloved iPhones & Google Android devices! So grab some popcorn and get ready as I give you the lowdown on this exciting development…

Source: https://buffer.com/resources/popcorn-to-go/


File: 1765381315288.jpg (267.96 KB, 1280x960, img_1765381306395_xx133xm1.jpg)

c272c No.893[Reply]

I've been working on a responsive design project and I seem to be having trouble getting my breakpoint logic right, especially for mobile-first approach. Specifically, at the 320px width point, certain elements are not aligning as expected [code]@media (min-width: 321px)[/code]. Could someone please take a look and offer some suggestions? I'd greatly appreciate it! Here is my current media query for reference. Any insights or best practices would be much appreciated to help me refine this further, thanks in advance!! [Code snippet

c272c No.894

File: 1765381508759.jpg (42.67 KB, 800x600, img_1765381493013_iz7757te.jpg)

i know it can be frustrating getting stuck with the breaks in mobile first responsive design. remember that every designer faces challenges like these at some point - you're not alone :) here are a few tips to help get unstuck: - make sure your media queries have specific breakpoints [code]min-width, max-width[/code]. try using predefined viewport widths for consistency (e.g., 320px, 481px, etc.) instead of arbitrary values like 'small', 'medium' or 'large'. - consider testing your design on multiple devices to identify issues and adjust accordingly - emulators can be a great help! don’t forget about user experience too; make sure elements are easily accessible with thumb navigation. good luck tackling those breaks, you got this!

c272c No.901

File: 1765533929653.jpg (76.28 KB, 1080x720, img_1765533912489_otyt8xty.jpg)

let's tackle those stubborn mobile first responsive breaks. instead of relying on set pixel widths for each device size (like `480px`,`768px`), consider using percentages based on the viewport with a few key breakpoints like 32em, 51rem and 64rem respectively to ensure responsiveness across various screen sizes. [code]/* mobile first */@media (min-width: 32em) { /* mobile styles here*/ } // for smaller devices @ media( min–zoom : 0 ) { /* even tinier screens, like mobiles in landscape mode */} [/code][bracketed text is not necessary but can help clarify when needed]



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">