How to make layouts mobile responsive

[carisma_sensei]

Hi! It's quite obvious that, nowadays, everyone uses their mobile phones to browse websites most of the time, at least when they are out. I've been told my layouts are not mobile responsive, which is true and I knew, but I've been wanting to try my hand at this for a while and so I'm asking, how can I go around doing that? What do I have to know, which tutorials or documentation would you suggest me reading? The styles I use mostly are Transmogrified, Tabula Rasa and Practicality.

Thanks!

Comments

[marahmarie]

I know this is rolling in late (I've been taking a break from communities so only saw this just now) but the nice thing about Dreamwidth is mobile view's already built into the hard-coded base layer of our DWs, so (at least in non-site scheme) most of the work is done for you, it's just a matter of adjusting it to taste, since DW's breakpoints, as syntheid touched upon in discussing icon placement and other issues, are not always ideal, and often won't work with certain design/flow choices made in custom CSS.

DW does most of their mobile view CSS top-down: that is, they start designing for smaller screen sizes from the largest (practical) screen size, on down to the smallest, so you'll see something near the top of their CSS like (this is not, afaik, an actual live example) #content {border-right: 30px transparent}, which actually tells the browser to start narrowing the content column width when the screen size starts meeting that transparent border.

There's been a lot of fuss in design communities about the "right way" to do our media queries, with top-down winning almost every time simply because there's a lot of pedantry out there. From a technical standpoint (bandwidth usage/page-load times, etc.) it doesn't much matter, so I'd say code it either way, but incorporate as much top-down CSS as you can to minimize your own work in having to make any bottom-up adjustments. It just saves time and aggravation.

If you look at my custom media query CSS you'll see I mostly did it bottom-up. When I started making my own media query adjustments (maybe 4-5 years ago?) there was no fussing over which way to do it because bottom-up was really the only way most people did it back then (and is easier to pull off if you're just easing into media CSS, as I was). In the ensuing time I've added a few adjustments (and compromises) to the main (non-media query) CSS just so I don't have to write, maintain or re-work the bottom-up code every time I want to change the style.

I hope any of that helps, at least somewhat.