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

[syntheid]

Hopefully this is helpful and not just... overwhelming, I find a lot of articles are focused on being web app designers so they get into a lot of things that you don't necessarily need to consider for making a new theme for a site you're not developing the code for, so I tried to just condense the things I thought would be relevant.

Most places encourage mobile-first design now, but if you want to make an existing design more mobile-friendly, the basic concept is just kind of to think about the smallest width the screen is going to be and think about how you would shuffle around elements to keep the most important content first. It's kind of adding extra work to each layout, because you have to consider at least 2-3 main sizes for every layout, and there's not really any way around that I've found to having to do that.

@media queries are the main tool you'll be employing to do it, so you're either starting with a big layout and telling it what to get rid of/move around at certain widths and below, or you start small and tell it what it can add/move around as you go up. What I found was there aren't really standard breakpoints people use unless they're using a CSS grid system, so you kind of just have to play with it yourself (Chrome's dev tools have a device view that will show you how it looks in different sizes/devices which helps with that) and see where it starts to look funky and you want to adjust how much space an image takes up or convert a column to a row/vice versa, etc. In small portrait sizes you almost never have more than one column because the text width needs to stay at a certain width to be comfortable to read. Columns typically rearrange themselves into rows for mobile.

In terms of DW, I'd say the priority would be to make sure the entries are the most prominent thing on the page for small screens/the header block isn't so big the user needs to scroll down to start seeing posts. Most mobile layouts either transform headers and menu items into drawers (pull down or pull out) activated by a hamburger menu or let it fall at the bottom of the content. It's easier to get fancy with pull-out menus if you can use JS, but it's possible to do with only CSS too (e.g. example and some other examples).

Other issues I see with a lot of DW layouts in mobile view are:

* the icons often stay on the side of entries, pushing the entries to have uncomfortably narrow column widths for text on a portrait-view on a phone.
* not taking into account people posting images larger than the width of the screen, which causes clunky side-scrolling. So do polls, but I haven't found much of a way around that one with the way polls display. This is technically just an issue in general but it feels especially bad on mobile. (Though adding max-width: 100% only works for display, as a layout designer it's beyond control to change the image size for bandwidth concerns in this case.)
* tiny interaction icons/links/fonts that should actually grow a little for smaller displays that use touch-activation. I've seen different numbers for the exact size, but interactable things need to stay around a 30-40 px square at minimum or it's difficult for people to accurately hit them with fingers/thumbs.

Other things to think about:

* use responsive image curating with srcset for things like headers and other images you're adding
* try to use rems or percents for sizing and positioning elements so they can grow or shrink to fill the size of the screen they're viewed on

[carisma_sensei]

Thanks! I'll have a look at everything you suggested and see how it goes... I'm a little scared but OH WELL :D

[filialucis]

I have no advice to offer, but is anyone else noticing that the "turn off mobile view for this device" checkbox is refusing to stay checked? Ever since the last code push, I think, I've been forced into mobile view on my phone. Since I've already tried twice to get support to address the issue and never received a reply on either occasion, I wonder whether this is intentional?

It annoys me because mobile view doesn't behave very well on my phone; I have to go into landscape view because the icons stay on the side of the entries in portrait, making for a ridiculously narrow text column.

[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.