What is your strategy for building mobile-friendly sites?

Question

I always struggle with this. I'm capable of writing the css for a site to look good on mobile, and for it to look good on desktop, but I end up writing the whole site twice it feels like - the CSS is so different that there's no overlap. Even the mark-up has to be changed for mobile.I know there must be better ways of doing this. What are your techniques?

SavageBeast · Accepted Answer

I just use standard CSS 3 Media Queries. Sure there are frameworks and this is all Bootstrap and others are really designed to do. But if you're experienced enough a lot of things are just easier to "do it myself".
It's common to have for example, 2 versions of a button and use CSS breakpoints to hide one on mobile, un-hide a different one for the desktop etc. If you feel like you're re-writing the whole site sometimes you might go back and take a look at what you're really doing. In complex designs this can sometimes be the only real option but thats rare in my experience (if you're using Data Tables all bets are off ).
If you're not yet super experienced in this kind of thing nows a great time to learn it at a fundamental level. If you're just trying to get something done and shipped so to speak, about any predefined CSS ( Bootstrap etc ) is going to get you there faster.
This is a good place to start if you're going the CSS-myself route:
https://www.w3schools.com/howto/howto_css_media_query_breakp...

legrande · Answer

Rather than building from scratch and fighting CSS, I use Semplice[0][0] https://www.semplice.com/