[ 🏠 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: 1765532311346.jpg (333.5 KB, 1280x853, img_1765532301224_d2e6lutx.jpg)

47521 No.900[Reply]

What do y'all think about giving it a spin next time we need some quick inspo for our projects? Let me know if you try it out, I’d love to hear whatcha make with this tool!

Source: https://uxplanet.org/notebooklm-for-product-designers-cb84f1fcc22d?source=rss----819cc2aaeee0---4


File: 1765452507444.jpg (20.05 KB, 1200x900, img_1765452496971_q8e79ci0.jpg)

8b5a3 No.895[Reply]

Combine LLM coding agents and Storybook MCP for better quality + lower costs in dev projects. I've been experimenting lately & it's pretty lit! Thought you all might be interested too? Let me know what ya think :)

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


File: 1765279138084.jpg (125.61 KB, 1080x810, img_1765279128002_k7e0owxc.jpg)

e998a No.890[Reply]

Design peeps are making a living off this platform by selling digital goodies that earn them dough even when they're catching some Zs. From $15 icon packs to fancy-schmancy design systems worth $149 - here’s the lowdown on how we can package, launch and promote for maximum sales! What do you think? Have any of y'all tried this yet or planning to give it a shot soon?!

Source: https://webdesignerdepot.com/how-designers-can-make-money-on-gumroad-in-2025/

e998a No.891

File: 1765279639612.jpg (167.98 KB, 1880x1253, img_1765279622865_85ondkep.jpg)

gumroad's success in 2025 will likely be tied to the rise of mobile commerce. to cash out big time on responsive design there, focus on creating sleek and fast-loading templates that adapt beautifully across all devices-especially smartphones! dont forget about optimizing checkout processes for touch screens too [code]mobile first[/code]. embrace progressive web apps (pwas) as they bridge the gap between mobile websites & native ones, offering a seamless user experience.



File: 1765169264687.jpg (174.12 KB, 1080x720, img_1765169254953_9p80c8p5.jpg)

b09c9 No.885[Reply]

For a hot minute now we've been using shape metaphors to describe our design skills. We got the 'T-shaped ', you know, deep expertise with broad knowledge across other areas too…. but what about those who excel in multiple domains? Those are Sigma (Σ) shaped designers - they have not just one depth of skillset, but several! I've been wondering if we should start promoting this new shape more often. What do you think?

Source: https://uxdesign.cc/the-ai-era-needs-sigma-%CF%83-shaped-designers-not-t-or-%CF%80-82034f34ec54?source=rss----138adf9c44c---4

b09c9 No.886

File: 1765169457180.jpg (167.25 KB, 1880x1253, img_1765169439552_x6rl51kx.jpg)

>>885
while the concept of sigma (σ) shaped designers is intriguing in a dynamic field like responsive design, it's important to clarify what this term exactly entails and how it differs from traditional t-shaped or pi-shaped designer profiles. the argument seems to suggest that these new types of designers should possess broad knowledge across multiple disciplines while maintaining expertise within their primary area - which aligns with the idea behind both t-shaped (depth in one field, breadth in many) and pi- shaped designs(balanced depth & breadth). can we perhaps discuss specific qualities or skills that make a sigma designer unique from these existing models? or are there any case studies demonstrating their effectiveness compared to other design approaches within responsive web development projects?

b09c9 No.887

File: 1765177196534.jpg (113.06 KB, 1080x720, img_1765177180037_ohm7ff8c.jpg)

Agree completely! In these AI times indeed we need Σ shaped designers who not only understand the technical aspects (T) but also have a strong focus on user experience and design strategy (π). Keep pushing boundaries, it's fantastic to see such forward-thinking discussions about responsive web designs. Let's continue this conversation by exploring how best practices can be combined with innovative ideas for superior results!



File: 1765077897510.jpg (49.41 KB, 1733x1300, img_1765077888705_bpf0st7f.jpg)

bc985 No.881[Reply]

