Backoffice (Bellissima) is not supported on mobile devices

[Marcin-Niznik]

Which Umbraco version are you using? (Please write the exact version, example: 10.1.0)

14.1.0

Bug summary

I have discovered that backoffice does not work on mobile. I was using mobile emulator on google chrome and compared against v13. Umbraco 13 did work while v14 didn't.

Specifics

No response

Steps to reproduce

• dotnet new umbraco
• dotnet run
• go to umbraco backoffice on a mobile device (or use device emulator in browser)
• observe issues with backoffice

Expected result / actual result

Expected:
I can create, edit, delete content
Actual:
Veritical scroll doesn't work, save button out of the view port etc. - All in all, not supporting mobile

[github-actions[bot]]

Hi there @Marcin-Niznik!

Firstly, a big thank you for raising this issue. Every piece of feedback we receive helps us to make Umbraco better.

We really appreciate your patience while we wait for our team to have a look at this but we wanted to let you know that we see this and share with you the plan for what comes next.

• We'll assess whether this issue relates to something that has already been fixed in a later version of the release that it has been raised for.
• If it's a bug, is it related to a release that we are actively supporting or is it related to a release that's in the end-of-life or security-only phase?
• We'll replicate the issue to ensure that the problem is as described.
• We'll decide whether the behavior is an issue or if the behavior is intended.

We wish we could work with everyone directly and assess your issue immediately but we're in the fortunate position of having lots of contributions to work with and only a few humans who are able to do it. We are making progress though and in the meantime, we will keep you in the loop and let you know when we have any questions.

Thanks, from your friendly Umbraco GitHub bot 🤖 🙂

[NguyenThuyLan]

This could be an issue with Responsive CSS

[abdelrhmanehab10]

if it as simple as that, why they can't solve the problem?

[madsrasmussen]

Hi @Marcin-Niznik

Thanks so much for your report! I completely agree that we have some room for improvement in the mobile experience 😃. I will turn this into a discussion until we have some clear action points.

[kasparboelkjeldsen]

Just jumping in here with a quote from @iOvergaard about Bellissima and mobile (from a question about Bellissima on mobile)
"We don't support the backoffice on small resolutions and/or touch officially, but happy to receive contributions towards better support in this area"

And @nul800sebastiaan "Just FYI: we have never focused on it, the answer has always been a variation of this 10921"

https://discord-chats.umbraco.com/t/23079886/bellissima-on-mobile

I was quite surprised to learn that mobile support, not only wasn't a priority, but officially not supported, as we've been advitising it as a feature of Umbraco since at least Umbraco 8.

[jdpnielsen]

Totally agree.
I understand not having a perfect/custom mobile experience - it can be hard with a complex interface. But basic mobile support should be a target in my opinion. At the very least the minimum supported screensize should be mentioned somewhere.

[karlmacklin]

I'm not here to throw any stones or complain as I understand this has not been a priority and things take time. But I want to inform about our (a digital agency's) perspective on this.

This is such an important issue to the level where we have to move away from Umbraco on upcoming projects for several of our clients that expect at least a usable experience, if not perfect.

In certain mobile browsers you can use a "simulate desktop" mode sort of, and on Brave on Android for example this actually makes it usable when you zoom in/out. On Chrome on iOS this mode weirdly enough does not help - you're still stuck in a zoomed in view with things out of bound and not scrollable.

[bjarnef]

I agree it would be great to have a bit more focus on this. It doesn't have to be perfect, but it would be great to be able to navigate back office and doing some basic content updates, e.g. one may want to fix a typo noticed in content.

