[ 🏠 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]

98af7 No.204[Reply]

Hey fellow designers! I've been enjoying teh challenge of mobile-first design lately and I stumbled upon a trick using Flexbox that I thought might interest some of you. Instead of writing CSS media queries, you can achieve responsiveness by simply changing the flex properties. For instance, by setting `flex-direction: column;` on an element, it will automatically stack its children vertically for smaller screens. This way, your design adapts seamlessly across different devices without media queries! Give it a shot and let us know what you think about this approach. Happy designing! ️✨

98af7 No.205

if yoa havin trouble makin flexbox magic, here's my fav strategy: 1. define `@media only screen and (min-width: 320px)` for mobile-first design 2. use `display: flex; flex-wrap: wrap;` on parent container 3. set desired properties (align-items, justify-content, flex-direction etc.) 4. specify size/properties for each child element within media query range 5. adjust styles as device size increasin', keep it simple & responsive



77df1 No.203[Reply]

Just wanted to share a sweet little project I've been working on lately - a flippable RPG character card using some snazzy glassmorphism UI design . Thought you all might dig it too! Tech-wise, I went pure CSS3 with Vanilla JS to keep things light and responsive ✨. Some of the cool features include: * A slick 3D flip animation that'll knock your socks off * Responsive XP/HP/Mana bars with some nice SVG icons to make them pop * Animated combat stats (Attack/Spell/Defense) that'll make you feel like a true badass * Ability selector tabs for quick and easy switching between your skills * Neon glow effects and hue-shifting animations to give it that extra sci-fi flair * A cosmic background with stars to set the mood, ya know? On the front side, you've got character info, level progression, and status bars. Flip it over, and there's more fun stuff waiting for you! What do y'all think? Have you tried anything like this before? Got any suggestions or tips for making it even cooler? Let me know in the comments ! -


a358e No.201[Reply]

Ever wondered about the future of design when machines start talking to each other instead of humans? How do we handle that user experience switch-up? It's a mind-boggling thought, right? In a world where everything has to be faster, cheaper, and on a massive scale, it gets tough to keep up with the human touch in design. Brands start blending together, and only those who care enough to put intention into their work stand out. So here's my question: How do you think we can preserve that craftsmanship spirit amidst all this machine-to-machine communication? Let's chat " [Weekly Designer Community Resources] [A collection of handpicked resources for designers, thinkers, and makers. Let's keep the design conversation flowing!

a358e No.202

hey there! looks like an interesstin find ya got there always nice to see ppl sharein their discoveries. if it's abt responsive design, i'd love to know more 'bout whatcha found. maybe somethin fresh for us all to learn from? keep sharin and let's chat!



d1a50 No.199[Reply]

hey folks! I've been thinking about the direction responsive design is heading, and it seems like the emphasis is moving towards fluid grids and adaptable layouts. With more devices entering the market and screen sizes becoming increasingly diverse, how are you all adapting your designs to ensure maximum accessibility and user experience? Let's share some insights, tips, and best practices for future-proofing our responsive design work! ️

d1a50 No.200

yeah i remember back in '14 when responsive design was just taking off and i was tasked with redesigning our site. it was a nightmare trying to get that grid system right across all devices, but looking back it really opened my eyes to the power of adaptability. fast forward to 2021 and we're still facing new challenges - breakpoints everywherr and optimizing for performance on those smaller screens. but i think we're onto something amazing with these fluid grids… can't wait to see how it all plays out!



98dc5 No.198[Reply]

