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.

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:

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.

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.

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:

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.

First of all thank you for all the interest in this “Frio” theme scheme. I was concerned that people might have so much animosity toward Meta that a scheme to make Friendica look more like Facebook would be ill received. I originally made “Bookface” as a user content script just so I would feel more “at home” on Friendica. And I’m still using it that way myself because the instance I’m on does not offer this scheme as an option yet.

Version 1.3 represents a massive rewrite with the introduction of new features, like support for Profile Cover Photos and an “Auto” version that can detect if your operating system is set to Light Mode or Dark Mode and automatically apply the correct mode to Friendica, plus a completely New Mobile View for phones and tablets that aims to make it look and function a lot more like an mobile app. The user content stylesheets for client-side use have also been updated with the same changes, if that’s how you use Bookface. I have incorporated a ton of your feedback into this update, which I thank you for! There are also over 30 tweaks and fixes in this update.

While this is still a work-in-progress (but what on the web isn’t?) Bookface is already being used in production on some Friendica instances so I’d say it’s generally probably safe to use, but there could be issues I haven't anticipated, particularly with whatever add-ons are enabled on any given server.

Keep in mind “Bookface” is intended for recent browsers. By which I mean those that were released in the last year or two. Because I want to leverage some of the more advanced things CSS can now do. But if you have a mobile device that’s stuck running an old browser I’ve added some fallbacks so it’s still at least usable, but I’ve intentionally ignored any browser that nobody should really be using anymore for anything (like Internet Explorer). Presumably if you choose to roll with retro gear you probably don’t care about making Friendica look modern anyway.

I’ll do more detailed posts about each of these new features, but here’s an overview:

BETTER MOBILE MODE!

You may have noticed there isn’t an “official” Friendica mobile app and the webapp feels pretty clunky and outdated. You could, of course, use Relatica or Raccoon for an actual native mobile app experience, but I’ve notice a lot of people (myself included) are trying to use the webapp. And it needs improvement.

I redesigned the mobile view to look and function a lot more like people expect a mobile app to work these days. One specific thing that was asked for was a way to get the toolbars out of the way in landscape mode, particularly on phones with small screens. The mobile landscape view now hides the toolbars and presents you with a limited set of buttons down the left and right sides of the screen if, in landscape orientation, the viewport is less than 400 pixels high. That’s going to be the majority of phones on the market today. Need more controls? Just rotate your phone back to portrait.

I’ve extensively tested this new UI on more than a half a dozen actual mobile devices, including an iPhone 5s, iPhone 8, two different recent Samsung phones, and older iPad Mini, two Android tablets, and two old Android phones.

EDIT: Post with more details about the new Mobile UI

AUTO VERSION!

More than one of you specifically asked for a version that would automatically switch between Light or Dark depending on which mode you have set on your device. It was tricky to implement given all the colors that are set server-side in PHP variables, but I came up with a pure-CSS way of doing it. It doesn’t even need to set a browser cookie. Enjoy going over to the Dark Side. Or Light Side. Whichever.

Unfortunately there is no auto version of the user content stylesheets for the client-side. The client-side styles require the underlying “Frio” theme be set to Light, Dark, Black, or Custom (which is based on Light). There is no way for a client-side stylesheet to automatically switch the server-side theme scheme, so there will never be an auto version of the user stylesheets.

LOCALIZATION & CUSTOMIZATION

Under the Settings > Display > Theme Customization options you could previously only set the Accent Colors. There was a "Link Color" box below that but it didn't do anything. Well, now it does. You can set almost any color you please ("almost" because it does error-catching to make sure you don't set it to the same color as the background).

I’ve moved as much as possible into CSS variables at the top of the stylesheets, so modifying Bookface to your liking is easier than ever. Just change the variable in that one place and everything else follows suit.

One thing in particular I’ve noticed from people’s screenshots is the engagement counts on Action Buttons being changed to match the button color or made black, etc., to make them less distracting. Personally I like them being in my Accent Color so I can quickly see which posts/comments are getting engagement and check them out. But I can also understand that all those colored “dots” could be distracting while scrolling. So I added CSS variables for “count-color” and "count-bg" that let you change the engagement count tex and background color to whatever you want.

But I took it beyond just the colors. Bookface sets a bunch of labels as pseudo-elements, and they are in English because that’s the only language I know. I saw a comment the other day from a German user on a German server that has implemented Bookface note that the labels were in English and thought they should be localized. Well, yes, they *should* and now I made it super easy for server admins to do that!

Just change the CSS variables for the labels at the top of the stylesheets to your language!

COVER PHOTOS!

Every other social media platform seems to have a “Cover Photo/Header Picture” for your profile page. But not Friendica. 🙁 Until now! You can add images to your profile description and/or custom profile fields. You can also put things inside “class” containers. So I coded Bookface to detect a class container named “coverphoto” and treat whatever image(s) are in it as your big, bold cover picture.

You can also decide, depending on where you place it, whether it’s only visible on your actual “Profile” page or if it’s visible on all your profile pages, or if you want to show different cover photos on your profile and the other profile pages. If you’re really indecisive you can place up to 4 images in the container and Bookface will turn them into a striped collage.

As for what that looks like to other people who aren’t using Bookface? Well, they still see a thumbnail of your image(s) in your profile, it just won’t look really cool to them.

EDIT: Post with more details about Cover Photos

PRETTY TAGS!

What is social media without hashtags right? And it’s cool that in the Fediverse you can follow a hashtag like you follow a person. But Friendica’s tags look...kinda bad. A bit distracting. Too small. Too hard to read. And some people really go wild with a wall of tags in their posts. I’m apparently not the only one who thinks they could use some improvements. There are discussions about this in Friendica’s GitHub issues going back several years.

First of all, I don’t think we need the little lightning bolt or person icons on them anymore. It’s 2025, people know what a tag and a mention are. I also replaced the “(x)” on categories with an “X” icon. Next I made the tags the same size they are on Mastodon, which is also makes much better touch-targets on mobile devices. To make them less distracting I gave them an “open” design, and recoded them so only the tag you are hovering/focused on switches to a “filled” design. For consistency I kept similar colors to the existing “Frio” tags, but adjusted them for better contrast against either the Light or Dark mode versions.

The image shows how the tags appear in both Light and Dark modes and against the different background colors for posts and comments. The first row for each background color is how they normally appear, the second is the rollover effect when you hover on them.

GO GET IT!

12 Feb 25: LINKS BELOW UPDATED FOR VERSION 1.4

Server-side: If you run a Friendica instance.
Bookface v1.4 Scheme Files (gitlab.com/randompenguin/bookf…)

Client-side: If the Friendica instance you're on doesn't offer Bookface.
Bookface v1.4 Userstyless (gitlab.com/randompenguin/users…)

Everything is well-documented in the README files.

Pygoscelis Papua

2025-02-12 20:58:00

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.

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:

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.

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.

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:

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.