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