When Umbraco 7 came out and revolutionized the back office back then, it was a focus that it worked on tablet devices.
Since then I think it lost focus (or wasn't prioritized as much).

It was also a main focus I had when I built the color picker in the Umbraco UI library that it should work from touch devices.

As as start it would be great to ensure the back office is responsive and the sections, trees, dashboard are possible to navigate. It probably isn't easy to make Block Grid work on mobile devices, but many simple properties would be able to work.

Sometimes I also browse websites enabling desktop mode in Chrome for Android if the website doesn't fully work in mobile view.
https://support.strongvpn.com/hc/en-us/articles/1260802818350-How-to-Enable-Desktop-Mode-on-Android-Browsers

[karlmacklin]

Regarding enabling desktop mode, for some reason this is not helping in Umbraco 14+ backoffice specifically for iOS users, either Chrome/Safari. For me on Android it's a usable workaround, but I've had two of my iOS using colleagues try this and for some reason you always end up not being able to reach important UI elements, or no difference vs not enabling desktop mode.

Usable, not necessarily perfect, would be a good aim for the backoffice's mobile support!

[nul800sebastiaan]

As we talked about yesterday, currently the biggest problem is that the buttons in the footer are not shown, neither in mobile or desktop mode, that prevents you from saving anything. This was on Android but I assume exactly the same on iOS.

We'd be super happy for a PR or two to at least get that fixed, currently it's not something we'll be working on soon, so if someone were to figure out this specific problem then that would help a lot already!

[karlmacklin]

My fixing-fingers certainly are itching for this, I will try to push our planning to allow for someone to look into this but no guarantees at the moment.

[Luuk1983]

I don't think it's weird to have a relatively complex application like a CMS to have certain requirements for it to work, like a certain minimal resolution, browser version etc. Anything that's outside of these requirements and works is a bonus.

I know we're doing more and more on our phones, but for some things it's just not very practical. Having said that. It would be nice if at least the very basics would work on a phone, so that in worst case someone could do a quick emergency edit.

But looking at the state of Umbraco 14+, I really don't want any priority on this since there are still a lot of things not really ideal. Fix those first, then look at this as a nice to have.

[GerardoGala]

I've spent 7 weeks learning Umbraco and I enjoyed the experience. Unfortunately, my clients insists on mobile-friendly backoffice. They want to able to write a blog using their cell phone. They're able to do that in Facebook now. Why not in Umbraco?

Accorcing to Google:
Globally, mobile devices significantly outnumber laptops and desktops in terms of internet usage. While a large portion of the world's internet users access the web via mobile phones (around 98% in the third quarter of 2024), only about 58.3% use laptops or desktops. In terms of web traffic, mobile devices also dominate, accounting for around 62% globally, while desktops account for 36%.

Please...please make Umbraco backoffice mobile-friendly. Thank you!

[Luuk1983]

I've spent 7 weeks learning Umbraco and I enjoyed the experience. Unfortunately, my clients insists on mobile-friendly backoffice. They want to able to write a blog using their cell phone. They're able to do that in Facebook. Why not in Umbraco?

Accorcing to Google: Globally, mobile devices significantly outnumber laptops and desktops in terms of internet usage. While a large portion of the world's internet users access the web via mobile phones (around 98% in the third quarter of 2024), only about 58.3% use laptops or desktops. In terms of web traffic, mobile devices also dominate, accounting for around 62% globally, while desktops account for 36%.

Please...please make Umbraco back-office mobile-friendly. Thank you!

Not saying this is THE solution, but because of the management API you would be able to create a specific 'backoffice' for the specific purpose of writing blogs for instance.

[GerardoGala]

Umbraco should be mobile-friendly for Editirs out of the box. This would propel Umbraco to the next level.

Wix comes with Wix Editor for mobile device.

[bjarnef]

I agree the mobile experience could be better although it would probably not work well with Block Grid., but I don't think it is a main focus from Umbraco HQ at the moment as there are much else to do with the new backoffice.

I recall this mobile app from the past to manage content in the CMS:
https://our.umbraco.com/packages/backoffice-extensions/umobile/

As @Luuk1983 mention with management API something similar could be done. Perhaps it doesn't need to manage all data available to edit from CMS, but focus on content and perhaps media. Or perhaps one wants/needs only a specific part of contents to be editable from mobile.