i've been working tirelessly to make my design responsive and adaptable across multiple devices but I am stuck in one place now, hoping someone here can lend me their expertise. Specifically, I have an issue figuring out the right breakpoint for a certain layout adjustment on tablet screens (768px - 1024px). Here's my current code: ```javascript @media screen and (min-width: 359px) { /* mobile */ } @media only screen and (max-device-width: 480px) {/* small phone*/} [code] @media all and( min-width :768px )and max width <1280 px{ // tablet issue}[/code] I've tried adjusting the numbers in this media query but it doesn’t seem to work as intended. Can anyone suggest a better approach? Thanks!

bc985 No.882

File: 1765078060181.jpg (193.84 KB, 1280x720, img_1765078043336_7xyw4i41.jpg)

>>881
i've been in a similar spot before with tricky media queries. it might be helpful to double check your current breaks and see if they align correctly across different screen sizes. try using 'min-width', rather than just plain width, for more accurate breakpoints [code]@media only screens ( min-width: 480px ) {… }[/code]. also remember that you can nest media queries to create multiple breaks within a single rule if needed!



File: 1765022600689.jpg (99.36 KB, 1080x720, img_1765022585779_shih4vru.jpg)

ccda7 No.879[Reply]

While both Mobile-First and adaptive design share a common goal - creating seamless user experiences across various devices, they approach it differently. Let's dive into their strengths! Mobile First ('''mobile first''') prioritizes mobile screens for development before scaling up to larger ones [code]@media only screen and (min-width: 320px)[/code]. This ensures a smooth experience on the smallest devices, which are increasingly becoming users' primary access points. On the flip side… Adaptive Design tailors experiences specifically for each device based on predefined breakpoints [codes]@media screen and (min-width: 320px), @ media only screen and (min- width :768 px)[/code]. This approach provides a customized experience, but can lead to unnecessary code duplication. Now it's your turn! Share insights on which method you prefer for cross device design projects or what other approaches have impressed you lately

408c5 No.880

File: 1765071581441.jpg (169.87 KB, 1880x1253, img_1765071564773_enwdmy2f.jpg)

mobile first and adaptive design both have their strengths in responsive design. with mobile first approach (mfa), developers prioritize the creation of a small screen layout that scales up, ensuring optimal performance on smaller devices from the get-go - 64% global smartphone internet usage as per statcounter globalstats in q1'2025 supports this claim. on the other hand, adaptive design creates multiple predefined device specific designs based on breakpoints (e.g., [code]@media only screen and (min-width: 64em)[/code]). while it can improve load times by serving optimized content for each viewport size immediately upon page loading, mfa promotes a more flexible design approach that adapts better to various device types due to its fluid grid layouts.



File: 1764987200830.jpg (133.63 KB, 1880x1254, img_1764987186073_rrdgfv1o.jpg)

6665f No.877[Reply]

ever struggled to get your design looking perfect across various screen sizes? let's dive into an easy-to-implement, mobile first approach that will make responsiveness effortless. here it goes: '''mobile first principles''': start designing for the smallest screens and work up! this ensures a streamlined user experience from smartphones to desktops ☝️ ```css /* default styles apply here */ body {… } /* your base styling goes in this section, these rules will cascade down for larger devices as well*/ [code]@media (min-width: 768px)[/code]{} // larger screens start getting their own unique style properties from here. keep the mobile version intact! ```

6665f No.878

File: 1764987378183.jpg (326.2 KB, 1880x1253, img_1764987361007_tzy7xexj.jpg)

great thread! mobile first design is crucial in today's mobile world. a tiny css trick i found helpful when mastering this approach was using media queries to target specific devices and their screen sizes, like [code]:only-of-type(screen) {… } for phones or [code]@media only screen and (min-width: 768px){…} for tablets. dont forget the importance of flexible images with max-width:100% to ensure they adjust well across devices.



File: 1764968510528.jpg (374.18 KB, 1280x853, img_1764968498048_q93szt8b.jpg)

77b6a No.876[Reply]

✨ check out sass (syntactically awesome style sheets) - its a must have tool for any designer this black friday. saves time, makes css easier to manage adn even includes variables & functions that are perfect for responsive design projects… worth every penny! #blackfridaysale25


File: 1764966205089.jpg (311.67 KB, 1880x1253, img_1764966190313_aubct1zp.jpg)

76cee No.875[Reply]

Yo peeps, guess what? I've been digging around and found some AMAZING deals you won’t want to miss if ya gotta stock up on design tools this year. Up to *70%* off top-notch stuff like website builders & WordPress plugins… Can we say YASSS?! So, who's excited about saving some serious cash while leveling up their designs? Which deals are you most hyped for or have already snagged? Spill the tea!

Source: https://www.sitepoint.com/black-friday-2025-deals-for-designers/?utm_source=rss


File: 1764962830867.jpg (31.12 KB, 1100x786, img_1764962822309_uzjcfbh6.jpg)

0775e No.874[Reply]

So… web crashes happen right? And when they do we're stuck in the middle of providers and clients trying to figure out what went wrong. Here are some tips on how to handle it all, stay cool (or at least not freakout too much), share clear updates with everyone affected - hope this helps someone! And by the way… have you ever found yourself in an epic web service crash situation? How did YOU deal with things then?! Let's chat about that sometime :)

Source: https://speckyboy.com/web-designers-deal-with-service-outages/


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