Mastering Responsive Design: Mobile-First Strategy InsightsMastering Responsive Design: Mobile-First Strategy Insights
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Alice's avatar
Alice D.
• 1d
Quick note on my process for Design. ID:
Responsiveness was one of my first concerns when I started building. A project like this lives on social media; people share it on their phones, so getting the mobile experience right wasn’t optional, it was the whole point.
The biggest decision was screen 2. 
On desktop, it has everything in one place: avatar selector on the left, form on the right, and the character in the middle. It works because there's space for it. 
On mobile, that same layout just didn’t hold up, so I split it into two dedicated screens. One for picking your character, and one for filling in your details. Same content, same flow, just given the space it actually needed to breathe.
The same thinking applied to smaller details too.
On desktop, the button below the ID card downloads your card as a JPEG.
On mobile, that same button opens the native share sheet, so you can save it straight to your camera roll or drop it in your stories without any extra steps.
Same button, same output, different behaviour depending on how you are using it.
Check my original post:  https://on.contra.com/TmqH6L
How did you guys approach responsiveness on your builds? 
ommabysplinebuildathonSpline
Post image
Post image
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started