Skip to main content


Bookface Mobile UI


The mobile UI has been completely reworked to look and act a lot more like a modern native mobile app. It is not a native mobile app, of course, and there are limits to what I can do with just re-skinning the website. But I hope people like it and find it easier to use.


Mobile View light mode portrait and landscape orientations.

Mobile View dark mode portrait and landscape orientations

The Channels overflow and other drop-downs, along with the Notifications Menu now pull down to fill the screen, as one would expect them to do on a phone.

For those who aren't using Frio, or at least haven't used it on a mobile device, here's a side-by-side comparison of Frio Light with Frio Bookface Light:

Side-by-side comparison of default Frio mobile vs Bookface mobile

One piece of feedback I received was about how much of the screen was taken up by the toolbars in landscape orientation on phones. I was asked if they could be hidden or something. Well, yes, they can be and something. The landscape view now hides the toolbars and limited controls are shown, pushed out to the left and right sides.

diagram explaining the limited controls in landscape orientation on small screen devices

The normal number of controls includes a logo button to the home page, your profile pic to open the main menu, a sidebar button, and the search button.

The maximum number of controls adds the "Compose" button, a scroll-to-top button, and a bulk-delete button. On search screens the “Compose” button is replaced with a “Save” icon, to save the search/follow a tag.

screenshot with markup showing how mobile buttons with labels spill off the screen and push other elements out of alignment

You may have noticed that the Action Button labels disappear on phones in portrait orientation. This is because, if all possible buttons are being shown, there simply is not enough room to also have labels under each of the buttons. They spill out the right side of the posts!

Initially I thought about just targeting button bars that had too many buttons and not show labels in that circumstance, but it made the UI inconsistent and, frankly, like something was broken. There was also no way to differentiate a button bar with all the buttons from one with fewer on older browsers. So the best solution was to just hide the labels in portrait for all phones.

I tested this mobile layout extensively, not just in emulation but on a number of actual devices including: an iPhone 5s, iPhone 8, an old LG phone, two recent Samsung phones, an iPad Mini, and two 7” Android tablets.

Tablets may get the phone UI or a "hybrid" UI in portrait mode, it really depends on the viewport size. Here's a screenshot of what it should look like on an iPad Air in portrait orientation:

Emulation of iPad Air in portrait orientation

On my iPad Mini, however, I get the phone UI in portrait because the viewport is 768x1024. Also, my iPad Mini is stuck on an old version of iOS which means the Safari Mobile browser on it doesn't understand newer CSS things like ":has()" so it doesn't drop Event response buttons to a second row even in landscape orientation (where it gets the Desktop UI) so it just shows them in a column, which looks a little weird but at least the buttons don't mess up the layout.

Obviously this is not as good as having an actual native mobile app, and it still has all of the performance issues the Friendica progressive web app and "Frio" theme have. I just gave it a facelift and pushed some buttons around. The HTML for the Friendica "Frio" theme is pretty code heavy because it needs alternatives in it and javascript-triggered stuff so older browsers and devices can use it. If it were focused on only targeting current browsers and devices I think the code could be streamlined considerably. And I may tackle the templates next, if I can find the time and energy. In the meantime you've got the Bookface scheme.

However, if what you really want or need is an actual native mobile app, you could try Relatica or Raccoon.

This entry was edited (3 weeks ago)