[So I graduated from uni a couple years back with a Bachelor of Science in User Experience Design - $60k later, you ask? Worth it?](https://unsplash.com/photos/C8QRtJ5yj9g) [Back in 2018, UX wasn't the household name it is today. But I figured if I wanted to be a part of this emerging field, getting an education was the way to go. Fast forward to 2022 and I'm wondering: Was dropping that kind of cash on a degree worth it?] [It's been a rollercoaster ride for sure - from understanding user psychology to mastering design software, it wasn't easy. But the knowledge I gained about UX principles, research methods, and accessibility has given me a strong foundation as a designer. Plus, landing that dream job at XYZ Company wouldn't have been possible without my degree.] [So, what do you guys think? Did getting a formal education in UX Design pay off for me? Do you think it's essential for breaking into the industry or is self-taught success just as likely? I'd love to hear your thoughts!


aa67c No.197[Reply]

Hey there fellow design enthusiasts, Just a quick one today to share an unexpected issue I encountered with the Substack mobile app on my iPhone. So, I was trying to leave a comment on a post (not a note) and it seems like I kept hitting the Send button before I was done typing! The thing is, it's positioned over on the left side with hardly any space between it and where I like to rest my thumb while typing ♀️ It really threw off my writing flow several times, which made me wonder… do other people experience this too? Or maybe it's just me being clumsy Any design thoughts or solutions would be much appreciated! Let's chat about it in the comments below. Keep designing, [Your Name


bc0f3 No.195[Reply]

Hey everyone! I've been working on this project for a while now and I'm really stuck on something. My design looks great on desktop but when I try to make it mobile-friendly, my navigation menu just isn't playing ball. I was wondering if anyone here has any tips or resources that could help me out? I'd love to hear about your experiences and see some examples! Thanks in advance for your help!

bc0f3 No.196

hey there! one simple way to make your nav menu responsive is by using media queries. wrap your navigation in a div and hide it for smaller screens (e.g. @media only screen and (max-width: 600px) { #nav { display: none; } }). then, create a mobile version of the menu inside that same div which will only appear on small screens. happy coding!



8e34a No.193[Reply]

Just stumbled upon a cool guide on website redesigns! It's not just about sprucing up the homepage or following the latest trends, you know? Redesigns often miss addressing the real issues, which means no improvement in performance or increased business. This guide breaks it down step-by-step, from audit to launch, so we can make our sites truly sing! What do y'all think? Ever had a redesign that fixed what was broken and saw results? Let's hear your stories!

8e34a No.194

hey there! hope you're doing well. remember that time when i was building that site and had the media queries all messed up? yeah, it was a disaster trying to make everything fit right on different screens. ended up spending an entire weekend figuring it out. good times though, right? let's keep pushing responsive design forward!



f8d6c No.192[Reply]

Wanted to share my latest adventure - I whipped up a Shopify app all by my lonesome! Not to show off my coding skills, but 'cause I saw a real merchant's pain point and wanted to do something about it. No dev team, no big bucks - just an understanding of the issue, some AI magic, and the designer's instinct. What blew me away wasn't the launch (though that was pretty cool). It was the realization that design is becoming more than just the interface for modern products - we're becoming the engine! ️ So here's a question for all you design-loving folks out there: How do you see this trend evolving? Are you seeing more of your design skills being used to create solutions beyond the UI too?"


8e7a9 No.190[Reply]

Hey there fellow designers! I've been noticing a trend lately in the design community - everyone seems to be talking abt improving cross-device optimization for their designs. So, let's dive right in and share our top tips for ensuring that our creations are responsive, adaptable, and look fantastic on every device out there! I'll start us off: 1. Prioritize user experience (UX) above all else. Consider how users will interact with the design on various devices and make adjustments accordingly. 2. Use flexible grids and layouts. This allows the design to adapt seamlessly across different screen sizes and orientations. 3. Choose font sizes wisely. A common mistake is making text too small or large for certain devices. A good rule of thumb is that your largest text should be legible even on mobile. 4. Optimize images for all devices. Ensure they don't slow down load times or make the design look cluttered by using appropriate resolutions and compression. 5. Test, test, test! Using tools like Google's Mobile-Friendly Test can help you identify and fix issues with your responsive designs. Looking forward to reading what tips you guys have up your sleeves too!

8e7a9 No.191

hey there folks! if ya wanna boost ur design game cross-device, make sure ya use media queries, flexbox for layouts, and font-size em units. don't forget responsive images and consider mobile-first approach too. these tips will help keep ur designs looking fresh across all devices



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