Hi. I created a phone version on my site using old Muse "add alternate layout>phone" way, so with fixed breakpoints at 380. I used an image that is bigger than that size and added some text using a system font.
When I see the site on any phone, both the image and text look pixelated, in portrait and landscape mode.
I've also tried adding the image in various sizes, even the exact size and in .png .gif or jpeg at very high quality without any luck.
If you want to take a look, the url is this: Gimnasios equipados | Opengym
I would appreciate any suggestions. I don't want to switch to fluid breakpoints because I would need to re-accommodate everything.
Hey @mkpena, the thing is you're probably working with standard resolution file in Muse. Displays in Mobile Devices are usually retina or HiDPI and they apply scaling to your assets, that is why they look blurry. To understand this issue better, you can check out: Screens Essentials for UI Design - YouTube
The solution is, instead of Standard resolution, in Site Properties you'd need to select the HiDPI version (File > Site Properties). Please note that you will than have to import 2x size images into Muse, and that they can load slower.
Hope this helps,
If your issues remain, please give us
Use a file sharing service to share these 2 files by following these instructions: https://forums.adobe.com/docs/DOC-8652
Thanks so much Günter and Greg for your quick response! I was able to fix it!
The solution was a mix of both suggestions, but the standard resolution was the main problem.
What I did first was to incorporate the text to the image in Photoshop, so I wouldn't use any system fonts in the site. Then I created a site exclusively for that particular image at a HiDPI resolution and imported it at 2x, and only with a mobile layout. Then I used an iframe in the main site (standard resolution) pointing to the HiDPI image and that was it! Now it looks good.
Again, thanks to both of you for your help!