Responsive QR Code Component with HTML and CSS
Design comparison
Solution retrospective
Read somewhere that it's best practice to be designing first for mobile then making sure that it's responsive to other device screens. Is this true and how would one go about doing it? This is because I still have a bit of a problem with the @media and screen and the like.
Community feedback
- @ryanbradley-webdevPosted about 1 year ago
I believe that mobile-first development is definitely a smart choice. To add on to what Jordan said, I've found that developing for small screens first will also help you avoid headaches down the road. Think of it as adding complexity vs trying to tame complexity. Mobile designs are usually much simpler and more linear in their flow, whereas desktop layouts are usually laid out in grids and columns and have much more intricate designs. It's much easier to start simple and add on to a mobile design as you expand your layout than it is to try and remove elements from a complex desktop layout. At least most of the time that's been my experience.
I hope this helps!
Marked as helpful1 - @JordanMartinWebDevPosted about 1 year ago
In general, yes. There are a couple of reasons for this. First, mobile development has the most constraints for viewing due to the limited space. Second, mobile UI/UX tends to be more streamlined. By focusing on it first, you also have determined what information is crucial and what information is useful, but not 100% necessary. There are other reasons as well, but in general...mobile is a massive market, so making sure things work there first is extremely important.
Now...to give a bit of the inverse perspective from working in the industry. Some applications have literally NO mobile presence. I've worked on applications that the smallest screen it's used on is a surface tablet. So in some cases, at least in industry work, you may not have to make something for mobile at all. But this isn't the standard, and thus why mobile first is taught very heavily.
Marked as helpful1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord